sort out page title arrangement when sidebar always open

to close #453
node-red · Dec 6, 2018 · 7993ce1 · 7993ce1
1 parent 087fff8
commit 7993ce1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/nodes/locales/en-US/ui_base.json b/nodes/locales/en-US/ui_base.json
@@ -86,7 +86,7 @@
         },
         "temp" : {
             "allow-theme" : "Node-RED theme everywhere",
-            "no-theme" : "Angular theme in ui_template",
+            "no-theme" : "Use Angular theme in ui_template",
             "none" : "Angular theme everywhere"
         }
     }

diff --git a/src/partials/main.html b/src/partials/main.html
@@ -4,14 +4,14 @@
             <ng-md-icon icon="menu"></ng-md-icon>
         </md-button>
         <h1 ng-show="main.len <= 1" style="width:30px"> </h1>
-        <h1 ng-show="!main.lock && main.loaded">{{main.selectedTab.header || main.selectedTab.name}}</h1>
         <h1 ng-show="main.lockMenu">{{main.name}}</h1>
+        <h1 ng-show="!main.lockMenu && main.loaded">{{main.selectedTab.header || main.selectedTab.name}}</h1>
     </div>
 </md-toolbar>
 <section layout="row" flex>
     <md-sidenav ng-hide="main.len <= 1" class="md-sidenav-left" md-component-id="left" md-is-locked-open="main.lockMenu">
         <md-list>
-            <md-list-item ng-repeat="obj in main.menu" ng-click="main.open(obj, $index)">
+            <md-list-item ng-repeat="obj in main.menu" ng-click="main.open(obj, $index)" ng-class="{ 'nr-menu-item-active': obj.id == main.selectedTab.id }">
                 <ui-icon icon="{{obj.icon}}" style="margin:5px"></ui-icon>
                 <p>{{main.getMenuName(obj)}}</p>
             </md-list-item>

diff --git a/src/theme.less b/src/theme.less
@@ -16,6 +16,12 @@
 @nrTemplateTheme: true;
 @nrUnitHeight: 24px;
 
+& when (@nrTheme = false) {
+    .nr-menu-item-active div button {
+        border-right: 4px solid #888;
+    }
+}
+
 & when (@nrTheme = true) {
 
 .nr-dashboard-disabled {
@@ -66,6 +72,7 @@ body.nr-dashboard-theme .nr-dashboard-dim { opacity: 0.5 !important; }
 */
 body.nr-dashboard-theme md-toolbar {
     background-color: @pageTitlebarBackgroundColor;
+    color: #fff;
 }
 
 /*
@@ -79,6 +86,9 @@ body.nr-dashboard-theme md-sidenav {
 a.md-no-style, button.md-no-style {
     background-color: transparent;
 }
+.nr-menu-item-active div button {
+    border-right: 4px solid @groupTextColor;
+}
 
 /*
     GROUP SPECIFIC