-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update to latest tabs design. General feedback tweaks to samples and …
…data. (#49)
- Loading branch information
Showing
11 changed files
with
275 additions
and
161 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
projects/finance-grid/src/app/finance-grid/finance-grid.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
.../fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
projects/sales-grid/src/app/sales-grid/sales-grid.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,42 @@ | ||
| <div class="demo-container"> | ||
| <div class="tab-container "> | ||
| <div class="tab-item" routerLink="inventory" routerLinkActive="tab-item--selected"> | ||
| <div class="tab-header"> | ||
| <igx-chip>Material Light</igx-chip> | ||
| ERP/Inventory | ||
| </div> | ||
| <div class="tab-content"> | ||
| <span>Inventory grid for tracking and managing the quantity, location, and details of products in stock, which also displays orders of each item.</span> | ||
| <div class="learn-text">Learn more</div> | ||
| </div> | ||
| </div> | ||
| <div class="tab-item" routerLink="hr-portal" routerLinkActive="tab-item--selected"> | ||
| <div class="tab-header"> | ||
| <igx-chip>Fluent Light</igx-chip> | ||
| HR Portal | ||
| </div> | ||
| <div class="tab-content"> | ||
| <span>An organizational chart outlining the company’s hierarchical structure, showing employees, their job titles, and direct reporting relationships.</span> | ||
| <div class="learn-text">Learn more</div> | ||
| </div> | ||
| </div> | ||
| <div class="tab-item" routerLink="finance" routerLinkActive="tab-item--selected"> | ||
| <div class="tab-header"> | ||
| <igx-chip>Bootstrap Light</igx-chip> | ||
| Finance | ||
| </div> | ||
| <div class="tab-content"> | ||
| <span>A real-time portfolio management system featuring asset tracking, profit and loss analyses, and interactive, dynamic charts.</span> | ||
| <div class="learn-text">Learn more</div> | ||
| </div> | ||
| </div> | ||
| <div class="tab-item" routerLink="sales" routerLinkActive="tab-item--selected"> | ||
| <div class="tab-header"> | ||
| <igx-chip>Indigo Light</igx-chip> | ||
| Sales | ||
| </div> | ||
| <div class="tab-content"> | ||
| <span>A sales summary by region, product, and time period, offering detailed trend analyses and key performance indicators (KPIs).</span> | ||
| <div class="learn-text">Learn more</div> | ||
| </div> | ||
| </div> | ||
| <div class="tab-item" routerLink="fleet" routerLinkActive="tab-item--selected"> | ||
| <div class="tab-header"> | ||
| <igx-chip>Material Dark</igx-chip> | ||
| Fleet Management | ||
| </div> | ||
| <div class="tab-content"> | ||
| <span>A master-detail grid for managing vehicle acquisition, operations, and maintenance, offering detailed tracking and performance insights.</span> | ||
| <div class="learn-text">Learn more</div> | ||
| </div> | ||
| <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> | ||
| <div class="router-container"> | ||
| <router-outlet></router-outlet> | ||
|
|
||
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,79 @@ | ||
| 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, IgxTooltipDirective, IgxTooltipModule } 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, IgxTooltipModule ], | ||
| 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(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,4 +11,5 @@ html { | |
|
|
||
| body { | ||
| height: 100%; | ||
| min-width: 1100px; | ||
| } | ||