Merge branch 'themes-thumbnails' into 'master'

Themes thumbnails

See merge request openlp/web-remote!25
This commit is contained in:
Raoul Snyman 2020-08-27 05:07:14 +00:00
commit 5169db2d0d
5 changed files with 78 additions and 24 deletions

View File

@ -29,6 +29,7 @@
"@angular/common": "^8.2.8", "@angular/common": "^8.2.8",
"@angular/compiler": "^8.2.8", "@angular/compiler": "^8.2.8",
"@angular/core": "^8.2.8", "@angular/core": "^8.2.8",
"@angular/flex-layout": "^8.0.0-beta.27",
"@angular/forms": "^8.2.8", "@angular/forms": "^8.2.8",
"@angular/material": "^8.2.1", "@angular/material": "^8.2.1",
"@angular/platform-browser": "^8.2.8", "@angular/platform-browser": "^8.2.8",

View File

@ -15,6 +15,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTabsModule } from '@angular/material/tabs'; import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar'; import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { PageTitleService } from './page-title.service'; import { PageTitleService } from './page-title.service';
@ -73,7 +74,8 @@ import { ThemesComponent } from './components/themes/themes.component';
MatSnackBarModule, MatSnackBarModule,
MatTabsModule, MatTabsModule,
MatToolbarModule, MatToolbarModule,
MatTooltipModule MatTooltipModule,
FlexLayoutModule
], ],
providers: [ providers: [
PageTitleService, PageTitleService,

View File

@ -1,6 +1,7 @@
<form #themeForm="ngForm"> <form #themeForm="ngForm">
<h4>Theme Options</h4> <h4>Theme Options</h4>
<p> <div fxLayout="row" fxLayoutAlign="space-between center">
<!-- Theme level menu -->
<mat-form-field> <mat-form-field>
<mat-label>Theme level</mat-label> <mat-label>Theme level</mat-label>
<mat-select [(value)]="themeLevel"> <mat-select [(value)]="themeLevel">
@ -9,14 +10,22 @@
<mat-option value="song">Song</mat-option> <mat-option value="song">Song</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</p> <!-- Names toggle -->
<p> <mat-slide-toggle color="primary" labelPosition="before" [checked]="displayNames" (change)="toggleNames($event.checked)">Names</mat-slide-toggle>
<!-- Columns menu -->
<mat-form-field> <mat-form-field>
<mat-label>Theme</mat-label> <mat-label>Columns</mat-label>
<mat-select [(value)]="theme" [disabled]="!isThemeLevelSupported()"> <input matInput type="number" min=1 [value]="columns" (change)="setLayout($event.target.value)">
<mat-option *ngFor="let theme of themeList" [value]="theme.name">{{ theme.name }}</mat-option>
</mat-select>
<mat-error *ngIf="!isThemeLevelSupported()">Song level theme changing not yet supported. Change your theme level to Global or Service</mat-error>
</mat-form-field> </mat-form-field>
</p> </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> </form>

View File

@ -1,5 +1,6 @@
mat-card { mat-card {
cursor: pointer; cursor: pointer;
justify-content: center;
} }
mat-divider { mat-divider {
border-color: #afafaf; border-color: #afafaf;
@ -7,6 +8,13 @@ mat-divider {
mat-button-toggle-group { mat-button-toggle-group {
margin-left: 10px; margin-left: 10px;
} }
mat-slide-toggle {
margin-left: auto;
padding: 0 40px;
}
img {
width: 100%;
}
.selected { .selected {
background-color: rgb(235, 235, 235); background-color: rgb(235, 235, 235);
@ -14,6 +22,5 @@ mat-button-toggle-group {
} }
.theme-title { .theme-title {
margin-left: 2.5rem;
white-space: pre-wrap; white-space: pre-wrap;
} }

View File

@ -14,24 +14,21 @@ export class ThemesComponent implements OnInit {
private _theme = null; private _theme = null;
private _themeList = []; private _themeList = [];
private _themeLevel = null; private _themeLevel = null;
// Layout variables
private _displayNames = true;
private _columns = '6'; // Stored as string for mat-select to work properly
private _colWidth;
private _padding;
private _paddingRatio = .5; // How much of a column the sum of all the paddings equals to
constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService) { constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService) {
pageTitleService.changePageTitle('Themes'); pageTitleService.changePageTitle('Themes');
} }
ngOnInit() { ngOnInit() {
this.setLayout(this._columns);
this.getThemeLevel(); this.getThemeLevel();
this.getThemes(); this.getThemes();
this.getTheme();
}
get theme(): string {
return this._theme;
}
set theme(themeName: string) {
this._theme = themeName;
this.openlpService.setTheme(themeName).subscribe();
} }
get themeList(): Array<string> { get themeList(): Array<string> {
@ -44,7 +41,15 @@ export class ThemesComponent implements OnInit {
set themeLevel(level: string) { set themeLevel(level: string) {
this._themeLevel = level; this._themeLevel = level;
this.openlpService.setThemeLevel(level).subscribe(); this.openlpService.setThemeLevel(level).subscribe(() => this.getTheme());
}
get displayNames() {
return this._displayNames;
}
get columns(): string {
return this._columns;
} }
isThemeLevelSupported(): boolean { isThemeLevelSupported(): boolean {
@ -60,6 +65,36 @@ export class ThemesComponent implements OnInit {
} }
getTheme() { getTheme() {
this.openlpService.getTheme().subscribe(theme => this._theme = theme); this.openlpService.getTheme().subscribe(theme => {
this._theme = theme;
// Modify the theme list with the current theme. We do this instead of getting all the themes again
// We do this here to ensure that the program is the only source of truth for the current theme
for (const i of this._themeList) {
if ((i.name === theme) && (i.selected === false)) { i.selected = true; }
else if ((i.name !== theme) && (i.selected === true)) { i.selected = false; }
}
});
}
setTheme(themeName: string) {
this.openlpService.setTheme(themeName).subscribe(() => this.getTheme());
}
setLayout(columns: string) {
if (parseInt(columns, 10) <= 0) { columns = '1'; }
this._columns = columns;
const intColumns = parseInt(columns, 10); // We convert to int to be able to do the math operations
if (intColumns === 1) {
this._colWidth = 100;
this._padding = 0;
}
else {
this._colWidth = 100 / (intColumns + this._paddingRatio);
this._padding = `${(this._paddingRatio * this._colWidth) / intColumns}%`;
}
}
toggleNames(value: boolean) {
this._displayNames = value;
} }
} }