This is an automated email from the ASF dual-hosted git repository.
scottyaslan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/nifi-fds.git
The following commit(s) were added to refs/heads/master by this push:
new cfdfcdf [NIFI-6449] - UI FDS DemoApp - Add links to components for
direct navigation
cfdfcdf is described below
commit cfdfcdf81504daae33bcef3b4bc727d4e3a88638
Author: Rob Fellows <[email protected]>
AuthorDate: Wed Jul 17 16:51:25 2019 -0400
[NIFI-6449] - UI FDS DemoApp - Add links to components for direct navigation
This closes #36
Signed-off-by: Scott Aslan <[email protected]>
---
webapp/components/flow-design-system/fds-demo.html | 50 +++++++++++-----------
webapp/theming/fds-demo.scss | 5 +++
2 files changed, 30 insertions(+), 25 deletions(-)
diff --git a/webapp/components/flow-design-system/fds-demo.html
b/webapp/components/flow-design-system/fds-demo.html
index 7896637..61ec607 100644
--- a/webapp/components/flow-design-system/fds-demo.html
+++ b/webapp/components/flow-design-system/fds-demo.html
@@ -31,7 +31,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Setup</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Setup">Setup <mat-icon
class="link-to-component" routerLink="/"
fragment="Setup">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<p>Import the FDS Core NgModule into your AppModule</p>
@@ -70,7 +70,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Typography</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Typography">Typography
<mat-icon class="link-to-component" routerLink="/"
fragment="Typography">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<p class="mat-body-1">FDS provides typography CSS classes you
can use to create visual consistency across your application. Optionally style
tags with the classes shown below:</p>
@@ -140,7 +140,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Raised
Buttons</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="RaisedButtons">Raised
Buttons <mat-icon class="link-to-component" routerLink="/"
fragment="RaisedButtons">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<p>Tip: Use UPPERCASE text for 1-2 words, and Titlecase text
for 3+ words.</p>
@@ -187,7 +187,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Flat Buttons</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="FlatButtons">Flat
Buttons <mat-icon class="link-to-component" routerLink="/"
fragment="FlatButtons">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<mat-card-actions>
@@ -219,7 +219,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Fab Buttons</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="FabButtons">Fab Buttons
<mat-icon class="link-to-component" routerLink="/"
fragment="FabButtons">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<mat-card-actions class="pad-left-sm">
@@ -247,7 +247,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Button
Toggles</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="ButtonToggles">Button
Toggles <mat-icon class="link-to-component" routerLink="/"
fragment="ButtonToggles">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<mat-button-toggle-group name="alignment">
@@ -387,7 +387,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Input</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Input">Input <mat-icon
class="link-to-component" routerLink="/"
fragment="Input">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<form>
@@ -558,7 +558,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Tabs</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Tabs">Tabs <mat-icon
class="link-to-component" routerLink="/"
fragment="Tabs">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<mat-tab-group dynamicHeight>
@@ -594,7 +594,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Autocomplete</mat-card-title>
+ <mat-card-title class="pad-bottom-sm"
id="Autocomplete">Autocomplete <mat-icon class="link-to-component"
routerLink="/" fragment="Autocomplete">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<div class="pad-top-sm" layout="row">
@@ -711,7 +711,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Filter</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Filter">Filter <mat-icon
class="link-to-component" routerLink="/"
fragment="Filter">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<h3 class="mat-title">Autocomplete with chips and no custom
inputs</h3>
@@ -839,7 +839,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Searchable/Filterable
Expansion Panels</mat-card-title>
+ <mat-card-title class="pad-bottom-sm"
id="SearchableExpansionPanels">Searchable/Filterable Expansion Panels <mat-icon
class="link-to-component" routerLink="/"
fragment="SearchableExpansionPanels">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<mat-tab-group mat-stretch-tabs>
@@ -1404,7 +1404,7 @@ limitations under the License.
<mat-divider></mat-divider>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Table</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Table">Table <mat-icon
class="link-to-component" routerLink="/"
fragment="Table">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<p>Example table with: Paging Bar / Filter / Sortable Columns
/ Multi-select with available Actions</p>
@@ -2060,7 +2060,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Radios</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Radios">Radios <mat-icon
class="link-to-component" routerLink="/"
fragment="Radios">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content layout="row">
<div flex="48" class="pad-right">
@@ -2124,7 +2124,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Tooltips</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Tooltips">Tooltips
<mat-icon class="link-to-component" routerLink="/"
fragment="Tooltips">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<button mat-raised-button color="fds-primary" matTooltip="I
show above" matTooltipPosition="above" class="text-upper">Above Tooltip</button>
@@ -2144,7 +2144,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Panels</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Panels">Panels <mat-icon
class="link-to-component" routerLink="/"
fragment="Panels">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<h3 class="mat-title">Standard Card</h3>
@@ -2270,7 +2270,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Select</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Select">Select <mat-icon
class="link-to-component" routerLink="/"
fragment="Select">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<form>
@@ -2318,7 +2318,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Menus
(dropdowns)</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Menus">Menus (dropdowns)
<mat-icon class="link-to-component" routerLink="/"
fragment="Menus">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<button mat-icon-button [matMenuTriggerFor]="menu">
@@ -2440,7 +2440,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Dialog</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Dialog">Dialog <mat-icon
class="link-to-component" routerLink="/"
fragment="Dialog">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<button mat-raised-button color="fds-primary"
(click)="openDialog()">Show simple dialog</button>
@@ -2488,7 +2488,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Simple
Dialogs</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="SimpleDialogs">Simple
Dialogs <mat-icon class="link-to-component" routerLink="/"
fragment="SimpleDialogs">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<div class="pad-left-sm">
@@ -2527,7 +2527,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Snack Bars</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="SnackBars">Snack Bars
<mat-icon class="link-to-component" routerLink="/"
fragment="SnackBars">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<button mat-raised-button color="fds-primary"
(click)="showSuccessSnackBar()">Success Snack Bar</button>
@@ -2611,7 +2611,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Expansion
Panels</mat-card-title>
+ <mat-card-title class="pad-bottom-sm"
id="ExpansionPanels">Expansion Panels <mat-icon class="link-to-component"
routerLink="/" fragment="ExpansionPanels">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<p>Expand/Collapse Event for Expansion 1:
{{expandCollapseExpansion1Msg}}</p>
@@ -2721,7 +2721,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Progress</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Progress">Progress
<mat-icon class="link-to-component" routerLink="/"
fragment="Progress">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content layout="row">
<div flex="48" class="pad-right">
@@ -2808,7 +2808,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Side Nav</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="SideNav">Side Nav
<mat-icon class="link-to-component" routerLink="/"
fragment="SideNav">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<p>The side nav can be opened at the `start` or `end` of a
container and can be displayed in `over`, `side`, or `push` mode. You can also
define its width.</p>
@@ -2828,7 +2828,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Slide Toggle</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="SlideToggle">Slide
Toggle <mat-icon class="link-to-component" routerLink="/"
fragment="SlideToggle">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<h3 class="mat-title">Basic Usage</h3>
@@ -2921,7 +2921,7 @@ limitations under the License.
</mat-card-content>
</mat-card>
<mat-card>
- <mat-card-title class="pad-bottom-sm">Slider</mat-card-title>
+ <mat-card-title class="pad-bottom-sm" id="Slider">Slider <mat-icon
class="link-to-component" routerLink="/"
fragment="Slider">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<h3 class="mat-title">Horizontal Slider</h3>
diff --git a/webapp/theming/fds-demo.scss b/webapp/theming/fds-demo.scss
index 9fe6550..3e9541e 100644
--- a/webapp/theming/fds-demo.scss
+++ b/webapp/theming/fds-demo.scss
@@ -49,3 +49,8 @@ $fds-theme: mat-light-theme($fds-primary, $fds-accent,
$fds-warn);
// FDS theme mixin
@include fds-theme($fds-theme);
+
+.link-to-component {
+ cursor: pointer;
+ font-size: 16px;
+}
