mirror of
https://gitlab.com/openlp/web-remote.git
synced 2024-12-22 03:22:48 +00:00
Merge branch 'update-to-angular-v18' into 'master'
Update to Angular 18. See merge request openlp/web-remote!118
This commit is contained in:
Chris Witterholt
commit
5e2220f929
53
package.json
53
package.json
@ -25,16 +25,16 @@
|
||||
"tx": "node scripts/tx.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "^17.3.9",
|
||||
"@angular/cdk": "^17.3.9",
|
||||
"@angular/common": "^17.3.9",
|
||||
"@angular/compiler": "^17.3.9",
|
||||
"@angular/core": "^17.3.9",
|
||||
"@angular/forms": "^17.3.9",
|
||||
"@angular/material": "^17.3.9",
|
||||
"@angular/platform-browser": "^17.3.9",
|
||||
"@angular/platform-browser-dynamic": "^17.3.9",
|
||||
"@angular/router": "^17.3.9",
|
||||
"@angular/animations": "^18.0.1",
|
||||
"@angular/cdk": "^18.0.1",
|
||||
"@angular/common": "^18.0.1",
|
||||
"@angular/compiler": "^18.0.1",
|
||||
"@angular/core": "^18.0.1",
|
||||
"@angular/forms": "^18.0.1",
|
||||
"@angular/material": "^18.0.1",
|
||||
"@angular/platform-browser": "^18.0.1",
|
||||
"@angular/platform-browser-dynamic": "^18.0.1",
|
||||
"@angular/router": "^18.0.1",
|
||||
"@fontsource/roboto": "^5.0.13",
|
||||
"@ngx-translate/core": "^15.0.0",
|
||||
"@ngx-translate/http-loader": "^8.0.0",
|
||||
@ -44,29 +44,32 @@
|
||||
"zone.js": "^0.14.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^17.3.7",
|
||||
"@angular-eslint/builder": "^17.4.1",
|
||||
"@angular-eslint/eslint-plugin": "^17.4.1",
|
||||
"@angular-eslint/eslint-plugin-template": "^17.4.1",
|
||||
"@angular-eslint/schematics": "^17.4.1",
|
||||
"@angular-eslint/template-parser": "^17.4.1",
|
||||
"@angular/cli": "~17.3.7",
|
||||
"@angular/compiler-cli": "^17.3.9",
|
||||
"@angular/language-service": "^17.3.9",
|
||||
"@chiragrupani/karma-chromium-edge-launcher": "^2.3.1",
|
||||
"@angular-devkit/build-angular": "^18.0.2",
|
||||
"@angular-devkit/core": "^18.0.2",
|
||||
"@angular-devkit/schematics": "^18.0.2",
|
||||
"@angular-eslint/builder": "^18.0.1",
|
||||
"@angular-eslint/eslint-plugin": "^18.0.1",
|
||||
"@angular-eslint/eslint-plugin-template": "^18.0.1",
|
||||
"@angular-eslint/schematics": "^18.0.1",
|
||||
"@angular-eslint/template-parser": "^18.0.1",
|
||||
"@angular/cli": "~18.0.2",
|
||||
"@angular/compiler-cli": "^18.0.1",
|
||||
"@angular/language-service": "^18.0.1",
|
||||
"@chiragrupani/karma-chromium-edge-launcher": "^2.4.1",
|
||||
"@transifex/api": "^7.1.0",
|
||||
"@types/jasmine": "~5.1.4",
|
||||
"@types/jasminewd2": "~2.0.13",
|
||||
"@types/jest": "^29.5.12",
|
||||
"@types/node": "~20.12.12",
|
||||
"@typescript-eslint/eslint-plugin": "7.9.0",
|
||||
"@typescript-eslint/parser": "7.9.0",
|
||||
"axios": "^1.6.8",
|
||||
"@types/node": "~20.14.1",
|
||||
"@typescript-eslint/eslint-plugin": "7.12.0",
|
||||
"@typescript-eslint/parser": "7.12.0",
|
||||
"@typescript-eslint/utils": "7.12.0",
|
||||
"axios": "^1.7.2",
|
||||
"browserslist": "^4.23.0",
|
||||
"browserslist-useragent-regexp": "^4.1.3",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-import": "~2.29.1",
|
||||
"eslint-plugin-jsdoc": "~48.2.5",
|
||||
"eslint-plugin-jsdoc": "~48.2.7",
|
||||
"eslint-plugin-prefer-arrow": "~1.2.3",
|
||||
"jasmine-core": "~5.1.2",
|
||||
"jasmine-spec-reporter": "~7.0.0",
|
||||
|
||||
@ -23,7 +23,7 @@ import * as supportedBrowsers from '../assets/supportedBrowsers';
|
||||
styleUrl: './app.component.scss'
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
// Make DisplayMode enum visible to html code
|
||||
// Make DisplayMode enum visible to HTML code.
|
||||
DisplayMode = DisplayMode;
|
||||
|
||||
state = new State();
|
||||
@ -127,8 +127,13 @@ export class AppComponent implements OnInit {
|
||||
const display = new Display();
|
||||
display.displayMode = this.state.displayMode;
|
||||
display.bigDisplayButtons = this.bigDisplayButtons;
|
||||
const selectorRef = this.bottomSheet.open(DisplayModeSelectorComponent, {data: display});
|
||||
selectorRef.afterDismissed().subscribe(result => {
|
||||
const selectorRef = this.bottomSheet.open(
|
||||
DisplayModeSelectorComponent,
|
||||
{
|
||||
data: display
|
||||
}
|
||||
);
|
||||
selectorRef.afterDismissed().subscribe((result: DisplayMode) => {
|
||||
if (result === DisplayMode.Blank) {this.blankDisplay();}
|
||||
else if (result === DisplayMode.Desktop) {this.desktopDisplay();}
|
||||
else if (result === DisplayMode.Theme) {this.themeDisplay();}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { BrowserModule, Title } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { TitleCasePipe } from '@angular/common';
|
||||
|
||||
@ -84,7 +84,6 @@ import { StageChordPreviewComponent } from './components/settings/stage-chord-pr
|
||||
imports: [
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
HttpClientModule,
|
||||
FormsModule,
|
||||
AppRoutingModule,
|
||||
MatButtonModule,
|
||||
@ -119,7 +118,8 @@ import { StageChordPreviewComponent } from './components/settings/stage-chord-pr
|
||||
SentenceCasePipe,
|
||||
Title,
|
||||
TitleCasePipe,
|
||||
WindowRef
|
||||
WindowRef,
|
||||
provideHttpClient(withInterceptorsFromDi()),
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
|
||||
@ -6,16 +6,16 @@ import { Display, DisplayMode } from 'src/app/responses';
|
||||
selector: 'openlp-display-mode-sheet',
|
||||
templateUrl: 'display-mode-selector.component.html',
|
||||
styleUrl: './display-mode-selector.component.scss'
|
||||
})
|
||||
export class DisplayModeSelectorComponent {
|
||||
// Make DisplayMode enum visible in HTML template.
|
||||
displayMode = DisplayMode;
|
||||
})
|
||||
export class DisplayModeSelectorComponent {
|
||||
// Make DisplayMode enum visible in HTML template.
|
||||
displayMode = DisplayMode;
|
||||
|
||||
constructor(
|
||||
private bottomSheetRef: MatBottomSheetRef<DisplayModeSelectorComponent>,
|
||||
@Inject(MAT_BOTTOM_SHEET_DATA) public display: Display) {}
|
||||
constructor(
|
||||
private bottomSheetRef: MatBottomSheetRef<DisplayModeSelectorComponent>,
|
||||
@Inject(MAT_BOTTOM_SHEET_DATA) public display: Display) {}
|
||||
|
||||
setMode(mode: DisplayMode): void {
|
||||
this.bottomSheetRef.dismiss(mode);
|
||||
}
|
||||
setMode(mode: DisplayMode): void {
|
||||
this.bottomSheetRef.dismiss(mode);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@if (slides?.length) {
|
||||
<ng-container>
|
||||
@for (slide of slides; track slide; let index = $index) {
|
||||
@for (slide of slides; track index; let index = $index) {
|
||||
<openlp-slide-item
|
||||
[slide]="slide"
|
||||
[tabindex]="index"
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@include mat.core();
|
||||
$olp-primary: mat.define-palette(mat.$indigo-palette, 500);
|
||||
$olp-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
|
||||
$olp-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500);
|
||||
$olp-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
|
||||
|
||||
// The "warn" palette is optional and defaults to red if not specified.
|
||||
$olp-warn: mat.define-palette(mat.$red-palette);
|
||||
$olp-warn: mat.m2-define-palette(mat.$m2-red-palette);
|
||||
|
||||
$olp-theme: mat.define-light-theme((
|
||||
$olp-theme: mat.m2-define-light-theme((
|
||||
color: (
|
||||
primary: $olp-primary,
|
||||
accent: $olp-accent,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user