mirror of https://gitlab.com/openlp/web-remote.git
99 lines
5.3 KiB
HTML
99 lines
5.3 KiB
HTML
<mat-toolbar color="primary">
|
|
<mat-toolbar-row>
|
|
<button mat-icon-button (click)="menu.toggle()"><mat-icon>menu</mat-icon></button>
|
|
<span class="page-title">{{pageTitle}}</span>
|
|
<span class="spacer"></span>
|
|
<button
|
|
mat-icon-button
|
|
(click)="forceWebSocketReconnection()"
|
|
class="connection-status"
|
|
[matTooltip]="webSocketOpen ? 'Connected to OpenLP' : 'Disconnected'"
|
|
>
|
|
<mat-icon *ngIf="webSocketOpen">link</mat-icon>
|
|
<mat-icon *ngIf="!webSocketOpen">link_off</mat-icon>
|
|
</button>
|
|
<span class="app-version">v{{appVersion}}</span>
|
|
</mat-toolbar-row>
|
|
</mat-toolbar>
|
|
<mat-sidenav-container>
|
|
<mat-sidenav #menu mode="over">
|
|
<mat-nav-list>
|
|
<a mat-list-item (click)="menu.close()" routerLink="/service"><mat-icon>list</mat-icon> Service</a>
|
|
<a mat-list-item (click)="menu.close()" routerLink="/slides"><mat-icon>collections</mat-icon> Slides</a>
|
|
<a mat-list-item (click)="menu.close()" routerLink="/alerts"><mat-icon>error</mat-icon> Alerts</a>
|
|
<a mat-list-item (click)="menu.close()" routerLink="/search"><mat-icon>search</mat-icon> Search</a>
|
|
<a mat-list-item (click)="menu.close()" routerLink="/themes"><mat-icon>image</mat-icon> Themes</a>
|
|
<mat-divider></mat-divider>
|
|
<a mat-list-item (click)="menu.close()" routerLink="/main">Main View</a>
|
|
<a mat-list-item (click)="menu.close()" routerLink="/stage">Stage View</a>
|
|
<a mat-list-item (click)="menu.close()" routerLink="/chords">Chord View</a>
|
|
<mat-divider></mat-divider>
|
|
<a mat-list-item (click)="menu.close()" routerLink="/settings"><mat-icon>settings</mat-icon> Settings</a>
|
|
</mat-nav-list>
|
|
</mat-sidenav>
|
|
<mat-sidenav-content>
|
|
<main class="content">
|
|
<router-outlet></router-outlet>
|
|
</main>
|
|
<!-- These two toolbars are for padding the content so the real toolbars do not block content when scrolled down -->
|
|
<mat-toolbar class="toolbar-padding"></mat-toolbar>
|
|
<mat-toolbar *ngIf="fastSwitching" class="toolbar-padding"></mat-toolbar>
|
|
<footer>
|
|
<mat-toolbar class="footer">
|
|
<button mat-icon-button (click)="previousItem()" matTooltip="Previous item" matTooltipPosition="above">
|
|
<mat-icon>first_page</mat-icon>
|
|
</button>
|
|
<button mat-icon-button (click)="nextItem()" matTooltip="Next item" matTooltipPosition="above">
|
|
<mat-icon>last_page</mat-icon>
|
|
</button>
|
|
<button mat-icon-button (click)="previousSlide()" matTooltip="Previous slide" matTooltipPosition="above">
|
|
<mat-icon>navigate_before</mat-icon>
|
|
</button>
|
|
<button mat-icon-button (click)="nextSlide()" matTooltip="Next slide" matTooltipPosition="above">
|
|
<mat-icon>navigate_next</mat-icon>
|
|
</button>
|
|
<button mat-icon-button #squashedDisplayButton (click)="openDisplayModeSelector()" class="squashed-display-button" matTooltip="Change Display Mode" matTooltipPosition="above">
|
|
<mat-icon *ngIf="state.blank">videocam_off</mat-icon>
|
|
<mat-icon *ngIf="state.theme">wallpaper</mat-icon>
|
|
<mat-icon *ngIf="state.display">desktop_windows</mat-icon>
|
|
<mat-icon *ngIf="state.live()">videocam</mat-icon>
|
|
</button>
|
|
<button mat-icon-button (click)="blankDisplay()" class="displayButton" [class.active]="state.blank" [disabled]="state.blank" matTooltip="Show black" matTooltipPosition="above">
|
|
<mat-icon>videocam_off</mat-icon>
|
|
</button>
|
|
<button mat-icon-button (click)="themeDisplay()" class="displayButton" [class.active]="state.theme" [disabled]="state.theme" matTooltip="Show background" matTooltipPosition="above">
|
|
<mat-icon>wallpaper</mat-icon>
|
|
</button>
|
|
<button mat-icon-button (click)="desktopDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.display" matTooltip="Show Desktop" matTooltipPosition="above">
|
|
<mat-icon>desktop_windows</mat-icon>
|
|
</button>
|
|
<button mat-icon-button (click)="showDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.live()" matTooltip="Show Presentation" matTooltipPosition="above">
|
|
<mat-icon>videocam</mat-icon>
|
|
</button>
|
|
</mat-toolbar>
|
|
<nav mat-tab-nav-bar mat-stretch-tabs class="fast-switcher" *ngIf="fastSwitching">
|
|
<a mat-tab-link
|
|
routerLink="/service"
|
|
routerLinkActive #serviceRoute="routerLinkActive"
|
|
[active]="serviceRoute.isActive"><mat-icon>list</mat-icon></a>
|
|
<a mat-tab-link
|
|
routerLink="/slides"
|
|
routerLinkActive #slidesRoute="routerLinkActive"
|
|
[active]="slidesRoute.isActive"><mat-icon>collections</mat-icon></a>
|
|
<a mat-tab-link
|
|
routerLink="/alerts"
|
|
routerLinkActive #alertsRoute="routerLinkActive"
|
|
[active]="alertsRoute.isActive"><mat-icon>error</mat-icon></a>
|
|
<a mat-tab-link
|
|
routerLink="/search"
|
|
routerLinkActive #searchRoute="routerLinkActive"
|
|
[active]="searchRoute.isActive"><mat-icon>search</mat-icon></a>
|
|
<a mat-tab-link
|
|
routerLink="/themes"
|
|
routerLinkActive #themesRoute="routerLinkActive"
|
|
[active]="themesRoute.isActive"><mat-icon>image</mat-icon></a>
|
|
</nav>
|
|
</footer>
|
|
</mat-sidenav-content>
|
|
</mat-sidenav-container>
|