Google Git
Sign in
apache / nifi-fds / c85638d8ffc4d49ebc98e42c9f5ad4a8144a472e
commitc85638d8ffc4d49ebc98e42c9f5ad4a8144a472e[log] [tgz]
authorScott Aslan <scottyaslan@gmail.com>Tue Apr 24 13:43:42 2018 -0400
committerMatt Gilman <matt.c.gilman@gmail.com>Tue May 15 13:55:18 2018 -0400
treec5aa902505ef09caf43e4d0bdbad075fb971f57c
parent4eee1d77635dd5cd3fe03eb77efa724935a0cd3d [diff]
[NIFI-5164]
upgrade to angular v5.2.0, angular-material v5.2.0, covalent v1.0.1
remove package-lock file from .gitignore and remove author info
update pull request template
add package-lock.json, update version number to indicate current version, update pr template to simplify reviewer process
include webapp in src to facilitate local build and review process
update gh-pages deploy process
create src/
This closes #1
83 files changed
tree: c5aa902505ef09caf43e4d0bdbad075fb971f57c
  1. .github/
  2. scripts/
  3. src/
  4. test/
  5. .gitignore
  6. Gruntfile.js
  7. LICENSE
  8. NOTICE
  9. package-lock.json
  10. package.json
  11. README.md
README.md

Apache NiFi Fluid Design System

The Apache NiFi Fluid Design System module is an atomic reusable platform providing consistent set of UI/UX components for open source friendly web applications to consume. Users can interact with this design system by running the demo-app locally or by visiting: https://apache.github.io/nifi-fds/. This demo application also provides an example of how an Angular application would leverage the nifi-fds NgModule.

npm

For developers not interested in building the FDS NgModule you can use npm to install the distribution files. (TBD: awaiting 0.1 release)

npm install nifi-fds

Setup

Import the Apache NiFi Fluid Design System NgModule into your angular application:

var fdsCore = require('fluid-design-system/core');
AppModule.prototype = {
    constructor: AppModule
};

AppModule.annotations = [
    new ngCore.NgModule({
        imports: [
            fdsCore,
    ...
  ],
  ...
})
...

Styles, Icons and Theming

A typical theme file will look something like this:

@import '../../platform/core/theming/all-theme';

$primaryColor: #9E737D;
$primaryColorHover: #915D69;
$accentColor: #d0dbe0;
$accentColorHover: #CCCCCC;

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core;

// Define the palettes
$fds-base-palette: (50: #89df79, 100: $primaryColorHover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $primaryColor, 600: $primaryColor, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
$fds-accent-palette: (50: #89df79, 100: $accentColorHover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $accentColor, 600: $accentColor, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
$fds-warn-palette: (50: #81410f, 100: #D14A50, 200: #af5814, 300: #c66317, 400: #dd6f19, 500: $warnColor, 600: $warnColor, 700: #eea66e, 800: #f1b485, 900: #f4c29b, A100: #ec9857, A200: #89df79, A400: #89df79, A700: #f6d0b2, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
$fds-primary: mat-palette($fds-base-palette, 500, 100, 500);
$fds-accent: mat-palette($fds-accent-palette, 500, 100, 500);
$fds-warn: mat-palette($fds-warn-palette, 500, 100, 500);

// Define the theme (Optionally specify a default, lighter, and darker hue.)
$fds-theme: mat-light-theme($fds-primary, $fds-accent, $fds-warn);

// FDS theme mixin
@include fds-theme($fds-theme);

The Apache NiFi Fluid Design System UI/UX Platform comes with a base CSS file node_modules/fluid-design-system/core/common/styles/css/fluid-design-system.min.css (includes icons) that should be included in the head of your HTML document.

Building

Developers can easily build this project using npm from the root nifi-fds directory via:

npm run clean:install

or to run without unit tests run:

npm run clean:install:skipTests

Developing

Developers can easily skip the re-instalation of node_modules and run unit tests in development mode using npm.

npm run dev:install

or to run without unit tests run:

npm run dev:install:skipTests

Running locally

Once built you can start the application from the target directory via:

cd target
npm start

The demo application should now be availalbe at: http://127.0.0.1:8080/. The port may differ if there is a conflict on 8080. See the output of the start command for the available URLs.

Release Managment

For developers with permissions releasing a new version of the NiFi Fluid Design System is simple with grunt bump.

Deploying github.io demo

The nifi-fds github.io demo can be deployed from the root nifi-fds directory via: (TBD: awaiting 0.1 release)

npm run deploy:ghpages