diff --git a/src/app/data/icons.ts b/src/app/data/icons.ts new file mode 100644 index 00000000..832e1373 --- /dev/null +++ b/src/app/data/icons.ts @@ -0,0 +1,44 @@ +export const fileDownloadIcon = ` + + + +`; + +export const viewMoreIcon = ` + + + + + +`; + +export const fullScreenIcon = ` + + + +`; + +export const exitFullScreenIcon = ` + + + + + + + + + + + + + + +`; \ No newline at end of file diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html index 4d71d41f..87fc4fb0 100644 --- a/src/app/views/home/home.component.html +++ b/src/app/views/home/home.component.html @@ -1,42 +1,85 @@ -
-
-
- -
-
- -
-
- -
-
- -
-
- +
+
+
+
+ +
+ + + + + +
+
- -
-
- {{ 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..9b7c6f1b 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; @@ -35,7 +36,6 @@ $custom-icon-button-theme: icon-button-theme( .tab-container { width: 100%; - min-height: 132px; flex-shrink: 0; padding: 16px; display: flex; @@ -45,11 +45,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 +62,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 +162,87 @@ $custom-icon-button-theme: icon-button-theme( font-family: "aktiv-grotesk", sans-serif; line-height: 20px; } + +.current-tab-info { + display: flex; + justify-content: space-between; + gap: 2rem; + + width: 100%; + height: 90px; + padding: 20px 24px; + border: 1px solid #D6D6D6; + + + .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: 16px; + align-items: center; + line-height: 100%; + font-size: 14px; + + .theme-info { + font-weight: 600; + letter-spacing: 0.15px; + height: 40px; + padding-right: 16px; + border-right: 1px solid #D6D6D6; + } + + .action-buttons { + display: flex; + justify-content: space-between; + gap: 16px; + + .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; + } +} + +:fullscreen { + width: 100vw; + height: 100vh; + overflow: auto; + display: block; +} + +:-webkit-full-screen { + width: 100vw; + height: 100vh; + overflow: auto; + background: white; +} + +.hidden { + display: none !important; +} diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts index fc3c2f41..d0c19d5c 100644 --- a/src/app/views/home/home.component.ts +++ b/src/app/views/home/home.component.ts @@ -1,11 +1,13 @@ -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 { ChangeDetectorRef, Component, ElementRef, ViewChild, ViewEncapsulation, Inject, PLATFORM_ID } from '@angular/core'; +import { CommonModule, isPlatformBrowser } from '@angular/common'; +import { RouterLinkActive, RouterModule, Router } from '@angular/router'; +import { IgxButtonDirective, IgxIconComponent, IgxTabsModule, IgxTooltipModule, IgxIconService } from 'igniteui-angular'; +import { exitFullScreenIcon, fileDownloadIcon, fullScreenIcon, viewMoreIcon } from '../../data/icons'; interface TabInfo { title: string; theme: string; + themeMode: string; content: string; moreLink: string; downloadLink: string; @@ -14,64 +16,140 @@ interface TabInfo { @Component({ standalone: true, selector: 'home-view', - imports: [CommonModule, RouterModule, RouterLinkActive, IgxChipComponent, IgxIconComponent, - IgxRippleDirective, IgxIconButtonDirective, IgxTabsModule, IgxTooltipModule], + imports: [CommonModule, RouterModule, RouterLinkActive, IgxIconComponent, IgxButtonDirective, IgxTabsModule, IgxTooltipModule], templateUrl: './home.component.html', styleUrl: './home.component.scss', encapsulation: ViewEncapsulation.None }) export class HomeComponent { + + @ViewChild('fullscreenElement') fullscreenElement!: ElementRef; + public isFullscreen: boolean = false; + public tabs = [ + { key: 'inventory' }, + { key: 'hr-portal' }, + { key: 'finance' }, + { key: 'sales' }, + { key: 'fleet' } + ]; + + constructor( + private iconService: IgxIconService, + private cdr: ChangeDetectorRef, + public router: Router, + @Inject(PLATFORM_ID) private platformId: Object + ) { + 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(): void { + if (!isPlatformBrowser(this.platformId)) return; + + document.addEventListener('fullscreenchange', this.onFullscreenChange); + window.addEventListener('resize', this.onResize); + } + + ngOnDestroy(): void { + if (!isPlatformBrowser(this.platformId)) return; + + document.removeEventListener('fullscreenchange', this.onFullscreenChange); + window.removeEventListener('resize', this.onResize); + } + 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" }], ]); - public onLinkClick(event: MouseEvent) { - const targetHTML = event.currentTarget as HTMLAnchorElement; - window.open(targetHTML.href, '_blank')?.focus(); - + public onDownloadClick(event: MouseEvent, tabName: string) { event.preventDefault(); event.stopPropagation(); - } - public onDownloadClick(event: MouseEvent, tabName: string) { const downloadLink = this.tabInfo.get(tabName)?.downloadLink; - window.open(downloadLink, '_blank')?.focus(); + if (isPlatformBrowser(this.platformId) && downloadLink) { + window.open(downloadLink, '_blank')?.focus(); + } + } + + public onViewMoreClick(event: MouseEvent, tabName: string) { event.preventDefault(); event.stopPropagation(); + + const viewMoreLink = this.tabInfo.get(tabName)?.moreLink; + + if (isPlatformBrowser(this.platformId) && viewMoreLink) { + window.open(viewMoreLink, '_blank')?.focus(); + } } + + public async onToggleFullscreen(): Promise { + if (!isPlatformBrowser(this.platformId)) return; + + const el = this.fullscreenElement?.nativeElement; + + if (!document.fullscreenElement && el?.requestFullscreen) { + await el.requestFullscreen(); + this.isFullscreen = true; + } else if (document.exitFullscreen) { + await document.exitFullscreen(); + this.isFullscreen = false; + } + } + + // Escaping fullscreen via the ESC button + private onFullscreenChange = () => { + this.isFullscreen = !!document.fullscreenElement; + this.cdr.detectChanges(); + }; + + // Entering and escaping fullscreen via F11 button + private onResize = () => { + const isFullscreen = window.innerWidth === screen.width && window.innerHeight === screen.height; + if (this.isFullscreen !== isFullscreen) { + this.isFullscreen = isFullscreen; + this.cdr.detectChanges(); + } + }; } 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,