feat(navigation): Stanardizes the left hand menu

Closes #260 This commit represents the bulk of the work. Closing and moving on but more tweaks are likely needed. Also this commit is asymmetrical, the equivalent work has not been done in baw-server!
QutEcoacoustics · Sep 19, 2016 · 65ad65e · 65ad65e
1 parent de8ce6c
commit 65ad65e
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 32 deletions.
diff --git a/src/app/app.js b/src/app/app.js
@@ -135,12 +135,14 @@ angular.module("baw",
 
                 // secondary navs
                 const analysisJobsNav = {
-                    title: "Analysis Jobs",
-                    href: paths.site.ngRoutes.analysisJobs.list
+                    title: "Audio Analysis",
+                    href: paths.site.ngRoutes.analysisJobs.list,
+                    icon: "server"
                 };
                 const analysisJobNav = {
                     title: "Analysis Job",
-                    href: paths.site.ngRoutes.analysisJobs.details
+                    href: paths.site.ngRoutes.analysisJobs.details,
+                    icon: "tasks"
                 };
 
                 // routes
@@ -163,7 +165,7 @@ angular.module("baw",
                     title: analysisJobsNav.title,
                     fullWidth: false,
                     secondaryNavigation: [],
-                    icon: "tasks"
+                    icon: analysisJobsNav.icon
                 }).when(paths.site.ngRoutes.analysisJobs.new, {
                     templateUrl: paths.site.files.jobs.new,
                     controller: "JobNewController",
@@ -184,7 +186,7 @@ angular.module("baw",
                     templateUrl: paths.site.files.analysisResults.fileList,
                     controller: "FileListController",
                     controllerAs: "fileList",
-                    title: "Analysis Job Results",
+                    title: "Results",
                     fullWidth: false,
                     secondaryNavigation: [analysisJobsNav, analysisJobNav],
                     icon: "table"
@@ -197,7 +199,8 @@ angular.module("baw",
                     {templateUrl: "/assets/recording.html", controller: "RecordingCtrl"}).when("/listen", {
                     templateUrl: paths.site.files.recordings.recentRecordings,
                     controller: "RecentRecordingsCtrl",
-                    title: "Listen"
+                    title: "Listen",
+                    icon: "headphones"
                 }).when("/listen/:recordingId", {
                     templateUrl: paths.site.files.listen,
                     controller: "ListenCtrl",

diff --git a/src/app/navigation/_navigation.scss b/src/app/navigation/_navigation.scss
@@ -6,6 +6,17 @@ left-nav-bar, right-nav-bar {
 
 right-nav-bar {
   a>.fa, a>.glyphicon {
-    color: $text-color
+    color: $text-color;
+  }
+}
+
+left-nav-bar {
+  @for $i from 0 through 4 {
+    .indentation-#{$i} {
+      $step: ($i * 5%);
+      width: 100% - $step;
+      margin-left: $step !important;
+      font-size: 100% - $step;
+    }
   }
 }
diff --git a/src/app/navigation/leftNavBar.tpl.html b/src/app/navigation/leftNavBar.tpl.html
@@ -1,14 +1,21 @@
 <nav role="navigation">
     <h6>
         <strong class="text-uppercase text-muted">
-            {{ $ctrl.title }}
+            Menu
         </strong>
     </h6>
     <ul class="nav nav-pills nav-stacked">
         <li ng-repeat="link in $ctrl.links"
-            ng-class="{ active: link.isActive }">
-            <a title="" data-toggle="tooltip" data-placement="right" ng-href="{{ link.href }}"
-               data-original-title="View your projects">{{ link.title }}</a>
+            ng-class="['indentation-' + link.indentation || 0, { active: link.isActive}]">
+            <a title="{{ link.title }}"
+               data-toggle="tooltip"
+               data-placement="right"
+               ng-href="{{ link.href }}"
+               target="{{ link.target}}"
+               data-original-title="{{ link.title }}">
+                <i class="fa fa-fw default-color" ng-class="'fa-' + link.icon"></i>
+                {{ link.title }}
+            </a>
         </li>
     </ul>
 </nav>
diff --git a/src/app/navigation/menuDefinition.js b/src/app/navigation/menuDefinition.js
@@ -0,0 +1,87 @@
+angular
+    .module("bawApp.navigation.menuDefinition", [])
+    .factory("MenuDefinition", [
+        "conf.paths",
+        function (paths) {
+            const omnipresentLinks = [
+                {
+                    title: "Home",
+                    href: paths.api.links.homeAbsolute,
+                    icon: "home",
+                    target: "_self"
+                },
+                {
+                    title: "Log in",
+                    href: paths.api.links.loginActualAbsolute,
+                    icon: "sign-in",
+                    condition: user => user === null,
+                    target: "_self"
+                },
+                {
+                    title: "My Profile",
+                    href: paths.api.links.myAccountAbsolute,
+                    icon: "user",
+                    condition: user => user !== null,
+                    target: "_self"
+                },
+                {
+                    title: "Register",
+                    href: paths.api.links.registerAbsolute,
+                    icon: "user-plus",
+                    condition: user => user === null,
+                    target: "_self"
+                },
+                {
+                    title: "My Annotations",
+                    href: user => user.annotationUrl,
+                    icon: "square-o",
+                    condition: user => user !== null,
+                    target: "_self"
+                },
+                {
+                    title: "Projects",
+                    href: paths.api.links.projectsAbsolute,
+                    icon: "globe",
+                    target: "_self"
+                },
+                {
+                    title: "Audio Analysis",
+                    href: paths.site.ngRoutes.analysisJobs.list,
+                    icon: "server"
+                },
+                {
+                    title: "Library",
+                    href: paths.site.ngRoutes.library,
+                    icon: "book"
+                },
+                {
+                    title: "Data Request",
+                    href: paths.api.links.dataRequestAbsolute,
+                    icon: "table",
+                    target: "_self"
+                },
+                {
+                    title: "Send Audio",
+                    href: paths.api.links.dataUploadAbsolute,
+                    icon: "envelope",
+                    target: "_self"
+                },
+                {
+                    title: "Report Problem",
+                    href: paths.api.links.bugReportAbsolute,
+                    icon: "bug",
+                    target: "_self"
+                },
+                {
+                    title: "Website Statistics",
+                    href: paths.api.links.websiteStatusAbsolute,
+                    icon: "line-chart",
+                    target: "_self"
+                },
+
+            ];
+
+            return omnipresentLinks;
+        }
+    ]);
+
diff --git a/src/app/navigation/navigation.js b/src/app/navigation/navigation.js
@@ -2,6 +2,7 @@ angular.module(
     "bawApp.navigation",
     [
         "bawApp.navigation.breadcrumbs",
+        "bawApp.navigation.menuDefinition",
         "bawApp.navigation.secondaryNavigation"
     ]
 );
diff --git a/src/app/navigation/secondaryNavigation.js b/src/app/navigation/secondaryNavigation.js
@@ -14,20 +14,24 @@ angular
         return activeResource;
     })
     .controller("SecondaryNavigationController", [
-        "$rootScope", "$location", "$route", "conf.paths", "ActiveResource",
-        function ($rootScope, $location, $route, paths, ActiveResource) {
+        "lodash",
+        "$rootScope",
+        "$location",
+        "$route",
+        "conf.paths",
+        "ActiveResource",
+        "MenuDefinition",
+        "UserProfile",
+        function (_, $rootScope, $location, $route, paths, ActiveResource, MenuDefinition, UserProfile) {
             var controller = this;
 
-            const omnipresentLinks = [
-                {
-                    title: "Home",
-                    href: paths.api.links.homeAbsolute
-                },
-                {
-                    title: "Projects",
-                    href: paths.api.links.projectsAbsolute
-                }
-            ];
+            const omnipresentLinks = MenuDefinition;
+
+            var userModel = null;
+            UserProfile.get.then(() => {
+                userModel = UserProfile.profile;
+                onRouteChangeSuccess(null, $route.current, null, null);
+            });
 
             this.title = "";
             this.links = omnipresentLinks;
@@ -49,15 +53,38 @@ angular
                 controller.icon = current.$$route.icon;
                 controller.actionItemsTemplate = current.$$route.actionsTemplateUrl;
 
-                let currentLink = {title: controller.title, href: $location.$$path};
+                let currentLink = {title: controller.title, href: $location.$$path, icon: controller.icon};
                 let extraLinks = current.$$route.secondaryNavigation || [];
+                let contextualLinks = extraLinks.concat(currentLink).map((link, index) => {
+                    link.indentation = index;
+                    return link;
+                });
+
+                let omniLinks = omnipresentLinks
+                    .filter((link) => !link.condition || link.condition.call(link, userModel))
+                    .map(link => {
+                        link.href = _.isFunction(link.href) ? link.href.call(link, userModel) : link.href;
+                        return link;
+                    });
+
 
-                controller.links = omnipresentLinks
-                    .concat(extraLinks)
-                    .concat(currentLink)
+                // insert contextual links under omninode, or stick at bottom
+                let parentIndex = omniLinks.findIndex(link => link.href === contextualLinks[0].href);
+                if (parentIndex >= 0) {
+
+                    contextualLinks.shift();
+                    omniLinks.splice(parentIndex + 1, 0, ...contextualLinks);
+                }
+                else {
+                    omniLinks.push(...contextualLinks);
+                }
+
+
+                controller.links = omniLinks
                     .map(activePath.bind(null, current.$$route));
             }
 
+
             let activePath = function (route, link) {
                 link.isActive = route.regexp.test(link.href);
                 return link;
@@ -100,18 +127,20 @@ angular
 
                 if (storedLayout === undefined) {
                     if (renderAttempts <= 0) {
-                        console.warn(`layout rendering failed for layoutKey '${renderer.layoutKey}' after ${maxRenderAttempts} attempts`);
+                        console.warn(
+                            `layout rendering failed for layoutKey '${renderer.layoutKey}' after ${maxRenderAttempts} attempts`);
                         return;
                     }
 
                     // try again next render loop!
-                    //console.debug(`The \`layout\` directive has no stored content for the \`render-for\` key '${renderer.layoutKey}' - trying again`);
+                    //console.debug(`The \`layout\` directive has no stored content for the \`render-for\` key
+                    // '${renderer.layoutKey}' - trying again`);
                     renderAttempts--;
                     $timeout(applyLayout, 0, true, renderer, renderAttempts);
                     return;
                 }
 
-                storedLayout.transclude(function(clone, scope) {
+                storedLayout.transclude(function (clone, scope) {
                     renderer.element.append(clone);
                     renderer.source = {content: clone, scope};
                 });

diff --git a/src/baw.paths.nobuild.js b/src/baw.paths.nobuild.js
@@ -67,6 +67,7 @@ module.exports = function (environment) {
                 "project": "/projects/{projectId}",
                 "site": "/projects/{projectId}/sites/{siteId}",
                 "userAccounts": "/user_accounts/{userId}",
+                "myAnnotations": "user_accounts/{userId}/audio_events",
                 "websiteStatus": "/website_status",
                 "contactUs": "/contact_us",
                 "disclaimers": "/disclaimers",
@@ -76,7 +77,11 @@ module.exports = function (environment) {
                 "loginActual": "/my_account/sign_in",
                 "logout": "/my_account/sign_out",
                 "register": "/my_account/sign_up",
-                "admin": "/admin"
+                "admin": "/admin",
+                "myAccount": "/my_account",
+                "dataUpload": "/data_upload",
+                "dataRequest": "/data_request",
+                "bugReport": "/bug_report"
             }
         },
         "site": {

diff --git a/src/components/models/userProfile.js b/src/components/models/userProfile.js
@@ -44,6 +44,13 @@ angular
                     // Related to: https://github.com/QutBioacoustics/baw-server/issues/235
                     return this.rolesMask === 1 || /^admin$/i.test(this.userName);
                 }
+
+                get annotationUrl() {
+                    return $url.formatUri(
+                        paths.api.links.myAnnotationsAbsolute,
+                        {userId: this.id}
+                    );
+                }
             }
 
             return UserProfile;

diff --git a/src/sass/_bootstrapCustomization.scss b/src/sass/_bootstrapCustomization.scss
@@ -50,7 +50,6 @@ a {
     display: inline;
     position: inherit;
   }
-
 }
 
 // display nav-pills without making them links
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,7 +50,6 @@ a { @@
         display: inline;
         position: inherit;
       }
     }
     // display nav-pills without making them links
@@ Expand Down @@