From c279064d7a54df1a1bd384db2f6aa51e8d24c779 Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Mon, 7 Jul 2025 12:08:14 +0300 Subject: [PATCH 1/8] Edited headers as per the new design --- src/app/views/home/home.component.html | 164 ++++++++++++++++++++----- src/app/views/home/home.component.scss | 64 +++++++++- src/app/views/home/home.component.ts | 76 ++++++++++-- src/styles.scss | 3 +- 4 files changed, 267 insertions(+), 40 deletions(-) diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html index 4d71d41f..d7f9d3b6 100644 --- a/src/app/views/home/home.component.html +++ b/src/app/views/home/home.component.html @@ -1,42 +1,150 @@
-
-
- +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
-
- -
-
- -
-
- -
-
- + +
+ + + + +
+
- -
-
- {{ tabInfo.get(tabName)?.title }} - {{ tabInfo.get(tabName)?.theme }} + +
+
+
{{ tabInfo.get(tabName)?.title }}
+
{{ tabInfo.get(tabName)?.content }}
-
- {{ tabInfo.get(tabName)?.content }} -
-
- Learn more - + +
+
Theme: {{ tabInfo.get(tabName)?.theme }}
+
Mode: {{ tabInfo.get(tabName)?.themeMode }}
+
+ + + + + +
-
- Download sample. -
+ +
+
+ {{ tabInfo.get(tabName)?.title?.toUpperCase() }} +
+
+ diff --git a/src/app/views/home/home.component.scss b/src/app/views/home/home.component.scss index 5d277041..c43a67a3 100644 --- a/src/app/views/home/home.component.scss +++ b/src/app/views/home/home.component.scss @@ -35,7 +35,6 @@ $custom-icon-button-theme: icon-button-theme( .tab-container { width: 100%; - min-height: 132px; flex-shrink: 0; padding: 16px; display: flex; @@ -45,11 +44,13 @@ $custom-icon-button-theme: icon-button-theme( } .tab-item-container { + width: 100%; height: 100%; display: inline-flex; } .tab-item { + align-items: center; height: 100%; display: flex; flex-grow: 1; @@ -60,7 +61,6 @@ $custom-icon-button-theme: icon-button-theme( padding: 12px; cursor: pointer; user-select: none; - border-bottom: 1px solid var(--ig-gray-300); &--selected { border-bottom: 3px solid var(--ig-primary-500); @@ -161,3 +161,63 @@ $custom-icon-button-theme: icon-button-theme( font-family: "aktiv-grotesk", sans-serif; line-height: 20px; } + +.current-tab-info-wrapper { + width: 100%; + height: 90px; + padding: 20px 24px; + border: 1px solid #D6D6D6; +} + +.current-tab-info { + display: flex; + justify-content: space-between; + gap: 2rem; + + .sample-info { + height: 58px; + display: flex; + flex-direction: column; + row-gap: 8px; + } + + .tab-description { + font-weight: 300; + font-size: 12px; + line-height: 100%; + letter-spacing: 0%; + } + + .sample-actions { + display: flex; + gap: 8px; + align-items: center; + flex-wrap: wrap; + line-height: 100%; + font-size: 14px; + + .theme-info { + font-weight: 600; + letter-spacing: 0.15px; + height: 40px; + padding-right: 8px; + border-right: 1px solid #D6D6D6; + } + + .custom-button { + color: black !important; + border-color: #D6D6D6; + text-transform: unset; + + igx-icon { + color: black; + } + } + } + + .sample-actions > div { + display: flex; + gap: 0.5rem; + align-items: center; + } +} diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts index fc3c2f41..9133396f 100644 --- a/src/app/views/home/home.component.ts +++ b/src/app/views/home/home.component.ts @@ -1,58 +1,101 @@ import { Component, ViewEncapsulation } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { RouterLinkActive, RouterModule } from '@angular/router'; -import { IgxCardModule, IgxChipComponent, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxTabsModule, IgxTooltipModule } from 'igniteui-angular'; +import { Router, RouterLinkActive, RouterModule } from '@angular/router'; +import { IgxChipComponent, IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxTabsModule, IgxTooltipModule, THEME_TOKEN, ThemeToken, IgxIconService } from 'igniteui-angular'; + interface TabInfo { title: string; theme: string; + themeMode: string; content: string; moreLink: string; downloadLink: string; } +const fileDownloadIcon = ` + + + +`; + +const viewMoreIcon = ` + + + + + +`; + +const fullScreenIcon = ` + + + +`; + @Component({ standalone: true, selector: 'home-view', imports: [CommonModule, RouterModule, RouterLinkActive, IgxChipComponent, IgxIconComponent, - IgxRippleDirective, IgxIconButtonDirective, IgxTabsModule, IgxTooltipModule], + IgxRippleDirective, IgxButtonDirective, IgxIconButtonDirective, IgxTabsModule, IgxTooltipModule], templateUrl: './home.component.html', styleUrl: './home.component.scss', encapsulation: ViewEncapsulation.None }) export class HomeComponent { + + constructor( + private router: Router, + private iconService: IgxIconService + ) { + this.iconService.addSvgIconFromText('file_download', fileDownloadIcon, 'custom'); + this.iconService.addSvgIconFromText('view_more', viewMoreIcon, 'custom'); + this.iconService.addSvgIconFromText('fullscreen', fullScreenIcon, 'custom'); + } + public tabInfo = new Map([ ['inventory', { - title: "ERP/ Inventory", - theme: "Material Light", + title: "ERP/Inventory", + theme: "Material", + themeMode: 'Light', content: "Tracking and managing quantity, location and details of products in stock.", moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical-grid", downloadLink: "https://www.infragistics.com/resources/sample-applications/erp-inventory-sample-app" }], ['hr-portal', { title: "Org Chart/HR Portal", - theme: "Fluent Light", + theme: "Fluent", + themeMode: 'Light', content: "Displaying company's hierarchical structure and showing employees data.", moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid", downloadLink: "https://www.infragistics.com/resources/sample-applications/org-charthr-portal-sample-app" }], ['finance', { title: "Financial Portfolio", - theme: "Bootstrap Light", + theme: "Bootstrap", + themeMode: 'Light', content: "Asset tracking, profit and loss analysis, featuring interactive dynamic charts.", moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid", downloadLink: "https://www.infragistics.com/resources/sample-applications/financial-portfolio-sample-app" }], ['sales', { title: "Sales Dashboard", - theme: "Indigo Light", + theme: "Indigo", + themeMode: 'Light', content: "For trend analysis, KPIs and viewing sales summaries by region, product, etc.", moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotGrid/pivot-grid", downloadLink: "https://www.infragistics.com/resources/sample-applications/sales-grid-sample-app" }], ['fleet', { title: "Fleet Management", - theme: "Material Dark", + theme: "Material", + themeMode: 'Dark', content: "A master-detail grid for managing vehicle acquisition, operations, and maintenance.", moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/master-detail", downloadLink: "https://www.infragistics.com/resources/sample-applications/fleet-management-sample-app" @@ -74,4 +117,19 @@ export class HomeComponent { event.preventDefault(); event.stopPropagation(); } + + public onViewMoreClick(event: MouseEvent, tabName: string) { + const viewMoreLink = this.tabInfo.get(tabName)?.moreLink; + window.open(viewMoreLink, '_blank')?.focus(); + + event.preventDefault(); + event.stopPropagation(); + } + + public onFullscreenClick() { + const fullPath = this.router.url; + const trimmedPath = '/' + fullPath.split('/').slice(2).join('/'); + console.log(trimmedPath); + window.open(trimmedPath, '_blank'); + } } diff --git a/src/styles.scss b/src/styles.scss index 5fe9ff5f..635ce7bc 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,6 +1,7 @@ @use "igniteui-angular/theming" as *; -.tab-container { +.tabs-info-wrapper-element { + width: 100%; @include core(); @include typography( $font-family: $material-typeface, From 04e81690c6a02ecc8f70331b6405b2d8a9ae0768 Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Mon, 7 Jul 2025 12:15:14 +0300 Subject: [PATCH 2/8] Removed unused console logs --- src/app/views/home/home.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts index 9133396f..a83e0cc4 100644 --- a/src/app/views/home/home.component.ts +++ b/src/app/views/home/home.component.ts @@ -129,7 +129,6 @@ export class HomeComponent { public onFullscreenClick() { const fullPath = this.router.url; const trimmedPath = '/' + fullPath.split('/').slice(2).join('/'); - console.log(trimmedPath); window.open(trimmedPath, '_blank'); } } From 18feec96ecb552ebd340b535f424840282be700e Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Fri, 11 Jul 2025 16:08:16 +0300 Subject: [PATCH 3/8] Added Fullscreen mode to samples --- src/app/views/home/home.component.html | 26 ++++++--- src/app/views/home/home.component.scss | 19 +++++++ src/app/views/home/home.component.ts | 76 ++++++++++++++++++++------ 3 files changed, 95 insertions(+), 26 deletions(-) diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html index d7f9d3b6..c9f8958a 100644 --- a/src/app/views/home/home.component.html +++ b/src/app/views/home/home.component.html @@ -1,6 +1,6 @@ -
+
-
+
@@ -118,7 +124,7 @@ style="margin-right: 8px" (click)="onDownloadClick($event, tabName)" > - + Download @@ -132,9 +138,13 @@ View More -
diff --git a/src/app/views/home/home.component.scss b/src/app/views/home/home.component.scss index c43a67a3..a553fe91 100644 --- a/src/app/views/home/home.component.scss +++ b/src/app/views/home/home.component.scss @@ -26,6 +26,7 @@ $custom-icon-button-theme: icon-button-theme( } .router-container { + height: 100%; width: 100%; overflow: hidden; display: flex; @@ -221,3 +222,21 @@ $custom-icon-button-theme: icon-button-theme( align-items: center; } } + +:fullscreen { + width: 100vw; + height: 100vh; + overflow: auto; + display: block; +} + +:-webkit-full-screen { + width: 100vw; + height: 100vh; + overflow: auto; + background: white; +} + +:fullscreen .fullscreen-only-hide { + display: none; +} diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts index a83e0cc4..ddddf8e1 100644 --- a/src/app/views/home/home.component.ts +++ b/src/app/views/home/home.component.ts @@ -1,8 +1,7 @@ -import { Component, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectorRef, Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { Router, RouterLinkActive, RouterModule } from '@angular/router'; -import { IgxChipComponent, IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxTabsModule, IgxTooltipModule, THEME_TOKEN, ThemeToken, IgxIconService } from 'igniteui-angular'; - +import { RouterLinkActive, RouterModule } from '@angular/router'; +import { IgxChipComponent, IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxTabsModule, IgxTooltipModule, IgxIconService } from 'igniteui-angular'; interface TabInfo { title: string; @@ -39,6 +38,26 @@ const fullScreenIcon = ` `; +const exitFullScreenIcon = ` + + + + + + + + + + + + + + +`; + + @Component({ standalone: true, selector: 'home-view', @@ -50,15 +69,38 @@ const fullScreenIcon = ` }) export class HomeComponent { + @ViewChild('fullscreenElement') fullscreenElement!: ElementRef; + public isFullscreen: boolean = false; + constructor( - private router: Router, - private iconService: IgxIconService + private iconService: IgxIconService, + private cdr: ChangeDetectorRef ) { this.iconService.addSvgIconFromText('file_download', fileDownloadIcon, 'custom'); this.iconService.addSvgIconFromText('view_more', viewMoreIcon, 'custom'); this.iconService.addSvgIconFromText('fullscreen', fullScreenIcon, 'custom'); + this.iconService.addSvgIconFromText('exit_fullscreen', exitFullScreenIcon, 'custom'); + } + + ngOnInit() { + // Escaping fullscreen via the ESC button + document.addEventListener('fullscreenchange', () => { + this.isFullscreen = !!document.fullscreenElement; + this.cdr.detectChanges(); + }); + + // Entering and escaping fullscreen via F11 button + window.addEventListener('resize', () => { + const isFullscreen = window.innerWidth === screen.width && window.innerHeight === screen.height; + if (this.isFullscreen !== isFullscreen) { + this.isFullscreen = isFullscreen; + this.cdr.detectChanges(); + } + }); } + + public tabInfo = new Map([ ['inventory', { title: "ERP/Inventory", @@ -102,14 +144,6 @@ export class HomeComponent { }], ]); - public onLinkClick(event: MouseEvent) { - const targetHTML = event.currentTarget as HTMLAnchorElement; - window.open(targetHTML.href, '_blank')?.focus(); - - event.preventDefault(); - event.stopPropagation(); - } - public onDownloadClick(event: MouseEvent, tabName: string) { const downloadLink = this.tabInfo.get(tabName)?.downloadLink; window.open(downloadLink, '_blank')?.focus(); @@ -126,9 +160,15 @@ export class HomeComponent { event.stopPropagation(); } - public onFullscreenClick() { - const fullPath = this.router.url; - const trimmedPath = '/' + fullPath.split('/').slice(2).join('/'); - window.open(trimmedPath, '_blank'); + public onToggleFullscreen(): void { + const el = this.fullscreenElement.nativeElement; + + if (!document.fullscreenElement) { + el.requestFullscreen?.(); + this.isFullscreen = true; + } else { + document.exitFullscreen?.(); + this.isFullscreen = false; + } } } From e81dc9daec2028096fc838ef6d527c67f91bda9e Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Mon, 14 Jul 2025 17:41:27 +0300 Subject: [PATCH 4/8] Adding missing styles for hiding parts of the header on fullscreen --- src/app/views/home/home.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/views/home/home.component.scss b/src/app/views/home/home.component.scss index a553fe91..1ca61336 100644 --- a/src/app/views/home/home.component.scss +++ b/src/app/views/home/home.component.scss @@ -237,6 +237,6 @@ $custom-icon-button-theme: icon-button-theme( background: white; } -:fullscreen .fullscreen-only-hide { - display: none; +.hidden { + display: none !important; } From 3ace1e5fe8d036756772dfdba401b9865070b9ec Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Wed, 16 Jul 2025 10:17:27 +0300 Subject: [PATCH 5/8] Removed code repetition, improved styles, ssr compatibility changes --- src/app/views/home/home.component.html | 101 +++--------------------- src/app/views/home/home.component.scss | 36 +++++---- src/app/views/home/home.component.ts | 105 +++++++++---------------- 3 files changed, 72 insertions(+), 170 deletions(-) diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html index c9f8958a..87fc4fb0 100644 --- a/src/app/views/home/home.component.html +++ b/src/app/views/home/home.component.html @@ -1,105 +1,32 @@ -
+
-
-
- -
-
- -
-
- -
-
-
-
- - - - + + -
+ +
@@ -117,11 +44,10 @@
Theme: {{ tabInfo.get(tabName)?.theme }}
Mode: {{ tabInfo.get(tabName)?.themeMode }}
-
+