From 65ad65ef306cc77c60402b85c2e219a79bb54f57 Mon Sep 17 00:00:00 2001 From: Anthony Truskinger Date: Mon, 19 Sep 2016 14:01:58 +1000 Subject: [PATCH] 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! --- src/app/app.js | 15 ++-- src/app/navigation/_navigation.scss | 13 +++- src/app/navigation/leftNavBar.tpl.html | 15 ++-- src/app/navigation/menuDefinition.js | 87 +++++++++++++++++++++++ src/app/navigation/navigation.js | 1 + src/app/navigation/secondaryNavigation.js | 67 ++++++++++++----- src/baw.paths.nobuild.js | 7 +- src/components/models/userProfile.js | 7 ++ src/sass/_bootstrapCustomization.scss | 1 - 9 files changed, 181 insertions(+), 32 deletions(-) create mode 100644 src/app/navigation/menuDefinition.js diff --git a/src/app/app.js b/src/app/app.js index 16e61e5b..2765d1cc 100644 --- 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 index 64552948..d0bc5e4c 100644 --- 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; + } } } \ No newline at end of file diff --git a/src/app/navigation/leftNavBar.tpl.html b/src/app/navigation/leftNavBar.tpl.html index a90d0d6f..a6e95546 100644 --- a/src/app/navigation/leftNavBar.tpl.html +++ b/src/app/navigation/leftNavBar.tpl.html @@ -1,14 +1,21 @@ \ No newline at end of file diff --git a/src/app/navigation/menuDefinition.js b/src/app/navigation/menuDefinition.js new file mode 100644 index 00000000..1dd48819 --- /dev/null +++ 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 index 28e2ca21..0aacb5d3 100644 --- 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 index aa4f1c82..df65589b 100644 --- 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 index 5e5141b3..c1f36ef7 100644 --- 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 index a4dcc351..38dc212a 100644 --- 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 index 62c5d6bd..4fd8cfb8 100644 --- 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