mirror of
https://gitlab.com/openlp/web-remote.git
synced 2024-12-22 03:22:48 +00:00
Merge branch 'theme-changes' into 'master'
Remove theme name and column controllers. Make themes into a fixed sized and the column responsive. See merge request openlp/web-remote!31
This commit is contained in:
commit
2812e383e6
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user