taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Changed active status color in top menu

stable
Daniel García 2018-11-22 19:24:20 +01:00 committed by Alex Hermida
parent e621d93557
commit e89cf91654
7 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.directive.coffee
View File

@ -45,7 +45,9 @@ DropdownNotificationsDirective = ($rootScope, notificationsService, currentUserS
directive = {
templateUrl: "navigation-bar/dropdown-notifications/dropdown-notifications.html"
scope: true
scope: {
active: "="
}
link: link
}

1
app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.jade
View File

@ -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 }}

4
app/modules/navigation-bar/dropdown-project-list/dropdown-project-list.directive.coffee
View File

@ -28,7 +28,9 @@ DropdownProjectListDirective = (currentUserService, projectsService) ->
directive = {
templateUrl: "navigation-bar/dropdown-project-list/dropdown-project-list.html"
scope: {}
scope: {
active: "="
}
link: link
}

1
app/modules/navigation-bar/dropdown-project-list/dropdown-project-list.jade
View File

@ -2,6 +2,7 @@ a(
href=""
title="Projects"
tg-nav="projects"
ng-class="{'active': active}"
)
tg-svg(svg-icon="icon-project")

14
app/modules/navigation-bar/navigation-bar.directive.coffee
View File

@ -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"

12
app/modules/navigation-bar/navigation-bar.jade
View File

@ -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)

20
app/modules/navigation-bar/navigation-bar.scss
View File

@ -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;
}