Config nav is now looking better than ever ;) Introduced icons and cl…

…eaned up the CSS.

Background image is no longer set in the main.jelly template, but rather in a theme-specific stylesheet.

src/main/resources/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/main-config.jelly

@@ -1,14 +1,7 @@
-<div class="config">
-    <h2>Build Monitor</h2>
+<nav>
     <ul>
-        <li>
-            <a href="configure">Configure View</a>
-        </li>
-        <li>
-            <a href="delete">Delete View</a>
-        </li>
-        <li>
-            <a href="../../">Jenkins Home</a>
-        </li>
+        <!--<li><a class="icon font-decrease" href="#" title="Decrease font size">decrease font size</a></li>-->
+        <!--<li><a class="icon font-increase" href="#" title="Increase font size">increase font size</a></li>-->
+        <li><a class="icon settings" href="configure" title="Plugin settings">settings</a></li>
     </ul>
-</div>
+</nav>

src/main/resources/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/main.jelly

@@ -10,19 +10,15 @@
 
         <l:header>
             <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700"/>
-            <link rel="stylesheet" href="${resourcesURL}/css/normalize.css"/>
-            <link rel="stylesheet" href="${resourcesURL}/css/bootstrap-combined.2.3.2.min.css"/>
-            <link rel="stylesheet" href="${resourcesURL}/css/industrial.css"/>
-            <style type="text/css">
-                .dashboard { background: url('${resourcesURL}/images/background.png'); }
-                .config { background: url('${imagesURL}/16x16/help.png') top right no-repeat #73bfff; }
-            </style>
+            <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}/themes/industrial.css"/>
 
             <script src="//ajax.googleapis.com/ajax/libs/angularjs/${angularVersion}/angular.min.js"></script>
             <script>window.angular || document.write('\x3Cscript src="${resourcesURL}/libs/angular-${angularVersion}.min.js">\x3C/script>')</script>
             <script src="${resourcesURL}/libs/ui-bootstrap-custom-tpls-0.4.0.js"></script>
 
-
             <script>
                 var buildMonitor = angular.
                     module('buildMonitor', ['ui.bootstrap.dialog', 'template/dialog/message.html']).
@@ -98,7 +94,7 @@
 
                 <st:include page="main-config.jelly"/>
 
-                <ul id="job-views" data-ng-controller="JobViewsController" ng-init="updateJobs()">
+                <ul id="job-views" data-ng-controller="JobViewsController" data-ng-class="font_size">
                     <li ng-repeat="job in jobs" class="{{job.status}}">
                         <div class="progress" style="width: {{job.progress}}%">
                             <span>{{job.progress}}%</span>

src/main/webapp/css/industrial.css → src/main/webapp/themes/industrial.css

@@ -1,3 +1,13 @@
+/*
+ *   Hide Jenkins UI
+ */
+
+#header, #side-panel, #view-message { display: none; }
+
+/*
+ *   Colours & Typography
+ */
+
 html{color:#fff;font-family:'Open sans',sans-serif;font-size:16px;line-height:1.4;}
 h1,h2,h3,h4,h5,h6 {
     text-align:center;
@@ -10,12 +20,6 @@ header>h1 {
     text-shadow: 2px 2px rgba(0,0,0,0.5);
 }
 
-#header, #side-panel, #view-message { display: none; }
-
-/*
- *   Colours & Typography
- */
-
 .build-monitor a,
 .build-monitor a:visited {
     color:white;
@@ -224,22 +228,67 @@ header>h1 {
     font-size:2em;
 }
 
+/*
+ *   Images and icons
+ */
+.dashboard { background: url('industrial/background.png'); }
+
+.icon {
+    display:inline-block;
+    width:16px; height:16px;
+    *margin-right:.3em;
+    line-height:16px;
+    vertical-align:text-top;
+    background-image:url("industrial/glyphs.png");
+    background-position:0px 0px;
+    background-repeat:no-repeat;
+    margin-top:1px;
+    background-size:48px 16px; /* half of the size so that it looks descent on Retina */
+    text-indent: -9999px;
+}
+.icon.settings { background-position:0px 0px;}
+.icon.font-decrease { background-position:-16px 0px;}
+.icon.font-increase { background-position:-32px 0px;}
+
 
 /*
- *   Config box
+ *   Config nav
  */
 
-.config {
+.build-monitor nav {
     position: absolute; right:1%; top:1%;
     z-index:  999;
     margin:   0;     padding: 0;
-    width:    15px;  height:  16px;
-    overflow: hidden;
-    border-radius: 8px;
+    background: rgba(100, 100, 100, 0.3);
+    border-radius: 5px;
+    opacity: 0.6;
+}
+.build-monitor nav, .build-monitor nav .icon {
+    -webkit-transition: all 0.25s;
+    transition: all 0.25s;
 }
 
-.config:hover {
-    width:    auto; height: auto;
-    padding:  10px;
-    overflow: visible;
+.build-monitor nav:hover {
+    background: rgba(100, 100, 100, 0.75);
+    opacity: 1;
+}
+.build-monitor nav:hover .icon {
+    background-size: 96px 32px;
+    width:32px; height:32px;
+    line-height:32px;
+}
+.build-monitor nav:hover .icon.settings { background-position:0px 0px;}
+.build-monitor nav:hover .icon.font-decrease { background-position:-32px 0px;}
+.build-monitor nav:hover .icon.font-increase { background-position:-64px 0px;}
+
+.build-monitor nav ul {
+    list-style-type: none;
+    padding:0;
+}
+.build-monitor nav li {
+    display:inline-block;
+    margin:0 0.5em;
+}
+.build-monitor nav li:last-child {
+    margin:0 1em 0 1.5em;
 }