mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-11-04 14:32:56 +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
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>
</div>
<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-console *ngIf="terminalOrConsole === 'console'"></app-console>
</div>

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

@@ -81,6 +81,26 @@
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 {