http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/fds.animations.js ---------------------------------------------------------------------- diff --git a/src/platform/core/common/fds.animations.js b/src/platform/core/common/fds.animations.js new file mode 100644 index 0000000..90cb660 --- /dev/null +++ b/src/platform/core/common/fds.animations.js @@ -0,0 +1,133 @@ +/* + * 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 ngAnimate = require('@angular/animations'); + +/** + * FdsAnimations constructor. + * + * @constructor + */ +function FdsAnimations() { +}; + +FdsAnimations.prototype = { + constructor: FdsAnimations, + + /** + * Fade animation + */ + fadeAnimation: ngAnimate.trigger('routeAnimation', [ + ngAnimate.state('*', + ngAnimate.style({ + opacity: 1 + }) + ), + ngAnimate.transition(':enter', [ + ngAnimate.style({ + opacity: 0 + }), + ngAnimate.animate('0.5s ease-in') + ]), + ngAnimate.transition(':leave', [ + ngAnimate.animate('0.5s ease-out', ngAnimate.style({ + opacity: 0 + })) + ]) + ]), + + /** + * Slide in from the left animation + */ + slideInLeftAnimation: ngAnimate.trigger('routeAnimation', [ + ngAnimate.state('*', + ngAnimate.style({ + opacity: 1, + transform: 'translateX(0)' + }) + ), + ngAnimate.transition(':enter', [ + ngAnimate.style({ + opacity: 0, + transform: 'translateX(-100%)' + }), + ngAnimate.animate('0.5s ease-in') + ]), + ngAnimate.transition(':leave', [ + ngAnimate.animate('0.5s ease-out', ngAnimate.style({ + opacity: 0, + transform: 'translateX(100%)' + })) + ]) + ]), + + /** + * Slide in from the top animation + */ + slideInDownAnimation: ngAnimate.trigger('routeAnimation', [ + ngAnimate.state('*', + ngAnimate.style({ + opacity: 1, + transform: 'translateY(0)' + }) + ), + ngAnimate.transition(':enter', [ + ngAnimate.style({ + opacity: 0, + transform: 'translateY(-100%)' + }), + ngAnimate.animate('0.5s ease-in') + ]), + ngAnimate.transition(':leave', [ + ngAnimate.animate('0.5s ease-out', ngAnimate.style({ + opacity: 0, + transform: 'translateY(100%)' + })) + ]) + ]), + + /** + * Fly in/out animation + */ + flyInOutAnimation: ngAnimate.trigger('flyInOut', [ + ngAnimate.state('in', + ngAnimate.style({transform: 'translateX(0)'}) + ), + ngAnimate.transition('void => *', [ + ngAnimate.style({transform: 'translateX(100%)'}), + ngAnimate.animate('0.4s 0.1s ease-in') + ]), + ngAnimate.transition('* => void', ngAnimate.animate('0.2s ease-out', ngAnimate.style({transform: 'translateX(-100%)'}))) + ]), + + /** + * Fly in/out animation + */ + fadeInOutAnimation: ngAnimate.trigger('fadeInOut', [ + ngAnimate.state('in', + ngAnimate.style({opacity: 1}) + ), + ngAnimate.transition('void => *', [ + ngAnimate.style({opacity: 0}), + ngAnimate.animate('0.5s 0.1s ease-in') + ]), + ngAnimate.transition('* => void', ngAnimate.animate('0.5s ease-out', ngAnimate.style({opacity: 0}))) + ]) + +}; + +module.exports = new FdsAnimations();
http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/services/fds-storage.service.js ---------------------------------------------------------------------- diff --git a/src/platform/core/common/services/fds-storage.service.js b/src/platform/core/common/services/fds-storage.service.js new file mode 100644 index 0000000..8dff679 --- /dev/null +++ b/src/platform/core/common/services/fds-storage.service.js @@ -0,0 +1,219 @@ +/* + * 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. + */ + +// Store items for two days before being eligible for removal. +var MILLIS_PER_DAY = 86400000; +var TWO_DAYS = MILLIS_PER_DAY * 2; + +var isUndefined = function (obj) { + return typeof obj === 'undefined'; +}; + +var isNull = function (obj) { + return obj === null; +}; + +var isDefinedAndNotNull = function (obj) { + return !isUndefined(obj) && !isNull(obj); +}; + +/** + * Checks the expiration for the specified entry. + * + * @param {object} entry + * @returns {boolean} + */ +var checkExpiration = function (entry) { + if (isDefinedAndNotNull(entry.expires)) { + // get the expiration + var expires = new Date(entry.expires); + var now = new Date(); + + // return whether the expiration date has passed + return expires.valueOf() < now.valueOf(); + } else { + return false; + } +}; + +/** + * Gets an enty for the key. The entry expiration is not checked. + * + * @param {string} key + */ +var getEntry = function (key) { + try { + // parse the entry + var entry = JSON.parse(localStorage.getItem(key)); + + // ensure the entry and item are present + if (isDefinedAndNotNull(entry)) { + return entry; + } else { + return null; + } + } catch (e) { + return null; + } +}; + +/** + * FdsStorageService constructor. + * @constructor + */ +function FdsStorageService() { +}; + +FdsStorageService.prototype = { + constructor: FdsStorageService, + /** + * Initializes the storage. Items will be persisted for two days. Once the scripts runs + * thereafter, all eligible items will be removed. This strategy does not support persistence. + */ + init: function () { + for (var i = 0; i < localStorage.length; i++) { + try { + // get the next item + var key = localStorage.key(i); + + // attempt to get the item which will expire if necessary + this.getItem(key); + } catch (e) { + } + } + }, + + /** + * Stores the specified item. + * + * @param {string} key + * @param {object} item + * @param {integer} expires + */ + setItem: function (key, item, expires) { + // calculate the expiration + expires = isDefinedAndNotNull(expires) ? expires : new Date().valueOf() + TWO_DAYS; + + // create the entry + var entry = { + expires: expires, + item: item + }; + + // store the item + localStorage.setItem(key, JSON.stringify(entry)); + }, + + /** + * Returns whether there is an entry for this key. This will not check the expiration. If + * the entry is expired, it will return null on a subsequent getItem invocation. + * + * @param {string} key + * @returns {boolean} + */ + hasItem: function (key) { + return getEntry(key) !== null; + }, + + /** + * Gets the item with the specified key. If an item with this key does + * not exist, null is returned. If an item exists but cannot be parsed + * or is malformed/unrecognized, null is returned. + * + * @param {type} key + */ + getItem: function (key) { + var entry = getEntry(key); + if (entry === null) { + return null; + } + + // if the entry is expired, drop it and return null + if (checkExpiration(entry)) { + this.removeItem(key); + return null; + } + + // if the entry has the specified field return its value + if (isDefinedAndNotNull(entry['item'])) { + return entry['item']; + } else { + return null; + } + }, + + /** + * Gets the expiration for the specified item. This will not check the expiration. If + * the entry is expired, it will return null on a subsequent getItem invocation. + * + * @param {string} key + * @returns {integer} + */ + getItemExpiration: function (key) { + var entry = getEntry(key); + if (entry === null) { + return null; + } + + // if the entry has the specified field return its value + if (isDefinedAndNotNull(entry['expires'])) { + return entry['expires']; + } else { + return null; + } + }, + + /** + * Extracts the subject from the specified jwt. If the jwt is not as expected + * an empty string is returned. + * + * @param {string} jwt + * @returns {string} + */ + getJwtPayload: function (jwt) { + if (isDefinedAndNotNull(jwt)) { + var segments = jwt.split(/\./); + if (segments.length !== 3) { + return ''; + } + + var rawPayload = window.atob(segments[1]); + var payload = JSON.parse(rawPayload); + + if (isDefinedAndNotNull(payload)) { + return payload; + } else { + return null; + } + } + + return null; + }, + + /** + * Removes the item with the specified key. + * + * @param {type} key + */ + removeItem: function (key) { + localStorage.removeItem(key); + } +}; + +FdsStorageService.parameters = []; + +module.exports = FdsStorageService; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/services/fds-storage.service.spec.js ---------------------------------------------------------------------- diff --git a/src/platform/core/common/services/fds-storage.service.spec.js b/src/platform/core/common/services/fds-storage.service.spec.js new file mode 100644 index 0000000..f990af1 --- /dev/null +++ b/src/platform/core/common/services/fds-storage.service.spec.js @@ -0,0 +1,61 @@ +/* + * 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 FdsStorageService = require('@fluid-design-system/common/storage-service'); + +describe('FdsStorageService isolated unit tests', function () { + var fdsStorage; + + beforeEach(function () { + fdsStorage = new FdsStorageService(); + }); + + it('should set, retrieve, and remove an item from local storage.', function () { + fdsStorage.init(); + + var jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ'; + var expiration; + var item; + + if (!fdsStorage.hasItem('jwt')) { + fdsStorage.setItem('jwt', jwt); + item = fdsStorage.getItem('jwt'); + + //assertions + expect(item).toBe('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ'); + + var payload = fdsStorage.getItemExpiration('jwt'); + + fdsStorage.removeItem('jwt'); + item = fdsStorage.getItem('jwt'); + + //assertions + expect(item).toBe(null); + } + }); + + it('should get jet payload.', function () { + + var jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ'; + + var payload = fdsStorage.getJwtPayload(jwt); + + //assertions + expect(payload).toBeDefined(); + expect(payload.sub).toBe('1234567890'); + }); +}); http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/styles/_basicElements.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_basicElements.scss b/src/platform/core/common/styles/_basicElements.scss new file mode 100644 index 0000000..76c3a58 --- /dev/null +++ b/src/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("../../../../../../../node_modules/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("../../../../../../../node_modules/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("../../../../../../../node_modules/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("../../../../../../../node_modules/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("../../../../../../../node_modules/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("../../../../../../../node_modules/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("../../../../../../../node_modules/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("../../../../../../../node_modules/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-fds/blob/c85638d8/src/platform/core/common/styles/_buttonToggles.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_buttonToggles.scss b/src/platform/core/common/styles/_buttonToggles.scss new file mode 100644 index 0000000..73f4263 --- /dev/null +++ b/src/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-fds/blob/c85638d8/src/platform/core/common/styles/_buttons.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_buttons.scss b/src/platform/core/common/styles/_buttons.scss new file mode 100644 index 0000000..db6461f --- /dev/null +++ b/src/platform/core/common/styles/_buttons.scss @@ -0,0 +1,214 @@ +/* +* 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 */ + +@mixin fds-buttons-theme($theme) { + $primaryColor: map-get(map-get($theme, primary), 500); + $primaryColorHover: map-get(map-get($theme, primary), 100); + $accentColor: map-get(map-get($theme, accent), 500); + $accentColorHover: map-get(map-get($theme, accent), 100); + $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: lighter; + 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; + cursor: not-allowed; + } + + body[fds] .mat-button-toggle-disabled .mat-button-toggle-label-content { + cursor: not-allowed; + } + + 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 $warnColor; + background-color: $warnColor; + color: $buttonFontWarnColor; + } + + body[fds] .mat-raised-button.mat-fds-warn:hover { + color: $buttonFontWarnColorHover; + background-color: $red2; + border: 1px solid $warnColor; + } + + body[fds] .mat-raised-button.mat-fds-warn.mat-button-focus { + color: $buttonFontWarnColorSelected; + background-color: $warnColor; + border: 1px solid $buttonBorderColorRegularSelected; + } + + body[fds] .mat-raised-button.mat-fds-warn[disabled] { + color: $buttonFontWarnColorDisabled; + background-color: $warnColor; + border: 1px solid $warnColor; + } + + 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; + } + + .fds-primary-dropdown-button-menu .cdk-focused { + color: $buttonFontPrimaryColorSelected; + background-color: $buttonBgColorPrimarySelected; + } +} http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/styles/_checkboxes.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_checkboxes.scss b/src/platform/core/common/styles/_checkboxes.scss new file mode 100644 index 0000000..0268fde --- /dev/null +++ b/src/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] .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; +} + +body[fds] .mat-checkbox-disabled { + cursor: not-allowed; +} http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/styles/_chips.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_chips.scss b/src/platform/core/common/styles/_chips.scss new file mode 100644 index 0000000..755b2f4 --- /dev/null +++ b/src/platform/core/common/styles/_chips.scss @@ -0,0 +1,73 @@ +/* +* 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: 22px 8px 0 0; +} + +body[fds] .mat-basic-chip.td-chip-after-pad { + padding: 4px 12px 4px 12px; +} + +body[fds] .mat-basic-chip i { + margin-left: 10px; + float: right; + margin-top: 2px; +} + +body[fds] .mat-basic-chip .td-chip { + font-size: 10px; + min-height: unset; + line-height: 20px; + position: relative; + top: -2px; +} + +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 mat-icon.td-chip-removal { + font-size: 15px; + margin-bottom: 7px; +} http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/styles/_expansionPanels.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_expansionPanels.scss b/src/platform/core/common/styles/_expansionPanels.scss new file mode 100644 index 0000000..fdf9d4f --- /dev/null +++ b/src/platform/core/common/styles/_expansionPanels.scss @@ -0,0 +1,62 @@ +/* +* 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 */ + +@mixin fds-expansion-panels-theme($theme) { + $primaryColor: map-get(map-get($theme, primary), 500); + $primaryColorHover: map-get(map-get($theme, primary), 100); + $accentColor: map-get(map-get($theme, accent), 500); + $accentColorHover: map-get(map-get($theme, accent), 100); + + 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 mat-icon.td-expand-icon { + font-size: 28px; + color: $blue-grey1; + font-weight: bold; + } + + 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-fds/blob/c85638d8/src/platform/core/common/styles/_globalVars.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_globalVars.scss b/src/platform/core/common/styles/_globalVars.scss new file mode 100644 index 0000000..aede0a3 --- /dev/null +++ b/src/platform/core/common/styles/_globalVars.scss @@ -0,0 +1,69 @@ +/* + * 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 */ + +$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: #F8F9F9; +$grey7: #DDDDDD; +$grey8: #CFD3D7; +$grey9: #b2b8c1; +$grey10: #dbdee2; +$grey11: #2C3E44; +$grey12: #EEEFF0; +$grey13: #808793; +$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; +$bodyTextColor: $grey1; +$pageHeaderTextColor: $grey1; +$subHeaderTextColor: $grey2; +$descriptionTextColor: $grey2; +$linkColor: $blue-grey1; +$linkColorDisabled: $grey1; +$warnColor: $red1; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/styles/_helperClasses.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_helperClasses.scss b/src/platform/core/common/styles/_helperClasses.scss new file mode 100644 index 0000000..1298358 --- /dev/null +++ b/src/platform/core/common/styles/_helperClasses.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. + */ + +/* Text */ + +.camel-case { + text-transform: capitalize; +} + +.header { + font-family: $fontMedium; + font-size: 16px; + color: $pageHeaderTextColor; + padding-bottom: 10px; +} + +.help-icon { + font-size: 12px; + color: $blue1; +} + +.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; +} + +.fill-available-width { + width: 100%; +} + +.pointer { + cursor: pointer; +} http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/styles/_inputs.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_inputs.scss b/src/platform/core/common/styles/_inputs.scss new file mode 100644 index 0000000..cbcd08e --- /dev/null +++ b/src/platform/core/common/styles/_inputs.scss @@ -0,0 +1,109 @@ +/* +* 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% - 26px); +} + +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 { + top: 27px; + left: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: calc(100% - 44px); +} + +body[fds] mat-input-container.mat-focused .mat-input-placeholder { + transform: translateY(-26px) translateX(-10px) scale(0.75); +} + +body[fds] .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-placeholder { + transform: translateY(-26px) translateX(-10px) scale(.75); +} + +body[fds] .mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-placeholder-wrapper .mat-form-field-placeholder { + transform: translateY(-26px) translateX(-10px) scale(.75); +} + +body[fds] .input-button { + top: 5px; + left: -4px; + border-left: none !important; +} + +body[fds] .input-button.mat-raised-button[disabled] { + opacity: 1; +} + +body[fds] td-chips .mat-input-placeholder-wrapper::after { + content: '\f0b0'; + display: inline-table; + font-family: FontAwesome; + float: right; + margin: 15px 10px 0px 0px; + color: $grey3; +} + +body[fds] .mat-hint { + color: $grey3; +} http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/styles/_links.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_links.scss b/src/platform/core/common/styles/_links.scss new file mode 100644 index 0000000..1a5896d --- /dev/null +++ b/src/platform/core/common/styles/_links.scss @@ -0,0 +1,35 @@ +/* +* 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; + line-height: 24px; + cursor: pointer; +} + +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-fds/blob/c85638d8/src/platform/core/common/styles/_menus.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_menus.scss b/src/platform/core/common/styles/_menus.scss new file mode 100644 index 0000000..3f5aadf --- /dev/null +++ b/src/platform/core/common/styles/_menus.scss @@ -0,0 +1,118 @@ +/* +* 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 */ + +@mixin fds-menus-theme($theme) { + $primaryColor: map-get(map-get($theme, primary), 500); + $primaryColorHover: map-get(map-get($theme, primary), 100); + $accentColor: map-get(map-get($theme, accent), 500); + $accentColorHover: map-get(map-get($theme, accent), 100); + + body[fds] .mat-menu-panel { + border-radius: 2px; + } + + 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; + cursor: not-allowed; + } + + 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; + } + + .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-fds/blob/c85638d8/src/platform/core/common/styles/_modals.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_modals.scss b/src/platform/core/common/styles/_modals.scss new file mode 100644 index 0000000..51c7bad --- /dev/null +++ b/src/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-fds/blob/c85638d8/src/platform/core/common/styles/_panels.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_panels.scss b/src/platform/core/common/styles/_panels.scss new file mode 100644 index 0000000..6ead00d --- /dev/null +++ b/src/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] .md-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] .md-card-subtitle { + padding-left: 20px; + padding-right: 20px; + padding-top: 10px; + margin-bottom: 0px; +} + +body[fds] .md-card-content { + color: $grey2; + padding: 10px 20px 20px 20px; + margin: 0px; +} + +body[fds] .md-card .md-card-actions:last-child, body[fds] .md-card .md-card .md-card-actions:last-child { + padding: 0px 20px 20px 20px; + margin: 0px; +} + +body[fds] .fds-panel-menu-button { + position: absolute; + right: 0px; + z-index: 2; +} http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/styles/_progress-bar.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_progress-bar.scss b/src/platform/core/common/styles/_progress-bar.scss new file mode 100644 index 0000000..4ec81d6 --- /dev/null +++ b/src/platform/core/common/styles/_progress-bar.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-progress-bar-buffer { + background-color: $grey4; +} http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/styles/_radios.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_radios.scss b/src/platform/core/common/styles/_radios.scss new file mode 100644 index 0000000..2d9ca8e --- /dev/null +++ b/src/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-fds/blob/c85638d8/src/platform/core/common/styles/_sideNav.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_sideNav.scss b/src/platform/core/common/styles/_sideNav.scss new file mode 100644 index 0000000..af3514d --- /dev/null +++ b/src/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-fds/blob/c85638d8/src/platform/core/common/styles/_stepper.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_stepper.scss b/src/platform/core/common/styles/_stepper.scss new file mode 100644 index 0000000..fda0b87 --- /dev/null +++ b/src/platform/core/common/styles/_stepper.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. +*/ + +.td-step-header span { + display: none; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/styles/_tables.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_tables.scss b/src/platform/core/common/styles/_tables.scss new file mode 100644 index 0000000..9bfec90 --- /dev/null +++ b/src/platform/core/common/styles/_tables.scss @@ -0,0 +1,118 @@ +/* + * 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; + height: 100%; + line-height: 30px; +} + +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-icon-button:disabled { + color: $grey13; + cursor: not-allowed; +} + +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-column { + font-size: 12px; + color: $grey3; + height: 34px; + line-height: 34px; + padding: 0 28px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +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 mat-select .mat-select-value, body[fds] td-paging-bar mat-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; + border-right: 1px transparent; + border-left: 1px transparent; +} http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/common/styles/_tabs.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_tabs.scss b/src/platform/core/common/styles/_tabs.scss new file mode 100644 index 0000000..df5d653 --- /dev/null +++ b/src/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-fds/blob/c85638d8/src/platform/core/common/styles/_tooltips.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/_tooltips.scss b/src/platform/core/common/styles/_tooltips.scss new file mode 100644 index 0000000..563565f --- /dev/null +++ b/src/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-fds/blob/c85638d8/src/platform/core/common/styles/fluid-design-system.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/common/styles/fluid-design-system.scss b/src/platform/core/common/styles/fluid-design-system.scss new file mode 100644 index 0000000..e28f801 --- /dev/null +++ b/src/platform/core/common/styles/fluid-design-system.scss @@ -0,0 +1,36 @@ +/* + * 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 'globalVars'; +@import 'basicElements'; +@import 'helperClasses'; +@import 'buttonToggles'; +@import 'checkboxes'; +@import 'radios'; +@import 'chips'; +@import 'modals'; +@import 'tabs'; +@import 'inputs'; +@import 'panels'; +@import 'progress-bar'; +@import 'links'; +@import 'sideNav'; +@import 'stepper'; +@import 'tooltips'; +@import 'tables'; +@import '../../dialogs/fds-dialog-component'; +@import '../../snackbars/coaster/coaster.component'; http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/dialogs/_fds-dialog-component.scss ---------------------------------------------------------------------- diff --git a/src/platform/core/dialogs/_fds-dialog-component.scss b/src/platform/core/dialogs/_fds-dialog-component.scss new file mode 100644 index 0000000..f8784a4 --- /dev/null +++ b/src/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-fds/blob/c85638d8/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html ---------------------------------------------------------------------- diff --git a/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html new file mode 100644 index 0000000..efc1b87 --- /dev/null +++ b/src/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 mat-icon-button (click)="cancel()"> + <mat-icon color="primary">close</mat-icon> + </button> + </div> + </fds-dialog-title> + <fds-dialog-content class="md-subhead tc-grey-700"> + {{message}} + </fds-dialog-content> + <fds-dialog-actions> + <button *ngIf="cancelButton" mat-raised-button + color="{{cancelButtonColor}}" + #closeBtn + (keydown.arrowright)="acceptBtn.focus()" + (click)="cancel()">{{cancelButton}} + </button> + <button *ngIf="acceptButton" mat-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-fds/blob/c85638d8/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js ---------------------------------------------------------------------- diff --git a/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js new file mode 100644 index 0000000..552e68f --- /dev/null +++ b/src/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 = ''; + this.acceptButtonColor = 'fds-primary'; + this.cancelButton = ''; + 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-fds/blob/c85638d8/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.spec.js ---------------------------------------------------------------------- diff --git a/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.spec.js b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.spec.js new file mode 100644 index 0000000..0de49e4 --- /dev/null +++ b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.spec.js @@ -0,0 +1,50 @@ +/* + * 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 FdsConfirmDialogComponent = require('@fluid-design-system/confirm-dialog-component'); + +describe('coasterComponent isolated unit tests', function () { + var fdsConfirmDialogComponent; + + beforeEach(function () { + fdsConfirmDialogComponent = new FdsConfirmDialogComponent(); + fdsConfirmDialogComponent.dialogRef = { + close: function() {} + }; + + //Spy + spyOn(fdsConfirmDialogComponent.dialogRef, 'close'); + }); + + it('should accept the dialog', function () { + fdsConfirmDialogComponent.accept(); + //assertions + expect(fdsConfirmDialogComponent.dialogRef.close).toHaveBeenCalled(); + var call = fdsConfirmDialogComponent.dialogRef.close.calls.first(); + expect(call.args[0]).toBe(true); + expect(fdsConfirmDialogComponent.dialogRef.close.calls.count()).toBe(1); + }); + + it('should cancel the dialog', function () { + fdsConfirmDialogComponent.cancel(); + //assertions + expect(fdsConfirmDialogComponent.dialogRef.close).toHaveBeenCalled(); + var call = fdsConfirmDialogComponent.dialogRef.close.calls.first(); + expect(call.args[0]).toBe(false); + expect(fdsConfirmDialogComponent.dialogRef.close.calls.count()).toBe(1); + }); +}); http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/dialogs/fds-dialog.component.html ---------------------------------------------------------------------- diff --git a/src/platform/core/dialogs/fds-dialog.component.html b/src/platform/core/dialogs/fds-dialog.component.html new file mode 100644 index 0000000..4d39e73 --- /dev/null +++ b/src/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 mat-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-fds/blob/c85638d8/src/platform/core/dialogs/fds-dialog.component.js ---------------------------------------------------------------------- diff --git a/src/platform/core/dialogs/fds-dialog.component.js b/src/platform/core/dialogs/fds-dialog.component.js new file mode 100644 index 0000000..43eba47 --- /dev/null +++ b/src/platform/core/dialogs/fds-dialog.component.js @@ -0,0 +1,102 @@ +/* + * 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'); + +function FdsDialogTitleDirective() { +} + +FdsDialogTitleDirective.prototype = { + contstructor: FdsDialogTitleDirective +} + +FdsDialogTitleDirective.decorators = [ + { type: ngCore.Directive, args: [{ selector: 'fds-dialog-title' },] }, +]; + +function FdsDialogContentDirective() { +} + +FdsDialogContentDirective.prototype = { + contstructor: FdsDialogContentDirective +} + +FdsDialogContentDirective.decorators = [ + { type: ngCore.Directive, args: [{ selector: 'fds-dialog-content' },] }, +]; + +function FdsDialogActionsDirective() { +} + +FdsDialogActionsDirective.prototype = { + contstructor: FdsDialogActionsDirective +} + +FdsDialogActionsDirective.decorators = [ + { type: ngCore.Directive, args: [{ selector: 'fds-dialog-actions' },] }, +]; + +/** + * FdsDialogComponent constructor + * + * @constructor + */ +function FdsDialogComponent() { + this.dialogTitle = ''; + this.dialogContent = ''; + this.dialogActions = ''; +}; + +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 +}; http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/dialogs/fds-dialogs.component.spec.js ---------------------------------------------------------------------- diff --git a/src/platform/core/dialogs/fds-dialogs.component.spec.js b/src/platform/core/dialogs/fds-dialogs.component.spec.js new file mode 100644 index 0000000..a8c6913 --- /dev/null +++ b/src/platform/core/dialogs/fds-dialogs.component.spec.js @@ -0,0 +1,32 @@ +/* + * 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 fdsDialogsComponent = require('@fluid-design-system/dialog-component'); + +describe('FdsDialogComponent isolated unit tests', function () { + var fdsDialogs; + + beforeEach(function () { + fdsDialogs = new fdsDialogsComponent.FdsDialogComponent(); + }); + + it('should have defined fdsDialogs', function () { + fdsDialogs.ngAfterContentInit(); + //assertions + expect(fdsDialogs).toBeDefined(); + }); +}); http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/c85638d8/src/platform/core/dialogs/fds-dialogs.module.js ---------------------------------------------------------------------- diff --git a/src/platform/core/dialogs/fds-dialogs.module.js b/src/platform/core/dialogs/fds-dialogs.module.js new file mode 100644 index 0000000..3758655 --- /dev/null +++ b/src/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.MatDialogModule, + ngMaterial.MatInputModule, + ngMaterial.MatButtonModule, + ngMaterial.MatIconModule + ], + 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 +};
