diff --git a/angular.json b/angular.json index 5f43003275..18ca0f7c01 100644 --- a/angular.json +++ b/angular.json @@ -51,6 +51,11 @@ "input": "./dist/core/locale/", "output": "./locale/libs_locale", "ignore": ["**/*.core.json"] + }, + { + "glob": "**/*", + "input": "./dist/core/theming/prebuilt-themes", + "output": "./assets/igo2/core/theming/prebuilt-themes" } ], "styles": ["projects/demo/src/styles.scss"], diff --git a/package-lock.json b/package-lock.json index 45fc5be355..935360d52f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,7 +44,6 @@ "hammerjs": "2.0.8", "html2canvas": "^1.4.1", "jspdf": "^2.5.1", - "jspdf-autotable": "^3.5.29", "jszip": "^3.10.1", "jwt-decode": "^4.0.0", "moment": "^2.29.4", @@ -9250,8 +9249,29 @@ "node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" + }, + "node_modules/color-parse": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.0.tgz", + "integrity": "sha512-g2Z+QnWsdHLppAbrpcFWo629kLOnOPtpxYV69GCqm92gqSgyXbzlfyN3MXs0412fPBkFmiuS+rXposgBgBa6Kg==", + "dependencies": { + "color-name": "^1.0.0" + } + }, + "node_modules/color-rgba": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/color-rgba/-/color-rgba-3.0.0.tgz", + "integrity": "sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==", + "dependencies": { + "color-parse": "^2.0.0", + "color-space": "^2.0.0" + } + }, + "node_modules/color-space": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-space/-/color-space-2.0.1.tgz", + "integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA==" }, "node_modules/color-support": { "version": "1.1.3", @@ -15524,6 +15544,7 @@ "version": "3.7.1", "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-3.7.1.tgz", "integrity": "sha512-5fgjqE8nIwUoNz5l/i/aD/uONKofE4yp/kJ097EKBllPVTPGnGV5OWHld30db3+CvNrgzrRl8gmTnKF6vag05g==", + "peer": true, "peerDependencies": { "jspdf": "^2.5.1" } @@ -25223,6 +25244,7 @@ "flexsearch": "0.7.21", "html2canvas": "^1.4.1", "jspdf": "^2.5.1", + "jspdf-autotable": "^3.5.29", "jszip": "^3.10.1", "moment": "^2.29.4", "ngx-color-picker": "^14.0.0", @@ -25297,7 +25319,7 @@ "@igo2/utils": "*", "core-js": "^3.32.2", "hammerjs": "^2.0.8", - "ol": "^7.5.2", + "ol": "^8.2.0", "rxjs": "^7.8.0", "tslib": "^2.6.0", "zone.js": "~0.13.1" @@ -25340,6 +25362,23 @@ "engines": { "node": ">=18.10.0" } + }, + "projects/igo2/node_modules/ol": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/ol/-/ol-8.2.0.tgz", + "integrity": "sha512-/m1ddd7Jsp4Kbg+l7+ozR5aKHAZNQOBAoNZ5pM9Jvh4Etkf0WGkXr9qXd7PnhmwiC1Hnc2Toz9XjCzBBvexfXw==", + "dependencies": { + "color-rgba": "^3.0.0", + "color-space": "^2.0.1", + "earcut": "^2.2.3", + "geotiff": "^2.0.7", + "pbf": "3.2.1", + "rbush": "^3.0.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/openlayers" + } } } } diff --git a/packages/common/ng-package.json b/packages/common/ng-package.json index 4a47c1e785..ddb1b18494 100644 --- a/packages/common/ng-package.json +++ b/packages/common/ng-package.json @@ -7,6 +7,7 @@ }, "allowedNonPeerDependencies": ["ts-cacheable"], "assets": [ + { "input": "src", "glob": "*.scss", "output": "src" }, { "input": "src", "glob": "**/*.them*.scss", "output": "src" }, { "input": "src/style", "glob": "**/*.scss", "output": "src/style" }, { "input": "src/assets", "glob": "**/*", "output": "assets" }, diff --git a/packages/common/ng-package.prod.json b/packages/common/ng-package.prod.json index c198162783..b03c1820e8 100644 --- a/packages/common/ng-package.prod.json +++ b/packages/common/ng-package.prod.json @@ -6,6 +6,7 @@ }, "allowedNonPeerDependencies": ["ts-cacheable"], "assets": [ + { "input": "src", "glob": "*.scss", "output": "src" }, { "input": "src", "glob": "**/*.them*.scss", "output": "src" }, { "input": "src/style", "glob": "**/*.scss", "output": "src/style" }, { "input": "src/assets", "glob": "**/*", "output": "assets" }, diff --git a/packages/common/package.json b/packages/common/package.json index f21eb005c7..98e9e7f0d4 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -30,7 +30,7 @@ "style": "./style/style.css" }, "./theming": { - "sass": "./common-theme.scss" + "sass": "./src/common-theme.scss" }, "./partial/*": { "sass": "./src/style/partial/*.scss" diff --git a/packages/context/ng-package.json b/packages/context/ng-package.json index 2222643af6..c29d6df26d 100644 --- a/packages/context/ng-package.json +++ b/packages/context/ng-package.json @@ -7,6 +7,7 @@ }, "allowedNonPeerDependencies": ["ts-md5"], "assets": [ + { "input": "src", "glob": "*.scss", "output": "src" }, { "input": "src", "glob": "**/*.them*.scss", "output": "src" }, { "input": "src/style", "glob": "**/*.scss", "output": "src/style" }, { "input": "src/assets", "glob": "**/*", "output": "assets" }, diff --git a/packages/context/ng-package.prod.json b/packages/context/ng-package.prod.json index 1716ff6d64..71ca40a450 100644 --- a/packages/context/ng-package.prod.json +++ b/packages/context/ng-package.prod.json @@ -6,6 +6,7 @@ }, "allowedNonPeerDependencies": ["ts-md5"], "assets": [ + { "input": "src", "glob": "*.scss", "output": "src" }, { "input": "src", "glob": "**/*.them*.scss", "output": "src" }, { "input": "src/style", "glob": "**/*.scss", "output": "src/style" }, { "input": "src/assets", "glob": "**/*", "output": "assets" }, diff --git a/packages/context/package.json b/packages/context/package.json index 0e46f7cc87..2cec1f7740 100644 --- a/packages/context/package.json +++ b/packages/context/package.json @@ -24,6 +24,9 @@ "exports": { ".": { "import": "./src/public_api.ts" + }, + "./theming": { + "sass": "./src/context-theme.scss" } }, "peerDependencies": { diff --git a/packages/core/ng-package.json b/packages/core/ng-package.json index cbaddd8f60..7314d3cc9c 100644 --- a/packages/core/ng-package.json +++ b/packages/core/ng-package.json @@ -10,7 +10,7 @@ { "input": "src", "glob": "*.scss", - "output": "", + "output": "src", "ignore": ["*.import.scss"] }, { "input": "src", "glob": "**/*.them*.scss", "output": "src" }, diff --git a/packages/core/ng-package.prod.json b/packages/core/ng-package.prod.json index 5439d9f87d..0ecfd9f9ac 100644 --- a/packages/core/ng-package.prod.json +++ b/packages/core/ng-package.prod.json @@ -9,7 +9,7 @@ { "input": "src", "glob": "*.scss", - "output": "", + "output": "src", "ignore": ["*.import.scss"] }, { "input": "src", "glob": "**/*.them*.scss", "output": "src" }, diff --git a/packages/core/package.json b/packages/core/package.json index 456b92bc72..82f9b0514a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -16,7 +16,7 @@ "url": "https://github.com/infra-geo-ouverte/igo2-lib/issues" }, "scripts": { - "prestart": "ts-node ../../scripts/src/core/prestart-core.ts", + "prestart": "npm run postbuild", "build": "ng build core --configuration production", "format": "prettier --write ./src/**/*.{ts,js,html,scss,css,json}", "postbuild": "ts-node ../../scripts/src/core/postbuild-core.ts", @@ -39,7 +39,7 @@ "sass": "./src/style/partial/*.scss" }, "./theming": { - "sass": "./core-theme.scss" + "sass": "./src/core-theme.scss" }, "./prebuilt-themes/*": { "style": "./theming/prebuilt-themes/*.css" diff --git a/packages/core/src/index.scss b/packages/core/src/index.scss index 728bc43496..b279596579 100644 --- a/packages/core/src/index.scss +++ b/packages/core/src/index.scss @@ -1,6 +1,4 @@ // Theme bundles -@forward './theming/all-theme' show all-component-themes; - @forward './theming/typography'; // Workaround to allow styles sharing in production where the folder structure is different. We replace the file in a postbuild operation diff --git a/packages/core/src/theming/prebuilt-themes/blue-theme.scss b/packages/core/src/theming/prebuilt-themes/blue-theme.scss index 981d4667d5..8d630f4d47 100644 --- a/packages/core/src/theming/prebuilt-themes/blue-theme.scss +++ b/packages/core/src/theming/prebuilt-themes/blue-theme.scss @@ -1,11 +1,12 @@ @use 'sass:map'; @use '@angular/material' as mat; -@use '../../index' as igo; +@use '../all-theme'; +@use '../typography'; $primary: mat.define-palette(mat.$blue-palette, 700, 400, 900); $accent: mat.define-palette(mat.$blue-palette, 200); $warn: mat.define-palette(mat.$red-palette); -$typography: igo.$igo-typography; +$typography: typography.$igo-typography; $theme: mat.define-light-theme( ( @@ -23,4 +24,4 @@ $theme: mat.define-light-theme( @include mat.typography-hierarchy($typography); @include mat.all-component-themes($theme); -@include igo.all-component-themes($theme); +@include all-theme.all-component-themes($theme); diff --git a/packages/core/src/theming/prebuilt-themes/bluedark-theme.scss b/packages/core/src/theming/prebuilt-themes/bluedark-theme.scss index 3b3c55c74b..ff4e5a5996 100644 --- a/packages/core/src/theming/prebuilt-themes/bluedark-theme.scss +++ b/packages/core/src/theming/prebuilt-themes/bluedark-theme.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '@angular/material' as mat; -@use '../../index' as igo; +@use '../all-theme'; +@use '../typography'; $bluedark-palette: ( 50: #e3eaec, @@ -38,7 +39,7 @@ $bluedark-palette: ( $primary: mat.define-palette($bluedark-palette, 500); $accent: mat.define-palette($bluedark-palette, 200); $warn: mat.define-palette(mat.$red-palette); -$typography: igo.$igo-typography; +$typography: typography.$igo-typography; $theme: mat.define-light-theme( ( @@ -56,4 +57,4 @@ $theme: mat.define-light-theme( @include mat.typography-hierarchy($typography); @include mat.all-component-themes($theme); -@include igo.all-component-themes($theme); +@include all-theme.all-component-themes($theme); diff --git a/packages/core/src/theming/prebuilt-themes/bluedq-theme.scss b/packages/core/src/theming/prebuilt-themes/bluedq-theme.scss index 1f2d175c4f..047dd618ff 100644 --- a/packages/core/src/theming/prebuilt-themes/bluedq-theme.scss +++ b/packages/core/src/theming/prebuilt-themes/bluedq-theme.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '@angular/material' as mat; -@use '../../index' as igo; +@use '../all-theme'; +@use '../typography'; $dq-palette: ( 50: #e1f5fd, @@ -38,7 +39,7 @@ $dq-palette: ( $primary: mat.define-palette($dq-palette, 900); $accent: mat.define-palette($dq-palette, 500); $warn: mat.define-palette(mat.$red-palette); -$typography: igo.$igo-typography; +$typography: typography.$igo-typography; $theme: mat.define-light-theme( ( @@ -56,4 +57,4 @@ $theme: mat.define-light-theme( @include mat.typography-hierarchy($typography); @include mat.all-component-themes($theme); -@include igo.all-component-themes($theme); +@include all-theme.all-component-themes($theme); diff --git a/packages/core/src/theming/prebuilt-themes/bluegrey-theme.scss b/packages/core/src/theming/prebuilt-themes/bluegrey-theme.scss index b4bad06560..893c0ae57f 100644 --- a/packages/core/src/theming/prebuilt-themes/bluegrey-theme.scss +++ b/packages/core/src/theming/prebuilt-themes/bluegrey-theme.scss @@ -1,10 +1,11 @@ @use '@angular/material' as mat; -@use '../../index' as igo; +@use '../all-theme'; +@use '../typography'; $primary: mat.define-palette(mat.$blue-grey-palette); $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); $warn: mat.define-palette(mat.$deep-orange-palette); -$typography: igo.$igo-typography; +$typography: typography.$igo-typography; $theme: mat.define-light-theme( ( @@ -22,4 +23,4 @@ $theme: mat.define-light-theme( @include mat.typography-hierarchy($typography); @include mat.all-component-themes($theme); -@include igo.all-component-themes($theme); +@include all-theme.all-component-themes($theme); diff --git a/packages/core/src/theming/prebuilt-themes/dark-theme.scss b/packages/core/src/theming/prebuilt-themes/dark-theme.scss index f08dee2645..c7c5413aac 100644 --- a/packages/core/src/theming/prebuilt-themes/dark-theme.scss +++ b/packages/core/src/theming/prebuilt-themes/dark-theme.scss @@ -1,10 +1,11 @@ @use '@angular/material' as mat; -@use '../../index' as igo; +@use '../all-theme'; +@use '../typography'; $primary: mat.define-palette(mat.$blue-grey-palette); $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); $warn: mat.define-palette(mat.$deep-orange-palette); -$typography: igo.$igo-typography; +$typography: typography.$igo-typography; $theme: mat.define-dark-theme( ( @@ -22,4 +23,4 @@ $theme: mat.define-dark-theme( @include mat.typography-hierarchy($typography); @include mat.all-component-themes($theme); -@include igo.all-component-themes($theme); +@include all-theme.all-component-themes($theme); diff --git a/packages/core/src/theming/prebuilt-themes/deeppurple-theme.scss b/packages/core/src/theming/prebuilt-themes/deeppurple-theme.scss index f7c8038ca2..715d3c5750 100644 --- a/packages/core/src/theming/prebuilt-themes/deeppurple-theme.scss +++ b/packages/core/src/theming/prebuilt-themes/deeppurple-theme.scss @@ -1,10 +1,11 @@ @use '@angular/material' as mat; -@use '../../index' as igo; +@use '../all-theme'; +@use '../typography'; $primary: mat.define-palette(mat.$deep-purple-palette); $accent: mat.define-palette(mat.$amber-palette, A200, A100, A400); $warn: mat.define-palette(mat.$red-palette); -$typography: igo.$igo-typography; +$typography: typography.$igo-typography; $theme: mat.define-light-theme( ( @@ -22,4 +23,4 @@ $theme: mat.define-light-theme( @include mat.typography-hierarchy($typography); @include mat.all-component-themes($theme); -@include igo.all-component-themes($theme); +@include all-theme.all-component-themes($theme); diff --git a/packages/core/src/theming/prebuilt-themes/indigo-theme.scss b/packages/core/src/theming/prebuilt-themes/indigo-theme.scss index 6ce14c7dd7..7a59b7b307 100644 --- a/packages/core/src/theming/prebuilt-themes/indigo-theme.scss +++ b/packages/core/src/theming/prebuilt-themes/indigo-theme.scss @@ -1,10 +1,11 @@ @use '@angular/material' as mat; -@use '../../index' as igo; +@use '../all-theme'; +@use '../typography'; $primary: mat.define-palette(mat.$indigo-palette); $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); $warn: mat.define-palette(mat.$red-palette); -$typography: igo.$igo-typography; +$typography: typography.$igo-typography; $theme: mat.define-light-theme( ( @@ -22,4 +23,4 @@ $theme: mat.define-light-theme( @include mat.typography-hierarchy($typography); @include mat.all-component-themes($theme); -@include igo.all-component-themes($theme); +@include all-theme.all-component-themes($theme); diff --git a/packages/core/src/theming/prebuilt-themes/orange-theme.scss b/packages/core/src/theming/prebuilt-themes/orange-theme.scss index 3c86d68d90..301d5c74e8 100644 --- a/packages/core/src/theming/prebuilt-themes/orange-theme.scss +++ b/packages/core/src/theming/prebuilt-themes/orange-theme.scss @@ -1,10 +1,11 @@ @use '@angular/material' as mat; -@use '../../index' as igo; +@use '../all-theme'; +@use '../typography'; $primary: mat.define-palette(mat.$orange-palette, 800); $accent: mat.define-palette(mat.$light-blue-palette, 600, 100, 800); $warn: mat.define-palette(mat.$red-palette, 600); -$typography: igo.$igo-typography; +$typography: typography.$igo-typography; $theme: mat.define-light-theme( ( @@ -22,4 +23,4 @@ $theme: mat.define-light-theme( @include mat.typography-hierarchy($typography); @include mat.all-component-themes($theme); -@include igo.all-component-themes($theme); +@include all-theme.all-component-themes($theme); diff --git a/packages/core/src/theming/prebuilt-themes/qcca-theme.scss b/packages/core/src/theming/prebuilt-themes/qcca-theme.scss index 7b3a332dc2..3f475f6223 100644 --- a/packages/core/src/theming/prebuilt-themes/qcca-theme.scss +++ b/packages/core/src/theming/prebuilt-themes/qcca-theme.scss @@ -1,6 +1,8 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../all-theme'; @use '../../' as igo; + @use './qcca'; // https://design.quebec.ca/a-propos-systeme-design @@ -37,7 +39,7 @@ $theme: map.merge( @include mat.typography-hierarchy(qcca.$typo-typography); @include mat.all-component-themes($theme); -@include igo.all-component-themes($theme); +@include all-theme.all-component-themes($theme); @include qcca.all-component-themes($theme); @media (max-width: 1200px) { diff --git a/packages/core/src/theming/prebuilt-themes/teal-theme.scss b/packages/core/src/theming/prebuilt-themes/teal-theme.scss index 0c1c176f5c..ed9eaf88cb 100644 --- a/packages/core/src/theming/prebuilt-themes/teal-theme.scss +++ b/packages/core/src/theming/prebuilt-themes/teal-theme.scss @@ -1,10 +1,11 @@ @use '@angular/material' as mat; -@use '../../index' as igo; +@use '../all-theme'; +@use '../typography'; $primary: mat.define-palette(mat.$teal-palette, 600, 400, 900); $accent: mat.define-palette(mat.$teal-palette, 400); $warn: mat.define-palette(mat.$red-palette); -$typography: igo.$igo-typography; +$typography: typography.$igo-typography; $theme: mat.define-light-theme( ( @@ -22,4 +23,4 @@ $theme: mat.define-light-theme( @include mat.typography-hierarchy($typography); @include mat.all-component-themes($theme); -@include igo.all-component-themes($theme); +@include all-theme.all-component-themes($theme); diff --git a/packages/geo/ng-package.json b/packages/geo/ng-package.json index 30eb05f03b..76b0764abc 100644 --- a/packages/geo/ng-package.json +++ b/packages/geo/ng-package.json @@ -15,6 +15,7 @@ "@turf/point-on-feature" ], "assets": [ + { "input": "src", "glob": "*.scss", "output": "src" }, { "input": "src", "glob": "**/*.them*.scss", "output": "src" }, { "input": "src/style", "glob": "**/*.scss", "output": "src/style" }, { "input": "src/assets", "glob": "**/*", "output": "assets" }, diff --git a/packages/geo/ng-package.prod.json b/packages/geo/ng-package.prod.json index 7499ac32f7..cfa43a3ca2 100644 --- a/packages/geo/ng-package.prod.json +++ b/packages/geo/ng-package.prod.json @@ -14,6 +14,7 @@ "@turf/point-on-feature" ], "assets": [ + { "input": "src", "glob": "*.scss", "output": "src" }, { "input": "src", "glob": "**/*.them*.scss", "output": "src" }, { "input": "src/style", "glob": "**/*.scss", "output": "src/style" }, { "input": "src/assets", "glob": "**/*", "output": "assets" }, diff --git a/packages/geo/package.json b/packages/geo/package.json index 472413c611..3a5dc9002f 100644 --- a/packages/geo/package.json +++ b/packages/geo/package.json @@ -30,7 +30,7 @@ "sass": "./style/style.scss" }, "./theming": { - "sass": "./geo-theme.scss" + "sass": "./src/geo-theme.scss" } }, "dependencies": { diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html index 2e181750a1..65e9efbcdc 100644 --- a/projects/demo/src/app/app.component.html +++ b/projects/demo/src/app/app.component.html @@ -30,6 +30,7 @@
{{ version.lib }}
Message Monitoring Request + Themes
diff --git a/projects/demo/src/app/app.module.ts b/projects/demo/src/app/app.module.ts index cdea5579d5..b695d5854f 100644 --- a/projects/demo/src/app/app.module.ts +++ b/projects/demo/src/app/app.module.ts @@ -44,6 +44,7 @@ import { AppMediaModule } from './core/media/media.module'; import { AppMessageModule } from './core/message/message.module'; import { MonitoringModule } from './core/monitoring/monitoring.module'; import { AppRequestModule } from './core/request/request.module'; +import { AppThemeModule } from './core/theme/theme.module'; import { AppCatalogModule } from './geo/catalog/catalog.module'; import { AppDirectionsModule } from './geo/directions/directions.module'; import { AppDrawModule } from './geo/draw/draw.module'; @@ -90,6 +91,7 @@ export const defaultTooltipOptions: MatTooltipDefaultOptions = { AppMediaModule, AppMessageModule, AppRequestModule, + AppThemeModule, AppActionModule, AppDialogModule, diff --git a/projects/demo/src/app/app.theme.scss b/projects/demo/src/app/app.theme.scss new file mode 100644 index 0000000000..ae19be7392 --- /dev/null +++ b/projects/demo/src/app/app.theme.scss @@ -0,0 +1,9 @@ +@use './components/components.theme' as components; + +@mixin themes($theme) { + @include components.themes($theme); +} + +@mixin colors($theme) { + @include components.colors($theme); +} diff --git a/projects/demo/src/app/components/components.theme.scss b/projects/demo/src/app/components/components.theme.scss new file mode 100644 index 0000000000..36ea2a6695 --- /dev/null +++ b/projects/demo/src/app/components/components.theme.scss @@ -0,0 +1,9 @@ +@use './doc-viewer/doc-viewer.theme' as doc-viewer; + +@mixin themes($theme) { + @include doc-viewer.theme($theme); +} + +@mixin colors($theme) { + @include doc-viewer.color($theme); +} diff --git a/projects/demo/src/app/components/doc-viewer/doc-viewer.component.scss b/projects/demo/src/app/components/doc-viewer/doc-viewer.component.scss index 51c7639fce..2ba9fe734a 100644 --- a/projects/demo/src/app/components/doc-viewer/doc-viewer.component.scss +++ b/projects/demo/src/app/components/doc-viewer/doc-viewer.component.scss @@ -29,7 +29,3 @@ } } } - -h6 { - color: rgba(0, 0, 0, 0.54); -} diff --git a/projects/demo/src/app/components/doc-viewer/doc-viewer.theme.scss b/projects/demo/src/app/components/doc-viewer/doc-viewer.theme.scss new file mode 100644 index 0000000000..08066484d6 --- /dev/null +++ b/projects/demo/src/app/components/doc-viewer/doc-viewer.theme.scss @@ -0,0 +1,18 @@ +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin theme($theme) { + @include color($theme); +} + +@mixin color($theme) { + $foreground: map.get($theme, foreground); + $primary: map.get($theme, primary); + $accent: map.get($theme, accent); + + app-doc-viewer { + h6 { + color: mat.get-color-from-palette($foreground, secondary-text); + } + } +} diff --git a/projects/demo/src/app/core/theme/theme-routing.module.ts b/projects/demo/src/app/core/theme/theme-routing.module.ts new file mode 100644 index 0000000000..12a398f5c0 --- /dev/null +++ b/projects/demo/src/app/core/theme/theme-routing.module.ts @@ -0,0 +1,12 @@ +import { RouterModule, Routes } from '@angular/router'; + +import { AppThemeComponent } from './theme.component'; + +const routes: Routes = [ + { + path: 'theme', + component: AppThemeComponent + } +]; + +export const AppRequestThemeModule = RouterModule.forChild(routes); diff --git a/projects/demo/src/app/core/theme/theme.component.html b/projects/demo/src/app/core/theme/theme.component.html new file mode 100644 index 0000000000..4959b18a35 --- /dev/null +++ b/projects/demo/src/app/core/theme/theme.component.html @@ -0,0 +1,19 @@ + +

Change the app theme

+ + +
+ + + + {{ theme.title }} + + Dark theme + + +
+ + diff --git a/projects/demo/src/app/core/theme/theme.component.scss b/projects/demo/src/app/core/theme/theme.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/projects/demo/src/app/core/theme/theme.component.ts b/projects/demo/src/app/core/theme/theme.component.ts new file mode 100644 index 0000000000..bcdce0aea2 --- /dev/null +++ b/projects/demo/src/app/core/theme/theme.component.ts @@ -0,0 +1,45 @@ +import { Component, Renderer2 } from '@angular/core'; +import { MatSelectChange } from '@angular/material/select'; + +import { LanguageService } from '@igo2/core'; +import { loadTheme } from '@igo2/utils'; + +@Component({ + selector: 'app-theme', + templateUrl: './theme.component.html', + styleUrls: ['./theme.component.scss'] +}) +export class AppThemeComponent { + isDark: boolean; + themes = [ + { value: 'blue', title: 'Blue' }, + { value: 'bluedark', title: 'Blue-dark' }, + { value: 'bluedq', title: 'Données Québec' }, + { value: 'bluegrey', title: 'Blue grey' }, + { value: 'dark', title: 'Dark' }, + { value: 'deeppurple', title: 'Purple' }, + { value: 'indigo', title: 'Indigo' }, + { value: 'orange', title: 'Orange' }, + { value: 'qcca', title: 'Québec.ca' }, + { value: 'teal', title: 'Teal' } + ]; + + constructor( + public languageService: LanguageService, + private renderer: Renderer2 + ) {} + + loadTheme(matSelectChange: MatSelectChange) { + if (matSelectChange.value === 'dark-demo-test') { + this.isDark = true; + this.renderer.addClass(document.body, 'dark-theme'); + return; + } + + if (this.isDark) { + this.renderer.removeClass(document.body, 'dark-theme'); + } + + loadTheme(window.document, matSelectChange.value + '-theme'); + } +} diff --git a/projects/demo/src/app/core/theme/theme.module.ts b/projects/demo/src/app/core/theme/theme.module.ts new file mode 100644 index 0000000000..e6fd5c299d --- /dev/null +++ b/projects/demo/src/app/core/theme/theme.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { MatSelectModule } from '@angular/material/select'; + +import { SharedModule } from '../../shared/shared.module'; +import { AppRequestThemeModule } from './theme-routing.module'; +import { AppThemeComponent } from './theme.component'; + +@NgModule({ + declarations: [AppThemeComponent], + imports: [AppRequestThemeModule, SharedModule, MatSelectModule], + exports: [AppThemeComponent] +}) +export class AppThemeModule {} diff --git a/projects/demo/src/app/geo/draw/draw.component.html b/projects/demo/src/app/geo/draw/draw.component.html index e34e39c073..6a926a2621 100644 --- a/projects/demo/src/app/geo/draw/draw.component.html +++ b/projects/demo/src/app/geo/draw/draw.component.html @@ -5,7 +5,9 @@ > - +
+ +
diff --git a/projects/demo/src/style/theme.scss b/projects/demo/src/style/theme.scss index 681028e21c..62c0ebb999 100644 --- a/projects/demo/src/style/theme.scss +++ b/projects/demo/src/style/theme.scss @@ -2,13 +2,15 @@ @use '@angular/material' as mat; @use '../../../../packages/core/src/index' as igo; +@use '../../../../packages/core/src/theming/all-theme'; +@use '../app/app.theme' as app; $primary: mat.define-palette(mat.$deep-purple-palette); $accent: mat.define-palette(mat.$amber-palette, A200, A100, A400); $warn: mat.define-palette(mat.$red-palette); $typography: igo.$igo-typography; -$theme-config: mat.define-light-theme( +$light-theme: mat.define-light-theme( ( color: ( primary: $primary, @@ -23,8 +25,9 @@ $theme-config: mat.define-light-theme( @include mat.core(); @include mat.typography-hierarchy($typography); -@include mat.all-component-themes($theme-config); -@include igo.all-component-themes($theme-config); +@include mat.all-component-themes($light-theme); +@include all-theme.all-component-themes($light-theme); +@include app.themes($light-theme); @mixin mat-toolbar($theme) { $density: mat.get-density-config($theme); @@ -38,5 +41,32 @@ $theme-config: mat.define-light-theme( @include mat.toolbar-density($theme); } +@include mat-toolbar($light-theme); -@include mat-toolbar($theme-config); +// @TODO un début de dark theme +// Define an alternate dark theme. +$dark-primary: mat.define-palette(mat.$blue-palette, 900); +$dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400); +$dark-warn: mat.define-palette(mat.$deep-orange-palette); + +// Define a dark theme +$dark-theme: mat.define-dark-theme( + ( + color: ( + primary: $dark-primary, + accent: $dark-accent, + warn: $dark-warn + ), + typography: $typography, + density: 0 + ) +); + +// Apply the dark theme only when the user prefers dark themes. +// @media (prefers-color-scheme: dark) { +.dark-theme { + @include mat.core-color($dark-theme); + @include mat.all-component-colors($dark-theme); + @include all-theme.all-component-themes($dark-theme); // @todo add the colors + @include app.colors($dark-theme); +}