show select menu in narrow screen

buildbot · Jun 25, 2015 · d2aab35 · d2aab35
1 parent 360306a
commit d2aab35
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/www/md_base/src/app/builds/builds.controller.coffee b/www/md_base/src/app/builds/builds.controller.coffee
@@ -1,11 +1,24 @@
 class Builds extends Controller
     builders: []
-    builder_filter: ''
+    builderFilter: ''
+
+    selectOptions: [
+        {value:'builds.masters', title: 'MASTERS'}
+        {value:'builds.slaves', title: 'SLAVES'}
+        {value:'builds.schedulers', title: 'SCHEDULERS'}
+        {value:'builds.changes', title: 'LATEST CHANGES'}
+    ]
+    selectedOption: ''
+    builderOptionValue: 'builds.builder'
 
     isHighlighted: (name, param) ->
         return @$state.is(name, param)
 
-    constructor: ($scope, @$state, dataService) ->
+    showMenu: ->
+        return @$mdMedia('gt-sm')
+
+    constructor: ($scope, dataService, @$state, @$mdMedia) ->
         opened = dataService.open()
         opened.closeOnDestroy($scope)
         @builders = opened.getBuilders().getArray()
+        @selectedOption = @$state.$current.name
diff --git a/www/md_base/src/app/builds/builds.less b/www/md_base/src/app/builds/builds.less
@@ -1,13 +1,13 @@
 .builds {
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flexbox;
   display: flex;
 
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+
   padding: 0px !important;
 
   .menu {
@@ -116,11 +116,30 @@
     }
   }
 
+  .select-menu {
+    display: block;
+    background: white;
+    padding: 0;
+    text-align: center;
+
+    md-select-label {
+      padding: 10px 0 !important;
+    }
+  }
+
   .sub-content {
     .placeholder {
       text-align: center;
       color: #999;
       margin-top: 50px;
     }
   }
+
+  @media (max-width: 600px) {
+
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+
+  }
 }
diff --git a/www/md_base/src/app/builds/builds.tpl.jade b/www/md_base/src/app/builds/builds.tpl.jade
@@ -1,4 +1,4 @@
-div.menu
+div.menu(ng-if="builds.showMenu()")
   div.grid-menu
     md-button.menu-item.no-select(
       ui-sref="builds.masters",
@@ -35,7 +35,7 @@ div.menu
         | No builders has been configured yet.
       div.menu-item.no-select(
         layout="row",
-        ng-repeat="builder in builds.builders|filter:builds.builder_filter",
+        ng-repeat="builder in builds.builders|filter:builds.builderFilter",
         ng-class="{highlighted: builds.isHighlighted('builds.builder', {builderid: builder.builderid})}"
       )
         div(flex)
@@ -44,6 +44,9 @@ div.menu
             span.tag(ng-repeat="tag in builder.tags") {{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-content.sub-content(flex, ui-view="")
   div.placeholder
-    | Choose something to view at the panel left.
+    | Choose something to view