sidenav directive and highlighting

buildbot · Apr 12, 2015 · 5ae014c · 5ae014c
1 parent 483fbc2
commit 5ae014c
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 29 deletions.
diff --git a/www/md_base/src/app/app.controller.coffee b/www/md_base/src/app/app.controller.coffee
@@ -1,5 +1,27 @@
 class App extends Controller
-    title: ''
+    current: ''
+    navitems: [
+        {
+            name: 'home'
+            title: 'home'
+            icon: 'home'
+        },
+        {
+            name: 'builds'
+            title: 'builds'
+            icon: 'gear'
+        },
+        {
+            name: 'settings'
+            title: 'settings'
+            icon: 'toggle'
+        }
+        {
+            name: 'about'
+            title: 'about'
+            icon: 'info'
+        }
+    ]
     constructor: ($scope, $rootScope)->
         $rootScope.$on '$stateChangeSuccess', (event, toState) =>
-            @title = toState.name
+            @current = toState.name
diff --git a/www/md_base/src/app/app.module.coffee b/www/md_base/src/app/app.module.coffee
@@ -6,7 +6,7 @@ angular.module 'app', [
 ]
     .config ($mdThemingProvider) ->
         $mdThemingProvider.theme('default')
-            .primaryPalette('blue')
+            .primaryPalette('deep-purple')
             .warnPalette('orange')
 
     .config ($mdIconProvider) ->

diff --git a/www/md_base/src/app/builds/builds.tpl.jade b/www/md_base/src/app/builds/builds.tpl.jade
@@ -1 +1 @@
-h1 Build
+h1 Builds
diff --git a/www/md_base/src/app/index.jade b/www/md_base/src/app/index.jade
@@ -6,37 +6,19 @@ html(ng-app="app", ng-controller="appController as app")
     meta(name='viewport', content='initial-scale=1, minimum-scale=1, user-scalable=no, maximum-scale=1, width=device-width')
 
     | {% raw %}
-    title(ng-bind-template="Buildbot | {{ app.title }}")
+    title(ng-bind-template="Buildbot | {{ app.current }}")
     | {% endraw %}
 
     link(rel='stylesheet', href='styles.css')
+    link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic')
 
     body(ng-cloak, flex, layout="row")
-      md-sidenav.md-whiteframe-z1(
-        md-component-id="left",
-        md-is-locked-open="$mdMedia('gt-md')"
-      )
-        md-toolbar(layout="row")
-          md-icon.logo(md-svg-icon="navicon")
-        md-content.nav-item-container(flex)
-          md-button.nav-item(ui-sref="home")
-            md-icon(md-svg-icon="home")
-            span.nav-item-title home
-          md-button.nav-item(ui-sref="builds")
-            md-icon(md-svg-icon="gear")
-            span.nav-item-title builds
-          md-button.nav-item(ui-sref="settings")
-            md-icon(md-svg-icon="toggle")
-            span.nav-item-title settings
-          md-button.nav-item(ui-sref="about")
-            md-icon(md-svg-icon="info")
-            span.nav-item-title about
-
+      sidenav(items="app.navitems", current="app.current")
       div(layout="column", role="main", flex)
         md-toolbar.topbar
           div.md-toolbar-tools
-            | Buildbot 
-            span.title(ng-bind="app.title")
+            b Buildbot
+            span.title(ng-bind="app.current")
         md-content.md-padding(flex, ui-view)
           h1 Hello buildbot!
 

diff --git a/www/md_base/src/app/sidenav/sidenav.directive.coffee b/www/md_base/src/app/sidenav/sidenav.directive.coffee
@@ -0,0 +1,27 @@
+class Sidenav extends Directive
+
+    constructor: ->
+        return {
+            require: 'mdSidenav'
+            restrict: 'E'
+            replace: true
+            templateUrl: 'views/sidenav.html'
+            controller: '_SidenavController'
+            controllerAs: 'sidenav'
+        }
+
+
+class _Sidenav extends Controller
+
+    items: []
+    current: ''
+
+    constructor: (@$scope, @$attrs) ->
+        @$scope.$watch $attrs.items, (newItems) =>
+            @items = newItems
+
+        @$scope.$watch $attrs.current, (newCurrent) =>
+            @current = newCurrent
+
+    isHighlighted: (name) ->
+        return name == @current
diff --git a/www/md_base/src/app/sidenav/sidenav.tpl.jade b/www/md_base/src/app/sidenav/sidenav.tpl.jade
@@ -0,0 +1,14 @@
+md-sidenav.md-whiteframe-z1(
+  md-component-id="left",
+  md-is-locked-open="$mdMedia('gt-md')"
+)
+    md-toolbar(layout="row")
+      md-icon.logo(md-svg-icon="navicon")
+    md-content.nav-item-container(flex)
+      md-button.nav-item(
+        ui-sref="{{ item.name }}",
+        ng-repeat="item in sidenav.items",
+        ng-class="{highlighted: sidenav.isHighlighted(item.name)}",
+      )
+        md-icon(md-svg-icon="{{ item.icon }}")
+        span.nav-item-title {{ item.title }}
diff --git a/www/md_base/src/styles/main-content.less b/www/md_base/src/styles/main-content.less
@@ -1,5 +1,5 @@
 .topbar.md-default-theme {
-  color: rgb(33,150,243);
+  color: rgb(103, 58, 183);
   background: white;
 }
 

diff --git a/www/md_base/src/styles/sidenav.less b/www/md_base/src/styles/sidenav.less
@@ -9,7 +9,7 @@ md-sidenav {
   }
 
   .logo {
-    width: 80px;
+    width: 60px;
     height: 64px;
     padding: 10px;
   }
@@ -32,7 +32,21 @@ md-sidenav {
       font-size: 12px;
       color: #aaa;
       margin-top: 5px;
+      text-transform: capitalize;
+    }
+
+    &.highlighted {
+      background: #121212;
+      svg {
+        fill: #90CAF9;
+      }
+
+      .nav-item-title {
+        color: #fff;
+        font-weight: bold;
+      }
     }
+
   }
 }