The UI Settings sliders can handle click events now. This closes #217 …

…and required: - replacing the angular-slider with rz-slider - upgrading angular to 1.5.8 - removing prototype.js and Hudson (sic!) behavior.js so that they don't conflict with the latest angular.
jenkinsci · Aug 2, 2016 · 321cfb2 · 321cfb2
1 parent 9422cb6
commit 321cfb2
Show file tree

Hide file tree

Showing 27 changed files with 42,709 additions and 19,420 deletions.
diff --git a/...in/resources/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/index.jelly b/...in/resources/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/index.jelly
@@ -9,7 +9,7 @@
 
     <j:set var="resourcesURL" value="${resURL}/plugin/build-monitor-plugin" />
     <j:set var="jobsURL" value="${rootURL}/job" />
-    <j:set var="angularVersion" value="1.1.5" />
+    <j:set var="angularVersion" value="1.5.8" />
 
     <x:doctype name="html" />
     <html>
@@ -28,9 +28,6 @@
             <l:yui module="yahoo" />
             <l:yui module="cookie" />
 
-            <script src="${resURL}/scripts/prototype.js" type="text/javascript"/>
-            <script src="${resURL}/scripts/behavior.js" type="text/javascript"/>
-
             <st:adjunct assumes="org.kohsuke.stapler.framework.prototype.prototype"
                         includes="org.kohsuke.stapler.bind"/>
 
@@ -40,20 +37,25 @@
 
             <link rel="stylesheet" href="${resourcesURL}/styles/normalize.css"/>
             <link rel="stylesheet" href="${resourcesURL}/styles/bootstrap-combined.2.3.2.min.css"/>
-            <link rel="stylesheet" href="${resourcesURL}/styles/angular-slider.css"/>
+            <link rel="stylesheet" href="${resourcesURL}/vendor/angular-slider-5.4.0/rzslider.min.css"/>
 
             <link rel="stylesheet" href="${resourcesURL}/themes/industrial.css"/>
             <link rel="stylesheet" href="${rootURL}/build-monitor-plugin/style.css"/>
 
             <script src="${resURL}/scripts/yui/cookie/cookie-min.js"></script>
 
+            <script src="${resourcesURL}/vendor/angular-${angularVersion}/angular.min.js"></script>
+            <script src="${resourcesURL}/vendor/angular-${angularVersion}/angular-sanitize.min.js"></script>
+            <script src="${resourcesURL}/vendor/angular-${angularVersion}/angular-animate.min.js"></script>
+
             <script src="${resourcesURL}/vendor/modernizr.custom.27682.js"></script>
-            <script src="${resourcesURL}/vendor/angular-${angularVersion}.min.js"></script>
             <script src="${resourcesURL}/vendor/ng-lodash-3.10.1.min.js"></script>
             <script src="${resourcesURL}/vendor/ui-bootstrap-custom-tpls-0.4.0.js"></script>
-            <script src="${resourcesURL}/vendor/angular-slider-0.1.6.js"></script>
+
             <script src="${resourcesURL}/vendor/angular-slugify-1.0.0.js"></script>
 
+            <script src="${resourcesURL}/vendor/angular-slider-5.4.0/rzslider.min.js"></script>
+
             <script>
                 window['ga-disable-UA-61694827-4'] = ${!it.collectAnonymousUsageStatistics()};
 

diff --git a/...rces/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/main-settings.jelly b/...rces/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/main-settings.jelly
@@ -12,15 +12,15 @@
                     <p>New version of Build Monitor is&amp;nbsp;<a href="http://bit.ly/JBMReleases" title="Check out the release notes">available now</a>!</p>
                     <p>Upgrade via <a href="${h.inferHudsonURL(request)}pluginManager">Plugin Manager</a></p>
                 </li>
-                <li class="slider">
+                <li class="settings-option">
                     <span class="slider-label">Text scale</span>
-                    <slider floor="0.3" ceiling="2" step="0.1" precision="1" data-ng-model="settings.fontSize"></slider>
+                    <rzslider rz-slider-model="settings.fontSize" rz-slider-options="{ floor: 0.3, ceil: 2, step: 0.1, precision: 1 }"></rzslider>
                 </li>
-                <li>
+                <li class="settings-option">
                     <span class="slider-label">Maximum number of columns</span>
-                    <slider floor="1" ceiling="8" step="1" precision="0" data-ng-model="settings.numberOfColumns"></slider>
+                    <rzslider rz-slider-model="settings.numberOfColumns" rz-slider-options="{ floor: 1, ceil: 8, step: 1, precision: 0 }"></rzslider>
                 </li>
-                <li>
+                <li class="settings-option">
                     <input data-ng-model="settings.colourBlind"
                            data-ng-false-value="0"
                            data-ng-true-value="1"

diff --git a/build-monitor-plugin/src/main/webapp/less/module/index.less b/build-monitor-plugin/src/main/webapp/less/module/index.less
@@ -1,4 +1,5 @@
 @import "./footer";
 @import "./modal";
 @import "./progressbar";
-@import "./widget/basic";
+@import "./widget/basic";
+@import "./slider";
diff --git a/build-monitor-plugin/src/main/webapp/less/module/modal.less b/build-monitor-plugin/src/main/webapp/less/module/modal.less
@@ -1,3 +1,3 @@
 .modal {
-  font-size:0.6875em;
+  font-size:1em;
 }
diff --git a/build-monitor-plugin/src/main/webapp/less/module/slider.less b/build-monitor-plugin/src/main/webapp/less/module/slider.less
@@ -0,0 +1,19 @@
+.rzslider {
+  span.rz-bubble {
+    color: #fff;
+  }
+
+  span.rz-bubble.rz-limit {
+    color: #ccc;
+  }
+
+  span.rz-pointer {
+    background-color: #f5f5f5;
+
+    &:after           { background-color: grey; }
+
+    &:hover:after     { background-color: darkgrey; }
+
+    &.rz-active:after { background-color: black; }
+  }
+}
diff --git a/build-monitor-plugin/src/main/webapp/scripts/controllers.js b/build-monitor-plugin/src/main/webapp/scripts/controllers.js
@@ -1,7 +1,7 @@
 'use strict';
 
 angular.
-    module('buildMonitor.controllers', [ 'buildMonitor.services', 'buildMonitor.cron', 'uiSlider', 'jenkins', 'buildMonitor.stats']).
+    module('buildMonitor.controllers', [ 'buildMonitor.services', 'buildMonitor.cron', 'rzModule', 'jenkins', 'buildMonitor.stats']).
 
     controller('JobViews', ['$scope', '$rootScope', '$window', 'proxy', 'every', 'connectivityStrategist',
         function ($scope, $rootScope, $window, proxy, every, connectivityStrategist) {
@@ -32,7 +32,7 @@ angular.
             // todo: extract into a 'widget' directive; this shouldn't be a responsibility of a controller to calculate the size of the font...
             function fontSizeFor(itemsOnScreen, numberOfColumns) {
                 var baseFontSizePercentage  = 5,
-                    itemsCount    = itemsOnScreen && itemsOnScreen.size() || 1,
+                    itemsCount    = itemsOnScreen && itemsOnScreen.length || 1,
                     actualColumns = Math.min(itemsCount, numberOfColumns),
                     actualRows    = Math.ceil(itemsCount / actualColumns);
 
@@ -88,13 +88,23 @@ angular.
 
                 return function (error) {
                     switch (error.status) {
-                        case 0:   return handleLostConnection(error);
-                        case 404: return handleJenkinsRestart(error);
-                        case 500: return handleInternalJenkins(error);
-                        case 502: return handleLostConnection(error);
-                        case 503: return handleLostConnection(error);
-                        case 504: return handleMisconfiguredProxy(error);
-                        default:  return handleUnknown(error);
+                        case 0:
+                        case -1:
+                        case 502:
+                        case 503:
+                            return handleLostConnection(error);
+
+                        case 404:
+                            return handleJenkinsRestart(error);
+
+                        case 500:
+                            return handleInternalJenkins(error);
+
+                        case 504:
+                            return handleMisconfiguredProxy(error);
+
+                        default:
+                            return handleUnknown(error);
                     }
                 }
             }

diff --git a/build-monitor-plugin/src/main/webapp/scripts/settings.js b/build-monitor-plugin/src/main/webapp/scripts/settings.js
@@ -1,5 +1,5 @@
 angular.
-    module('buildMonitor.settings', [ 'buildMonitor.services', 'uiSlider']).
+    module('buildMonitor.settings', [ 'buildMonitor.services', 'rzModule']).
 
     controller('controlPanel', ['$scope', 'cookieJar', 'townCrier',
         function ($scope, cookieJar, townCrier) {

diff --git a/build-monitor-plugin/src/main/webapp/scripts/templates.js b/build-monitor-plugin/src/main/webapp/scripts/templates.js
@@ -31,7 +31,7 @@ angular.module("buildMonitor.templates", []).run(["$templateCache", function($te
         "	<h1>Sorry to bother you, but Jenkins is having a problem :-(</h1>\n" +
         "</div>\n" +
         "<div class=\"modal-body\">\n" +
-        "   <p>Instead of an expected response I received the following, which usually means an internal Jenkins error:</p>" +
+        "   <p>Instead of the expected response, I received the following, which usually means an internal Jenkins error:</p>" +
         "	<textarea rows='5'>{{ error }}</textarea>\n" +
         "   <div ng-show='{{ stackTrace.length }}'>\n" +
         "       <p>This translates to the following stack trace:</p>\n" +

diff --git a/build-monitor-plugin/src/main/webapp/themes/industrial.css b/build-monitor-plugin/src/main/webapp/themes/industrial.css
@@ -294,7 +294,7 @@ h2 {
 .build-monitor nav label {
     width:100%;
 }
-.build-monitor nav li.slider {
+.build-monitor nav li.settings-option {
     margin-top:2em;
 }
 .build-monitor nav li.buttons {
@@ -342,13 +342,6 @@ h2 {
     border-radius: 0;
 }
 
-/*
- *   Angular slider
- */
-slider {
-    width: 180px;
-}
-
 /*
  * Inspired by WittySparks - (c) Sravan Kumar, WittySparks.com
  */