forked from NationalBankBelgium/stark
-
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.
feat(showcase): add demo table for tooltip
Closes NationalBankBelgium#1700
- Loading branch information
Showing
13 changed files
with
161 additions
and
0 deletions.
There are no files selected for viewing
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
1 change: 1 addition & 0 deletions
1
showcase/src/app/demo-ui/components/table-with-tooltip/index.ts
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 |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from "./table-with-tooltip.component"; |
4 changes: 4 additions & 0 deletions
4
showcase/src/app/demo-ui/components/table-with-tooltip/table-with-tooltip.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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
<stark-table [data]="data" [columnProperties]="columns" [filter]="filter"> | ||
<header><h1 class="mb0" translate>SHOWCASE.DEMO.TABLE.WITH_TOOLTIP</h1></header> | ||
</stark-table> | ||
|
20 changes: 20 additions & 0 deletions
20
showcase/src/app/demo-ui/components/table-with-tooltip/table-with-tooltip.component.scss
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 |
---|---|---|
@@ -0,0 +1,20 @@ | ||
.tooltip-info { | ||
border: 2px solid #ffa726; | ||
} | ||
.tooltip-high { | ||
color: #F00 !important; | ||
background-color: #ccc; | ||
} | ||
|
||
.tooltip-low { | ||
color: #360 !important; | ||
background-color: #ccc; | ||
} | ||
|
||
.tooltip-even { | ||
background-color: #888; | ||
} | ||
|
||
.tooltip-odd { | ||
background-color: #005ea0; | ||
} |
51 changes: 51 additions & 0 deletions
51
showcase/src/app/demo-ui/components/table-with-tooltip/table-with-tooltip.component.ts
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 |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import {Component, ViewEncapsulation} from "@angular/core"; | ||
import { StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui"; | ||
|
||
const DUMMY_DATA: object[] = [ | ||
{ id: 1, title: { label: "first title (value: 1)", value: 1 }, info: { label: "first info", tooltip: "this is first info" }, description: "number one" }, | ||
{ id: 10, title: { label: "second title (value: 2)", value: 2 }, info: { label: "second info", tooltip: "this is second info" }, description: "second description" }, | ||
{ id: 126, title: { label: "third title (value: 3)", value: 3 }, info: { label: "third info", tooltip: "this is third info" }, description: "the third description" }, | ||
{ id: 2, title: { label: "fourth title (value: 4)", value: 4 }, info: { label: "fourth info", tooltip: "this is fourth info" }, description: "description number four" }, | ||
{ id: 23, title: { label: "fifth title (value: 5)", value: 5 }, info: { label: "fifth info", tooltip: "this is fifth info" }, description: "fifth description" }, | ||
{ id: 3, title: { label: "sixth title (value: 6)", value: 6 }, info: { label: "sixth info", tooltip: "this is sixth info" }, description: "the sixth description" }, | ||
{ id: 112, title: { label: "seventh title (value: 7)", value: 7 }, info: { label: "seventh info", tooltip: "this is seventh info" }, description: "seventh description" }, | ||
{ id: 232, title: { label: "eighth title (value: 8)", value: 8 }, info: { label: "eighth info", tooltip: "this is eighth info" }, description: "description number eight" }, | ||
]; | ||
|
||
@Component({ | ||
selector: "showcase-table-with-tooltip", | ||
templateUrl: "./table-with-tooltip.component.html", | ||
styleUrls: ["./table-with-tooltip.component.scss"], | ||
/* tslint:disable-next-line:use-component-view-encapsulation */ | ||
encapsulation: ViewEncapsulation.None // Important | ||
}) | ||
export class TableWithTooltipComponent { | ||
public data: object[] = DUMMY_DATA; | ||
|
||
public columns: StarkTableColumnProperties[] = [ | ||
{ | ||
name: "id", | ||
label: "Id", | ||
cellTooltip: "This is the id", | ||
cellTooltipClassName: (id: number): string => id > 15 ? "tooltip-high" : "tooltip-low" | ||
}, | ||
{ | ||
name: "title", | ||
label: "SHOWCASE.DEMO.TABLE.LABELS.TITLE", | ||
cellFormatter: (value: { label: string }): string => "~" + value.label, | ||
cellTooltip: (title: { value: number }): string => "value is " + (title.value % 2 === 0 ? "even" : "odd"), | ||
cellTooltipClassName: (title: { value: number }): string => title.value % 2 === 0 ? "tooltip-even" : "tooltip-odd", | ||
cellTooltipPosition: "right" | ||
}, | ||
{ | ||
name: "info", | ||
label: "SHOWCASE.DEMO.TABLE.LABELS.EXTRA_INFO", | ||
cellFormatter: (value: { label: string }): string => value.label, | ||
cellTooltip: (info: { tooltip: string }): string => info.tooltip, | ||
cellTooltipClassName: "tooltip-info" | ||
}, | ||
{ name: "description", label: "SHOWCASE.DEMO.TABLE.LABELS.DESCRIPTION" } | ||
]; | ||
|
||
public filter: StarkTableFilter = { globalFilterPresent: false, columns: [] }; | ||
} |
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
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 |
---|---|---|
@@ -0,0 +1,4 @@ | ||
<stark-table [data]="data" [columnProperties]="columns" [filter]="filter"> | ||
<header><h1 class="mb0">Table with tooltip</h1></header> | ||
</stark-table> | ||
|
20 changes: 20 additions & 0 deletions
20
showcase/src/assets/examples/table/with-tooltip/table.scss
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 |
---|---|---|
@@ -0,0 +1,20 @@ | ||
.tooltip-info { | ||
border: 2px solid #ffa726; | ||
} | ||
.tooltip-high { | ||
color: #F00 !important; | ||
background-color: #ccc; | ||
} | ||
|
||
.tooltip-low { | ||
color: #360 !important; | ||
background-color: #ccc; | ||
} | ||
|
||
.tooltip-even { | ||
background-color: #888; | ||
} | ||
|
||
.tooltip-odd { | ||
background-color: #005ea0; | ||
} |
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 |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { Component, ViewEncapsulation } from "@angular/core"; | ||
import { StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui"; | ||
|
||
const DUMMY_DATA: object[] = [ | ||
{ id: 1, title: { label: "first title (value: 1)", value: 1 }, info: { label: "first info", tooltip: "this is first info" }, description: "number one" }, | ||
/* ... */ | ||
{ id: 232, title: { label: "eighth title (value: 8)", value: 8 }, info: { label: "eighth info", tooltip: "this is eighth info" }, description: "description number eight" }, | ||
]; | ||
|
||
@Component({ | ||
selector: "showcase-table-with-tooltip", | ||
templateUrl: "./table-with-tooltip.component.html", | ||
styleUrls: ["./table-with-tooltip.component.scss"], | ||
/* tslint:disable-next-line:use-component-view-encapsulation */ | ||
encapsulation: ViewEncapsulation.None // Important | ||
}) | ||
export class TableWithTooltipComponent { | ||
public data: object[] = DUMMY_DATA; | ||
|
||
public columns: StarkTableColumnProperties[] = [ | ||
{ | ||
name: "id", | ||
label: "Id", | ||
cellTooltip: "This is the id", | ||
cellTooltipClassName: (id: number): string => id > 15 ? "tooltip-high" : "tooltip-low" | ||
}, | ||
{ | ||
name: "title", | ||
label: "Title", | ||
cellFormatter: (value: { label: string }): string => "~" + value.label, | ||
cellTooltip: (title: { value: number }): string => "value is " + (title.value % 2 === 0) ? "even" : "odd", | ||
cellTooltipClassName: (title: { value: number }): string => title.value % 2 === 0 ? "tooltip-even" : "tooltip-odd", | ||
cellTooltipPosition: "right" | ||
}, | ||
{ | ||
name: "info", | ||
label: "Info", | ||
cellFormatter: (value: { label: string }): string => value.label, | ||
cellTooltip: (info: { tooltip: string }): string => info.tooltip, | ||
cellTooltipClassName: "tooltip-info" | ||
}, | ||
{ name: "description", label: "Description" } | ||
]; | ||
|
||
public filter: StarkTableFilter = { globalFilterPresent: false, columns: [] }; | ||
} |
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
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