http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/frontend/protractor.config.js ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/frontend/protractor.config.js b/nifi-registry-web-ui/src/main/frontend/protractor.config.js new file mode 100644 index 0000000..e8ef721 --- /dev/null +++ b/nifi-registry-web-ui/src/main/frontend/protractor.config.js @@ -0,0 +1,201 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var fs = require('fs'); +var path = require('canonical-path'); +var _ = require('lodash'); + +exports.config = { + directConnect: true, + + // Capabilities to be passed to the webdriver instance. + capabilities: { + 'browserName': 'chrome' + }, + + // Framework to use. Jasmine is recommended. + framework: 'jasmine', + + // Spec patterns are relative to this config file + specs: ['**/*e2e-spec.js'], + + // For angular tests + useAllAngular2AppRoots: true, + + // Base URL for application server + baseUrl: 'http://localhost:8080/nifi-registry', + + // See https://github.com/angular/protractor/blob/master/docs/server-setup.md for the various protractor + // browser driver setup. Here we directly use Chrome or Firefox drivers. If Chrome or Firefox are not + // available an error will be thrown and a Selenium Server needs to be installed and started. + directConnect: true, + + //OR + + // The address of a running selenium server. + // seleniumAddress: 'http://localhost:4444/wd/hub', + + // OR + + // The location of the selenium standalone server .jar file, relative + // to the location of this config. If no other method of starting selenium + // is found, this will default to + // node_modules/protractor/selenium/selenium-server... + // seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.41.0.jar', + + // The port to start the selenium server on, or null if the server should + // find its own unused port. + // seleniumPort: 4444, + + onPrepare: function () { + // debugging + console.log('browser.params:' + JSON.stringify(browser.params)); + jasmine.getEnv().addReporter(new Reporter(browser.params)); + + // Allow changing bootstrap mode to NG1 for upgrade tests + global.setProtractorToNg1Mode = function () { + browser.useAllAngular2AppRoots = false; + browser.rootEl = 'body'; + }; + }, + + jasmineNodeOpts: { + defaultTimeoutInterval: 10000, + showTiming: true, + print: function () { + } + } +}; + +// Custom reporter +function Reporter(options) { + var _defaultOutputFile = path.resolve(process.cwd(), './_test-output', 'protractor-results.txt'); + options.outputFile = options.outputFile || _defaultOutputFile; + + initOutputFile(options.outputFile); + options.appDir = options.appDir || './'; + var _root = {appDir: options.appDir, suites: []}; + log('AppDir: ' + options.appDir, +1); + var _currentSuite; + + this.suiteStarted = function (suite) { + _currentSuite = {description: suite.description, status: null, specs: []}; + _root.suites.push(_currentSuite); + log('Suite: ' + suite.description, +1); + }; + + this.suiteDone = function (suite) { + var statuses = _currentSuite.specs.map(function (spec) { + return spec.status; + }); + statuses = _.uniq(statuses); + var status = statuses.indexOf('failed') >= 0 ? 'failed' : statuses.join(', '); + _currentSuite.status = status; + log('Suite ' + _currentSuite.status + ': ' + suite.description, -1); + }; + + this.specStarted = function (spec) { + + }; + + this.specDone = function (spec) { + var currentSpec = { + description: spec.description, + status: spec.status + }; + if (spec.failedExpectations.length > 0) { + currentSpec.failedExpectations = spec.failedExpectations; + } + + _currentSuite.specs.push(currentSpec); + log(spec.status + ' - ' + spec.description); + }; + + this.jasmineDone = function () { + outputFile = options.outputFile; + //// Alternate approach - just stringify the _root - not as pretty + //// but might be more useful for automation. + // var output = JSON.stringify(_root, null, 2); + var output = formatOutput(_root); + fs.appendFileSync(outputFile, output); + }; + + function ensureDirectoryExistence(filePath) { + var dirname = path.dirname(filePath); + if (directoryExists(dirname)) { + return true; + } + ensureDirectoryExistence(dirname); + fs.mkdirSync(dirname); + } + + function directoryExists(path) { + try { + return fs.statSync(path).isDirectory(); + } + catch (err) { + return false; + } + } + + function initOutputFile(outputFile) { + ensureDirectoryExistence(outputFile); + var header = "Protractor results for: " + (new Date()).toLocaleString() + "\n\n"; + fs.writeFileSync(outputFile, header); + } + + // for output file output + function formatOutput(output) { + var indent = ' '; + var pad = ' '; + var results = []; + results.push('AppDir:' + output.appDir); + output.suites.forEach(function (suite) { + results.push(pad + 'Suite: ' + suite.description + ' -- ' + suite.status); + pad += indent; + suite.specs.forEach(function (spec) { + results.push(pad + spec.status + ' - ' + spec.description); + if (spec.failedExpectations) { + pad += indent; + spec.failedExpectations.forEach(function (fe) { + results.push(pad + 'message: ' + fe.message); + }); + pad = pad.substr(2); + } + }); + pad = pad.substr(2); + results.push(''); + }); + results.push(''); + return results.join('\n'); + } + + // for console output + var _pad; + + function log(str, indent) { + _pad = _pad || ''; + if (indent == -1) { + _pad = _pad.substr(2); + } + console.log(_pad + str); + if (indent == 1) { + _pad = _pad + ' '; + } + } + +}
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/locale/messages.es.xlf ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/locale/messages.es.xlf b/nifi-registry-web-ui/src/main/locale/messages.es.xlf new file mode 100644 index 0000000..91c9e1d --- /dev/null +++ b/nifi-registry-web-ui/src/main/locale/messages.es.xlf @@ -0,0 +1,46 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<!-- + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> + +<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"> + <file source-language="es" datatype="plaintext" original="ng2.template"> + <body> + <trans-unit id="nf-admin-general-tab-title" datatype="html"> + <source>general</source> + <target state="new">general</target> + <note priority="1" from="description">A description of the type of administration options available.</note> + <note priority="1" from="meaning">General administration tab</note> + </trans-unit> + <trans-unit id="nf-admin-users-tab-title" datatype="html"> + <source>users</source> + <target state="new">Usuarios</target> + <note priority="1" from="description">A description of the type of administration options available.</note> + <note priority="1" from="meaning">Users administration tab</note> + </trans-unit> + <trans-unit id="nf-admin-workflow-tab-title" datatype="html"> + <source>Workflow</source> + <target state="new">Flujo de trabajo</target> + <note priority="1" from="description">A description of the type of administration options available.</note> + <note priority="1" from="meaning">Workflow administration tab</note> + </trans-unit> + <trans-unit id="nf-admin-workflow-create-bucket-button" datatype="html"> + <source>Create</source> + <target state="new">Crear</target> + <note priority="1" from="description">A button for creating a new bucket in the registry.@@nf-admin-workflow-create-bucket-button.</note> + <note priority="1" from="meaning">Create new bucket button</note> + </trans-unit> + </body> + </file> +</xliff> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/README.md ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/README.md b/nifi-registry-web-ui/src/main/platform/core/README.md new file mode 100644 index 0000000..2981e88 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/README.md @@ -0,0 +1,33 @@ +# Fluid Design System (FDS) + +FDS NiFi Registry UI/UX Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material or Teradata Covalent. + +The FDS will have custom components that enforce standards and best practices through built-in design patterns. + +## Setup + +Import the **[FluidDesignSystemModule]** in your NgModule: + +```javascript +var fdsCore = require('@fluid-design-system/core'); +NfRegistryAppModule.prototype = { + constructor: NfRegistryAppModule +}; + +NfRegistryAppModule.annotations = [ + new ngCore.NgModule({ + imports: [ + fdsCore, + ... + ], + ... +}) +... +``` + + +## Styles, Icons and Theming + +See [theming](https://github.com/apache/nifi-registry.github.io) in the docs for more info (TBD). + +FDS NiFi Registry UI/UX Platform comes with a base CSS file `@fluid-design-system/core/common/styles/css/fluid-design-system.css` (includes icons). http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_basicElements.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_basicElements.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_basicElements.scss new file mode 100644 index 0000000..fc5808c --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_basicElements.scss @@ -0,0 +1,130 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: local("Roboto Light"), local("Roboto-Light"), url("../../../../../../../roboto-fontface/fonts/Roboto/Roboto-Light.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto'; + font-style: italic; + font-weight: 300; + src: local("Roboto LightItalic"), local("Roboto-LightItalic"), url("../../../../../../../roboto-fontface/fonts/Roboto/Roboto-LightItalic.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: normal; + src: local("Roboto Regular"), local("Roboto-Regular"), url("../../../../../../../roboto-fontface/fonts/Roboto/Roboto-Regular.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local("Roboto Medium"), local("Roboto-Medium"), url("../../../../../../../roboto-fontface/fonts/Roboto/Roboto-Medium.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: bold; + src: local("Roboto Bold"), local("Roboto-Bold"), url("../../../../../../../roboto-fontface/fonts/Roboto/Roboto-Bold.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto'; + font-style: italic; + font-weight: normal; + src: local("Roboto Italic"), local("Roboto-Italic"), url("../../../../../../../roboto-fontface/fonts/Roboto/Roboto-RegularItalic.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto Slab'; + font-style: normal; + font-weight: normal; + src: local("RobotoSlab Regular"), local("RobotoSlab-Regular"), url("../../../../../../../roboto-fontface/fonts/Roboto-Slab/Roboto-Slab-Regular.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto Slab'; + font-style: normal; + font-weight: bold; + src: local("RobotoSlab Bold"), local("RobotoSlab-Bold"), url("../../../../../../../roboto-fontface/fonts/Roboto-Slab/Roboto-Slab-Bold.ttf") format("truetype"); +} + +body, +html { + height: 100%; +} + +body, +button, +input, +label, +select, +td, +textarea { + font-family: $fontPrimary; + font-size: 14px; +} + +body { + color: $bodyTextColor; +} + +strong { + font-weight: bold; +} + +pre { + overflow-x: auto; +} + +em { + font-style: italic; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: $fontPrimary; + font-weight: normal; + font-style: normal; + background: #FFFFFF; +} + +h1 { + color: $pageHeaderTextColor; +} + +h2 { + color: $subHeaderTextColor; +} + +table { + font-family: $fontPrimary; + font-size: 13px; + color: $grey2; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttonToggles.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttonToggles.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttonToggles.scss new file mode 100644 index 0000000..73f4263 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttonToggles.scss @@ -0,0 +1,98 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +body[fds] .expansion-panel-filter-toggle-group { + box-shadow: none !important; +} + +body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle { + height: 75px; + width: 125px; + border: 1px solid $grey4; +} + +body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle-label-content { + height: 100%; + width: 100%; + padding: 0; + line-height: 63px; + text-align: center; +} + +body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle-checked { + background-color: $blue-grey1; + color: white; +} + +body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle-checked .md-display-1 { + color: white; +} + +body[fds] .expansion-panel-filter-toggle-group .md-display-1 { + color: $blue-grey1; +} + +body[fds] .expansion-panel-filter-toggle-group div { + line-height: normal; +} + +body[fds] .tab-toggle-group { + box-shadow: none !important; +} + +body[fds] .tab-toggle-group .mat-button-toggle-label-content { + border-bottom: 2px solid $grey5; +} + +body[fds] .tab-toggle-group .mat-button-toggle-checked { + background: transparent; +} + +body[fds] .tab-toggle-group .mat-button-toggle-checked .mat-button-toggle-label-content { + border-bottom: 2px solid $blue-grey1; + background: transparent; +} + +body[fds] .on-off-toggle-group { + box-shadow: none !important; +} + +body[fds] .on-off-toggle-group .mat-button-toggle { + height: 20px; + width: 35px; + border: 1px solid $grey4; +} + +body[fds] .on-off-toggle-group .mat-button-toggle-label-content { + height: 100%; + width: 100%; + padding: 0; + line-height: 20px; + text-align: center; +} + +body[fds] .on-off-toggle-group .mat-button-toggle-checked { + background-color: $blue-grey1; + color: white; + border: 1px solid $blue-grey1; +} + +body[fds] .off-toggle.mat-button-toggle-checked { + background-color: $grey4; + color: $grey1; + border: 1px solid $grey4; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttons.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttons.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttons.scss new file mode 100644 index 0000000..c8d4802 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttons.scss @@ -0,0 +1,198 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* Buttons */ + +$buttonFontColor: #FFFFFF; +$buttonFontColorDisabled: #D1E8D1; +$buttonBgColorPrimary: $primaryColor; +$buttonBgColorPrimaryHover: $primaryColorHover; +$buttonBgColorPrimaryDisabled: $primaryColor; +$buttonBgColorPrimarySelected: $primaryColor; +$buttonBgColorSecondary: #FFFFFF; +$buttonBgColorSecondaryHover: $primaryColorHover; +$buttonBgColorSecondarySelected: #FFFFFF; +$buttonBgColorRegular: #FFFFFF; +$buttonBgColorRegularHover: #808793; +$buttonBgColorRegularDisabled: #808793; +$buttonBgColorRegularSelected: #FFFFFF; +$buttonBorderColorSecondary: $primaryColor; +$buttonBorderColorSecondaryHover: $buttonBgColorSecondaryHover; +$buttonBorderColorSecondaryDisabled: $buttonBgColorSecondaryHover; +$buttonBorderColorSecondarySelected: $primaryColor; +$buttonBorderColorRegular: #CFD3D7; +$buttonBorderColorRegularHover: $buttonBgColorRegularHover; +$buttonBorderColorRegularDisabled: $buttonBgColorRegularHover; +$buttonBorderColorRegularSelected: #CFD3D7; +$buttonFontPrimaryColor: $buttonFontColor; +$buttonFontPrimaryColorHover: $buttonFontColor; +$buttonFontPrimaryColorDisabled: $buttonFontColorDisabled; +$buttonFontPrimaryColorSelected: $buttonFontColor; +$buttonFontSecondaryColor: $primaryColorHover; +$buttonFontSecondaryColorHover: $buttonFontColor; +$buttonFontSecondaryColorDisabled: $buttonFontColorDisabled; +$buttonFontSecondaryColorSelected: $primaryColorHover; +$buttonFontRegularColor: $descriptionTextColor; +$buttonFontRegularColorHover: $buttonFontColor; +$buttonFontRegularColorDisabled: $buttonFontColorDisabled; +$buttonFontRegularColorSelected: $bodyTextColor; +$buttonFontWarnColor: $buttonFontColor; +$buttonFontWarnColorHover: $buttonFontColor; +$buttonFontWarnColorDisabled: $buttonFontColorDisabled; +$buttonFontWarnColorSelected: $buttonFontColor; +$buttonFontCriticalColor: $buttonFontColor; +$buttonFontCriticalColorHover: $buttonFontColor; +$buttonFontCriticalColorDisabled: $buttonFontColorDisabled; +$buttonFontCriticalColorSelected: $buttonFontColor; + +body[fds] .mat-raised-button { + height: 34px; + font-family: $fontPrimary; + font-weight: normal; + font-size: 14px; + text-transform: uppercase; + line-height: normal; + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); +} + +body[fds] .mat-raised-button.cdk-focused:focus { + box-shadow: 0px 0px 2px 0px rgba(19, 145, 193, 1); +} + +body[fds] .mat-raised-button[disabled] { + opacity: .6; +} + +body[fds] .mat-button-focus-overlay { + background-color: transparent; +} + +body[fds] .mat-raised-button.mat-fds-primary { + border: 1px solid $buttonBgColorPrimary; + background-color: $buttonBgColorPrimary; + color: $buttonFontPrimaryColor; +} + +body[fds] .mat-raised-button.mat-fds-primary:hover { + background-color: $buttonBgColorPrimaryHover; + color: $buttonFontPrimaryColorHover; +} + +body[fds] .mat-raised-button.mat-fds-primary.mat-button-focus { + color: $buttonFontPrimaryColorSelected; + background-color: $buttonBgColorPrimarySelected; +} + +body[fds] .mat-raised-button.mat-fds-primary[disabled] { + color: $buttonFontPrimaryColorDisabled; + background-color: $buttonBgColorPrimaryDisabled; + color: $buttonFontPrimaryColorDisabled; +} + +body[fds] .mat-raised-button.mat-fds-secondary { + color: $buttonFontSecondaryColor; + border: 1px solid $buttonBorderColorSecondary; +} + +body[fds] .mat-raised-button.mat-fds-secondary:hover:not([disabled]) { + color: $buttonFontSecondaryColorHover; + background-color: $buttonBgColorSecondaryHover; + border: 1px solid $buttonBorderColorSecondaryHover; +} + +body[fds] .mat-raised-button.mat-fds-secondary.mat-button-focus { + color: $buttonFontSecondaryColorSelected; + background-color: $buttonBgColorSecondarySelected; + border: 1px solid $buttonBorderColorSecondarySelected; +} + +body[fds] .mat-raised-button.mat-fds-secondary[disabled] { + color: $buttonFontPrimaryColorDisabled; + background-color: $buttonBgColorPrimaryDisabled; +} + +body[fds] .mat-raised-button.mat-fds-regular { + color: $buttonFontRegularColor; + background-color: $buttonBgColorRegular; + border: 1px solid $buttonBorderColorRegular; +} + +body[fds] .mat-raised-button.mat-fds-regular:hover { + color: $buttonFontRegularColorHover; + background-color: $buttonBgColorRegularHover; + border: 1px solid $buttonBorderColorRegularHover; +} + +body[fds] .mat-raised-button.mat-fds-regular.mat-button-focus { + color: $buttonFontRegularColorSelected; + background-color: $buttonBgColorRegularSelected; + border: 1px solid $buttonBorderColorRegularSelected; +} + +body[fds] .mat-raised-button.mat-fds-regular[disabled] { + color: $buttonFontRegularColorDisabled; + background-color: $buttonBgColorRegularDisabled; + border: 1px solid $buttonBorderColorRegularDisabled; +} + +body[fds] .mat-raised-button.mat-fds-warn { + border: 1px solid $errorColor; + background-color: $errorColor; + color: $buttonFontWarnColor; +} + +body[fds] .mat-raised-button.mat-fds-warn:hover { + color: $buttonFontWarnColorHover; + background-color: $red2; + border: 1px solid $errorColor; +} + +body[fds] .mat-raised-button.mat-fds-warn.mat-button-focus { + color: $buttonFontWarnColorSelected; + background-color: $errorColor; + border: 1px solid $buttonBorderColorRegularSelected; +} + +body[fds] .mat-raised-button.mat-fds-warn[disabled] { + color: $buttonFontWarnColorDisabled; + background-color: $errorColor; + border: 1px solid $errorColor; +} + +body[fds] .mat-raised-button.mat-fds-critical { + color: $buttonFontCriticalColor; + background-color: $orange1; + border: 1px solid $orange1; +} + +body[fds] .mat-raised-button.mat-fds-critical:hover { + color: $buttonFontCriticalColorHover; + background-color: $orange2; + border: 1px solid $orange2; +} + +body[fds] .mat-raised-button.mat-fds-critical.mat-button-focus { + color: $buttonFontCriticalColorSelected; + background-color: $orange2; + border: 1px solid $buttonBorderColorRegularSelected; +} + +body[fds] .mat-raised-button.mat-fds-critical[disabled] { + color: $buttonFontCriticalColorDisabled; + background-color: $orange1; + border: 1px solid $orange1; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss new file mode 100644 index 0000000..319995e --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss @@ -0,0 +1,85 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* Checkboxes */ + +body[fds] md-checkbox { + margin-bottom: 3px; +} + +body[fds] .mat-checkbox-inner-container { + height: 10px !important; + width: 10px !important; +} + +body[fds] .mat-checkbox-frame { + height: 10px; + width: 10px; + border-color: $grey7; +} + +body[fds] .mat-checkbox-ripple { + left: -7px; + top: -7px; + right: -7px; + bottom: -7px; +} + +body[fds] .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, +body[fds] .mat-checkbox-checked.mat-accent .mat-checkbox-background { + background-color: $blue-grey1; +} + +body[fds] .mat-checkbox-inner-container:hover { + background-color: $blue-grey1; + border-radius: 2px; +} + +body[fds] .mat-checkbox-background { + height: 10px; + width: 10px; +} + +/* Covalent TdDataTableComponent 'selectable' property checkboxes */ + +body[fds] .mat-pseudo-checkbox { + height: 10px !important; + width: 10px !important; + border: 1px solid $grey7; +} + +body[fds] .mat-pseudo-checkbox:hover { + background-color: $blue-grey1; + border: 1px solid $blue-grey1; +} + +body[fds] .mat-pseudo-checkbox-checked::after { + content: '\f00c'; + font-size: 8px; + font-family: fontawesome; + margin-top: -9px; + margin-left: -1px; + border: none; + transform: initial; +} + +body[fds] .mat-pseudo-checkbox-checked, body[fds] .mat-pseudo-checkbox-indeterminate { + background-color: $blue-grey1; + border: 1px solid $blue-grey1; + height: 10px; + width: 10px; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_chips.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_chips.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_chips.scss new file mode 100644 index 0000000..755f678 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_chips.scss @@ -0,0 +1,67 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* Chips */ + +body[fds] .mat-chip { + border-radius: 2px; + font-size: 10px; + font-family: $fontPrimary; + font-style: normal; + font-weight: normal; + padding: 4px 12px 4px 12px; +} + +body[fds] .mat-chip i { + margin-left: 10px; + float: right; + margin-top: 2px; +} + +body[fds] .mat-basic-chip { + color: $grey2; + height: 24px; + margin: 12px 8px 0 0; +} + +body[fds] .mat-basic-chip i { + margin-left: 10px; + float: right; + margin-top: 2px; +} + +body[fds] .mat-basic-chip .td-chip { + font-size: 10px; + padding: 0px 0px 7px 12px; + min-height: 24px; +} + +body[fds] .td-chip span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 65px; +} + +body[fds] .td-chip-disabled .td-chip { + padding: 0px 0px 0px 12px; +} + +body[fds] .mat-basic-chip md-icon.td-chip-removal { + font-size: 15px; + margin-bottom: 7px; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss new file mode 100644 index 0000000..937bce7 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss @@ -0,0 +1,59 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* Expansion Panels */ + +body[fds] td-expansion-panel:not(:last-of-type) .td-expanded { + margin-bottom: 0px; +} + +body[fds] .td-expansion-panel-header-content { + height: 80px !important; + padding: 0px 30px !important; + border-bottom: 1px solid $grey7; +} + +body[fds] .td-expansion-content form { + padding: 15px 10px 20px 20px; +} + +body[fds] .md-subhead { + font-size: 18px; + color: $grey3; +} + +body[fds] td-expansion-panel .td-expansion-panel-header .td-expansion-panel-header-content md-icon.td-expand-icon { + font-size: 28px; + color: $blue-grey1; + font-weight: bold; +} + +body[fds] td-expansion-panel { + box-shadow: none; +} + +body[fds] td-expansion-panel .td-expansion-panel-header:hover:not(.mat-disabled) { + background: $blue4; +} + +body[fds] td-expansion-panel .td-expansion-panel-header:focus { + background: #FFFFFF; +} + +body[fds] td-expansion-panel .td-expansion-panel-header:focus .td-expansion-panel-header-content { + border-bottom: 1px solid $primaryColor; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss new file mode 100644 index 0000000..acd7efb --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss @@ -0,0 +1,80 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* Begin Global Variables */ + +/* Text */ + +$fontPrimary: "Roboto", +sans-serif; +$fontSecondary: "Robot Slab", +sans-serif; +$fontMedium: "Roboto Medium", +sans-serif; +$fontLight: "Roboto Light", +sans-serif; + +/* Define colors */ + +$grey1: #333333; +$grey2: #666666; +$grey3: #999999; +$grey4: #CCCCCC; +$grey5: #EEEEEE; +$grey6: #F5F5F5; // or #FAFAFA +$grey7: #DDDDDD; +$grey8: #CFD3D7; +$grey9: #b2b8c1; +$grey10: #dbdee2; +$blue1: #1491C1; +$blue2: #E7f6Fc; +$blue3: #A7DFF2; +$blue4: #F3FAFF; +$blue5: #728E9B; +$blue6: #004849; +$blue7: #d0dbe0; +$blue8: #1291c1; +$red1: #EF6162; +$red2: #D14A50; +$orange1: #E98A40; +$orange2: #D3702D; +$green1: #1EB475; +$green2: #3FAE2A; +$green3: #429929; +$rose1: #9E737D; +$rose2: #915D69; +$blue-grey1: #6B8791; +$blue-grey2: #B2C1C6; + +/* Set FDS theme */ + +$primaryColor: $rose1; //$green2 or $blue5 +$primaryColorHover: $rose2; //$green3 or $blue6 +$secondaryColor: $rose1; //$green1 or $blue5 +$accentColor: $blue7; //$orange1 or $blue7 +$accentColorHover: $grey4; //$orange2 or $grey4 +$warnColor: $red1; +$errorColor: $warnColor; +$warningColor: $accentColor; +$bodyTextColor: $grey1; +$pageHeaderTextColor: $grey1; +$subHeaderTextColor: $grey2; +$descriptionTextColor: $grey2; +$linkColor: $blue-grey1; +$linkColorDisabled: $grey1; + +/*End Global Variables */ http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_helperClasses.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_helperClasses.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_helperClasses.scss new file mode 100644 index 0000000..6ae237c --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_helperClasses.scss @@ -0,0 +1,72 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* Text */ + +.camel-case { + text-transform: capitalize; +} + +.header { + font-family: $fontMedium; + font-size: 16px; + color: $pageHeaderTextColor; + padding-bottom: 10px; +} + +.details-header { + height: 92px; +} + +.details-header-container { + position: relative; + top: 22px; + left: 10px; +} + +.description { + font-family: $fontLight; + font-size: 12px; + color: $descriptionTextColor; +} + +.description i { + padding-right: 5px; +} + +.label { + font-family: $fontMedium; + font-size: 14px; + color: $bodyTextColor; + text-transform: uppercase; +} + +.units { + font-family: $fontLight; + font-size: 14px; + color: $bodyTextColor; +} + +.align-vertical { + margin-top: auto; + margin-bottom: auto; +} + +.align-horizontal { + margin-left: auto; + margin-right: auto; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_inputs.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_inputs.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_inputs.scss new file mode 100644 index 0000000..7024363 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_inputs.scss @@ -0,0 +1,124 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* Inputs */ + +body[fds] .mat-input-container { + min-width: 200px; +} + +body[fds] .mat-input-wrapper { + margin: 0; + padding-bottom: 0; +} + +body[fds] input.mat-input-element, body[fds] textarea.mat-input-element { + border-radius: 2px; + color: $grey2; + border: 1px solid $grey8; + height: 32px; + padding: 0px 10px; + width: calc(100% - 22px); +} + +body[fds] textarea.mat-input-element { + padding: 10px 10px; +} + +body[fds] input.mat-input-element[disabled], body[fds] textarea.mat-input-element[disabled] { + background: $grey9; + color: $grey10; + border: 1px solid $grey9; +} + +body[fds] .mat-input-subscript-wrapper { + margin-top: 18px; + width: calc(100% - 23px); +} + +body[fds] input.mat-input-element:focus, body[fds] textarea.mat-input-element:focus { + border-color: $blue-grey1; +} + +body[fds] .mat-input-underline { + display: none; +} + +body[fds] .mat-input-placeholder { + font-size: 14px; + color: $grey3; + font-weight: 300; +} + +body[fds] .mat-input-placeholder-wrapper { + top: -20px; + padding-top: 33px; +} + +body[fds] .mat-input-placeholder { + top: 20px; + left: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: calc(100% - 44px); +} + +body[fds] md-input-container.mat-focused .mat-input-placeholder { + transform: translateY(-26px) translateX(-10px) scale(0.75); +} + +body[fds] .mat-input-placeholder.mat-float:not(.mat-empty) { + transform: translateY(-26px) translateX(-10px) scale(.75); +} + +body[fds] .input-button { + top: 3.5px; + left: -24px; + z-index: 1; +} + +body[fds] .input-button.mat-raised-button[disabled] { + opacity: 1; +} + +body[fds] .mat-input-infix { + padding: 7px 23px 0px 0px; + border-top: 0; +} + +body[fds] td-chips .mat-input-placeholder-wrapper::after { + content: '\f0b0'; + display: inline-table; + font-family: FontAwesome; + float: right; + margin: 2px 10px 0px 0px; + color: $grey3; +} + +body[fds] td-chips input.mat-input-element { + border-radius: 2px; + color: $grey2; + border: 1px solid $grey8; + height: 32px; + padding: 0px 10px; + width: 100%; +} + +body[fds] .mat-hint { + color: $grey3; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_links.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_links.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_links.scss new file mode 100644 index 0000000..c6973c3 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_links.scss @@ -0,0 +1,33 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* Links */ + +body[fds] .link { + color: $linkColor; + font-size: 14px; + text-decoration: none; +} + +body[fds] .link:hover { + text-decoration: underline; +} + +body[fds] .link .disabled { + color: $linkColorDisabled; + text-decoration: none; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_menus.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_menus.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_menus.scss new file mode 100644 index 0000000..26a2333 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_menus.scss @@ -0,0 +1,120 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* Menus */ + +body[fds] .mat-menu-panel { + border-radius: 2px; +} + +body[fds] .mat-menu-content { + padding-top: 0px; + padding-bottom: 0px; +} + +body[fds] .mat-menu-item { + font-size: 14px; + color: $bodyTextColor; + min-width: 200px; + text-transform: none; + height: 24px; + line-height: 24px; +} + +body[fds] .regular-button-menu .mat-menu-item:hover { + color: #ffffff; + background-color: #808793; +} + +body[fds] .mat-menu-item[disabled] { + color: rgba(0, 0, 0, 0.38); + background-color: #ffffff; +} + +body[fds] .mat-menu-item .mat-icon { + font-size: 14px; +} + +body[fds] .mat-menu-item .fa { + font-size: 14px; + width: 1em; + height: 1em; +} + +body[fds] .mat-menu-item[disabled] .mat-icon { + color: rgba(0, 0, 0, 0.38); +} + +body[fds] .mat-menu-item[disabled] .fa { + color: rgba(0, 0, 0, 0.38); +} + +body[fds] .mat-menu-item:hover:not([disabled]) .mat-icon { + color: #ffffff; +} + +body[fds] .mat-menu-item:hover:not([disabled]) .fa { + color: #ffffff; +} + +body[fds] .mat-menu-item:hover:not([disabled]), +body[fds] .mat-menu-item:focus:not([disabled]) { + color: #ffffff; + background-color: #808793; +} + +body[fds] .fds-primary-dropdown-button-menu .mat-menu-item:hover:not([disabled]), +body[fds] .fds-primary-dropdown-button-menu .mat-menu-item:focus:not([disabled]) { + color: #FFFFFF; + background-color: $primaryColorHover; +} + +.fds-primary-dropdown-button-menu .cdk-focused { + color: $buttonFontPrimaryColorSelected; + background-color: $buttonBgColorPrimarySelected; +} + +.mat-raised-button .mat-button-wrapper i { + padding-left: 10px; +} + +body[fds] .mat-option { + font-size: 14px; + color: $bodyTextColor; + text-transform: none; + height: 24px; + line-height: 24px; +} + +body[fds] .mat-autocomplete-panel.mat-autocomplete-panel-below { + top: 0; +} + +body[fds] .regular-button-menu .mat-option:hover { + color: #ffffff; + background-color: #808793; +} + +body[fds] .mat-option:hover:not([disabled]), +body[fds] .mat-option:focus:not([disabled]) { + color: #ffffff; + background-color: #808793; +} + +body[fds] .mat-select-underline { + display: none; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_modals.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_modals.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_modals.scss new file mode 100644 index 0000000..51c7bad --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_modals.scss @@ -0,0 +1,23 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* Modals */ + +body[fds] .mat-dialog-container { + padding: 20px; + width: 400px; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_panels.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_panels.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_panels.scss new file mode 100644 index 0000000..f88a432 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_panels.scss @@ -0,0 +1,54 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* Panels */ + +body[fds] .mat-card-title { + font-size: 20px; + color: $grey1; + margin-bottom: 0px; +} + +body[fds] md-card-title { + padding-top: 20px; + padding-left: 20px; + padding-right: 20px; +} + +body[fds] .mat-card-subtitle { + padding-left: 20px; + padding-right: 20px; + padding-top: 10px; + margin-bottom: 0px; +} + +body[fds] .mat-card-content { + color: $grey2; + padding: 10px 20px 20px 20px; + margin: 0px; +} + +body[fds] .mat-card .mat-card-actions:last-child, body[fds] .mat-card .mat-card .mat-card-actions:last-child { + padding: 0px 20px 20px 20px; + margin: 0px; +} + +body[fds] .fds-panel-menu-button { + position: absolute; + right: 0px; + top: 20px; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_radios.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_radios.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_radios.scss new file mode 100644 index 0000000..2d9ca8e --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_radios.scss @@ -0,0 +1,56 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* Radios */ + +body[fds] .mat-radio-container { + height: 12px; + width: 12px; +} + +body[fds] .mat-radio-outer-circle { + height: 12px; + width: 12px; + background-color: #FFFFFF; + border: 1px solid $grey7; +} + +body[fds] .mat-radio-outer-circle:hover { + background-color: $blue-grey1; + border-color: $blue-grey1; +} + +body[fds] .mat-radio-checked .mat-radio-outer-circle { + border: 1px solid $blue-grey1; + background-color: $blue-grey1; +} + +body[fds] .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { + border-color: $blue-grey1; +} + +body[fds] .mat-radio-inner-circle { + height: 10px; + width: 10px; + left: 1px; + top: 1px; + background-color: #FFFFFF; +} + +body[fds] .mat-radio-checked .mat-radio-inner-circle { + background-color: #FFFFFF; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_sideNav.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_sideNav.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_sideNav.scss new file mode 100644 index 0000000..af3514d --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_sideNav.scss @@ -0,0 +1,20 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +body[fds] .mat-sidenav-container { + height: 100%; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss new file mode 100644 index 0000000..0dcdade --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss @@ -0,0 +1,113 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* Tables */ + +body[fds] .td-data-table-cell { + font-size: 13px; + color: $grey2; + padding: 0 28px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +body[fds] .td-data-table-column { + color: $grey3; + font-weight: normal; +} + +body[fds] .td-data-table-row { + height: 34px; + border-top: 1px solid #fff; + border-left: 1px solid #fff; + border-right: 1px solid #fff; + border-bottom: 1px solid $grey5; +} + +body[fds] .td-data-table-row.selected { + background-color: $grey5; + border: 1px solid $grey5; +} + +body[fds] .td-data-table-row:hover { + background-color: $grey6; + border: 1px solid $blue-grey2; +} + +body[fds] .td-data-table-cell .mat-icon-button { + color: $linkColor; +} + +body[fds] .td-data-table-cell .mat-button, body[fds] .td-data-table-cell .mat-icon-button, body[fds] .td-data-table-cell .mat-raised-button { + height: 24px; + width: 24px; + line-height: 0; +} + +body[fds] .td-data-table-cell .mat-icon-button.badge { + border-top-left-radius: 0px; + border-top-right-radius: 0px; +} + +body[fds] .td-data-table-cell .mat-icon-button.badge[disabled] { + opacity: .3; +} + +// body[fds] .td-data-table-cell .mat-button-focus-overlay, body[fds] .td-data-table-cell .mat-button-ripple { +// display: none; +// } + +body[fds] .td-data-table-column { + font-size: 12px; + color: $grey3; + height: 34px; + line-height: 34px; + padding: 0 28px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +body[fds] .td-data-table-column .fa-caret-up, body[fds] .td-data-table-column .fa-caret-down { + color: $blue-grey1; + font-size: 12px; + margin-bottom: 2px; +} + +body[fds] td-paging-bar { + color: $grey3; +} + +body[fds] td-paging-bar md-select .mat-select-value, body[fds] td-paging-bar md-select .mat-select-arrow { + color: $blue-grey1; +} + +body[fds] .table-title { + font-size: 20px; + color: $grey1; + min-width: 250px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 50%; + margin-right: 10px; +} + +body[fds] div .td-data-table { + border-bottom: 2px solid $grey7; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_tabs.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_tabs.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tabs.scss new file mode 100644 index 0000000..df5d653 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tabs.scss @@ -0,0 +1,41 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* Tabs */ + +body[fds] .mat-tab-label { + line-height: 72px; + text-transform: uppercase; + color: $grey2; +} + +body[fds] .mat-tab-label:hover:not([disabled]) { + color: $grey1; +} + +body[fds] .mat-tab-label:focus:not([disabled]) { + background-color: #FFFFFF; +} + +body[fds] .mat-tab-label-active { + color: $grey1; +} + +body[fds] .mat-tab-nav-bar, +body[fds] .mat-tab-header { + border-bottom: 0px; +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_tooltips.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_tooltips.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tooltips.scss new file mode 100644 index 0000000..563565f --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tooltips.scss @@ -0,0 +1,24 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one or more +* contributor license agreements. See the NOTICE file distributed with +* this work for additional information regarding copyright ownership. +* The ASF licenses this file to You under the Apache License, Version 2.0 +* (the "License"); you may not use this file except in compliance with +* the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* Tooltips */ + +body[fds] .mat-tooltip { + background: $grey2; + opacity: .9; + box-shadow: inset 0px 0px 3px 0px rgba(19, 145, 193, 1); +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss new file mode 100644 index 0000000..0a29fe8 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss @@ -0,0 +1,55 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the 'License'); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an 'AS IS' BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import '../../../..//node_modules/@angular/material/theming'; +@import '../../../../node_modules/@covalent/core/theming/all-theme'; +@import 'globalVars'; +@import 'basicElements'; +@import 'helperClasses'; +@import 'buttons'; +@import 'buttonToggles'; +@import 'checkboxes'; +@import 'radios'; +@import 'chips'; +@import 'modals'; +@import 'tabs'; +@import 'inputs'; +@import 'panels'; +@import 'links'; +@import 'sideNav'; +@import 'tooltips'; +@import 'expansionPanels'; +@import 'menus'; +@import 'tables'; +@import '../../dialogs/fds-dialog-component'; +// 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); +// Optionally specify a default, lighter, and darker hue. +$fds-theme: mat-light-theme($fds-primary, $fds-accent, $fds-warn); +// Include theme styles for core and each component used in your app. +// Alternatively, you can import and @include the theme mixins for each component +// that you are using. +@include angular-material-theme($fds-theme); +@include covalent-theme($fds-theme); http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/dialogs/_fds-dialog-component.scss ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/dialogs/_fds-dialog-component.scss b/nifi-registry-web-ui/src/main/platform/core/dialogs/_fds-dialog-component.scss new file mode 100644 index 0000000..f8784a4 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/_fds-dialog-component.scss @@ -0,0 +1,21 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the 'License'); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an 'AS IS' BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.fds-dialog-title { + margin-top: 0; + margin-bottom: 20px; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html b/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html new file mode 100644 index 0000000..101cd9e --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html @@ -0,0 +1,45 @@ +<!-- +Licensed to the Apache Software Foundation (ASF) under one or more +contributor license agreements. See the NOTICE file distributed with +this work for additional information regarding copyright ownership. +The ASF licenses this file to You under the Apache License, Version 2.0 +(the "License"); you may not use this file except in compliance with +the License. You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +--> + +<fds-dialog> + <fds-dialog-title *ngIf="title"> + <div fxLayout="row" fxLayoutAlign="space-between center"> + {{title}} + <button md-icon-button (click)="cancel()"> + <md-icon color="primary">close</md-icon> + </button> + </div> + </fds-dialog-title> + <fds-dialog-content class="md-subhead tc-grey-700"> + {{message}} + </fds-dialog-content> + <fds-dialog-actions> + <button md-raised-button + color="{{cancelButtonColor}}" + #closeBtn + (keydown.arrowright)="acceptBtn.focus()" + (click)="cancel()">{{cancelButton}} + </button> + <button md-raised-button + color="{{acceptButtonColor}}" + #acceptBtn + (keydown.arrowleft)="closeBtn.focus()" + (click)="accept()" + class="push-left-sm">{{acceptButton}} + </button> + </fds-dialog-actions> +</fds-dialog> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js b/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js new file mode 100644 index 0000000..4236b1a --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js @@ -0,0 +1,64 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var ngCore = require('@angular/core'); + +/** + * FdsConfirmDialogComponent constructor. + * + * @constructor + */ +function FdsConfirmDialogComponent() { + this.title = ''; + this.message = ''; + this.acceptButton = 'ACCEPT'; + this.acceptButtonColor = 'fds-primary'; + this.cancelButton = 'CANCEL'; + this.cancelButtonColor = 'fds-regular'; + this.dialogRef = undefined; + this.viewContainerRef = undefined; + this.disableClose = true; +}; + +FdsConfirmDialogComponent.prototype = { + constructor: FdsConfirmDialogComponent, + + /** + * Close the dialog and send a cancel response to any subscribers. + */ + cancel: function () { + this.dialogRef.close(false); + }, + + /** + * Close the dialog and send an accept response to any subscribers. + */ + accept: function () { + this.dialogRef.close(true); + } +}; + +FdsConfirmDialogComponent.annotations = [ + new ngCore.Component({ + selector: 'fds-confirm-dialog', + template: require('./confirm-dialog.component.html!text') + }) +]; + +FdsConfirmDialogComponent.parameters = []; + +module.exports = FdsConfirmDialogComponent; http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.component.html ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.component.html b/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.component.html new file mode 100644 index 0000000..233bc64 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.component.html @@ -0,0 +1,29 @@ +<!-- +Licensed to the Apache Software Foundation (ASF) under one or more +contributor license agreements. See the NOTICE file distributed with +this work for additional information regarding copyright ownership. +The ASF licenses this file to You under the Apache License, Version 2.0 +(the "License"); you may not use this file except in compliance with +the License. You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +--> + +<div class="fds-dialog-wrapper"> + <h3 class="fds-dialog-title md-title" *ngIf="dialogTitle.length > 0"> + <ng-content select="fds-dialog-title"></ng-content> + </h3> + <div class="fds-dialog-content pad-bottom-md" *ngIf="dialogContent.length > 0"> + <ng-content select="fds-dialog-content"></ng-content> + </div> + <div class="fds-dialog-actions" *ngIf="dialogActions.length > 0" layout="row"> + <span flex></span> + <ng-content select="fds-dialog-actions"></ng-content> + </div> +</div> http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.component.js ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.component.js b/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.component.js new file mode 100644 index 0000000..d71a292 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.component.js @@ -0,0 +1,82 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var ngCore = require('@angular/core'); + +var FdsDialogTitleDirective = new ngCore.Class({ + extends: ngCore.Directive({selector: 'fds-dialog-title'}), + constructor: function () { + } +}); +var FdsDialogContentDirective = new ngCore.Class({ + extends: ngCore.Directive({selector: 'fds-dialog-content'}), + constructor: function () { + } +}); +var FdsDialogActionsDirective = new ngCore.Class({ + extends: ngCore.Directive({selector: 'fds-dialog-actions'}), + constructor: function () { + } +}); + +/** + * FdsDialogComponent constructor + * + * @constructor + */ +function FdsDialogComponent() { +}; + +FdsDialogComponent.prototype = { + constructor: FdsDialogComponent, + + /** + * Respond after Angular projects external content into the component's view. + */ + ngAfterContentInit: function () { + if (this.dialogTitle.length > 1) { + throw new Error('Duplicate fds-dialog-title component at in fds-dialog.'); + } + if (this.dialogContent.length > 1) { + throw new Error('Duplicate fds-dialog-content component at in fds-dialog.'); + } + if (this.dialogActions.length > 1) { + throw new Error('Duplicate fds-dialog-actions component at in fds-dialog.'); + } + } +} + +FdsDialogComponent.annotations = [ + new ngCore.Component({ + selector: 'fds-dialog', + template: require('./fds-dialog.component.html!text'), + queries: { + dialogTitle: new ngCore.ContentChildren(FdsDialogTitleDirective), + dialogContent: new ngCore.ContentChildren(FdsDialogContentDirective), + dialogActions: new ngCore.ContentChildren(FdsDialogActionsDirective) + } + }) +]; + +FdsDialogComponent.parameters = []; + +module.exports = { + FdsDialogTitleDirective: FdsDialogTitleDirective, + FdsDialogContentDirective: FdsDialogContentDirective, + FdsDialogActionsDirective: FdsDialogActionsDirective, + FdsDialogComponent: FdsDialogComponent +}; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialogs.module.js ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialogs.module.js b/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialogs.module.js new file mode 100644 index 0000000..3b9b610 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialogs.module.js @@ -0,0 +1,87 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var ngCore = require('@angular/core'); +var ngMaterial = require('@angular/material'); +var ngFlex = require('@angular/flex-layout'); +var ngCommon = require('@angular/common'); +var ngForms = require('@angular/forms'); +var fdsDialogComponentModule = require('@fluid-design-system/dialog-component'); +var fdsDialogServiceModule = require('@fluid-design-system/dialog-service'); +var FdsConfirmDialogComponent = require('@fluid-design-system/confirm-dialog-component'); + +var FDS_DIALOGS = [ + fdsDialogComponentModule.FdsDialogComponent, + fdsDialogComponentModule.FdsDialogTitleDirective, + fdsDialogComponentModule.FdsDialogActionsDirective, + fdsDialogComponentModule.FdsDialogContentDirective, + FdsConfirmDialogComponent +]; + +var FDS_DIALOGS_ENTRY_COMPONENTS = [ + FdsConfirmDialogComponent +]; + +/** + * FdsDialogsModule constructor. + * + * @constructor + */ +function FdsDialogsModule() { + +}; + +FdsDialogsModule.prototype = { + constructor: FdsDialogsModule +}; + +FdsDialogsModule.annotations = [ + new ngCore.NgModule({ + imports: [ + ngFlex.FlexLayoutModule, + ngForms.FormsModule, + ngCommon.CommonModule, + ngMaterial.MdDialogModule, + ngMaterial.MdInputModule, + ngMaterial.MdButtonModule, + ngMaterial.MdIconModule + ], + declarations: [ + FDS_DIALOGS + ], + exports: [ + FDS_DIALOGS + ], + providers: [ + fdsDialogServiceModule.FdsDialogService + ], + entryComponents: [ + FDS_DIALOGS_ENTRY_COMPONENTS + ] + }) +]; + +module.exports = { + FdsDialogsModule: FdsDialogsModule, + IConfirmConfig: fdsDialogServiceModule.IConfirmConfig, + FdsDialogService: fdsDialogServiceModule.FdsDialogService, + FdsDialogComponent: fdsDialogComponentModule.FdsDialogComponent, + FdsDialogTitleDirective: fdsDialogComponentModule.FdsDialogTitleDirective, + FdsDialogContentDirective: fdsDialogComponentModule.FdsDialogContentDirective, + FdsDialogActionsDirective: fdsDialogComponentModule.FdsDialogActionsDirective, + FdsConfirmDialogComponent: FdsConfirmDialogComponent +}; http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/dialogs/services/dialog.service.js ---------------------------------------------------------------------- diff --git a/nifi-registry-web-ui/src/main/platform/core/dialogs/services/dialog.service.js b/nifi-registry-web-ui/src/main/platform/core/dialogs/services/dialog.service.js new file mode 100644 index 0000000..06ecf43 --- /dev/null +++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/services/dialog.service.js @@ -0,0 +1,130 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var ngCore = require('@angular/core'); +var ngMaterial = require('@angular/material'); +var FdsConfirmDialogComponent = require('@fluid-design-system/confirm-dialog-component'); + +var IDialogConfig = new ngCore.Class({ + extends: ngMaterial.MdDialogConfig, + constructor: function () { + this.title = ''; + this.message = ''; + this.dialogRef = undefined; + this.viewContainerRef = undefined; + this.disableClose = true; + } +}); + +var IConfirmConfig = new ngCore.Class({ + extends: IDialogConfig, + constructor: function () { + this.acceptButton = 'ACCEPT'; + this.acceptButtonColor = 'fds-primary'; + this.cancelButton = 'CANCEL'; + this.cancelButtonColor = 'fds-secondary'; + } +}); + +function createConfig(config) { + var dialogConfig = new IConfirmConfig(); + dialogConfig.viewContainerRef = config.viewContainerRef; + dialogConfig.disableClose = config.disableClose; + return dialogConfig; +} + +/** + * FdsDialogService constructor. + * + * @param MdDialog The angular material MdDialog. + * @constructor + */ +function FdsDialogService(MdDialog) { + this.dialogService = MdDialog; +} + +FdsDialogService.prototype = { + contstructor: FdsDialogService, + + /** + * Wrapper function over the open() method in MdDialog. + * Opens a modal dialog containing the given component. + * + * @param component The angular ComponentType<T>. + * @param config The angular material MdDialogConfig. + * + */ + open: function (component, config) { + return this.dialogService.open(component, config); + }, + + /** + * Wrapper function over the closeAll() method in MdDialog. + * Closes all of the currently-open dialogs. + */ + closeAll: function () { + this.dialogService.closeAll(); + }, + + /** + * Opens a confirm dialog with the provided config. + * Returns an MdDialogRef<TdConfirmDialogComponent> object. + * + * @param config IConfirmConfig { + * message: string; + * title?: string; + * viewContainerRef?: ViewContainerRef; + * acceptButton?: string; + * acceptButtonColor?: string; + * cancelButton?: string; + * cancelButtonColor?: string; + * } + */ + openConfirm: function (config) { + var dialogConfig = createConfig(config); + var dialogRef = this.dialogService.open(FdsConfirmDialogComponent, dialogConfig); + var confirmDialogComponent = dialogRef.componentInstance; + confirmDialogComponent.dialogRef = dialogRef; + if (config.title) { + confirmDialogComponent.title = config.title; + } + if (config.message) { + confirmDialogComponent.message = config.message; + } + if (config.acceptButton) { + confirmDialogComponent.acceptButton = config.acceptButton; + } + if (config.acceptButtonColor) { + confirmDialogComponent.acceptButtonColor = config.acceptButtonColor; + } + if (config.cancelButton) { + confirmDialogComponent.cancelButton = config.cancelButton; + } + if (config.cancelButtonColor) { + confirmDialogComponent.cancelButtonColor = config.cancelButtonColor; + } + return dialogRef; + }, +} + +FdsDialogService.parameters = [ngMaterial.MdDialog]; + +module.exports = { + IDialogConfig: IDialogConfig, + IConfirmConfig: IConfirmConfig, + FdsDialogService: FdsDialogService +}; \ No newline at end of file
