Finished styling the menu

spira · Nov 24, 2015 · 1fbc142 · 1fbc142
1 parent 22fb5c2
commit 1fbc142
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 36 deletions.
diff --git a/app/src/app/admin/navigation/navigation.less b/app/src/app/admin/navigation/navigation.less
@@ -13,17 +13,47 @@ md-sidenav#admin-sidenav {
         width: 75px;
     }
 
-    md-list-item > button {
-        background-color: inherit;
+    md-list-item {
+
+        color: @background-300;
+
+        md-icon {
+            margin-left: 10px;
+        }
+
+        &.selected {
+            color: @background-color;
+            background-color: fade(@background-50, 8);
+        }
+
+        &.child-selected {
+            color: @background-color;
+            background-color: fade(@background-50, 2);
+        }
+
+        &> button {
+            background-color: inherit;
+        }
     }
 
     md-list-item.group-title, md-list-item.group-title md-icon {
         color: @accent-600;
+        margin-left: 0;
     }
 
     md-icon {
-        color: rgba(255, 255, 255, 0.15);
+        color: fade(@background-50, 25);
     }
+
+    .navigation-user {
+        .md-list-item-text * {
+            color: @background-color;
+        }
+        img {
+            border-radius: 50%;
+        }
+    }
+
 }
 
 #admin-nav-header {

diff --git a/app/src/app/admin/navigation/navigation.tpl.html b/app/src/app/admin/navigation/navigation.tpl.html
@@ -1,21 +1,15 @@
 <div ng-class="{collapsed:AdminNavigationController.collapsed}">
 
     <md-list>
-
-        <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>
-
-        <md-list-item aria-label="Go to your profile" class="md-2-line" ng-click="AppController.goToUserProfile($event)">
-            <avatar class="md-avatar" user="AdminNavigationController.ngJwtAuthService.user" width="70" height="70"></avatar>
+        <md-list-item aria-label="Go to your profile" class="navigation-user md-2-line" ng-click="AppController.goToUserProfile($event)">
+            <avatar class="md-avatar" user="AdminNavigationController.ngJwtAuthService.user" width="40" height="40"></avatar>
             <div class="md-list-item-text" ng-if="!AdminNavigationController.collapsed">
                 <h3>{{ AdminNavigationController.ngJwtAuthService.user.fullName() }}</h3>
                 <p>{{ AdminNavigationController.ngJwtAuthService.user.rolesDisplay() }}</p>
             </div>
             <md-tooltip md-direction="right" ng-if="AdminNavigationController.collapsed">Profile</md-tooltip>
         </md-list-item>
+
     </md-list>
 
     <md-divider></md-divider>
@@ -31,7 +25,7 @@ <h3>{{ AdminNavigationController.ngJwtAuthService.user.fullName() }}</h3>
 
         <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}}</p>
+            <p class="md-subhead" ng-if="!AdminNavigationController.collapsed">{{state.data.title}}</p>
             <md-tooltip md-direction="right" ng-if="AdminNavigationController.collapsed">{{state.data.title}}</md-tooltip>
         </md-list-item>
 
@@ -53,5 +47,33 @@ <h3>{{ AdminNavigationController.ngJwtAuthService.user.fullName() }}</h3>
             <p ng-if="!AdminNavigationController.collapsed">Logout</p>
             <md-tooltip md-direction="right" ng-if="AdminNavigationController.collapsed">Logout</md-tooltip>
         </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item
+            ng-if="!AdminNavigationController.collapsed"
+            md-swipe-left="AdminNavigationController.collapsed = true"
+            ng-click="AdminNavigationController.collapsed = true"
+        >
+            <p>
+                <md-icon>chevron_left</md-icon>
+            </p>
+        </md-list-item>
+
+        <md-list-item
+            ng-if="!!AdminNavigationController.collapsed"
+            md-swipe-right="AdminNavigationController.collapsed = false"
+            ng-click="AdminNavigationController.collapsed = false"
+        >
+            <p>
+                <md-icon>chevron_right</md-icon>
+            </p>
+        </md-list-item>
+
+
     </md-list>
+
+
+
+
 </div>
diff --git a/app/src/common/directives/avatar/avatar.tpl.html b/app/src/common/directives/avatar/avatar.tpl.html
@@ -1,4 +1,4 @@
-<div flex ng-click="!AvatarController.canEdit || AvatarController.openAvatarDialog()" class="avatar-directive">
+<div ng-click="!AvatarController.canEdit || AvatarController.openAvatarDialog()" class="avatar-directive">
     <!-- ng-disabled doesn't work on divs -->
     <cl-image ng-if="AvatarController.user.avatarImgId" width="100%" public-id="{{AvatarController.user.avatarImgId}}">
         <cl-transformation height="{{ AvatarController.height }}" width="{{ AvatarController.width }}" crop="fill" gravity="north"/>

diff --git a/app/src/common/directives/contentSectionsInput/contentSectionsInput.less b/app/src/common/directives/contentSectionsInput/contentSectionsInput.less
@@ -1,4 +1,4 @@
-@import (reference) "../../../styles/global.less";
+@import (reference) "../../../styles/theme/reference/admin-variables";
 
 .content-sections-input-set {
 
@@ -13,7 +13,7 @@
                 background-color: transparent;
 
                 md-icon {
-                    color: @adminPrimary;
+                    color: @primary-color;
                 }
 
             }

diff --git a/app/src/common/directives/menuToggle/menuToggle.less b/app/src/common/directives/menuToggle/menuToggle.less
@@ -25,6 +25,7 @@
         -moz-transition-property: height;
         transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
         transition-property: height;
+        padding: 0;
 
         md-icon {
             margin-left: 25px; //indent the subnav

diff --git a/app/src/common/directives/menuToggle/menuToggle.tpl.html b/app/src/common/directives/menuToggle/menuToggle.tpl.html
@@ -8,7 +8,7 @@
             >
 
         <md-icon>{{navigationState.data.icon}}</md-icon>
-        <p ng-if="!collapsed">{{navigationState.data.title}}</p>
+        <p ng-if="!collapsed" class="md-subhead">{{navigationState.data.title}}</p>
         <md-tooltip md-direction="right" ng-if="collapsed">{{navigationState.data.title | uppercase}}</md-tooltip>
 
         <span aria-hidden="true" class="md-toggle-icon"
@@ -27,7 +27,7 @@
         <md-list-item ng-click="gotoState(state.name)" ui-sref-active="selected" ui-sref="{{state.name}}">
 
             <md-icon>{{state.data.icon}}</md-icon>
-            <p ng-if="!collapsed">{{state.data.title}}</p>
+            <p ng-if="!collapsed" class="md-body-2">{{state.data.title}}</p>
             <md-tooltip md-direction="right" ng-if="collapsed">{{state.data.title}}</md-tooltip>
         </md-list-item>
 

diff --git a/app/src/common/directives/menuToggle/menuToggle.ts b/app/src/common/directives/menuToggle/menuToggle.ts
@@ -48,20 +48,15 @@ namespace common.directives.menuToggle {
                 return targetHeight;
             };
 
-            $scope.$watch(
-                () => {
-                    return open;
-                },
-                (open) => {
+            $scope.$watch(() => open, (open) => {
 
-                    let targetHeight = open ? getTargetHeight(list) : 0;
+                let targetHeight = open ? getTargetHeight(list) : 0;
 
-                    this.$timeout(function () {
-                        list.css({ height: targetHeight + 'px' });
-                    }, 0, false);
+                this.$timeout(function () {
+                    list.css({ height: targetHeight + 'px' });
+                }, 0, false);
 
-                }
-            );
+            });
 
         };
 

diff --git a/app/src/styles/global.less b/app/src/styles/global.less
@@ -1,10 +1,3 @@
-
-/*
-    Theme colours
-*/
-@adminPrimary: rgb(96,125,139);
-
-
 md-sidenav,
 md-sidenav.md-locked-open,
 md-sidenav.md-closed.md-locked-open-add-active {