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