mirror of https://gitlab.com/openlp/web-remote.git
31 lines
1.4 KiB
HTML
31 lines
1.4 KiB
HTML
<form #themeForm="ngForm">
|
|
<h4>Theme Options</h4>
|
|
<div fxLayout="row" fxLayoutAlign="space-between center">
|
|
<!-- Theme level menu -->
|
|
<mat-form-field>
|
|
<mat-label>Theme level</mat-label>
|
|
<mat-select [(value)]="themeLevel">
|
|
<mat-option value="global">Global</mat-option>
|
|
<mat-option value="service">Service</mat-option>
|
|
<mat-option value="song">Song</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<!-- Names toggle -->
|
|
<mat-slide-toggle color="primary" labelPosition="before" [checked]="displayNames" (change)="toggleNames($event.checked)">Names</mat-slide-toggle>
|
|
<!-- Columns menu -->
|
|
<mat-form-field>
|
|
<mat-label>Columns</mat-label>
|
|
<input matInput type="number" min=1 [value]="columns" (change)="setLayout($event.target.value)">
|
|
</mat-form-field>
|
|
</div>
|
|
<!-- Themes display -->
|
|
<div class="content" fxLayout="row wrap" [fxLayoutGap]="_padding" *ngIf="isThemeLevelSupported()">
|
|
<div [fxFlex]="_colWidth" *ngFor="let theme of themeList;">
|
|
<mat-card (click)='setTheme(theme.name)' [class.selected]="theme.selected">
|
|
<img [src]="theme.thumbnail"/>
|
|
<div class="theme-title" *ngIf="displayNames">{{ theme.name }}</div>
|
|
</mat-card>
|
|
</div>
|
|
</div>
|
|
<mat-error *ngIf="!isThemeLevelSupported()">Song level theme changing not yet supported. Change your theme level to Global or Service</mat-error>
|
|
</form> |