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

Layout changes finally work from backend commands

Browse Source
This commit is contained in:
Gabor PEK 2018-04-20 09:26:36 +02:00 committed by Kristóf Tóth
parent a0d5dfdddc
commit f0717eb235
7 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/config.ts
View File

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

2
src/app/dashboard/dashboard.component.html
View File

@ -17,7 +17,7 @@
<app-terminal></app-terminal> <app-terminal></app-terminal>
</div> </div>
<div class="tfw-sidebar"> <div class="tfw-sidebar">
<app-sidebar></app-sidebar> <app-sidebar [layout]="layout"></app-sidebar>
</div> </div>
<div class="tfw-terminal-footer"></div> <div class="tfw-terminal-footer"></div>

2
src/app/dashboard/dashboard.component.ts
View File

@ -33,7 +33,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
} }
layoutHandler(data: LayoutCommand) { layoutHandler(data: LayoutCommand) {
if (data.layout in (this.enabledLayouts)) { if (this.enabledLayouts.has(data.layout)) {
this.layout = data.layout; this.layout = data.layout;
} }
else { else {

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

@ -1,4 +1,4 @@
<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 src="images/{{layoutIter}}_active.svg"></div> <div *ngIf="layout === layoutIter"><img class="active" src="images/{{layoutIter}}_active.svg"></div>
<div *ngIf="layout !== layoutIter"><img src="images/{{layoutIter}}.svg"></div> <div *ngIf="layout !== layoutIter"><img src="images/{{layoutIter}}.svg"></div>
</div> </div>

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

@ -8,7 +8,9 @@ img {
} }
.tfw-ide-pin { .tfw-ide-pin {
cursor: pointer; cursor: pointer;
& .active {
box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.1), 0 4px 10px 0 rgba($tao-blue-500, 0.09);
}
} }

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

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

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

@ -105,7 +105,10 @@ $layouts: (
@each $k, $v in $map { @each $k, $v in $map {
#{$sel}#{$k} { #{$sel}#{$k} {
@if (length($v) == 0) { @if (length($v) == 0) {
display: none // We need to make sure the DOM element is displayed but not visible
visibility: hidden;
position: absolute;
z-index: -10000000;
} }
@else { @else {
grid-column-start: nth($v, 1); grid-column-start: nth($v, 1);