uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added highlight for menu items (#130)

Browse Source 
Closes #129
This commit is contained in:
Nejc Zdovc
2016-10-21 19:10:57 +02:00
committed by József Farkas
parent 721e676eb8
commit a5a60f5862
2 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/side-menu/side-menu.component.html
View File

@@ -9,7 +9,7 @@
</div> </div>
<ul [@toggler]="animation.keymap"> <ul [@toggler]="animation.keymap">
<li *ngFor="let keymap of keymaps$ | async" class="sidebar__level-2--item"> <li *ngFor="let keymap of keymaps$ | async" class="sidebar__level-2--item">
<div class="sidebar__level-2"> <div class="sidebar__level-2" [routerLinkActive]="['active']">
<a [routerLink]="['/keymap', keymap.abbreviation]">{{keymap.name}}</a> <a [routerLink]="['/keymap', keymap.abbreviation]">{{keymap.name}}</a>
<i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav"></i> <i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav"></i>
</div> </div>
@@ -26,7 +26,7 @@
</div> </div>
<ul [@toggler]="animation.macro"> <ul [@toggler]="animation.macro">
<li *ngFor="let macro of macros$ | async" class="sidebar__level-2--item"> <li *ngFor="let macro of macros$ | async" class="sidebar__level-2--item">
<div class="sidebar__level-2"> <div class="sidebar__level-2" [routerLinkActive]="['active']">
<a [routerLink]="['/macro', macro.id]">{{macro.name}}</a> <a [routerLink]="['/macro', macro.id]">{{macro.name}}</a>
</div> </div>
</li> </li>
@@ -39,22 +39,22 @@
</div> </div>
<ul [@toggler]="animation.addon"> <ul [@toggler]="animation.addon">
<li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev=""> <li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev="">
<div class="sidebar__level-2"> <div class="sidebar__level-2" [routerLinkActive]="['active']">
<a [routerLink]="['/add-on', 'Key cluster']">Key cluster</a> <a [routerLink]="['/add-on', 'Key cluster']">Key cluster</a>
</div> </div>
</li> </li>
<li class="sidebar__level-2--item" data-name="Trackball" data-abbrev=""> <li class="sidebar__level-2--item" data-name="Trackball" data-abbrev="">
<div class="sidebar__level-2"> <div class="sidebar__level-2" [routerLinkActive]="['active']">
<a [routerLink]="['/add-on', 'Trackball']">Trackball</a> <a [routerLink]="['/add-on', 'Trackball']">Trackball</a>
</div> </div>
</li> </li>
<li class="sidebar__level-2--item" data-name="Toucpad" data-abbrev=""> <li class="sidebar__level-2--item" data-name="Toucpad" data-abbrev="">
<div class="sidebar__level-2"> <div class="sidebar__level-2" [routerLinkActive]="['active']">
<a [routerLink]="['/add-on', 'Touchpad']">Touchpad</a> <a [routerLink]="['/add-on', 'Touchpad']">Touchpad</a>
</div> </div>
</li> </li>
<li class="sidebar__level-2--item" data-name="Trackpoint" data-abbrev=""> <li class="sidebar__level-2--item" data-name="Trackpoint" data-abbrev="">
<div class="sidebar__level-2"> <div class="sidebar__level-2" [routerLinkActive]="['active']">
<a [routerLink]="['/add-on', 'Trackpoint']">Trackpoint</a> <a [routerLink]="['/add-on', 'Trackpoint']">Trackpoint</a>
</div> </div>
</li> </li>
@@ -62,7 +62,7 @@
</li> </li>
</ul> </ul>
<ul class="menu--bottom"> <ul class="menu--bottom">
<li class="sidebar__level-1--item"> <li class="sidebar__level-1--item" [routerLinkActive]="['active']">
<a class="sidebar__level-1" [routerLink]="['/settings']"> <a class="sidebar__level-1" [routerLink]="['/settings']">
<i class="fa fa-gear"></i> Settings <i class="fa fa-gear"></i> Settings
</a> </a>

6
src/components/side-menu/side-menu.component.scss
View File

@@ -112,10 +112,14 @@ ul {
// General hover over menu items. // General hover over menu items.
&__level-1, &__level-1,
&__level-2--item { &__level-2 {
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
} }
&.active {
background-color: rgba(0, 0, 0, 0.18);
}
} }
&__fav { &__fav {