Fixed nav, fab button

app/assets/style.scss

@@ -2,7 +2,8 @@ body,
 ng-view,
 ng-view > *,
 app-user-area,
-app-home-area
+app-home-area,
+app-area
 {
   display: flex;
   flex-direction: row;

app/components/area.js

@@ -0,0 +1,112 @@
+const app = require('../app')
+const { logo, menuIcon, userIcon, dashboardIcon, roleIcon, dropdownIcon, dropupIcon } = require('../assets')
+const assets = require('../assets')
+
+app.component('appArea', {
+  transclude: true,
+  template: html`
+  <div layout="row" flex>
+    <md-sidenav flex
+      md-component-id="left"
+      class="md-sidenav-left"
+      md-is-locked-open="$mdMedia('gt-md')"
+      md-whiteframe="4"
+      layout="column"
+      md-theme="nav"
+      ng-if="$root.inUserArea">
+
+      <md-content md-theme="nav">
+      <header>
+        <div class="logo-container">
+          <img class="logo" src="${logo}" />
+        </div>          
+      </header>
+
+      <app-user-area-nav></app-user-area-nav>
+
+      <md-menu-item ng-repeat="crud in $ctrl.cruds">
+        <md-button ng-href="/{{crud.paramPlural}}">
+          <md-icon md-svg-icon="{{assets[crud.iconAsset]}}"></md-icon>
+          {{crud.titlePlural}}
+        </md-button>
+      </md-menu-item>
+
+      <div ng-if="$ctrl.api.claims.USER_VIEW || $ctrl.api.claims.ROLE_VIEW">
+        <h3>
+          Administration
+        </h3>
+
+        <md-menu-item ng-if="$ctrl.api.claims.USER_VIEW">
+          <md-button ng-href="/users">
+            <md-icon md-svg-icon="${userIcon}"></md-icon>
+            Users
+          </md-button>
+        </md-menu-item>
+        <md-menu-item ng-if="$ctrl.api.claims.ROLE_VIEW">
+          <md-button ng-href="/roles">
+            <md-icon md-svg-icon="${roleIcon}"></md-icon>
+            Roles
+          </md-button>
+        </md-menu-item>
+      </div>
+      <!-- <md-menu-item>
+        <md-button ng-href="/roles">
+          <md-icon md-svg-icon="${roleIcon}"></md-icon>
+          Roles
+        </md-button>
+      </md-menu-item> -->
+      </md-content>
+    </md-sidenav>
+    <md-content flex>
+      <md-toolbar ng-if="$root.inUserArea">
+        <div class="md-toolbar-tools">
+          <md-button class="md-icon-button" aria-label="Settings" ng-hide="$mdMedia('gt-md')" ng-click="$ctrl.toggleNav()">
+            <md-icon md-svg-icon="${menuIcon}"></md-icon>
+          </md-button>
+          <h1 flex>{{$root.userArea.titleText}}</h1>
+          <md-menu md-position-mode="target-right target">
+            <md-button class="md-raised md-accent hue-10" ng-click="$mdMenu.open($event)">
+              <md-icon md-svg-icon="${userIcon}"></md-icon>
+              {{$ctrl.api.user.name}}
+              <md-icon md-svg-icon="${dropdownIcon}"></md-icon>
+            </md-button>
+            <md-menu-content>
+              <md-menu-item>
+                <md-button ng-click="$mdMenu.close($event)">
+                  <md-icon md-svg-icon="${userIcon}"></md-icon>
+                  {{$ctrl.api.user.name}}
+                  <md-icon md-svg-icon="${dropupIcon}"></md-icon>
+                </md-button>
+              </md-menu-item>
+              <md-menu-item>
+                <md-button class="md-warn" ng-click="$ctrl.logout()">
+                  Log out
+                </md-button>
+              </md-menu-item>
+            </md-menu-content>
+          </md-menu>
+        </div>
+      </md-toolbar>
+      <div layout-padding>
+        <div ng-transclude></div>
+      </div>
+    </md-content>
+  </div>
+`,
+  controller: function($rootScope, $mdSidenav, $mdMedia, $scope, cruds, api, $location) {
+    window.$rootScope = $rootScope
+    this.api = api
+    this.cruds = cruds.filter(crud => crud.showNav !== false)
+    $scope.assets = assets
+    $scope.$mdMedia = $mdMedia
+    this.showNav = false
+    this.toggleNav = () => {
+      $mdSidenav('left').toggle()
+    }
+    this.logout = async () => {
+      await api.logout()
+      $location.url('/login')
+    }
+
+  }
+})

app/components/index.js

@@ -6,3 +6,5 @@ require('./home-page')
 require('./user-pages')
 require('./role-pages')
 require('./permissions-select')
+require('./area')
+require('./user-nav')

app/components/user-area.js

@@ -1,115 +1,20 @@
 const app = require('../app')
-const { logo, menuIcon, userIcon, dashboardIcon, roleIcon, dropdownIcon, dropupIcon } = require('../assets')
-const assets = require('../assets')
-
 app.component('appUserArea', {
   transclude: true,
-  template: html`
-    <div layout="row" flex>
-      <md-sidenav flex
-        md-component-id="left"
-        class="md-sidenav-left"
-        md-is-locked-open="$mdMedia('gt-md')"
-        md-whiteframe="4"
-        layout="column"
-        md-theme="nav">
-
-        <md-content md-theme="nav">
-        <header>
-          <div class="logo-container">
-            <img class="logo" src="${logo}" />
-          </div>          
-        </header>
-
-        <app-user-area-nav></app-user-area-nav>
-
-        <md-menu-item ng-repeat="crud in $ctrl.cruds">
-          <md-button ng-href="/{{crud.paramPlural}}">
-            <md-icon md-svg-icon="{{assets[crud.iconAsset]}}"></md-icon>
-            {{crud.titlePlural}}
-          </md-button>
-        </md-menu-item>
-
-        <div ng-if="$ctrl.api.claims.USER_VIEW || $ctrl.api.claims.ROLE_VIEW">
-          <h3>
-            Administration
-          </h3>
-
-          <md-menu-item ng-if="$ctrl.api.claims.USER_VIEW">
-            <md-button ng-href="/users">
-              <md-icon md-svg-icon="${userIcon}"></md-icon>
-              Users
-            </md-button>
-          </md-menu-item>
-          <md-menu-item ng-if="$ctrl.api.claims.ROLE_VIEW">
-            <md-button ng-href="/roles">
-              <md-icon md-svg-icon="${roleIcon}"></md-icon>
-              Roles
-            </md-button>
-          </md-menu-item>
-        </div>
-        <!-- <md-menu-item>
-          <md-button ng-href="/roles">
-            <md-icon md-svg-icon="${roleIcon}"></md-icon>
-            Roles
-          </md-button>
-        </md-menu-item> -->
-        </md-content>
-      </md-sidenav>
-      <md-content flex>
-        <md-toolbar>
-          <div class="md-toolbar-tools">
-            <md-button class="md-icon-button" aria-label="Settings" ng-hide="$mdMedia('gt-md')" ng-click="$ctrl.toggleNav()">
-              <md-icon md-svg-icon="${menuIcon}"></md-icon>
-            </md-button>
-            <h1 flex>{{$ctrl.titleText}}</h1>
-            <md-menu md-position-mode="target-right target">
-              <md-button class="md-raised md-accent hue-10" ng-click="$mdMenu.open($event)">
-                <md-icon md-svg-icon="${userIcon}"></md-icon>
-                {{$ctrl.api.user.name}}
-                <md-icon md-svg-icon="${dropdownIcon}"></md-icon>
-              </md-button>
-              <md-menu-content>
-                <md-menu-item>
-                  <md-button ng-click="$mdMenu.close($event)">
-                    <md-icon md-svg-icon="${userIcon}"></md-icon>
-                    {{$ctrl.api.user.name}}
-                    <md-icon md-svg-icon="${dropupIcon}"></md-icon>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button class="md-warn" ng-click="$ctrl.logout()">
-                    Log out
-                  </md-button>
-                </md-menu-item>
-              </md-menu-content>
-            </md-menu>
-          </div>
-        </md-toolbar>
-        <div layout-padding>
-          <div ng-transclude></div>
-        </div>
-      </md-content>
-    </div>
-  `,
-  bindings: {
+    bindings: {
     titleText: '@'
   },
-  controller: function($mdSidenav, $mdMedia, $scope, cruds, api, $location) {
-    this.api = api
-    if (!api.user || !api.token) {
-      $location.url('/login')
-    }
-    this.cruds = cruds.filter(crud => crud.showNav !== false)
-    $scope.assets = assets
-    $scope.$mdMedia = $mdMedia
-    this.showNav = false
-    this.toggleNav = () => {
-      $mdSidenav('left').toggle()
-    }
-    this.logout = async () => {
-      await api.logout()
-      $location.url('/login')
-    }
+  template: html`<div ng-transclude></div>`,
+  controller: function($scope, $rootScope) {
+    $rootScope.inUserArea = ($rootScope.inUserArea || 0) + 1
+    $rootScope.userArea = this
+    $scope.$on('$destroy', () => {
+      setTimeout(() => {
+        $rootScope.inUserArea--
+        if ($rootScope.userArea === this) {
+          $rootScope.userArea = null
+        }
+      })
+    })
   }
-})
+})

app/components/user-nav.js

@@ -0,0 +1,15 @@
+const app = require('../app')
+const { logo, menuIcon, userIcon, dashboardIcon, roleIcon, dropdownIcon, dropupIcon } = require('../assets')
+const assets = require('../assets')
+
+app.component('appUserNav', {
+  transclude: true,
+  template: html`
+  `,
+  controller: function($mdSidenav, $mdMedia, $scope, cruds, api, $location) {
+    this.api = api
+    if (!api.user || !api.token) {
+      $location.url('/login')
+    }
+  }
+})

app/crud/pages/list.js

@@ -57,7 +57,9 @@ const list = (opts) => {
         <div layout="row" layout-align="end">
           <md-button
             ng-if="$ctrl.api.claims.${opts.constantName}_CREATE"
-            class="md-fab" aria-label="Add ${opts.titleName}" ng-href="{{::$ctrl.appPrefix}}/new">
+            class="md-fab md-fab-bottom-right"
+            style="position: fixed;"
+            aria-label="Add ${opts.titleName}" ng-href="{{::$ctrl.appPrefix}}/new">
             <md-icon md-svg-src="${createIcon}"></md-icon>
           </md-button>
         </div>

auto-crud/server-factory.js

@@ -37,7 +37,9 @@ const serverFactory = (app) => {
     })
 
     // Routes
-    routes(Object.assign({ app, controller:ctrl }, crud))
+    if (crud.addServerRoutes !== false) {
+      routes(Object.assign({ app, controller:ctrl }, crud))
+    }
 
   })
 }