Skip to content

Commit

Permalink
Add home view and routing so grids can be open in standalone view wit…
Browse files Browse the repository at this point in the history 
…hout tabs. (#56)
  • Loading branch information
@skrustev
skrustev authored Feb 6, 2025
1 parent 92bd615 commit f0dca65
Show file tree
Hide file tree
Showing 8 changed files with 310 additions and 311 deletions.
43 changes: 1 addition & 42 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1 @@
<div class="demo-container">
<div class="tab-container ">
<div class="tab-item-container" routerLink="inventory" routerLinkActive #tab1="routerLinkActive" >
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab1.isActive, tabName: 'inventory' }"></ng-container>
</div>
<div class="tab-item-container" routerLink="hr-portal" routerLinkActive #tab2="routerLinkActive" >
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab2.isActive, tabName: 'hr-portal' }"></ng-container>
</div>
<div class="tab-item-container" routerLink="finance" routerLinkActive #tab3="routerLinkActive" >
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab3.isActive, tabName: 'finance' }"></ng-container>
</div>
<div class="tab-item-container" routerLink="sales" routerLinkActive #tab4="routerLinkActive" >
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab4.isActive, tabName: 'sales' }"></ng-container>
</div>
<div class="tab-item-container" routerLink="fleet" routerLinkActive #tab5="routerLinkActive" >
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab5.isActive, tabName: 'fleet' }"></ng-container>
</div>
</div>
<div class="router-container">
<router-outlet></router-outlet>
</div>
</div>

<ng-template #tabItemTemplate let-enabled="enabled" let-tabName="tabName">
<div #tabItem class="tab-item" [ngClass]="{'tab-item--selected': enabled}">
<div class="tab-header" [ngClass]="{'tab-header--disabled': !enabled}">
{{ tabInfo.get(tabName)?.title }}
<igx-chip [disabled]="!enabled">{{ tabInfo.get(tabName)?.theme }}</igx-chip>
</div>
<div class="tab-content" [ngClass]="{'tab-content--disabled': !enabled}">
<span>{{ tabInfo.get(tabName)?.content }}</span>
</div>
<div class="tab-actions">
<a class="learn-text" href="{{ tabInfo.get(tabName)?.moreLink }}" (click)="onLinkClick($event)" [ngClass]="{'link--disabled': !enabled}">Learn more</a>
<button igxRipple [igxIconButton]="'contained'" [disabled]="!enabled" (click)="onDownloadClick($event, tabName)" [igxTooltipTarget]="tooltipRef"><igx-icon name="file_download" family="internal_indigo"></igx-icon></button>
</div>
</div>
</ng-template>

<div #tooltipRef="tooltip" igxTooltip>
Download app source.
</div>
<router-outlet></router-outlet>
139 changes: 0 additions & 139 deletions src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,145 +1,6 @@
@use "igniteui-angular/theming" as *;

$custom-icon-button-theme: icon-button-theme(
$background: #212121,
$foreground: #ffffff,
$disabled-background: #9e9e9e,
$disabled-foreground: #ffffff
);

:host {
display: block;
width: 100%;
height: 100%;
margin: auto;
}

.demo-container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
igx-chip {
--igx-chip-hover-background: var(--ig-gray-300);
--igx-chip-focus-background: var(--ig-gray-300);
}
}

.router-container {
width: 100%;
overflow: hidden;
display: flex;
flex: 1;
}

.tab-container {
width: 100%;
min-height: 132px;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}

.tab-item-container {
height: 100%;
display: inline-flex;
}

.tab-item {
height: 100%;
display: flex;
flex-grow: 1;
flex-basis: 0;
flex-direction: column;
justify-content: space-between;
gap: 8px;
padding: 12px;
cursor: pointer;
user-select: none;
border-bottom: 1px solid var(--ig-gray-300);

&--selected {
border-bottom: 3px solid var(--ig-primary-500);
}

&:hover {
background: hsl(from var(--ig-gray-100) h s l/0.5);
}
}

.tab-header {
display: flex;
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-medium);

&--disabled {
color: var(--ig-gray-700) !important;
}
}

.tab-content {
display: flex;
flex-direction: column;
gap: 4px;
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);
--disabled-icon-color: #ffffff;

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;
}
@include css-vars($custom-icon-button-theme);
}

.learn-text {
text-decoration: none;
color: var(--ig-primary-500);
font-size: 14px;
font-weight: 700;
font-family: "aktiv-grotesk", sans-serif;
line-height: 20px;
}
70 changes: 2 additions & 68 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,13 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterLinkActive, RouterModule } from '@angular/router';
import { IgxCardModule, IgxChipComponent, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxTabsModule, IgxTooltipDirective, IgxTooltipModule } from 'igniteui-angular';
import { RouterModule } from '@angular/router';

interface TabInfo {
title: string;
theme: string;
content: string;
moreLink: string;
downloadLink: string;
}
@Component({
selector: 'app-root',
imports: [CommonModule, RouterModule, IgxChipComponent, IgxIconComponent, IgxRippleDirective,
IgxIconButtonDirective, IgxTabsModule, IgxCardModule,RouterLinkActive, IgxTooltipModule ],
imports: [CommonModule, RouterModule ],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'GridDemos';
public tabInfo = new Map<string, TabInfo>([
['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: "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",
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.currentTarget as HTMLAnchorElement;
if (!targetHTML.className.includes("--disabled")) {
window.open(targetHTML.href, '_blank')?.focus();
}

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();
}
}
40 changes: 39 additions & 1 deletion src/app/app.routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,50 @@ import { HrPortalViewComponent } from './views/hr-portal/hr-portal-view.componen
import { FinanceViewComponent } from './views/finance/finance-view.component';
import { ErpHGridViewComponent } from './views/erp-hgrid/erp-hgrid-view.component';
import { FleetManagementViewComponent } from './views/fleet-management/fleet-management-view.component';
import { HomeComponent } from './views/home/home.component';

export const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'inventory'
redirectTo: 'home'
},
{
path: 'home',
title: "home",
component: HomeComponent,
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'inventory'
},
{
path: 'inventory',
title: "Inventory",
component: ErpHGridViewComponent
},
{
path: 'hr-portal',
title: "HR Portal",
component: HrPortalViewComponent
},
{
path: 'finance',
title: "Finance",
component: FinanceViewComponent
},
{
path: 'sales',
title: "Sales",
component: SalesViewComponent
},
{
path: 'fleet',
title: "Fleet Management",
component: FleetManagementViewComponent
}
]
},
{
path: 'inventory',
Expand Down
42 changes: 42 additions & 0 deletions src/app/views/home/home.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<div class="demo-container">
<div class="tab-container ">
<div class="tab-item-container" routerLink="inventory" routerLinkActive #tab1="routerLinkActive" >
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab1.isActive, tabName: 'inventory' }"></ng-container>
</div>
<div class="tab-item-container" routerLink="hr-portal" routerLinkActive #tab2="routerLinkActive" >
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab2.isActive, tabName: 'hr-portal' }"></ng-container>
</div>
<div class="tab-item-container" routerLink="finance" routerLinkActive #tab3="routerLinkActive" >
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab3.isActive, tabName: 'finance' }"></ng-container>
</div>
<div class="tab-item-container" routerLink="sales" routerLinkActive #tab4="routerLinkActive" >
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab4.isActive, tabName: 'sales' }"></ng-container>
</div>
<div class="tab-item-container" routerLink="fleet" routerLinkActive #tab5="routerLinkActive" >
<ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab5.isActive, tabName: 'fleet' }"></ng-container>
</div>
</div>
<div class="router-container">
<router-outlet></router-outlet>
</div>
</div>

<ng-template #tabItemTemplate let-enabled="enabled" let-tabName="tabName">
<div #tabItem class="tab-item" [ngClass]="{'tab-item--selected': enabled}">
<div class="tab-header" [ngClass]="{'tab-header--disabled': !enabled}">
{{ tabInfo.get(tabName)?.title }}
<igx-chip [disabled]="!enabled">{{ tabInfo.get(tabName)?.theme }}</igx-chip>
</div>
<div class="tab-content" [ngClass]="{'tab-content--disabled': !enabled}">
<span>{{ tabInfo.get(tabName)?.content }}</span>
</div>
<div class="tab-actions">
<a class="learn-text" href="{{ tabInfo.get(tabName)?.moreLink }}" (click)="onLinkClick($event)" [ngClass]="{'link--disabled': !enabled}">Learn more</a>
<button igxRipple [igxIconButton]="'contained'" [disabled]="!enabled" (click)="onDownloadClick($event, tabName)" [igxTooltipTarget]="tooltipRef"><igx-icon name="file_download" family="internal_indigo"></igx-icon></button>
</div>
</div>
</ng-template>

<div #tooltipRef="tooltip" igxTooltip>
Download sample.
</div>
Loading

0 comments on commit f0dca65

Please sign in to comment.