Remove theme name and column controllers. Make themes into a fixed sized and the column responsive.

This commit is contained in:
Fernando Quant 2021-01-30 06:06:09 +00:00 committed by Raoul Snyman
parent 341405e715
commit 16886d6e30
3 changed files with 24 additions and 48 deletions

View File

@ -1,6 +1,6 @@
<form #themeForm="ngForm">
<h4>Theme Options</h4>
<div fxLayout="row" fxLayoutAlign="space-between center">
<div>
<!-- Theme level menu -->
<mat-form-field>
<mat-label>Theme level</mat-label>
@ -10,20 +10,13 @@
<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">
<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">
<img [src]="theme.thumbnail"/>
<div class="theme-title" *ngIf="displayNames">{{ theme.name }}</div>
<div class="theme-title">{{ theme.name }}</div>
</mat-card>
</div>
</div>

View File

@ -21,6 +21,24 @@ img {
font-weight: 700;
}
.theme-container {
display: grid;
justify-content: space-evenly;
grid-template-columns: repeat(auto-fill, min(220px, 100%));
gap: 1rem;
}
.theme-card {
}
.theme-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.theme-title:hover {
overflow: visible;
white-space: pre-wrap;
}

View File

@ -1,6 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';
import { OpenLPService } from '../../openlp.service';
import { PageTitleService } from '../../page-title.service';
@ -14,19 +12,12 @@ 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();
}
@ -44,14 +35,6 @@ export class ThemesComponent implements OnInit {
this.openlpService.setThemeLevel(level).subscribe(() => this.getTheme());
}
get displayNames() {
return this._displayNames;
}
get columns(): string {
return this._columns;
}
isThemeLevelSupported(): boolean {
return this._themeLevel !== 'song';
}
@ -79,22 +62,4 @@ export class ThemesComponent implements OnInit {
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;
}
}