From d697f5ab4fd2f6a84647edeac7662eecee1fd197 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 4 Jul 2024 16:40:36 +0300 Subject: [PATCH 1/3] refactor(calendar): migrate theme properties --- .../calendar-styling-sample.component.scss | 8 +++----- src/app/scheduling/calendar/themes/google.scss | 8 ++++---- .../datepicker-styling-sample.component.scss | 6 ++---- .../monthpicker-styling.component.scss | 7 ++----- src/app/theming/styles/themes.scss | 2 +- 5 files changed, 12 insertions(+), 19 deletions(-) diff --git a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss index 9e2b43086..3ba8f930f 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss +++ b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss @@ -8,7 +8,7 @@ .igx-calendar { --ig-size: 2; - + box-shadow: elevation(4); } @@ -21,10 +21,8 @@ $custom-calendar-theme: calendar-theme( $date-selected-foreground: #fdfdfd, $date-current-background: #fdfdfd, $navigation-hover-color: #345779, - $year-current-foreground: #2dabe8, - $year-hover-foreground: #2dabe8, - $month-current-foreground: #2dabe8, - $month-hover-foreground: #2dabe8, + $ym-current-foreground: #2dabe8, + $ym-hover-foreground: #2dabe8, $picker-foreground: #2dabe8, $picker-hover-foreground: #345779, ); diff --git a/src/app/scheduling/calendar/themes/google.scss b/src/app/scheduling/calendar/themes/google.scss index 473184a59..6eec3d316 100644 --- a/src/app/scheduling/calendar/themes/google.scss +++ b/src/app/scheduling/calendar/themes/google.scss @@ -14,8 +14,8 @@ $google-dark: calendar-theme( $date-current-foreground: $monte-carlo, $navigation-hover-color: $monte-carlo, $picker-hover-foreground: $monte-carlo, - $year-current-foreground: $monte-carlo, - $year-hover-foreground: $monte-carlo, - $month-current-foreground: $monte-carlo, - $month-hover-foreground: $monte-carlo + $ym-current-foreground: $monte-carlo, + $ym-hover-foreground: $monte-carlo, + $ym-current-foreground: $monte-carlo, + $ym-hover-foreground: $monte-carlo ); diff --git a/src/app/scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component.scss b/src/app/scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component.scss index 98785160b..4e1ee3618 100644 --- a/src/app/scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component.scss +++ b/src/app/scheduling/datepicker/datepicker-styling-sample/datepicker-styling-sample.component.scss @@ -14,10 +14,8 @@ $custom-datepicker-theme: calendar-theme( $date-selected-foreground: #fdfdfd, $date-current-background: #fdfdfd, $navigation-hover-color: #345779, - $year-current-foreground: #2dabe8, - $year-hover-foreground: #2dabe8, - $month-current-foreground: #2dabe8, - $month-hover-foreground: #2dabe8, + $ym-current-foreground: #2dabe8, + $ym-hover-foreground: #2dabe8, $picker-foreground: #2dabe8, $picker-hover-foreground: #345779, ); diff --git a/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss b/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss index 17875ce88..7e528a877 100644 --- a/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss +++ b/src/app/scheduling/monthpicker/monthpicker-styling/monthpicker-styling.component.scss @@ -11,11 +11,8 @@ $my-calendar-theme: calendar-theme( $content-background: #011627, $picker-background: #011627, - $month-current-foreground: #ecaa53, - $month-hover-background: #ecaa53, - - $year-current-foreground: #ecaa53, - $year-hover-background: #ecaa53, + $ym-current-foreground: #ecaa53, + $ym-hover-background: #ecaa53, $navigation-color: #ecaa53, $picker-hover-foreground: #d37b08, diff --git a/src/app/theming/styles/themes.scss b/src/app/theming/styles/themes.scss index 46435eac8..6dfc657a1 100644 --- a/src/app/theming/styles/themes.scss +++ b/src/app/theming/styles/themes.scss @@ -227,7 +227,7 @@ $light-calendar-theme: calendar-theme( $navigation-hover-color: color($light-theme-palette, "secondary", 100), $inactive-color: color($light-theme-palette, "secondary", 200), $picker-hover-foreground: color($light-theme-palette, "secondary", 100), - $year-current-foreground: color($light-theme-palette, "secondary", 500), + $ym-current-foreground: color($light-theme-palette, "secondary", 500), $weekend-color: color($light-theme-palette, "secondary", 500) ); From f3687dda838c70484ea66b6c8f95735cabe081d3 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 5 Jul 2024 15:29:39 +0300 Subject: [PATCH 2/3] feat(icons): add service sample --- live-editing/configs/IconConfigGenerator.ts | 13 +++++ .../data-display/data-display-routes-data.ts | 1 + .../data-display-routing.module.ts | 6 +++ src/app/data-display/data-display.module.ts | 4 ++ .../icon-service-sample.component.html | 18 +++++++ .../icon-service-sample.component.scss | 35 ++++++++++++++ .../icon-service-sample.component.ts | 47 +++++++++++++++++++ src/assets/images/icons/partly_cloudy.svg | 10 ++++ src/assets/images/icons/sunny.svg | 11 +++++ src/assets/images/icons/thunderstorms.svg | 8 ++++ 10 files changed, 153 insertions(+) create mode 100644 src/app/data-display/icon/icon-service-sample/icon-service-sample.component.html create mode 100644 src/app/data-display/icon/icon-service-sample/icon-service-sample.component.scss create mode 100644 src/app/data-display/icon/icon-service-sample/icon-service-sample.component.ts create mode 100644 src/assets/images/icons/partly_cloudy.svg create mode 100644 src/assets/images/icons/sunny.svg create mode 100644 src/assets/images/icons/thunderstorms.svg diff --git a/live-editing/configs/IconConfigGenerator.ts b/live-editing/configs/IconConfigGenerator.ts index 28e5b76ed..86fc48738 100644 --- a/live-editing/configs/IconConfigGenerator.ts +++ b/live-editing/configs/IconConfigGenerator.ts @@ -1,7 +1,9 @@ import { HttpClientModule } from '@angular/common/http'; import {IgxIconModule, +IgxAvatarModule, IgxInputGroupModule, IgxButtonModule, +IgxCardModule, IgxSelectModule} from 'igniteui-angular'; import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing' export class IconConfigGenerator implements IConfigGenerator { @@ -45,6 +47,17 @@ export class IconConfigGenerator implements IConfigGenerator { shortenComponentPathBy: "/data-display/icon/" })); + // Icon Service Sample + configs.push(new Config({ + component: 'IconServiceSampleComponent', + appModuleConfig: new AppModuleConfig({ + imports: ['IgxAvatarModule', 'IgxButtonModule', 'IgxCardModule', 'IgxIconModule', 'IconServiceSampleComponent'], + ngDeclarations: ['IconStylingSampleComponent'], + ngImports: ['IgxAvatarModule', 'IgxButtonModule', 'IgxCardModule', 'IgxIconModule'] + }), + shortenComponentPathBy: "/data-display/icon/" + })); + // Material Symbols Sample configs.push(new Config({ component: 'MaterialSymbolsComponent', diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts index 55a3c650e..7c3af9249 100644 --- a/src/app/data-display/data-display-routes-data.ts +++ b/src/app/data-display/data-display-routes-data.ts @@ -14,6 +14,7 @@ export const dataDisplayRoutesData = { "circular-indeterminate-progressbar": { displayName: "Circular Indeterminate Progressbar", parentName: "Circular Progressbar" }, "circular-styling-sample": { displayName: "Circular Styling Sample", parentName: "Circular Progressbar" }, "icon-sample-1": { displayName: "Simple Icons", parentName: "Icon" }, + "icon-service": { displayName: "Icon Service", parentName: "Icon" }, "icon-styling": { displayName: "Icon Styling", parentName: "Icon" }, "svg-icon-sample": { displayName: "SVG Icons", parentName: "Icon" }, "material-symbols": { displayName: "Material Symbols", parentName: "Icon" }, diff --git a/src/app/data-display/data-display-routing.module.ts b/src/app/data-display/data-display-routing.module.ts index 5f43c6cca..fffd9e95b 100644 --- a/src/app/data-display/data-display-routing.module.ts +++ b/src/app/data-display/data-display-routing.module.ts @@ -24,6 +24,7 @@ import { IconSample2Component } from './icon/icon-sample-2/icon-sample-2.compone import { IconSample3Component } from './icon/icon-sample-3/icon-sample-3.component'; import { IconSample4Component } from './icon/icon-sample-4/icon-sample-4.component'; import { IconSample5Component } from './icon/icon-sample-5/icon-sample-5.component'; +import { IconServiceSampleComponent } from './icon/icon-service-sample/icon-service-sample.component'; import { IconStylingSampleComponent } from './icon/icon-styling-sample/icon-styling-sample.component'; import { SvgIconSampleComponent } from './icon/svg-icon-sample/svg-icon-sample.component'; import { IgxForComponent } from './igxFor/igxFor.component'; @@ -208,6 +209,11 @@ export const dataDisplayRoutes: Routes = [ data: dataDisplayRoutesData['text-highlight-style'], path: 'text-highlight-style' }, + { + component: IconServiceSampleComponent, + data: dataDisplayRoutesData['icon-service'], + path: 'icon-service' + }, { component: IconStylingSampleComponent, data: dataDisplayRoutesData['icon-styling'], diff --git a/src/app/data-display/data-display.module.ts b/src/app/data-display/data-display.module.ts index b2adf5704..74552f69e 100644 --- a/src/app/data-display/data-display.module.ts +++ b/src/app/data-display/data-display.module.ts @@ -5,6 +5,7 @@ import { IgxAvatarModule, IgxBadgeModule, IgxButtonModule, + IgxCardModule, IgxChipsModule, IgxDropDownModule, IgxFilterModule, @@ -43,6 +44,7 @@ import { IconSample3Component } from './icon/icon-sample-3/icon-sample-3.compone import { IconSample4Component } from './icon/icon-sample-4/icon-sample-4.component'; import { IconSample5Component } from './icon/icon-sample-5/icon-sample-5.component'; import { IconStylingSampleComponent } from './icon/icon-styling-sample/icon-styling-sample.component'; +import { IconServiceSampleComponent } from './icon/icon-service-sample/icon-service-sample.component'; import { SvgIconSampleComponent } from './icon/svg-icon-sample/svg-icon-sample.component'; import { IgxForComponent } from './igxFor/igxFor.component'; import { IgxForHorizontalComponent } from './igxFor/igxFor-horizontal-sample/igxFor-horizontal.component'; @@ -90,6 +92,7 @@ import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbo IconSample4Component, IconSample5Component, IconStylingSampleComponent, + IconServiceSampleComponent, SvgIconSampleComponent, IgxForComponent, IgxForHorizontalComponent, @@ -120,6 +123,7 @@ import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbo IgxAvatarModule, IgxBadgeModule, IgxListModule, + IgxCardModule, IgxChipsModule, IgxDropDownModule, IgxFocusModule, diff --git a/src/app/data-display/icon/icon-service-sample/icon-service-sample.component.html b/src/app/data-display/icon/icon-service-sample/icon-service-sample.component.html new file mode 100644 index 000000000..7fffefee3 --- /dev/null +++ b/src/app/data-display/icon/icon-service-sample/icon-service-sample.component.html @@ -0,0 +1,18 @@ +
+ + + + + +

{{ status }}

+
Current Weather
+ + + + + + +
diff --git a/src/app/data-display/icon/icon-service-sample/icon-service-sample.component.scss b/src/app/data-display/icon/icon-service-sample/icon-service-sample.component.scss new file mode 100644 index 000000000..9d15d0b2e --- /dev/null +++ b/src/app/data-display/icon/icon-service-sample/icon-service-sample.component.scss @@ -0,0 +1,35 @@ +@use "../../../../variables" as *; + +.wrapper { + display: flex; + flex-flow: row wrap; + margin: rem(16px) 0; +} + +igx-card { + position: relative; + z-index: 0; + min-width: rem(320px); +} + +igx-avatar { + z-index: 1; + --ig-size: var(--ig-size-medium); + --background: hsla(var(--ig-secondary-500), 6%); + border: 1px solid hsl(var(--ig-secondary-500)); + border-radius: rem(4px); + + igx-icon { + --size: #{rem(48px)}; + color: hsl(var(--ig-secondary-500)); + } +} + +igx-icon[backdrop] { + --size: #{rem(128px)}; + inset-block: rem(18px); + inset-inline: calc(100% - var(--size)); + z-index: -1; + position: absolute; + color: hsl(var(--ig-gray-300)); +} diff --git a/src/app/data-display/icon/icon-service-sample/icon-service-sample.component.ts b/src/app/data-display/icon/icon-service-sample/icon-service-sample.component.ts new file mode 100644 index 000000000..3fae3cf1d --- /dev/null +++ b/src/app/data-display/icon/icon-service-sample/icon-service-sample.component.ts @@ -0,0 +1,47 @@ +import { Component } from '@angular/core'; +import { IgxIconService } from 'igniteui-angular'; + +@Component({ + selector: 'app-icon-service-sample', + styleUrls: ['./icon-service-sample.component.scss'], + templateUrl: './icon-service-sample.component.html' +}) +export class IconServiceSampleComponent { + private weather = [{ + icon: 'partly_cloudy', + description: '18° Partly Cloudy' + }, + { + icon: 'sunny', + description: '23° Sunny' + }, + { + icon: 'thunderstorms', + description: '15° Thunderstorms' + }]; + + protected get status() { + return this.weather.at(0).description + }; + + constructor(private iconService: IgxIconService) { + // Add the SVG assets to the icon service collection + this.iconService.addSvgIcon('partly_cloudy', 'assets/images/icons/partly_cloudy.svg', 'weather'); + this.iconService.addSvgIcon('sunny', 'assets/images/icons/sunny.svg', 'weather'); + this.iconService.addSvgIcon('thunderstorms', 'assets/images/icons/thunderstorms.svg', 'weather'); + + this.iconService.addIconRef('weather_status', 'default', { + name: 'partly_cloudy', + family: 'weather' + }); + } + + protected updateWeather() { + this.weather.unshift(this.weather.pop()); + + this.iconService.setIconRef('weather_status', 'default', { + name: this.weather.at(0).icon, + family: 'weather' + }); + } +} diff --git a/src/assets/images/icons/partly_cloudy.svg b/src/assets/images/icons/partly_cloudy.svg new file mode 100644 index 000000000..08ec91df3 --- /dev/null +++ b/src/assets/images/icons/partly_cloudy.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/icons/sunny.svg b/src/assets/images/icons/sunny.svg new file mode 100644 index 000000000..ac5a83f11 --- /dev/null +++ b/src/assets/images/icons/sunny.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/images/icons/thunderstorms.svg b/src/assets/images/icons/thunderstorms.svg new file mode 100644 index 000000000..d29d48577 --- /dev/null +++ b/src/assets/images/icons/thunderstorms.svg @@ -0,0 +1,8 @@ + + + + + + + + From c69248d475db1ba35285d6ad8509d3c69a3da04a Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Fri, 5 Jul 2024 18:08:27 +0300 Subject: [PATCH 3/3] chore(*): updating samples underlying ng version --- package-lock.json | 30 +++++++++++++++--------------- package.json | 2 +- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index b9ebadaa8..9e453ed69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "bootstrap": "5.3.2", "file-saver": "^2.0.2", "hammerjs": "^2.0.8", - "igniteui-angular": "^18.0.0", + "igniteui-angular": "^18.1.0-alpha.1", "igniteui-angular-charts": "^17.2.1", "igniteui-angular-core": "^17.2.1", "igniteui-angular-extras": "^18.0.4", @@ -12551,13 +12551,13 @@ ] }, "node_modules/igniteui-angular": { - "version": "18.0.0", - "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-18.0.0.tgz", - "integrity": "sha512-m6hGPSns0QaG/CXu3YQyQ1lYs9d8J1neMnhJihJpxc7sfaqJmS4/ZTshnhYlXsjyvkXMPyFDQbLtuADLp5xGOA==", + "version": "18.1.0-alpha.1", + "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-18.1.0-alpha.1.tgz", + "integrity": "sha512-CoWDnzLZ9i+w4jRB32xaaR73UmnWW+0gls40Muo7mZcD4ns1fGDTHelqE7ohizHT/tcEv00DSnzgiLtRzwYoGw==", "dependencies": { "@igniteui/material-icons-extended": "^3.0.0", "fflate": "^0.8.1", - "igniteui-theming": "^7.1.0", + "igniteui-theming": "^9.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "tslib": "^2.3.0", @@ -12647,9 +12647,9 @@ "integrity": "sha512-7zDG3xFPYqcjyOCdR9JuiDh+xX3pJEMqMP2qVV/3t1NjeojcZEWEaYW8OKzDzowEttPrj7UnjAqxXOIMbRTz6Q==" }, "node_modules/igniteui-theming": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-7.1.0.tgz", - "integrity": "sha512-fXXAdI+uBmFGv98kP8oK/TN6il7ByAR/KjpFyf6+LzCjqy20Y1BgMM+erkg/iVgmTbzLv1vjCMxduRLgn2hNAg==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-9.0.0.tgz", + "integrity": "sha512-Y6teKh2jruvQFdwJUlDVRkGiMuLw7KTpT7PJ5gSiY8ZQOO/Fz1D/3upm+MWodMs/jY5a+ms9JAag1OBgh1x4Tg==", "peerDependencies": { "sass": "^1.58.1" } @@ -31018,13 +31018,13 @@ "dev": true }, "igniteui-angular": { - "version": "18.0.0", - "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-18.0.0.tgz", - "integrity": "sha512-m6hGPSns0QaG/CXu3YQyQ1lYs9d8J1neMnhJihJpxc7sfaqJmS4/ZTshnhYlXsjyvkXMPyFDQbLtuADLp5xGOA==", + "version": "18.1.0-alpha.1", + "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-18.1.0-alpha.1.tgz", + "integrity": "sha512-CoWDnzLZ9i+w4jRB32xaaR73UmnWW+0gls40Muo7mZcD4ns1fGDTHelqE7ohizHT/tcEv00DSnzgiLtRzwYoGw==", "requires": { "@igniteui/material-icons-extended": "^3.0.0", "fflate": "^0.8.1", - "igniteui-theming": "^7.1.0", + "igniteui-theming": "^9.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "tslib": "^2.3.0", @@ -31082,9 +31082,9 @@ "integrity": "sha512-7zDG3xFPYqcjyOCdR9JuiDh+xX3pJEMqMP2qVV/3t1NjeojcZEWEaYW8OKzDzowEttPrj7UnjAqxXOIMbRTz6Q==" }, "igniteui-theming": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-7.1.0.tgz", - "integrity": "sha512-fXXAdI+uBmFGv98kP8oK/TN6il7ByAR/KjpFyf6+LzCjqy20Y1BgMM+erkg/iVgmTbzLv1vjCMxduRLgn2hNAg==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-9.0.0.tgz", + "integrity": "sha512-Y6teKh2jruvQFdwJUlDVRkGiMuLw7KTpT7PJ5gSiY8ZQOO/Fz1D/3upm+MWodMs/jY5a+ms9JAag1OBgh1x4Tg==", "requires": {} }, "igniteui-trial-watermark": { diff --git a/package.json b/package.json index caf6fdb57..f070fd0f2 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "bootstrap": "5.3.2", "file-saver": "^2.0.2", "hammerjs": "^2.0.8", - "igniteui-angular": "^18.0.0", + "igniteui-angular": "^18.1.0-alpha.1", "igniteui-angular-charts": "^17.2.1", "igniteui-angular-core": "^17.2.1", "igniteui-angular-extras": "^18.0.4",