ZD523046 - design for unit test ribbon

Author: Timon Riemslagh

OrbitOne.BuildScreen/OrbitOne.BuildScreen.RestApiService/VsoRestService.cs

@@ -73,7 +73,7 @@ private IEnumerable<BuildInfoDto> GetBuildsForPollingSince(string teamProjectNam
                         FinishBuildDateTime = build.FinishTime,
                         RequestedByName = build.RequestedFor.DisplayName,
                         RequestedByPictureUrl = build.RequestedFor.ImageUrl + "&size=2",
-                        TotalNumberOfTests = 0,
+                        TotalNumberOfTests = 12,
                         PassedNumberOfTests = 0,
                         BuildReportUrl = _helperClass.ConvertReportUrl(teamProjectName, build.Uri, true),
                         Id = "VSO" + teamProjectId + build.Definition.Id

OrbitOne.BuildScreen/OrbitOne.BuildScreen/Content/Site.css

@@ -500,3 +500,49 @@ body {
     .error-container.ng-hide {
         top: -50px;
     }
+
+/*----------- CSS RIBBON -----------*/
+
+.ribbon {
+  position: absolute;
+  right: -5px; top: -5px;
+  z-index: 1;
+  overflow: hidden;
+  width: 75px; height: 75px;
+  text-align: right;
+}
+.ribbon span {
+  font-size: 10px;
+  font-weight: bold;
+  color: #FFF;
+  text-transform: uppercase;
+  text-align: center;
+  line-height: 20px;
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  width: 100px;
+  display: block;
+  background: #79A70A;
+  background: linear-gradient(#2989D8 0%, #2989D8 100%);
+  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
+  position: absolute;
+  top: 19px; right: -21px;
+}
+.ribbon span::before {
+  content: "";
+  position: absolute; left: 0px; top: 100%;
+  z-index: -1;
+  border-left: 3px solid #2989D8;
+  border-right: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  border-top: 3px solid #2989D8;
+}
+.ribbon span::after {
+  content: "";
+  position: absolute; right: 0px; top: 100%;
+  z-index: -1;
+  border-left: 3px solid transparent;
+  border-right: 3px solid #2989D8;
+  border-bottom: 3px solid transparent;
+  border-top: 3px solid #2989D8;
+}

OrbitOne.BuildScreen/OrbitOne.BuildScreen/Scripts/App/Templates/BuildDirectiveTemplate.html

@@ -1,4 +1,5 @@
-<div class="item" ng-class="[build.Status, isStatusImportant(build.Status) ? 'wrapper-large' : 'wrapper']">
+<div class="item box" ng-class="[build.Status, isStatusImportant(build.Status) ? 'wrapper-large' : 'wrapper']">
+    <div ng-if="build.TotalNumberOfTests > 0" class="ribbon"><span>{{build.PassedNumberOfTests}}/{{build.TotalNumberOfTests}}</span></div>
 
     <span id="dateFilter" data-date="{{build.StartBuildDateTime}}" /> <!--This is because of Isotope/Angular compatibility problem-->
 
@@ -25,21 +26,21 @@
                 <div ng-switch-when="failed" class="circle">
                     <div class="builderror-label">
                         <p>
-                            Build<br />failed
+                            Build<br/>failed
                         </p>
                     </div>
                 </div>
                 <div ng-switch-when="stopped" class="circle">
                     <div class="builderror-label">
                         <p>
-                            Build<br />stopped
+                            Build<br/>stopped
                         </p>
                     </div>
                 </div>
                 <div ng-switch-when="notStarted" class="circle">
                     <div class="builderror-label">
                         <p>
-                            Not<br />started
+                            Not<br/>started
                         </p>
                     </div>
                 </div>
@@ -52,7 +53,7 @@
             </a>
         </div>
         <div class="avatar" ng-if="isStatusImportant(build.Status)">
-            <img no-avatar ng-src="{{build.RequestedByPictureUrl}}" alt="avatar" />
+            <img no-avatar ng-src="{{build.RequestedByPictureUrl}}" alt="avatar"/>
         </div>
     </div>
 </div>