From e89cf91654353c0ded0fef2ceb81f8477c155f82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Garc=C3=ADa?= Date: Thu, 22 Nov 2018 19:24:20 +0100 Subject: [PATCH] Changed active status color in top menu --- .../dropdown-notifications.directive.coffee | 4 +++- .../dropdown-notifications.jade | 1 + .../dropdown-project-list.directive.coffee | 4 +++- .../dropdown-project-list.jade | 1 + .../navigation-bar.directive.coffee | 14 +++++++++---- .../navigation-bar/navigation-bar.jade | 12 +++++++---- .../navigation-bar/navigation-bar.scss | 20 +++++++++++++------ 7 files changed, 40 insertions(+), 16 deletions(-) diff --git a/app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.directive.coffee b/app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.directive.coffee index 808a1381..56748848 100644 --- a/app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.directive.coffee +++ b/app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.directive.coffee @@ -45,7 +45,9 @@ DropdownNotificationsDirective = ($rootScope, notificationsService, currentUserS directive = { templateUrl: "navigation-bar/dropdown-notifications/dropdown-notifications.html" - scope: true + scope: { + active: "=" + } link: link } diff --git a/app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.jade b/app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.jade index f372e56a..4898c830 100644 --- a/app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.jade +++ b/app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.jade @@ -3,6 +3,7 @@ a( title="{{ 'EVENTS.TITLE' | translate }}" tg-nav="notifications" ng-mouseover="visible=true" + ng-class="{'active': active}" ) tg-svg(svg-icon="icon-bell") div.counter(ng-if="total", ng-class="{'active': newEvent}") {{ total }} diff --git a/app/modules/navigation-bar/dropdown-project-list/dropdown-project-list.directive.coffee b/app/modules/navigation-bar/dropdown-project-list/dropdown-project-list.directive.coffee index 79b713fa..7ce79d63 100644 --- a/app/modules/navigation-bar/dropdown-project-list/dropdown-project-list.directive.coffee +++ b/app/modules/navigation-bar/dropdown-project-list/dropdown-project-list.directive.coffee @@ -28,7 +28,9 @@ DropdownProjectListDirective = (currentUserService, projectsService) -> directive = { templateUrl: "navigation-bar/dropdown-project-list/dropdown-project-list.html" - scope: {} + scope: { + active: "=" + } link: link } diff --git a/app/modules/navigation-bar/dropdown-project-list/dropdown-project-list.jade b/app/modules/navigation-bar/dropdown-project-list/dropdown-project-list.jade index b273ae62..35f49617 100644 --- a/app/modules/navigation-bar/dropdown-project-list/dropdown-project-list.jade +++ b/app/modules/navigation-bar/dropdown-project-list/dropdown-project-list.jade @@ -2,6 +2,7 @@ a( href="" title="Projects" tg-nav="projects" + ng-class="{'active': active}" ) tg-svg(svg-icon="icon-project") diff --git a/app/modules/navigation-bar/navigation-bar.directive.coffee b/app/modules/navigation-bar/navigation-bar.directive.coffee index 1552f979..6eb40784 100644 --- a/app/modules/navigation-bar/navigation-bar.directive.coffee +++ b/app/modules/navigation-bar/navigation-bar.directive.coffee @@ -34,10 +34,16 @@ NavigationBarDirective = (currentUserService, navigationBarService, locationServ locationService.search({next: nextUrl}) scope.$on "$routeChangeSuccess", () -> - if locationService.path() == "/" - scope.vm.active = true - else - scope.vm.active = false + scope.vm.active = null + switch locationService.path() + when "/" + scope.vm.active = 'dashboard' + when "/discover" + scope.vm.active = 'discover' + when "/notifications" + scope.vm.active = 'notifications' + when "/projects/" + scope.vm.active = 'projects' directive = { templateUrl: "navigation-bar/navigation-bar.html" diff --git a/app/modules/navigation-bar/navigation-bar.jade b/app/modules/navigation-bar/navigation-bar.jade index a1704b9e..0093ce3d 100644 --- a/app/modules/navigation-bar/navigation-bar.jade +++ b/app/modules/navigation-bar/navigation-bar.jade @@ -41,23 +41,27 @@ nav.navbar(ng-if="vm.isEnabledHeader") div.nav-right(ng-if="vm.isAuthenticated") a( tg-nav="home" - ng-class="{active: vm.active}" + ng-class="{'active': vm.active == 'dashboard' }" title="{{'PROJECT.NAVIGATION.DASHBOARD_TITLE' | translate}}" ) tg-svg(svg-icon="icon-dashboard") - a( href="#", tg-nav="discover", - ng-class="{active: vm.active}" + ng-class="{'active': vm.active == 'discover' }" title="{{'PROJECT.NAVIGATION.DISCOVER_TITLE' | translate}}", ) tg-svg(svg-icon="icon-discover") - div.topnav-dropdown-wrapper(ng-show="vm.projects.size", tg-dropdown-project-list) + div.topnav-dropdown-wrapper( + ng-show="vm.projects.size" + tg-dropdown-project-list + active="vm.active == 'projects'" + ) div.topnav-dropdown-wrapper( tg-dropdown-notifications + active="vm.active == 'notifications'" ) div.topnav-dropdown-wrapper(tg-dropdown-user) diff --git a/app/modules/navigation-bar/navigation-bar.scss b/app/modules/navigation-bar/navigation-bar.scss index 9c2f8e66..3bc71ff1 100644 --- a/app/modules/navigation-bar/navigation-bar.scss +++ b/app/modules/navigation-bar/navigation-bar.scss @@ -40,7 +40,12 @@ $dropdown-width: 350px; > a, .topnav-dropdown-wrapper > a { color: $white; - padding: .5rem 2rem; + margin: 0 .75rem; + padding: .5rem 1rem; + } + .active { + background: rgba($white, .95); + color: $secondary-dark; } svg { @include svg-size(1.2rem); @@ -48,24 +53,27 @@ $dropdown-width: 350px; transition: all .2s linear; } } - > a, + .nav-right > a, .topnav-dropdown-wrapper > a { color: $white; display: inline-block; transition: all .2s linear; - &:hover { - background: rgba($black, .2); + &:hover:not(.user-avatar) { + background: rgba($white, .95); color: $primary-light; svg { - fill: $white; + fill: $primary-light; + transition: all .2s linear; } - } &.user-avatar { min-width: 200px; padding: 0; padding-left: 2rem; text-align: right; + &:hover { + background: rgba($black, .2); + } span { padding-right: 1rem; }