You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by sc...@apache.org on 2019/07/17 21:07:28 UTC
[nifi-fds] branch master updated: [NIFI-6449] - UI FDS DemoApp -
Add links to components for direct navigation
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 <ro...@gmail.com>
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 <ja...@jaslan-mbp15-hw14350.home>
---
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;
+}