web-remote/src/app/components/themes/themes.component.html

27 lines
1020 B
HTML

<form #themeForm="ngForm">
<h4>{{ 'THEME_OPTIONS' | translate }}</h4>
<div>
<mat-form-field>
<mat-label>{{ 'THEME_LEVEL' | translate }}</mat-label>
<mat-select [(value)]="themeLevel">
<mat-option value="global">{{ 'GLOBAL' | translate }}</mat-option>
<mat-option value="service">{{ 'SERVICE' | translate }}</mat-option>
<mat-option value="song">{{ 'SONG' | translate }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="theme-container content" *ngIf="isThemeLevelSupported()">
<div *ngFor="let theme of themeList;">
<mat-card class="theme-card" (click)='setTheme(theme.name)' [class.selected]="theme.selected">
<mat-card-content>
<img [src]="theme.thumbnail"/>
<div class="theme-title">{{ theme.name }}</div>
</mat-card-content>
</mat-card>
</div>
</div>
<mat-error *ngIf="!isThemeLevelSupported()">
{{ 'SONG_LEVEL_THEME_CHANGING_NOT_SUPPORTED' | translate }}
</mat-error>
</form>