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

Add sidebar component that is ready to be designed and instrumented

Browse Source
This commit is contained in:
Gabor PEK
2018-04-20 09:19:42 +02:00
committed by Kristóf Tóth
parent 97d1a58fbf
commit b460c429e6
13 changed files with 169 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,23 @@
<div class="tfw-grid-main-components">
<div class="tfw-header"><app-header></app-header></div>
<div class="tfw-messages"><app-messages></app-messages></div>
<div class="tfw-web tao-grid-top-left"
[ngClass]="{ 'deploy-blur': deploying }">
<div class="iframe-container">
<iframe class="iframe"
scrolling="yes" frameborder="0"
src="about:blank"></iframe>
<div [attr.tfw-layout]="layout">
<div class="tfw-grid-main-components">
<div class="tfw-header"><app-header></app-header></div>
<div class="tfw-messages"><app-messages></app-messages></div>
<div class="tfw-web tao-grid-top-left"
[ngClass]="{ 'deploy-blur': deploying }">
<div class="iframe-container">
<iframe class="iframe"
scrolling="yes" frameborder="0"
src="about:blank"></iframe>
</div>
</div>
<div class="tfw-webide"><app-webide></app-webide></div>
<div class="tfw-terminal">
<app-terminal></app-terminal>
</div>
<div class="tfw-sidebar">
<app-sidebar></app-sidebar>
</div>
<div class="tfw-terminal-footer"></div>
</div>
<div class="tfw-webide"><app-webide></app-webide></div>
<div class="tfw-terminal">
<app-terminal></app-terminal>
</div>
<div class="tfw-terminal-footer"></div>
</div>

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

@ -11,11 +11,9 @@
grid-template-columns: repeat($grid-columns-count, 1fr);
grid-template-rows: repeat($grid-rows-count, 1fr);
@include position-grid-items(map_get($layout,$layout-template),'.tfw-');
.tfw-header,
.tfw-messages {
@if ($layout-template == 'default') {
@if (str_slice($layout-key, 0, str_length('default')) == 'default') {
border: 2px solid $tao-gray-100;
border-top: 0;
border-left: 0;
@ -34,7 +32,7 @@
background-color: $tao-gray-50;
overflow-y: scroll;
@if ($layout-template != 'default') {
@if (str_slice($layout-key, 0, str_length('default')) != 'default') {
max-height: 95vmin;
}
@else {
@ -61,14 +59,23 @@
background-color: $tao-plum-900;
}
.tfw-sidebar {
background-color: $tao-turqoise-800;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.tfw-terminal {
overflow-y: hidden;
border: 1px solid $tao-plum-100;
border-bottom: 0;
background-color: $tao-gray-800;
@if ($layout-template != 'vraw') {
@if (str_slice($layout-key, 0, str_length('vraw')) == 'vraw') {
border-left: 0;
border-top: 0;
}
}
}
@ -76,4 +83,3 @@
.deploy-blur {
filter: blur(3px);
}

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

@ -14,6 +14,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
deploying = false;
deploymentNotificationSubscription: Subscription;
layout: string = config.dashboard.defaultLayout;
layout = 'vraw-closed';
command_handlers = {'layout': this.layoutHandler.bind(this)};
constructor(private deploymentNotificationService: DeploymentNotificationService,
@ -34,7 +35,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
layoutHandler(data: LayoutCommand) {
if (data.layout.match('vraw-open|vraw-closed|hraw|default-open|default-closed')) {
this.layout = data.layout;
} else {
}
else {
console.log('Invalid webide layout "' + data.layout + '" received!');
}
}