refactor menu items, use dropdown menu instead of select

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

@@ -2,23 +2,29 @@ class Builds extends Controller
     builders: []
     builderFilter: ''
 
-    selectOptions: [
-        {value:'builds.masters', title: 'MASTERS'}
-        {value:'builds.slaves', title: 'SLAVES'}
-        {value:'builds.schedulers', title: 'SCHEDULERS'}
-        {value:'builds.changes', title: 'LATEST CHANGES'}
+    menuItems: [
+        {value:'builds.masters', title: 'MASTERS', icon:'wand'}
+        {value:'builds.slaves', title: 'SLAVES', icon:'hammer'}
+        {value:'builds.schedulers', title: 'SCHEDULERS', icon:'clock'}
+        {value:'builds.changes', title: 'LATEST CHANGES', icon:'changes'}
     ]
-    selectedOption: ''
-    builderOptionValue: 'builds.builder'
 
     isHighlighted: (name, param) ->
         return @$state.is(name, param)
 
-    showMenu: ->
+    showSideMenu: ->
         return @$mdMedia('gt-sm')
 
+    optValue: (builder) ->
+        return "builds.builder({builderid:#{builder.builderid}})"
+
+    gotoMenuItem: (name) ->
+        @$state.go(name)
+
+    gotoBuilder: (builder) ->
+        @$state.go('builds.builder', builderid: builder.builderid)
+
     constructor: ($scope, dataService, @$state, @$mdMedia) ->
         opened = dataService.open()
         opened.closeOnDestroy($scope)
         @builders = opened.getBuilders().getArray()
-        @selectedOption = @$state.$current.name

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

@@ -10,6 +10,10 @@
 
   padding: 0px !important;
 
+  a {
+    cursor: pointer;
+  }
+
   .menu {
     width: 260px;
     border-right: 1px solid #dfdfef;
@@ -81,6 +85,7 @@
       }
 
       .builder-title {
+        outline: none;
         color: rgb(103, 58, 183);
         display: block;
         font-size: 20px;
@@ -111,22 +116,12 @@
           border-radius: 3px;
           color: #666;
           background: #ddd;
+          outline: none;
         }
       }
     }
   }
 
-  .select-menu {
-    display: block;
-    background: white;
-    padding: 0;
-    text-align: center;
-
-    md-select-label {
-      padding: 10px 0 !important;
-    }
-  }
-
   .sub-content {
     .placeholder {
       text-align: center;
@@ -135,6 +130,17 @@
     }
   }
 
+  .drop-menu {
+    background: white;
+    text-align: center;
+    padding: 5px;
+
+    button {
+      margin: 0;
+      width: 100%;
+    }
+  }
+
   @media (max-width: 600px) {
 
     -webkit-flex-direction: column;
@@ -143,3 +149,22 @@
 
   }
 }
+
+.drop-menu-builders {
+  max-height: 400px;
+  overflow-y: auto;
+
+  .title {
+    font-size: 12px;
+    font-weight: bold;
+    padding: 5px;
+    color: #999;
+    text-align: center;
+  }
+  .no-builder {
+    text-align: center;
+    font-size: 12px;
+    color: #aaa;
+    padding: 10px;
+  }
+}

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

@@ -1,35 +1,17 @@
-div.menu(ng-if="builds.showMenu()")
+div.menu(ng-if="builds.showSideMenu()")
   div.grid-menu
     md-button.menu-item.no-select(
-      ui-sref="builds.masters",
-      ng-class="{highlighted: builds.isHighlighted('builds.masters')}"
+      ng-click="builds.gotoMenuItem(item.value)",
+      ng-class="{highlighted: builds.isHighlighted(item.value)}",
+      ng-repeat="item in builds.menuItems"
     )
-      md-icon(md-svg-icon="wand")
-      span.title Masters
-      div.md-ripple-container
-    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",
-      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",
-      ng-class="{highlighted: builds.isHighlighted('builds.changes')}"
-    )
-      md-icon(md-svg-icon="changes")
-      span.title Latest changes
+      md-icon(md-svg-icon="{{ item.icon }}")
+      span.title {{ item.title }}
 
   div.builders-menu
     div.menu-title BUILDERS
     div.search-input
-      input(type="text", placeholder="Filter builders", ng-model="builds.builder_filter")
+      input(type="text", placeholder="Filter builders", ng-model="builds.builderFilter")
     div.builders
       div.no-builder(ng-if="builds.builders.length == 0")
         | No builders has been configured yet.
@@ -39,13 +21,32 @@ div.menu(ng-if="builds.showMenu()")
         ng-class="{highlighted: builds.isHighlighted('builds.builder', {builderid: builder.builderid})}"
       )
         div(flex)
-          a.builder-title(ui-sref="builds.builder({builderid:{{builder.builderid}}})") {{ builder.name }}
+          a.builder-title(ng-click="builds.gotoBuilder(builder)") {{ builder.name }}
           div.tags
-            span.tag(ng-repeat="tag in builder.tags") {{tag}}
+            a.tag(ng-repeat="tag in builder.tags", ng-click="builds.builderFilter = tag") {{tag}}
         div.builder-id \#{{ builder.builderid }}
 
-md-select.select-menu(ng-model="builds.selectedOption", placeholder="Choose something to view", ng-if="!builds.showMenu()")
-  md-option(ng-value="opt.value", ng-repeat="opt in builds.selectOptions") {{ opt.title }}
+md-menu.drop-menu(ng-if="!builds.showSideMenu()")
+  md-button(ng-click="$mdOpenMenu()") navigate to
+  md-menu-content(width="6")
+    md-menu-item(
+      ng-repeat="item in builds.menuItems"
+    )
+      md-button(ng-click="builds.gotoMenuItem(item.value)")
+        md-icon(md-svg-icon="{{ item.icon }}")
+        | {{ item.title }}
+
+    md-menu-divider
+    div.drop-menu-builders
+      div.title BUILDERS
+      div.no-builder(ng-if="builds.builders.length == 0")
+        | No builders has been configured yet.
+
+      md-menu-item(
+        ng-repeat="builder in builds.builders"
+      )
+        md-button(ng-click="builds.gotoBuilder(builder)") {{ builder.name }}
+
 
 md-content.sub-content(flex, ui-view="")
   div.placeholder