Themes thumbnails

package.json

@@ -2,14 +2,18 @@
   "name": "@openlp/web-remote",
   "version": "0.9.4",
   "description": "The web remote for OpenLP, written in Angular",
-  "keywords": ["OpenLP", "Angular", "Remote"],
+  "keywords": [
+    "OpenLP",
+    "Angular",
+    "Remote"
+  ],
   "homepage": "https://openlp.org/",
   "bugs": "https://gitlab.com/openlp/web-remote",
   "license": "GPL-3.0-or-later",
   "author": "OpenLP Developers",
   "repository": {
-    "type" : "git",
+    "type": "git",
-    "url" : "https://gitlab.com/openlp/web-remote.git"
+    "url": "https://gitlab.com/openlp/web-remote.git"
   },
   "scripts": {
     "ng": "ng",
@@ -25,6 +29,7 @@
     "@angular/common": "^8.2.8",
     "@angular/compiler": "^8.2.8",
     "@angular/core": "^8.2.8",
+    "@angular/flex-layout": "^8.0.0-beta.27",
     "@angular/forms": "^8.2.8",
     "@angular/material": "^8.2.1",
     "@angular/platform-browser": "^8.2.8",

src/app/app.module.ts

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

src/app/components/themes/themes.component.html

@@ -1,6 +1,7 @@
 <form #themeForm="ngForm">
   <h4>Theme Options</h4>
-  <p>
+  <div fxLayout="row" fxLayoutAlign="space-between center">
+    <!-- Theme level menu -->
     <mat-form-field>
       <mat-label>Theme level</mat-label>
       <mat-select [(value)]="themeLevel">
@@ -9,14 +10,22 @@
         <mat-option value="song">Song</mat-option>
       </mat-select>
     </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-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>
-  </p>
+  </div>
-</form>
+  <!-- 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>

src/app/components/themes/themes.component.scss

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

src/app/components/themes/themes.component.ts

@@ -14,24 +14,21 @@ export class ThemesComponent implements OnInit {
   private _theme = null;
   private _themeList = [];
   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) {
     pageTitleService.changePageTitle('Themes');
   }
 
   ngOnInit() {
+    this.setLayout(this._columns);
     this.getThemeLevel();
     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> {
@@ -44,7 +41,15 @@ export class ThemesComponent implements OnInit {
 
   set themeLevel(level: string) {
     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 {
@@ -60,6 +65,36 @@ export class ThemesComponent implements OnInit {
   }
 
   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;
   }
 }