mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-04-03 11:52:40 +00:00
Code Issues Releases Wiki Activity

Design vscode-like menu for terminal and console switching

Browse Source
This commit is contained in:
Kristóf Tóth 2018-05-25 14:27:48 +02:00
parent 8fb0fc7cfc
commit 5bdf6e0d42
2 changed files with 27 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,13 @@
<app-ide></app-ide> <app-ide></app-ide>
</div> </div>
<div class="tfw-terminal"> <div class="tfw-terminal">
<div class="btn-group btn-group-sm flex-wrap tao-grid-center-left tfw-console-terminal-menu">
<button class="tfw-console-terminal-menu-button"
[class.selected]="terminalOrConsole === 'terminal'">TERMINAL</button>
<button class="tfw-console-terminal-menu-button"
[class.selected]="terminalOrConsole === 'console'">CONSOLE</button>
</div>
<hr>
<app-terminal *ngIf="terminalOrConsole === 'terminal'"></app-terminal> <app-terminal *ngIf="terminalOrConsole === 'terminal'"></app-terminal>
<app-console *ngIf="terminalOrConsole === 'console'"></app-console> <app-console *ngIf="terminalOrConsole === 'console'"></app-console>
</div> </div>

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

@ -81,6 +81,26 @@
border-top: 1px solid $tao-plum-100; border-top: 1px solid $tao-plum-100;
} }
} }
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
margin: 2px 0 7px 0;
padding: 0;
}
.tfw-console-terminal-menu-button {
font-size: $font-size-small;
background-color: transparent;
border: none;
color: gray;
}
.selected {
color: white;
}
} }
.deploy-blur { .deploy-blur {