mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-06-29 04:45:12 +00:00
Code Issues Releases Wiki Activity

Sidebar icons are now highlighted and focus works when instrumented from backend

Browse Source
This commit is contained in:
Gabor PEK
2018-04-20 09:29:16 +02:00
committed by Kristóf Tóth
parent 3e249e8582
commit 5e3e619423
4 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/sidebar/sidebar.component.html
View File

@ -1,7 +1,11 @@
<div class="tfw-ide-pin" *ngFor="let layoutIter of enabledLayouts">
<div>
<button [class.focus]="layout === layoutIter" class="btn"><img src="images/{{layoutIter}}.svg"></button>
<button [class.active]="layout === layoutIter"
(active)="layout === layoutIter"
(focus)="layout === layoutIter"
(click)="setLayout(layoutIter)"
class="btn"><img src="images/{{layoutIter}}.svg"></button>
</div>
</div>

14
src/app/sidebar/sidebar.component.scss
View File

@ -1,7 +1,6 @@
@import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout.scss";
.tfw-ide-pin {
button {
@ -15,14 +14,19 @@
box-shadow: 0 4px 8px 0 rgba($tao-gray-500, 0.2), 0 4px 10px 0 rgba($tao-gray-500, 0.09);
&:hover,
&:focus {
box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29);
&:focus,
&:active,
&.active {
box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.4), 0 8px 20px 0 rgba($tao-blue-500, 0.39);
border: 1px solid $tao-blue-200;
}
&:focus {
&:focus,
&:active,
&.active {
outline: none;
width: 48px;
}
}
}
}

7
src/app/sidebar/sidebar.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input, OnInit } from '@angular/core';
import { Component, Input, Output, OnInit } from '@angular/core';
import { config } from '../config';
@Component({
@ -8,10 +8,13 @@ import { config } from '../config';
})
export class SidebarComponent implements OnInit {
@Input() layout: string;
@Input() @Output() layout: string;
enabledLayouts: Set<string> = config.dashboard.enabledLayouts;
constructor() {}
ngOnInit() {
}
setLayout(layout: string) {
this.layout = layout;
}
}