highlight selected item

www/md_base/src/app/builds/builder/builder.route.coffee

@@ -10,6 +10,6 @@ class State extends Config
             controllerAs: 'builder'
             templateUrl: "views/#{name}.html"
             name: name
-            url: "/builds/builder/:builder_id/"
+            url: "/builder/:builderid"
             data:
                 title: 'Builds / Builder'

www/md_base/src/app/builds/builds.controller.coffee

@@ -1,6 +1,10 @@
 class Builds extends Controller
     builders: []
-    constructor: (buildbotService) ->
+
+    isHighlighted: (name, param) ->
+        return @$state.is(name, param)
+
+    constructor: (@$state, buildbotService) ->
         buildbotService.all('builders').getList().then (builders) =>
             @builders = builders
 

www/md_base/src/app/builds/builds.less

@@ -16,25 +16,24 @@
     background: #fff;
     overflow-y: auto;
 
-    .md-button.menu-item {
-      display: block;
-      padding: 10px;
-      margin: 0;
-      color: #333;
-      cursor: pointer;
-      border-radius: 0;
+    .menu-item.highlighted {
+      background: #eee;
     }
 
     .grid-menu {
       overflow: hidden;
 
       .menu-item {
+        color: #333;
         float: left;
         width: 50%;
         height: 80px;
         text-align: center;
         border-left: 1px solid #eee;
         border-bottom: 1px solid #eee;
+        padding: 10px;
+        margin: 0;
+        border-radius: 0;
 
         span.title {
           line-height: 24px;
@@ -45,7 +44,7 @@
     }
 
     .builders-menu {
-      margin-top: 80px;
+      margin-top: 60px;
 
       .menu-title {
         font-size: 14px;
@@ -72,9 +71,10 @@
       }
 
       .builder-title {
+        color: rgb(103, 58, 183);
         display: block;
         font-size: 20px;
-        line-height: 24px;
+        line-height: 26px;
         text-decoration: none;
         white-space: nowrap;
         overflow: hidden;
@@ -97,12 +97,20 @@
           display: inline-block;
           padding: 2px 5px;
           margin-right: 2px;
-          border: 1px solid #ddd;
+          border: 1px solid #ccc;
           border-radius: 3px;
-          color: #999;
-          background: #eee;
+          color: #666;
+          background: #ddd;
         }
       }
     }
   }
+
+  .sub-content {
+    .placeholder {
+      text-align: center;
+      color: #999;
+      margin-top: 50px;
+    }
+  }
 }

www/md_base/src/app/builds/builds.tpl.jade

@@ -1,16 +1,28 @@
 div.menu
   div.grid-menu
-    md-button.menu-item.no-select(ui-sref="builds.masters")
+    md-button.menu-item.no-select(
+      ui-sref="builds.masters",
+      ng-class="{highlighted: builds.isHighlighted('builds.masters')}"
+    )
       md-icon(md-svg-icon="wand")
       span.title Masters
       div.md-ripple-container
-    md-button.menu-item.no-select(ui-sref="builds.slaves")
+    md-button.menu-item.no-select(
+      ui-sref="builds.slaves",
+      ng-class="{highlighted: builds.isHighlighted('builds.slaves')}"
+    )
       md-icon(md-svg-icon="hammer")
       span.title Slaves
-    md-button.menu-item.no-select(ui-sref="builds.schedulers")
+    md-button.menu-item.no-select(
+      ui-sref="builds.schedulers",
+      ng-class="{highlighted: builds.isHighlighted('builds.schedulers')}"
+    )
       md-icon(md-svg-icon="clock")
       span.title Schedulers
-    md-button.menu-item.no-select(ui-sref="builds.changes")
+    md-button.menu-item.no-select(
+      ui-sref="builds.changes",
+      ng-class="{highlighted: builds.isHighlighted('builds.changes')}"
+    )
       md-icon(md-svg-icon="changes")
       span.title Latest changes
 
@@ -22,14 +34,14 @@ div.menu
       div.menu-item.no-select(
         layout="row",
         ng-repeat="builder in builds.builders",
+        ng-class="{highlighted: builds.isHighlighted('builds.builder', {builderid: builder.builderid})}"
       )
         div(flex)
-          a.builder-title(href="", md-theme="default") {{ builder.name }}
+          a.builder-title(ui-sref="builds.builder({builderid:{{builder.builderid}}})") {{ builder.name }}
           div.tags
             span.tag(ng-repeat="tag in builder.tags") {{tag}}
         div.builder-id \#{{ builder.builderid }}
 
-
-
-md-content(flex, ui-view="")
-  | content
+md-content.sub-content(flex, ui-view="")
+  div.placeholder
+    | Choose something to view at the panel left.

www/md_base/src/app/builds/changes/changes.route.coffee

@@ -10,6 +10,6 @@ class State extends Config
             controllerAs: 'changes'
             templateUrl: "views/#{name}.html"
             name: name
-            url: "/builds/changes/"
+            url: "/changes"
             data:
                 title: 'Builds / Latest Changes'

www/md_base/src/app/builds/masters/masters.route.coffee

@@ -10,6 +10,6 @@ class State extends Config
             controllerAs: 'masters'
             templateUrl: "views/#{name}.html"
             name: name
-            url: "/builds/masters/"
+            url: "/masters"
             data:
                 title: 'Builds / Masters'

www/md_base/src/app/builds/schedulers/schedulers.route.coffee

@@ -10,6 +10,6 @@ class State extends Config
             controllerAs: name
             templateUrl: "views/#{name}.html"
             name: name
-            url: "/builds/schedulers/"
+            url: "/schedulers"
             data:
                 title: 'Builds / Schedulers'

www/md_base/src/app/builds/slaves/slaves.route.coffee

@@ -10,6 +10,6 @@ class State extends Config
             controllerAs: 'slaves'
             templateUrl: "views/#{name}.html"
             name: name
-            url: "/builds/slaves/"
+            url: "/slaves"
             data:
                 title: 'Builds / Slaves'