Added admin navigation collapse

spira · Sep 23, 2015 · 507057f · 507057f
1 parent d87f298
commit 507057f
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 54 deletions.
diff --git a/app/bower.json b/app/bower.json
@@ -21,10 +21,10 @@
         "angular-highlightjs": "~0.4.1",
         "angular-http-progress": "~0.1.3",
         "angular-i18n": "~1.4",
-        "angular-jwt-auth": "~3.4.1",
+        "angular-jwt-auth": "~3.4",
         "angular-material": "~0.11",
         "angular-messages": "~1.4",
-        "angular-rest-adapter": "~1.3.0",
+        "angular-rest-adapter": "~1.3",
         "angular-sanitize": "~1.4",
         "angular-ui-router": "~0.2.15",
         "angular-ui-utils": "~0.2.3",

diff --git a/app/src/app/admin/media/media.ts b/app/src/app/admin/media/media.ts
@@ -37,7 +37,7 @@ namespace app.admin.media {
                 },
                 data: {
                     title: "Media",
-                    icon: 'description',
+                    icon: 'image',
                     navigation: true,
                     navigationGroup: 'cms',
                     sortAfter: app.admin.articles.namespace,

diff --git a/app/src/app/admin/navigation/navigation.less b/app/src/app/admin/navigation/navigation.less
@@ -0,0 +1,26 @@
+
+@adminPrimary: rgb(96,125,139);
+
+div#admin-sidenav {
+    &.collapsed {
+        width: 75px;
+    }
+
+    md-list-item.selected > button {
+        background: @adminPrimary;
+    }
+
+    md-list-item.child-selected > button {
+        background: @adminPrimary;
+    }
+
+}
+
+md-sidenav,
+md-sidenav.md-locked-open,
+md-sidenav.md-closed.md-locked-open-add-active {
+    min-width: 0 !important;
+    width: auto !important;
+    max-width: none !important;
+}
+
diff --git a/app/src/app/admin/navigation/navigation.tpl.html b/app/src/app/admin/navigation/navigation.tpl.html
@@ -1,42 +1,54 @@
-<md-toolbar class="md-theme-indigo">
-    <h1 class="md-toolbar-tools">CMS</h1>
-</md-toolbar>
-
-<md-list>
-    <md-list-item ng-click="AppController.goToUserProfile($event)">
-        <img ng-src="{{AdminNavigationController.ngJwtAuthService.user.avatarImgUrl}}" alt="{{AdminNavigationController.ngJwtAuthService.user.fullName()}}" class="md-avatar"/>
-        <p>{{ AdminNavigationController.ngJwtAuthService.user.fullName() }}</p>
-    </md-list-item>
-</md-list>
-
-<md-divider></md-divider>
-
-<md-list ng-repeat="stateGroup in AdminNavigationController.groupedNavigableStates">
-
-    <md-list-item ng-if="!!stateGroup.name">
-        <p><small>{{ stateGroup.name | uppercase}}</small></p>
-    </md-list-item>
-
-    <md-list-item ng-repeat-start="state in stateGroup.states" ng-if="!state.abstract" ng-click="AdminNavigationController.$state.go(state.name)" ui-sref-active="selected">
-        <md-icon>{{state.data.icon}}</md-icon>
-        <p>{{state.data.title | uppercase}}</p>
-
-    </md-list-item>
-
-    <menu-toggle
-         ng-if="state.abstract && state.children.length > 0"
-         navigation-state="state"
-    >
-    </menu-toggle>
-
-    <md-divider ng-repeat-end></md-divider>
-
-</md-list>
-
-<md-list>
-
-    <md-list-item ng-click="AdminNavigationController.logout()">
-        <md-icon>exit_to_app</md-icon>
-        <p>Logout</p>
-    </md-list-item>
-</md-list>
+<div id="admin-sidenav" ng-class="{collapsed:AdminNavigationController.collapsed}">
+    <md-toolbar class="md-theme-indigo">
+        <div class="md-toolbar-tools">
+            <h2 ng-if="!AdminNavigationController.collapsed">CMS</h2>
+            <span flex ng-if="!AdminNavigationController.collapsed"></span>
+            <md-button aria-label="collapse-menu" class="md-icon-button" ng-click="AdminNavigationController.collapsed = !AdminNavigationController.collapsed">
+                <md-icon ng-if="!AdminNavigationController.collapsed">chevron_left</md-icon>
+                <md-icon ng-if="AdminNavigationController.collapsed">chevron_right</md-icon>
+            </md-button>
+        </div>
+    </md-toolbar>
+
+    <md-list>
+        <md-list-item ng-click="AppController.goToUserProfile($event)">
+            <img ng-src="{{AdminNavigationController.ngJwtAuthService.user.avatarImgUrl}}" alt="{{AdminNavigationController.ngJwtAuthService.user.fullName()}}" class="md-avatar"/>
+            <p ng-if="!AdminNavigationController.collapsed">{{ AdminNavigationController.ngJwtAuthService.user.fullName() }}</p>
+            <md-tooltip md-direction="right" ng-if="AdminNavigationController.collapsed">Profile</md-tooltip>
+        </md-list-item>
+    </md-list>
+
+    <md-divider></md-divider>
+
+    <md-list ng-repeat="stateGroup in AdminNavigationController.groupedNavigableStates">
+
+        <md-list-item ng-if="!!stateGroup.name && !AdminNavigationController.collapsed">
+            <p><small>{{ stateGroup.name | uppercase}}</small></p>
+        </md-list-item>
+
+        <md-list-item ng-repeat-start="state in stateGroup.states" ng-if="!state.abstract" ng-click="AdminNavigationController.$state.go(state.name)" ui-sref="{{state.name}}" ui-sref-active="selected">
+            <md-icon>{{state.data.icon}}</md-icon>
+            <p ng-if="!AdminNavigationController.collapsed">{{state.data.title | uppercase}}</p>
+            <md-tooltip md-direction="right" ng-if="AdminNavigationController.collapsed">{{state.data.title | uppercase}}</md-tooltip>
+        </md-list-item>
+
+        <menu-toggle
+                ng-if="state.abstract && state.children.length > 0"
+                navigation-state="state"
+                collapsed="AdminNavigationController.collapsed"
+                >
+        </menu-toggle>
+
+        <md-divider ng-repeat-end></md-divider>
+
+    </md-list>
+
+    <md-list>
+
+        <md-list-item ng-click="AppController.logout()">
+            <md-icon>exit_to_app</md-icon>
+            <p ng-if="!AdminNavigationController.collapsed">Logout</p>
+            <md-tooltip md-direction="right" ng-if="AdminNavigationController.collapsed">Logout</md-tooltip>
+        </md-list-item>
+    </md-list>
+</div>
diff --git a/app/src/app/admin/navigation/navigation.ts b/app/src/app/admin/navigation/navigation.ts
@@ -22,6 +22,8 @@ namespace app.admin.navigation {
             }
         ];
 
+        public collapsed:boolean = false;
+
         static $inject = ['stateHelperService', '$window', 'ngJwtAuthService', '$state', '$rootScope'];
 
         constructor(stateHelperService:common.providers.StateHelperService,

diff --git a/app/src/common/directives/menuToggle/menuToggle.less b/app/src/common/directives/menuToggle/menuToggle.less
@@ -32,4 +32,15 @@
 
     }
 
+    &.collapsed {
+        md-list-item > md-icon:first-child, md-list-item .md-list-item-inner > md-icon:first-child {
+            margin-right: 0;
+        }
+
+        md-list md-icon {
+            margin-left: 5px;
+        }
+
+    }
+
 }
diff --git a/app/src/common/directives/menuToggle/menuToggle.tpl.html b/app/src/common/directives/menuToggle/menuToggle.tpl.html
@@ -1,11 +1,15 @@
-<div class="menu-toggle">
+<div class="menu-toggle" ng-class="{collapsed:collapsed}">
     <md-list-item
             ng-click="toggle()"
-            aria-controls="docs-menu-{{state.name}}"
-            aria-expanded="{{isOpen()}}">
+            aria-controls="docs-menu-{{navigationState.name}}"
+            aria-expanded="{{isOpen()}}"
+            ui-sref-active="child-selected"
+            ui-sref="{{navigationState.name}}"
+            >
 
         <md-icon>{{navigationState.data.icon}}</md-icon>
-        <p>{{navigationState.data.title | uppercase}}</p>
+        <p ng-if="!collapsed">{{navigationState.data.title | uppercase}}</p>
+        <md-tooltip md-direction="right" ng-if="collapsed">{{navigationState.data.title | uppercase}}</md-tooltip>
 
         <span aria-hidden="true" class="md-toggle-icon"
               ng-class="{'toggled' : isOpen()}">
@@ -18,14 +22,18 @@
 
     <md-list>
 
-        <md-list-item ng-repeat="state in navigationState.children" ng-click="gotoState(state.name)" ui-sref-active="selected">
+        <md-divider ng-repeat-start="state in navigationState.children track by $index" ng-if="$first && isOpen()"></md-divider>
+
+        <md-list-item ng-click="gotoState(state.name)" ui-sref-active="selected" ui-sref="{{state.name}}">
+
             <md-icon>{{state.data.icon}}</md-icon>
-            <p>{{state.data.title}}</p>
-            <md-divider ng-if="!$last"></md-divider>
+            <p ng-if="!collapsed">{{state.data.title | uppercase}}</p>
+            <md-tooltip md-direction="right" ng-if="collapsed">{{state.data.title | uppercase}}</md-tooltip>
         </md-list-item>
 
+        <md-divider ng-repeat-end ng-if="!$last"></md-divider>
+
     </md-list>
 
 </div>
 
-
diff --git a/app/src/common/directives/menuToggle/menuToggle.ts b/app/src/common/directives/menuToggle/menuToggle.ts
@@ -7,6 +7,7 @@ namespace common.directives.menuToggle {
         toggle():void;
         gotoState(stateName:string):void;
         navigationState: ng.ui.IState;
+        collapsed?: boolean;
     }
 
     class MenuToggleDirective implements ng.IDirective {
@@ -15,7 +16,8 @@ namespace common.directives.menuToggle {
         public templateUrl = 'templates/common/directives/menuToggle/menuToggle.tpl.html';
         public replace = true;
         public scope = {
-            navigationState: '='
+            navigationState: '=',
+            collapsed: '=?',
         };
 
         constructor(private $timeout: ng.ITimeoutService, private $state:ng.ui.IStateService) {