- basic.less - Some additional css style makes the badges look pretty

- widgets.jelly - older versions of IE tend to ignore Angular.js tokens inside the `style` tag; replaced with data-ng-style which is cross-browser compatible Closes #278
jenkinsci · Jan 7, 2017 · 85a8e10 · 85a8e10
1 parent 85584e2
commit 85a8e10
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/.../net/serenitybdd/screenplay/jenkins/tasks/configuration/build_steps/GroovyScriptThat.java b/.../net/serenitybdd/screenplay/jenkins/tasks/configuration/build_steps/GroovyScriptThat.java
@@ -1,5 +1,6 @@
 package net.serenitybdd.screenplay.jenkins.tasks.configuration.build_steps;
 
 public class GroovyScriptThat {
-    public static final GroovyScript Adds_A_Badge = GroovyScript.that("Adds a badge").definedAs("manager.addShortText('Coverage', 'black', 'repeating-linear-gradient(45deg, yellow, yellow 10px, Orange 10px, Orange 20px)', '0px', 'white')");
+    public static final GroovyScript Adds_A_Badge = GroovyScript.that("Adds a badge")
+            .definedAs("manager.addShortText('Coverage', 'black', 'repeating-linear-gradient(45deg, yellow, yellow 10px, Orange 10px, Orange 20px)', '0px', 'white')");
 }
diff --git a/build-monitor-acceptance/src/test/java/features/ShouldDisplayBadges.java b/build-monitor-acceptance/src/test/java/features/ShouldDisplayBadges.java
@@ -44,7 +44,7 @@ public void actorCanBrowseTheWeb() {
     }
 
     @Test
-    public void display_build_badges() throws Exception {
+    public void displaying_build_badges() throws Exception {
         givenThat(paul).wasAbleTo(
                 Navigate.to(jenkins.url()),
                 HaveAProjectCreated.called("My App").andConfiguredTo(

diff --git a/.../resources/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/widgets.jelly b/.../resources/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/widgets.jelly
@@ -35,8 +35,12 @@
                         <li data-ng-repeat="name in project.problems">{{ name }}</li>
                     </ul>
                 </li>
-                <li data-ng-show="settings.showBadges == 1 &amp;&amp; !!project.badges" class="build-badge">
-                    <span data-ng-repeat="badge in project.badges track by $index" style="padding: 1px; border:{{ badge.border }} solid {{ badge.borderColor }}; margin: 0px; background: {{ badge.background }}; color: {{ badge.color }};">{{ badge.text }}</span>
+                <li data-ng-show="settings.showBadges == 1 &amp;&amp; !!project.badges" class="badges">
+                    <span class="badge"
+                          data-ng-repeat="badge in project.badges track by $index"
+                          data-ng-style="{ 'border': badge.border + ' solid ' + badge.borderColor, 'background': badge.background, 'color': badge.color }">
+                        {{ badge.text }}
+                    </span>
                 </li>
             </ul>
         </header>

diff --git a/build-monitor-plugin/src/main/webapp/less/module/widget/basic.less b/build-monitor-plugin/src/main/webapp/less/module/widget/basic.less
@@ -77,6 +77,15 @@
           text-align:      center;
 
           li { margin: 0 0 0.25em 0; }
+
+          li.badges .badge {
+            border: 1px solid black;
+            background: lightgreen;
+            color: #000;
+            display: inline-block;
+            padding: 1px 5px;
+            border-radius: 3px;
+          }
         }
 
         .build-failure-analyzer-plugin ul.identified-failures { list-style-type: none; display: inline-block; margin: 0; padding: 0; }