From a8d164b86dc952b4ddaf79cb8215cbcf9030ddb9 Mon Sep 17 00:00:00 2001 From: Daniel Kimmich Date: Fri, 16 Feb 2024 17:26:18 +0100 Subject: [PATCH] docs: migrate docs app to M3 --- package-lock.json | 65 ++++++++++++++++++ package.json | 1 + .../src/app/app.component.html | 8 ++- .../src/app/app.component.ts | 22 +++++- .../angular-intl-demo/src/app/app.config.ts | 10 +-- .../src/assets/github-mark.png | Bin 0 -> 6393 bytes projects/angular-intl-demo/src/styles.scss | 46 ++++++------- 7 files changed, 120 insertions(+), 32 deletions(-) create mode 100644 projects/angular-intl-demo/src/assets/github-mark.png diff --git a/package-lock.json b/package-lock.json index 926d92c0..53f654ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@angular/core": "~17.2.0", "@angular/forms": "~17.2.0", "@angular/material": "~17.2.0", + "@angular/material-experimental": "~17.2.0", "@angular/platform-browser": "~17.2.0", "@angular/platform-browser-dynamic": "~17.2.0", "@angular/router": "~17.2.0", @@ -1037,6 +1038,70 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material-experimental": { + "version": "17.2.0", + "resolved": "https://registry.npmjs.org/@angular/material-experimental/-/material-experimental-17.2.0.tgz", + "integrity": "sha512-/celW5owLnYemLDApj0rgEiJOviFx2sGFqhEq6W7/5N6iCAZAr3MF1SBmuH+yFXyO51VQKYAFTGD1vh4U1bXHQ==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/auto-init": "15.0.0-canary.7f224ddd4.0", + "@material/banner": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/button": "15.0.0-canary.7f224ddd4.0", + "@material/card": "15.0.0-canary.7f224ddd4.0", + "@material/checkbox": "15.0.0-canary.7f224ddd4.0", + "@material/chips": "15.0.0-canary.7f224ddd4.0", + "@material/circular-progress": "15.0.0-canary.7f224ddd4.0", + "@material/data-table": "15.0.0-canary.7f224ddd4.0", + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/dialog": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/drawer": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/fab": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/floating-label": "15.0.0-canary.7f224ddd4.0", + "@material/form-field": "15.0.0-canary.7f224ddd4.0", + "@material/icon-button": "15.0.0-canary.7f224ddd4.0", + "@material/image-list": "15.0.0-canary.7f224ddd4.0", + "@material/layout-grid": "15.0.0-canary.7f224ddd4.0", + "@material/line-ripple": "15.0.0-canary.7f224ddd4.0", + "@material/linear-progress": "15.0.0-canary.7f224ddd4.0", + "@material/list": "15.0.0-canary.7f224ddd4.0", + "@material/menu": "15.0.0-canary.7f224ddd4.0", + "@material/menu-surface": "15.0.0-canary.7f224ddd4.0", + "@material/notched-outline": "15.0.0-canary.7f224ddd4.0", + "@material/radio": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/segmented-button": "15.0.0-canary.7f224ddd4.0", + "@material/select": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/slider": "15.0.0-canary.7f224ddd4.0", + "@material/snackbar": "15.0.0-canary.7f224ddd4.0", + "@material/switch": "15.0.0-canary.7f224ddd4.0", + "@material/tab": "15.0.0-canary.7f224ddd4.0", + "@material/tab-bar": "15.0.0-canary.7f224ddd4.0", + "@material/tab-indicator": "15.0.0-canary.7f224ddd4.0", + "@material/tab-scroller": "15.0.0-canary.7f224ddd4.0", + "@material/textfield": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tooltip": "15.0.0-canary.7f224ddd4.0", + "@material/top-app-bar": "15.0.0-canary.7f224ddd4.0", + "@material/touch-target": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/animations": "^17.0.0 || ^18.0.0", + "@angular/cdk": "17.2.0", + "@angular/common": "^17.0.0 || ^18.0.0", + "@angular/core": "^17.0.0 || ^18.0.0", + "@angular/forms": "^17.0.0 || ^18.0.0", + "@angular/material": "17.2.0", + "@angular/platform-browser": "^17.0.0 || ^18.0.0" + } + }, "node_modules/@angular/platform-browser": { "version": "17.2.1", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.1.tgz", diff --git a/package.json b/package.json index 286629fd..6039b38f 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@angular/core": "~17.2.0", "@angular/forms": "~17.2.0", "@angular/material": "~17.2.0", + "@angular/material-experimental": "~17.2.0", "@angular/platform-browser": "~17.2.0", "@angular/platform-browser-dynamic": "~17.2.0", "@angular/router": "~17.2.0", diff --git a/projects/angular-intl-demo/src/app/app.component.html b/projects/angular-intl-demo/src/app/app.component.html index 19d9d091..afd0857f 100644 --- a/projects/angular-intl-demo/src/app/app.component.html +++ b/projects/angular-intl-demo/src/app/app.component.html @@ -12,7 +12,13 @@ alt="GitHub logo" class="logo" matButtonIcon - src="assets/github-mark-white.png" + [ngSrc]=" + isDarkTheme() + ? 'assets/github-mark-white.png' + : 'assets/github-mark.png' + " + height="24" + width="24" /> GitHub diff --git a/projects/angular-intl-demo/src/app/app.component.ts b/projects/angular-intl-demo/src/app/app.component.ts index 143ea28d..5ff66dd6 100644 --- a/projects/angular-intl-demo/src/app/app.component.ts +++ b/projects/angular-intl-demo/src/app/app.component.ts @@ -1,4 +1,5 @@ -import { Component } from '@angular/core'; +import { NgOptimizedImage } from '@angular/common'; +import { Component, signal } from '@angular/core'; import { MatAnchor, MatButton } from '@angular/material/button'; import { MatToolbar } from '@angular/material/toolbar'; import { RouterLink, RouterOutlet } from '@angular/router'; @@ -8,6 +9,21 @@ import { RouterLink, RouterOutlet } from '@angular/router'; templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], standalone: true, - imports: [RouterLink, RouterOutlet, MatToolbar, MatButton, MatAnchor], + imports: [ + RouterLink, + RouterOutlet, + MatToolbar, + MatButton, + MatAnchor, + NgOptimizedImage, + ], }) -export class AppComponent {} +export class AppComponent { + darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); + isDarkTheme = signal(this.darkModeQuery.matches); + constructor() { + this.darkModeQuery.addEventListener('change', (event) => { + this.isDarkTheme.set(event.matches); + }); + } +} diff --git a/projects/angular-intl-demo/src/app/app.config.ts b/projects/angular-intl-demo/src/app/app.config.ts index bf8dbfe6..fe83d83b 100644 --- a/projects/angular-intl-demo/src/app/app.config.ts +++ b/projects/angular-intl-demo/src/app/app.config.ts @@ -1,14 +1,14 @@ import { provideHttpClient } from '@angular/common/http'; -import { ApplicationConfig, importProvidersFrom } from '@angular/core'; +import { ApplicationConfig } from '@angular/core'; import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field'; import { provideAnimations } from '@angular/platform-browser/animations'; -import { provideRouter } from '@angular/router'; -import { MarkdownModule } from 'ngx-markdown'; +import { provideRouter, withHashLocation } from '@angular/router'; +import { provideMarkdown } from 'ngx-markdown'; import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { providers: [ - importProvidersFrom(MarkdownModule.forRoot()), + provideMarkdown(), { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { @@ -17,6 +17,6 @@ export const appConfig: ApplicationConfig = { }, provideAnimations(), provideHttpClient(), - provideRouter(routes), + provideRouter(routes, withHashLocation()), ], }; diff --git a/projects/angular-intl-demo/src/assets/github-mark.png b/projects/angular-intl-demo/src/assets/github-mark.png new file mode 100644 index 0000000000000000000000000000000000000000..6cb3b705d018006a2bd4200ea94c9d5fb98b6f76 GIT binary patch literal 6393 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 Hu0mjfZ$b4` literal 0 HcmV?d00001 diff --git a/projects/angular-intl-demo/src/styles.scss b/projects/angular-intl-demo/src/styles.scss index 40fc9ca3..ab1edf6d 100644 --- a/projects/angular-intl-demo/src/styles.scss +++ b/projects/angular-intl-demo/src/styles.scss @@ -1,43 +1,43 @@ @use "@angular/material" as mat; +@use "@angular/material-experimental" as matx; @include mat.core(); -$light-theme: mat.define-light-theme( +$light-theme: matx.define-theme( ( color: ( - primary: mat.define-palette(mat.$deep-purple-palette), - accent: mat.define-palette(mat.$deep-orange-palette), + primary: matx.$m3-violet-palette, ), - typography: mat.define-typography-config(), - density: 0, ) ); -$dark-theme: mat.define-dark-theme( +$dark-theme: matx.define-theme( ( color: ( - primary: mat.define-palette(mat.$purple-palette), - accent: mat.define-palette(mat.$deep-orange-palette), + theme-type: dark, + primary: matx.$m3-magenta-palette, ), ) ); -@include mat.core-theme($light-theme); -@include mat.button-theme($light-theme); -@include mat.toolbar-theme($light-theme); -@include mat.tabs-theme($light-theme); -@include mat.select-theme($light-theme); -@include mat.input-theme($light-theme); -@include mat.form-field-theme($light-theme); +html { + @include mat.core-theme($light-theme); + @include mat.button-theme($light-theme); + @include mat.toolbar-theme($light-theme); + @include mat.tabs-theme($light-theme); + @include mat.select-theme($light-theme); + @include mat.input-theme($light-theme); + @include mat.form-field-theme($light-theme); -@media (prefers-color-scheme: dark) { - @include mat.core-color($dark-theme); - @include mat.button-color($dark-theme); - @include mat.toolbar-color($dark-theme); - @include mat.tabs-color($dark-theme); - @include mat.select-color($dark-theme); - @include mat.input-color($dark-theme); - @include mat.form-field-color($dark-theme); + @media (prefers-color-scheme: dark) { + @include mat.core-color($dark-theme); + @include mat.button-color($dark-theme); + @include mat.toolbar-color($dark-theme); + @include mat.tabs-color($dark-theme); + @include mat.select-color($dark-theme); + @include mat.input-color($dark-theme); + @include mat.form-field-color($dark-theme); + } } html,