Feature: Build Monitor supports colour-blind mode

Closes #30
jenkinsci · Apr 5, 2014 · adf56e8 · adf56e8
1 parent e716968
commit adf56e8
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 10 deletions.
diff --git a/...rces/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/main-jobViews.jelly b/...rces/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/main-jobViews.jelly
@@ -1,4 +1,5 @@
 <ul id="job-views"
+    data-ng-class="{ 'colour-blind-mode': settings.colourBlind == 1 }"
     style="font-size: {{ settings.fontSize }}em"
     class="columns-{{ settings.numberOfColumns }}">
 

diff --git a/...rces/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/main-settings.jelly b/...rces/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/main-settings.jelly
@@ -1,6 +1,6 @@
 <nav data-ng-class="{ showSettings:toggleSettings }" data-ng-controller="controlPanel">
-    <input id="toggleSettings" type="checkbox" class="settings" data-ng-model="toggleSettings" />
-    <label for="toggleSettings" title="Configure Build Monitor Settings">Settings</label>
+    <input id="settings-toggle" type="checkbox" class="settings" data-ng-model="toggleSettings" />
+    <label for="settings-toggle" title="Configure Build Monitor Settings">Settings</label>
 
     <!-- workaround for angular-slider not working when initialised within a hidden element -->
     <ul>
@@ -12,6 +12,13 @@
             <span class="slider-label">Columns</span>
             <slider floor="1" ceiling="8" step="1" precision="0" data-ng-model="settings.numberOfColumns"></slider>
         </li>
+        <li>
+            <input data-ng-model="settings.colourBlind"
+                   data-ng-false-value="0"
+                   data-ng-true-value="1"
+                   id="settings-colour-blind" type="checkbox" />
+            <label for="settings-colour-blind" title="Colour blind-friendly colour scheme">Colour blind mode?</label>
+        </li>
         <li>
             <a class="btn"
                href="configure"

diff --git a/src/main/webapp/scripts/settings.js b/src/main/webapp/scripts/settings.js
@@ -7,6 +7,7 @@ angular.
 
             $scope.settings.fontSize        = cookieJar.get('fontSize',        1);
             $scope.settings.numberOfColumns = cookieJar.get('numberOfColumns', 2);
+            $scope.settings.colourBlind     = cookieJar.get('colourBlind',     0);
 
             angular.forEach($scope.settings, function(value, name) {
                 $scope.$watch('settings.' + name, function(currentValue) {

diff --git a/src/main/webapp/themes/industrial.css b/src/main/webapp/themes/industrial.css
@@ -100,6 +100,70 @@ h2 {
 .build-monitor .failing    { background-color:darkred; }
 .build-monitor .claimed    { background-color: #fe5e00; }
 
+
+/*
+ * Striped background patterns inspired by Lea Verou
+ * http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
+ */
+.build-monitor .colour-blind-mode .successful,
+.build-monitor .colour-blind-mode .failing,
+.build-monitor .colour-blind-mode .claimed {
+    -webkit-background-size: 50px 50px;
+    -moz-background-size:    50px 50px;
+    background-size:         50px 50px; /* Controls the size of the stripes */
+}
+
+.build-monitor .colour-blind-mode .successful { }
+
+.build-monitor .colour-blind-mode .failing {
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0,
+        color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
+        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
+        color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
+        to(transparent));
+    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+        transparent 75%, transparent);
+    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+        transparent 75%, transparent);
+    background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+        transparent 75%, transparent);
+    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+        transparent 75%, transparent);
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
+        transparent 75%, transparent);
+}
+.build-monitor .colour-blind-mode .claimed {
+    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), to(transparent)),
+        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), to(transparent)),
+        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(255, 255, 255, .2))),
+        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(255, 255, 255, .2)));
+    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent),
+        -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent),
+        -webkit-linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .2) 75%),
+        -webkit-linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .2) 75%);
+    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent),
+        -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent),
+        -moz-linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .2) 75%),
+        -moz-linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .2) 75%);
+    background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent),
+        -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent),
+        -ms-linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .2) 75%),
+        -ms-linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .2) 75%);
+    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent),
+        -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent),
+        -o-linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .2) 75%),
+        -o-linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .2) 75%);
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent),
+        linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent),
+        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .2) 75%),
+        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .2) 75%);
+}
+
 .build-monitor #job-views .build-time,
 .build-monitor #job-views .build-name {
     font-weight: bold;
@@ -425,11 +489,11 @@ h2 {
     width:100%;
 }
 .build-monitor nav li:nth-child(1),
-.build-monitor nav li:nth-child(3) {
+.build-monitor nav li:nth-child(4) {
     margin-top:2em;
 }
 .build-monitor nav li:last-child {
-    padding:1em 0 0.5em 0;
+    padding:1em 0 1em 0;
 }
 
 .build-monitor nav li .slider-label {
@@ -456,8 +520,8 @@ slider {
 /*
  * Inspired by WittySparks - (c) Sravan Kumar, WittySparks.com
  */
-.build-monitor nav input[type='checkbox']{opacity:0;position:absolute;filter:alpha(opacity=0);margin:5px 0 0 5px}
-.build-monitor nav input[type='checkbox']+label {
+.build-monitor nav input[type='checkbox']#settings-toggle{opacity:0;position:absolute;filter:alpha(opacity=0);margin:5px 0 0 5px}
+.build-monitor nav input[type='checkbox']#settings-toggle+label {
     background:url("industrial/glyphs.png") left top no-repeat;
     background-size:32px 32px;
     position:relative;
@@ -469,10 +533,14 @@ slider {
     z-index:0;
     font-weight:bold;
 }
-.build-monitor nav input[type='checkbox']+label { background-position:0 0}
-.build-monitor nav input[type='checkbox']:checked+label  { }
-.build-monitor nav input[type='checkbox']:disabled+label { }
-.build-monitor nav input[type='checkbox']:disabled:checked+label{ }
+
+.build-monitor nav input[type='checkbox']#settings-toggle+label { background-position:0 0}
+.build-monitor nav input[type='checkbox']#settings-toggle:checked+label  { }
+.build-monitor nav input[type='checkbox']#settings-toggle:disabled+label { }
+.build-monitor nav input[type='checkbox']#settings-toggle:disabled:checked+label{ }
+
+.build-monitor nav label { font-size: 1em; }
+.build-monitor nav li input[type='checkbox'] { margin-right:0.5em; }
 
 
 /*