mirror of
https://github.com/avatao-content/frontend-tutorial-framework
synced 2025-04-03 12:12:39 +00:00
54 lines
2.3 KiB
HTML
54 lines
2.3 KiB
HTML
<div [attr.class]="layout">
|
|
<div class="tfw-grid-main-components">
|
|
<div class="tfw-header"><app-header></app-header></div>
|
|
<div [ngClass]="{'hide-attribute': hideMessages}"
|
|
class="tfw-messages"
|
|
#tfwmessages>
|
|
<app-messages (newMessageEvent)="scrollMessagesToBottom()"></app-messages>
|
|
</div>
|
|
<div class="tfw-web tao-grid-top-left"
|
|
[ngClass]="{'deploy-blur': deploying || polling}">
|
|
<app-web *ngIf="!iframeUrl"></app-web>
|
|
<div *ngIf="showUrlBar" class="urlbar-container">
|
|
<button class="refresh btn btn-sm rounded-circle" (click)="reloadIframe()">↻</button>
|
|
<input type="text"
|
|
#urlbar
|
|
class="urlbar form-control"
|
|
value="{{actualIframeUrl}}"
|
|
(keyup.enter)="changeIframeURL()">
|
|
<button class="go btn btn-sm rounded-circle" (click)="changeIframeURL()">⇨</button>
|
|
</div>
|
|
<div *ngIf="iframeUrl" class="iframe-container">
|
|
<iframe class="iframe"
|
|
#webiframe
|
|
scrolling="yes"
|
|
frameborder="0"
|
|
(load)="iframeLoad()"
|
|
[src]="iframeUrl | safe">
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
<div class="tfw-ide">
|
|
<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"
|
|
(click)="selectTerminalMenuItem('terminal')"
|
|
[class.selected]="selectedTerminalMenuItem === 'terminal'">TERMINAL</button>
|
|
<button class="tfw-console-terminal-menu-button"
|
|
(click)="selectTerminalMenuItem('console')"
|
|
[class.selected]="selectedTerminalMenuItem === 'console'">CONSOLE</button>
|
|
</div>
|
|
<hr>
|
|
<app-terminal [class.hidden]="selectedTerminalMenuItem !== 'terminal'"></app-terminal>
|
|
<app-console [class.hidden]="selectedTerminalMenuItem !== 'console'"></app-console>
|
|
</div>
|
|
<div class="tfw-sidebar">
|
|
<app-sidebar (layoutChanged)="setLayout($event)" [layout]="layout"></app-sidebar>
|
|
</div>
|
|
|
|
<div class="tfw-terminal-footer"></div>
|
|
</div>
|
|
</div>
|