From 8d2343ee77a366792fcfad22575e13ddc6b91e4b Mon Sep 17 00:00:00 2001 From: skrustev Date: Wed, 29 Jan 2025 13:30:20 +0200 Subject: [PATCH 1/8] Set toolbar title for all samples to match the sample. --- .../src/app/erp-hgrid-sample/erp-hgrid-sample.component.html | 2 +- .../src/app/finance-grid/finance-grid.component.html | 2 +- .../fleet-management-grid/fleet-management-grid.component.html | 2 +- projects/hr-portal/src/app/hr-portal/hr-portal.component.html | 2 +- .../sales-grid/src/app/sales-grid/sales-grid.component.html | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/projects/erp-hgrid/src/app/erp-hgrid-sample/erp-hgrid-sample.component.html b/projects/erp-hgrid/src/app/erp-hgrid-sample/erp-hgrid-sample.component.html index bccff8a..129e2a4 100644 --- a/projects/erp-hgrid/src/app/erp-hgrid-sample/erp-hgrid-sample.component.html +++ b/projects/erp-hgrid/src/app/erp-hgrid-sample/erp-hgrid-sample.component.html @@ -13,7 +13,7 @@ [moving]="true"> - Actions + Inventory diff --git a/projects/finance-grid/src/app/finance-grid/finance-grid.component.html b/projects/finance-grid/src/app/finance-grid/finance-grid.component.html index 18fe4ff..c89909d 100644 --- a/projects/finance-grid/src/app/finance-grid/finance-grid.component.html +++ b/projects/finance-grid/src/app/finance-grid/finance-grid.component.html @@ -1,6 +1,6 @@ - Actions + Portfolio diff --git a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html index 9ffe6dd..904f0c6 100644 --- a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html +++ b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html @@ -1,6 +1,6 @@ - Actions + Fleet Management + + + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 162703c..f6c547c 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -7,6 +7,7 @@ .demo-container { width: 100%; + height: 100%; display: flex; flex-direction: column; align-items: center; @@ -19,14 +20,15 @@ } .tab-container { - width: 1130px; - height: 208px; + width: 100%; + height: 132px; display: flex; flex-direction: row; justify-content: space-between; } .tab-item { + height: 132px; display: flex; flex-grow: 1; flex-basis: 0; @@ -40,7 +42,7 @@ &--selected { - border-bottom: 2px solid var(--ig-primary-500); + border-bottom: 3px solid var(--ig-primary-500); } &:hover { @@ -50,29 +52,65 @@ .tab-header { display: flex; - flex-direction: column; + flex-direction: row; gap: 8px; color: var(--ig-gray-900); font-size: 20px; font-weight: 600; line-height: 24px; letter-spacing: 0.15px; - --ig-size: var(--ig-size-small); + --ig-size: var(--ig-size-medium); + + &--disabled { + color: var(--ig-gray-700) !important; + } } .tab-content { display: flex; flex-direction: column; gap: 4px; - color: var(--ig-gray-700); + color: var(--ig-gray-900); font-size: 14px; font-weight: 400; font-family: "aktiv-grotesk", sans-serif; line-height: 20px; letter-spacing: 0.25px; + + &--disabled { + color: var(--ig-gray-700) !important; + } +} + +.tab-actions { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + --ig-size: var(--ig-size-small); + + a { + padding-bottom: 2px; + background: linear-gradient(0deg, var(--ig-primary-500), var(--ig-primary-500)) no-repeat right bottom / 0 var(--bg-h); + transition: background-size 350ms; + --bg-h: 2px; + + &:where(:hover, :focus-visible) { + background-size: 100% var(--bg-h); + background-position-x: left; + } + } + + .link--disabled { + color: var(--ig-primary-200); + background: none !important; + background-size: 0% var(--bg-h) !important; + } + } .learn-text { + text-decoration: none; color: var(--ig-primary-500); font-size: 14px; font-weight: 700; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 487ef48..02d380a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,14 +1,68 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { IgxChipComponent } from 'igniteui-angular'; +import { RouterLinkActive, RouterModule } from '@angular/router'; +import { IgxCardModule, IgxChipComponent, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxTabsModule } from 'igniteui-angular'; +interface TabInfo { + title: string; + theme: string; + content: string; + moreLink: string; + downloadLink: string; +} @Component({ selector: 'app-root', - imports: [CommonModule, RouterModule, IgxChipComponent], + imports: [CommonModule, RouterModule, IgxChipComponent, IgxIconComponent, IgxRippleDirective, IgxIconButtonDirective, IgxTabsModule, IgxCardModule,RouterLinkActive], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) export class AppComponent { title = 'GridDemos'; + public tabInfo = new Map([ + ['inventory', { + title: "ERP/Inventory", + theme: "Material Light", + content: "Tracking and managing quantity, location and details of products in stock.", + moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/erp-hgrid", + downloadLink: "" + }], + ['hr-portal', { + title: "HR Portal", + theme: "Fluent Light", + content: "Displaying company's hierarchical structure and showing employees data.", + moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/hr-portal", + downloadLink: "" + }], + ['finance', { + title: "Financial Portfolio", + theme: "Bootstrap Light", + content: "Asset tracking, profit and loss analysis, featuring interactive dynamic charts.", + moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/finance-grid", + downloadLink: "" + }], + ['sales', { + title: "Sales Dashboard", + theme: "Indigo Light", + content: "For trend analysis, KPIs and viewing sales summaries by region, product, etc.", + moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/sales-grid", + downloadLink: "" + }], + ['fleet', { + title: "Fleet Management", + theme: "Material Dark", + content: "A master-detail grid for managing vehicle acquisition, operations, and maintenance.", + moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/fleet-management-grid", + downloadLink: "" + }], + ]); + + public onLinkClick(event: MouseEvent) { + const targetHTML = event.target as HTMLAnchorElement; + if (!targetHTML.className.includes("--disabled")) { + window.open(targetHTML.href, '_blank')?.focus(); + } + + event.preventDefault(); + event.stopPropagation(); + } } diff --git a/src/styles.scss b/src/styles.scss index 87244d3..d09f3a5 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -11,4 +11,5 @@ html { body { height: 100%; + min-width: 1600px; } From 5647fce3a462da1589dcb4903b43525357764550 Mon Sep 17 00:00:00 2001 From: skrustev Date: Wed, 29 Jan 2025 20:19:29 +0200 Subject: [PATCH 5/8] Remove chip hover styles. Add download button handling and tooltip. --- src/app/app.component.html | 8 ++++++-- src/app/app.component.scss | 5 +++++ src/app/app.component.ts | 17 ++++++++++++++--- 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index c8858c0..b5bc2e7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -22,7 +22,7 @@ -
+
{{ tabInfo.get(tabName)?.title }} {{ tabInfo.get(tabName)?.theme }} @@ -32,7 +32,11 @@
View on GitHub - +
+ +
+ Download app source. +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index f6c547c..dba23c8 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -5,6 +5,11 @@ margin: auto; } +igx-chip { + --igx-chip-hover-background: var(--ig-gray-300); + --igx-chip-focus-background: var(--ig-gray-300); +} + .demo-container { width: 100%; height: 100%; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 02d380a..05dc6df 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { RouterLinkActive, RouterModule } from '@angular/router'; -import { IgxCardModule, IgxChipComponent, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxTabsModule } from 'igniteui-angular'; +import { IgxCardModule, IgxChipComponent, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxTabsModule, IgxTooltipDirective, IgxTooltipModule } from 'igniteui-angular'; interface TabInfo { title: string; @@ -12,7 +12,8 @@ interface TabInfo { } @Component({ selector: 'app-root', - imports: [CommonModule, RouterModule, IgxChipComponent, IgxIconComponent, IgxRippleDirective, IgxIconButtonDirective, IgxTabsModule, IgxCardModule,RouterLinkActive], + imports: [CommonModule, RouterModule, IgxChipComponent, IgxIconComponent, IgxRippleDirective, + IgxIconButtonDirective, IgxTabsModule, IgxCardModule,RouterLinkActive, IgxTooltipModule ], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) @@ -57,7 +58,7 @@ export class AppComponent { ]); public onLinkClick(event: MouseEvent) { - const targetHTML = event.target as HTMLAnchorElement; + const targetHTML = event.currentTarget as HTMLAnchorElement; if (!targetHTML.className.includes("--disabled")) { window.open(targetHTML.href, '_blank')?.focus(); } @@ -65,4 +66,14 @@ export class AppComponent { event.preventDefault(); event.stopPropagation(); } + + public onDownloadClick(event: MouseEvent, tabName: string) { + const targetHTML = event.currentTarget as HTMLAnchorElement; + if (!targetHTML.className.includes("--disabled")) { + console.log("Downloading app source!"); + } + + event.preventDefault(); + event.stopPropagation(); + } } From f42e9d0622ea151c742a8afc1ee2a6a1ab1c43b8 Mon Sep 17 00:00:00 2001 From: skrustev Date: Thu, 30 Jan 2025 12:36:35 +0200 Subject: [PATCH 6/8] Revert changes to download and learn buttons. --- src/app/app.component.html | 2 +- src/app/app.component.scss | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index b5bc2e7..feeeaa3 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -31,7 +31,7 @@ {{ tabInfo.get(tabName)?.content }}
- View on GitHub + Learn more
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index dba23c8..9e00958 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,8 +1,24 @@ +@use "igniteui-angular/theming" as *; + +$custom-icon-button-theme: icon-button-theme( + $background: #212121, + $foreground: #ffffff, + $disabled-background: #9e9e9e, + $disabled-foreground: #ffffff +); + +// Pass the css-vars to the `css-vars` mixin +@include css-vars($custom-icon-button-theme); + :host { display: block; width: 100%; height: 100%; margin: auto; + + ::ng-deep { + @include css-vars($custom-icon-button-theme); + } } igx-chip { From a0456f558f08de93659db2fa18cbd50465af8896 Mon Sep 17 00:00:00 2001 From: skrustev Date: Thu, 30 Jan 2025 13:06:43 +0200 Subject: [PATCH 7/8] Tweak tab title. --- src/app/app.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 05dc6df..9f464f7 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -28,7 +28,7 @@ export class AppComponent { downloadLink: "" }], ['hr-portal', { - title: "HR Portal", + title: "Org Chart/HR Portal", theme: "Fluent Light", content: "Displaying company's hierarchical structure and showing employees data.", moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/hr-portal", From b60663014033f4d01f378734b9e6561e70ba2394 Mon Sep 17 00:00:00 2001 From: skrustev Date: Thu, 30 Jan 2025 15:33:00 +0200 Subject: [PATCH 8/8] Increase tabs flexibility for lower width of window. --- src/app/app.component.html | 10 +++++----- src/app/app.component.scss | 11 ++++++++--- src/app/app.component.ts | 2 +- src/styles.scss | 2 +- 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index feeeaa3..1bf107b 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,18 +1,18 @@
-
+
-
+
-
+
-
+
-
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 9e00958..38890e9 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -42,19 +42,24 @@ igx-chip { .tab-container { width: 100%; - height: 132px; + min-height: 132px; display: flex; flex-direction: row; justify-content: space-between; } +.tab-item-container { + height: 100%; + display: inline-flex; +} + .tab-item { - height: 132px; + height: 100%; display: flex; flex-grow: 1; flex-basis: 0; flex-direction: column; - justify-content: space-evenly; + justify-content: space-between; gap: 8px; padding: 12px; cursor: pointer; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9f464f7..0c04cb5 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -21,7 +21,7 @@ export class AppComponent { title = 'GridDemos'; public tabInfo = new Map([ ['inventory', { - title: "ERP/Inventory", + title: "ERP/ Inventory", theme: "Material Light", content: "Tracking and managing quantity, location and details of products in stock.", moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/erp-hgrid", diff --git a/src/styles.scss b/src/styles.scss index d09f3a5..2d46450 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -11,5 +11,5 @@ html { body { height: 100%; - min-width: 1600px; + min-width: 1100px; }