mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-01-15 20:51:57 +00:00
Code Issues Releases Wiki Activity

Sidebar icons are now highlighted and focus works

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

2
src/app/config.ts
View File

@ -1,7 +1,7 @@
export const config = { export const config = {
dashboard: { dashboard: {
route: 'dashboard', route: 'dashboard',
currentLayout: 'ide-only', currentLayout: 'terminal-web',
enabledLayouts: new Set([ enabledLayouts: new Set([
'terminal-ide-web', 'terminal-ide-web',
'terminal-web', 'terminal-web',

3
src/app/dashboard/dashboard.component.scss
View File

@ -1,7 +1,6 @@
@import "../../assets/scss/variables.scss"; @import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout.scss"; @import "../../assets/scss/mixins/layout.scss";
@mixin set-tfw-web($layouts-key) { @mixin set-tfw-web($layouts-key) {
.tfw-web { .tfw-web {
@ -67,7 +66,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
column-gap: 15px; padding-top: 75px;
align-items: center; align-items: center;
box-shadow: -15px -5px 19px -11px rgba(0,0,0,0.75); box-shadow: -15px -5px 19px -11px rgba(0,0,0,0.75);
z-index: 999; z-index: 999;

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

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

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

@ -1,16 +1,28 @@
@import "../../assets/scss/variables.scss"; @import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout.scss"; @import "../../assets/scss/mixins/layout.scss";
img {
width: 50px;
height: auto;
padding-top: 75px;
}
.tfw-ide-pin { .tfw-ide-pin {
cursor: pointer;
& .active { button {
box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.1), 0 4px 10px 0 rgba($tao-blue-500, 0.09); width: 50px;
height: auto;
padding: 0;
margin-bottom: 50px;
cursor: pointer;
border: 1px solid $tao-gray-200;
transition: all 0.18s ease;
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);
border: 1px solid $tao-blue-200;
}
&:focus {
width: 48px;
}
} }
} }

4
src/assets/scss/mixins/_layout.scss
View File

@ -12,9 +12,9 @@ $terminal-ide-web-layout: (
$terminal-web-layout: ( $terminal-web-layout: (
'header': (1, 6, 1, 2), 'header': (1, 6, 1, 2),
'messages': (1, 6, 2, 10), 'messages': (1, 6, 2, $grid-columns-count+1),
'ide': (), 'ide': (),
'terminal': (15, $grid-columns-count, 10, $grid-rows-count+1), 'terminal': (15, $grid-columns-count, 1, $grid-rows-count+1),
'web': (6, 15, 1, 10), 'web': (6, 15, 1, 10),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
); );