From 8b2758cd185c67031129b26871d870582ed1df76 Mon Sep 17 00:00:00 2001 From: Scott Aslan Date: Tue, 30 Jan 2024 08:54:56 -0500 Subject: [PATCH] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes (#8294) * [NIFI-12655] theme nifi following Material Design and leveraging Angular Material themes * update accent palette usage to $nifi-canvas-accent-light-palette * fix layout of create process group dialog This closes #8294 --- .../nifi-web/nifi-web-frontend/pom.xml | 27 + .../nifi/src/app/_app.component-theme.scss | 34 + .../src/main/nifi/src/app/app.component.html | 6 +- .../src/main/nifi/src/app/app.component.scss | 2 - .../_access-policies.component-theme.scss | 34 + .../feature/access-policies.component.scss | 4 - ...nant-to-policy-dialog.component-theme.scss | 36 + ...add-tenant-to-policy-dialog.component.html | 2 +- ...add-tenant-to-policy-dialog.component.scss | 4 - .../policy-table/policy-table.component.ts | 2 +- ...onent-access-policies.component-theme.scss | 51 ++ .../component-access-policies.component.scss | 6 - .../feature/_bulletins.component-theme.scss | 34 + .../feature/bulletins.component.scss | 4 - .../_bulletin-board-list.component-theme.scss | 46 ++ .../bulletin-board-list.component.scss | 12 - .../feature/_counters.component-theme.scss | 34 + .../counters/feature/counters.component.scss | 28 +- .../counter-table/counter-table.component.ts | 2 +- .../service/canvas-utils.service.ts | 6 +- .../manager/connection-manager.service.ts | 8 +- .../service/manager/port-manager.service.ts | 13 +- .../manager/process-group-manager.service.ts | 54 +- .../manager/processor-manager.service.ts | 42 +- .../remote-process-group-manager.service.ts | 24 +- .../ui/canvas/_canvas.component-theme.scss | 537 ++++++++++++++ .../ui/canvas/canvas.component.scss | 156 ----- .../ui/canvas/canvas.component.ts | 12 +- .../footer/_footer.component-theme.scss | 42 ++ .../ui/canvas/footer/footer.component.html | 2 +- .../ui/canvas/footer/footer.component.scss | 4 - .../_navigation-control.component-theme.scss | 61 ++ .../birdseye/_birdseye.component-theme.scss | 44 ++ .../birdseye/birdseye.component.scss | 7 - .../navigation-control.component.scss | 11 - .../_operation-control.component-theme.scss | 79 +++ .../operation-control.component.scss | 15 - .../header/_header.component-theme.scss | 30 + .../_flow-status.component-theme.scss | 63 ++ .../flow-status/flow-status.component.html | 2 +- .../flow-status/flow-status.component.scss | 13 - .../_new-canvas-item.component-theme.scss | 56 ++ .../new-canvas-item.component.html | 29 +- .../new-canvas-item.component.scss | 13 - .../search/_search.component-theme.scss | 53 ++ .../header/search/search.component.scss | 13 - .../canvas/header/search/search.component.ts | 4 +- .../create-connection.component.html | 2 +- .../edit-connection.component.html | 2 +- .../_prioritizers.component-theme.scss | 59 ++ .../prioritizers/prioritizers.component.scss | 11 - .../prioritizers/prioritizers.component.ts | 4 +- .../source-processor.component.html | 1 + .../create-port/create-port.component.html | 2 +- .../port/edit-port/edit-port.component.html | 4 +- ..._create-process-group.component-theme.scss | 38 + .../create-process-group.component.html | 2 +- .../create-process-group.component.scss | 1 - .../edit-process-group.component.html | 3 +- .../group-components.component.html | 2 +- .../edit-processor.component.html | 2 +- .../relationship-settings.component.html | 1 + .../banner/_banner.component-theme.scss | 36 + .../_controller-services.component-theme.scss | 34 + .../controller-services.component.scss | 4 - .../login/feature/_login.component-theme.scss | 35 + .../pages/login/feature/login.component.scss | 4 - .../_login-form.component-theme.scss | 36 + .../ui/login-form/login-form.component.scss | 1 - .../_parameter-contexts.component-theme.scss | 34 + .../feature/parameter-contexts.component.scss | 4 - .../edit-parameter-context.component.html | 4 +- .../edit-parameter-context.component.scss | 2 - ...r-context-inheritance.component-theme.scss | 58 ++ ...rameter-context-inheritance.component.scss | 11 - ...parameter-context-inheritance.component.ts | 4 +- .../parameter-context-table.component.ts | 2 +- .../parameter-table.component.ts | 2 +- .../feature/_provenance.component-theme.scss | 64 ++ .../feature/provenance.component.scss | 4 - ...rovenance-event-table.component-theme.scss | 48 ++ .../lineage/_lineage.component-theme.scss | 63 ++ .../lineage/lineage.component.scss | 14 - .../lineage/lineage.component.ts | 16 +- .../provenance-event-table.component.scss | 4 - .../provenance-event-table.component.ts | 2 +- .../provenance-search-dialog.component.html | 7 +- .../_flowfile-dialog.component-theme.scss | 40 ++ .../flowfile-dialog.component.html | 6 +- .../flowfile-dialog.component.scss | 1 - .../flowfile-dialog.component.ts | 4 +- .../_flowfile-table.component-theme.scss | 42 ++ .../flowfile-table.component.scss | 8 - .../flowfile-table.component.ts | 2 +- .../feature/_settings.component-theme.scss | 34 + .../settings/feature/settings.component.scss | 4 - .../edit-flow-analysis-rule.component.html | 2 +- .../flow-analysis-rule-table.component.ts | 2 +- .../parameter-providers-table.component.ts | 2 +- .../create-registry-client.component.html | 2 +- .../edit-registry-client.component.html | 2 +- .../registry-client-table.component.ts | 2 +- .../edit-reporting-task.component.html | 4 +- .../reporting-task-table.component.ts | 2 +- .../feature/_summary.component-theme.scss | 34 + .../summary/feature/summary.component.scss | 28 +- .../port-status-table.component.ts | 2 +- .../summary-table-filter.component.html | 2 +- .../connection-status-table.component.ts | 2 +- .../process-group-status-table.component.ts | 2 +- .../processor-status-table.component.ts | 2 +- ...te-process-group-status-table.component.ts | 3 +- .../users/feature/_users.component-theme.scss | 34 + .../pages/users/feature/users.component.scss | 4 - .../user-access-policies.component.ts | 2 +- .../user-table/user-table.component.ts | 2 +- .../component-state.component.ts | 2 +- .../_context-menu.component-theme.scss | 67 ++ .../context-menu/context-menu.component.scss | 19 - .../controller-service-table.component.ts | 2 +- .../disable-controller-service.component.html | 4 +- .../edit-controller-service.component.html | 2 +- .../enable-controller-service.component.html | 4 +- .../edit-parameter-dialog.component.html | 4 +- .../edit-tenant-dialog.component.html | 2 +- .../_extension-creation.component-theme.scss | 84 +++ .../extension-creation.component.html | 2 +- .../extension-creation.component.scss | 27 - .../_navigation.component-theme.scss | 61 ++ .../navigation/navigation.component.html | 2 +- .../navigation/navigation.component.scss | 8 - .../new-property-dialog.component.html | 2 +- .../_login-message.component-theme.scss | 0 .../page-content/page-content.component.scss | 1 - .../combo-editor/combo-editor.component.html | 4 +- .../nf-editor/_nf-editor.component-theme.scss | 62 ++ .../nf-editor/nf-editor.component.html | 5 +- .../nf-editor/nf-editor.component.scss | 10 - .../property-table.component.ts | 2 +- ...ovenance-event-dialog.component-theme.scss | 42 ++ .../provenance-event-dialog.component.html | 20 +- .../provenance-event-dialog.component.scss | 1 - .../provenance-event-dialog.component.ts | 4 +- .../resizable/_resizable.component-theme.scss | 41 ++ .../common/resizable/resizable.component.scss | 3 - .../_status-history.component-theme.scss | 63 ++ .../status-history.component.html | 2 + .../status-history.component.scss | 7 - .../status-history.component.ts | 4 +- ...em-diagnostics-dialog.component-theme.scss | 38 + .../system-diagnostics-dialog.component.scss | 1 - .../_property-hint-tip.component-theme.scss | 34 + .../property-hint-tip.component.scss | 1 - .../yes-no-dialog.component.html | 2 +- .../assets/styles/_listing-table-theme.scss | 108 +++ .../nifi/src/assets/styles/listing-table.scss | 86 --- .../src/main/nifi/src/assets/themes/nifi.scss | 205 ++++++ .../main/nifi/src/assets/themes/purple.scss | 207 ++++++ .../src/main/nifi/src/index.html | 2 +- .../src/main/nifi/src/styles.scss | 656 +++++++++--------- .../src/main/nifi/tailwind.config.js | 8 - 161 files changed, 3530 insertions(+), 1045 deletions(-) create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/_component-access-policies.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/_bulletins.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/_bulletin-board-list.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/_counters.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/_header.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/_create-process-group.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/banner/_banner.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/_controller-services.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/_login.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/_login-form.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/_parameter-contexts.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/_flowfile-dialog.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/_flowfile-table.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/_settings.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/_summary.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/_users.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/page-content/_login-message.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/_provenance-event-dialog.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/_system-diagnostics-dialog.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/listing-table.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/pom.xml b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/pom.xml index 3c176bdeb2..ed567b185d 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/pom.xml +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/pom.xml @@ -30,6 +30,12 @@ v20.5.1 ${basedir}/src/main/nifi ${project.build.directory}/frontend-working-directory + 1.0 + + nifi @@ -85,6 +91,27 @@ + + com.coderplus.maven.plugins + copy-rename-maven-plugin + ${copy-rename-maven-plugin.version} + + + + copy-theme + initialize + + copy + + + ${frontend.working.dir}/src/assets/themes/${frontend.theme}.scss + ${frontend.working.dir}/src/assets/themes/nifi.scss + + + + com.github.eirslett frontend-maven-plugin diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss new file mode 100644 index 0000000000..481c26f374 --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss @@ -0,0 +1,34 @@ +/* + * 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. + */ + +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin theme($theme) { + // Get the color config from the theme. + $color-config: mat.get-color-config($theme); + + // Get the color palette from the color-config. + $primary-palette: map.get($color-config, 'primary'); + + // Get hues from palette + $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + + .splash { + background-color: $primary-palette-500; + } +} diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.component.html index 818df411e0..03803cca80 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.component.html @@ -17,8 +17,10 @@
- +
- +
+ +
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.component.scss index 4add7f2431..b947cf302e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.component.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.component.scss @@ -16,8 +16,6 @@ */ .splash { - background-color: #7098ad; - .splash-img { background: transparent url(../assets/icons/nifi-drop-splash.svg) no-repeat center center; } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss new file mode 100644 index 0000000000..c4bcb2b1fc --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss @@ -0,0 +1,34 @@ +/*! + * 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. + */ + +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin theme($theme) { + // Get the color config from the theme. + $color-config: mat.get-color-config($theme); + + // Get the color palette from the color-config. + $primary-palette: map.get($color-config, 'primary'); + + // Get hues from palette + $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + + .access-policies-header { + color: $primary-palette-500; + } +} diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.scss index b19b15a73c..3651a8ab70 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.scss @@ -14,7 +14,3 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -.access-policies-header { - color: #728e9b; -} diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.scss new file mode 100644 index 0000000000..967468396d --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.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. + */ + +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin theme($theme) { + // Get the color config from the theme. + $color-config: mat.get-color-config($theme); + + // Get the color palette from the color-config. + $primary-palette: map.get($color-config, 'primary'); + + // Get hues from palette + $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400'); + + .add-tenant-to-policy-form { + .fa { + color: $primary-palette-A400; + } + } +} diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html index ca63632e8d..ec85e077e8 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html @@ -42,7 +42,7 @@ - + +
+
+ +
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.scss index 78f8c9f869..ba51cc7c86 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.scss @@ -17,25 +17,12 @@ .icon { font-size: 32px; - color: #004849; &.hovering { cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; - background-color: #e3e8eb; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); - - .component-button-grip { - background: repeating-linear-gradient( - 90deg, - rgba(170, 187, 195, 1), - rgba(170, 187, 195, 1) 4px, - rgba(170, 187, 195, 0) 4px, - rgba(170, 187, 195, 0) 6px - ); - } } &.dragging { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss new file mode 100644 index 0000000000..1d1c67a2c5 --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss @@ -0,0 +1,53 @@ +/* + * 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. + */ + +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin theme($material-theme, $canvas-theme) { + // Get the color config from the theme. + $color-config: mat.get-color-config($material-theme); + $canvas-color-config: mat.get-color-config($canvas-theme); + + // Get the color palette from the color-config. + $primary-palette: map.get($color-config, 'primary'); + $canvas-primary-palette: map.get($canvas-color-config, 'primary'); + + // Get hues from palette + $primary-palette-300: mat.get-color-from-palette($primary-palette, 300); + $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); + $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); + $canvas-primary-palette-A700: mat.get-color-from-palette($canvas-primary-palette, 'A700'); + + .search-container { + border-left: 1px solid $primary-palette-300; + + &:hover, + &.open { + background-color: $canvas-primary-palette-900; + border-left: 1px solid $canvas-primary-palette-A700; + } + + .search-input { + color: $canvas-primary-palette-A200; + } + + .fa { + color: $canvas-primary-palette-A700; + } + } +} diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.scss index 625084bde8..647f727d14 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.scss @@ -16,21 +16,12 @@ */ .search-container { - border-left: 1px solid #aabbc3; - - &:hover, - &.open { - background-color: #ffffff; - border-left: 1px solid #004849; - } - .search-input { width: 0; height: 32px; outline: none; font-size: 13px; line-height: 13px; - color: #262626; transition: width 400ms ease-in-out; } @@ -38,8 +29,4 @@ width: 200px; transition: width 400ms ease-in-out; } - - .fa { - color: #004849; - } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.ts index 83696e9822..4d5dc3960c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.ts @@ -37,8 +37,8 @@ import { RouterLink } from '@angular/router'; selector: 'search', standalone: true, templateUrl: './search.component.html', - imports: [ReactiveFormsModule, CdkOverlayOrigin, CdkConnectedOverlay, NgIf, NgTemplateOutlet, RouterLink, NgForOf], - styleUrls: ['./search.component.scss'] + styleUrls: ['./search.component.scss'], + imports: [ReactiveFormsModule, CdkOverlayOrigin, CdkConnectedOverlay, NgIf, NgTemplateOutlet, RouterLink, NgForOf] }) export class Search implements OnInit { protected readonly ComponentType = ComponentType; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html index 4ca0682725..77acc5fc72 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html @@ -162,7 +162,7 @@ - + + + + + + + + - + - + + + + + + + @@ -124,7 +124,7 @@ - + diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html index b30e3f85fa..1da0da8760 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html @@ -104,7 +104,7 @@ - + + - + diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html index 21e268a8ff..18bd105d7b 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html @@ -32,7 +32,7 @@
- Set empty string + Set empty string
@@ -49,7 +49,7 @@
- + + + + diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.scss index 688f7ebbb1..798bfa43fb 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.scss @@ -30,7 +30,6 @@ overflow-y: auto; .event-header { - color: #728e9b; font-size: 15px; font-family: 'Roboto Slab'; font-style: normal; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.ts index f91e4b0b2c..ab7eeb2d43 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.ts @@ -31,6 +31,7 @@ import { Attribute, ProvenanceEventDialogRequest } from '../../../state/shared'; selector: 'provenance-event-dialog', standalone: true, templateUrl: './provenance-event-dialog.component.html', + styleUrls: ['./provenance-event-dialog.component.scss'], imports: [ MatDialogModule, MatInputModule, @@ -43,8 +44,7 @@ import { Attribute, ProvenanceEventDialogRequest } from '../../../state/shared'; MatTabsModule, NgTemplateOutlet, FormsModule - ], - styleUrls: ['./provenance-event-dialog.component.scss'] + ] }) export class ProvenanceEventDialog { @Input() contentViewerAvailable!: boolean; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss new file mode 100644 index 0000000000..85a26f6235 --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.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. + */ + +@use 'sass:math' as math; +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin theme($material-theme, $canvas-theme) { + // Get the color config from the theme. + $color-config: mat.get-color-config($material-theme); + $canvas-color-config: mat.get-color-config($canvas-theme); + + // Get the color palette from the color-config. + $primary-palette: map.get($color-config, 'primary'); + $canvas-primary-palette: map.get($canvas-color-config, 'primary'); + + // Get hues from palette + $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500); + + $handle-size: 15px; + $handle-color: $canvas-primary-palette-500; + + .resizable-triangle { + border-right: math.div($handle-size, 2) solid $handle-color; + border-bottom: math.div($handle-size, 2) solid $handle-color; + } +} diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/resizable.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/resizable.component.scss index 863e6e8666..ad1a0c7709 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/resizable.component.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/resizable.component.scss @@ -18,7 +18,6 @@ @use 'sass:math' as math; $handle-size: 15px; -$handle-color: #ccc; :host:hover .resizable-triangle { opacity: 1; @@ -42,8 +41,6 @@ $handle-color: #ccc; height: 0; border-left: math.div($handle-size, 2) solid transparent; border-top: math.div($handle-size, 2) solid transparent; - border-right: math.div($handle-size, 2) solid $handle-color; - border-bottom: math.div($handle-size, 2) solid $handle-color; bottom: 0; right: 0; } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss new file mode 100644 index 0000000000..1418df260f --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss @@ -0,0 +1,63 @@ +/*! + * 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. + */ + +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin theme($material-theme, $canvas-theme) { + // Get the color config from the theme. + $color-config: mat.get-color-config($material-theme); + $canvas-color-config: mat.get-color-config($canvas-theme); + + // Get the color palette from the color-config. + $primary-palette: map.get($color-config, 'primary'); + $canvas-primary-palette: map.get($canvas-color-config, 'primary'); + + // Get hues from palette + $primary-palette-700: mat.get-color-from-palette($primary-palette, 700); + $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); + $canvas-primary-palette-A100: mat.get-color-from-palette($canvas-primary-palette, 'A100'); + $canvas-primary-palette-A700: mat.get-color-from-palette($canvas-primary-palette, 'A700'); + + #status-history-chart-container, + #status-history-chart-control-container { + background-color: $canvas-primary-palette-900; + + .axis path, + .axis line { + fill: none; + stroke: $canvas-primary-palette-A100; + } + + .chart-line { + fill: none; + } + + .brush .selection { + stroke: $canvas-primary-palette-A700; + } + } + + #status-history-chart-control-container { + background-color: $canvas-primary-palette-900; + } + + #status-history-chart-container text, + #status-history-chart-control-container text { + fill: $primary-palette-700; + } +} diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html index 069700effe..4eb0dfb42d 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html @@ -60,6 +60,7 @@
@@ -78,6 +79,7 @@
{{ request.message }}
- + diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss new file mode 100644 index 0000000000..02f1f321c6 --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss @@ -0,0 +1,108 @@ +/*! + * 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. + */ + +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin theme($material-theme, $canvas-theme) { + // Get the color config from the theme. + $color-config: mat.get-color-config($material-theme); + $canvas-color-config: mat.get-color-config($canvas-theme); + + // Get the color palette from the color-config. + $primary-palette: map.get($color-config, 'primary'); + $canvas-primary-palette: map.get($canvas-color-config, 'primary'); + $canvas-accent-palette: map.get($canvas-color-config, 'accent'); + + // Get hues from palette + $primary-palette-100: mat.get-color-from-palette($primary-palette, 100); + $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400'); + $canvas-primary-palette-800: mat.get-color-from-palette($canvas-primary-palette, 800); + $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); + $canvas-accent-palette-A100: mat.get-color-from-palette($canvas-accent-palette, 'A100'); + + .listing-table { + table { + width: 100%; + table-layout: fixed; + + td, + th { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 0 8px; + cursor: default; + } + + th { + background-color: $primary-palette-500 !important; + color: $canvas-primary-palette-900; + } + + tr:hover { + background-color: $primary-palette-100 !important; + } + + .selected { + background-color: $canvas-accent-palette-A100 !important; + } + + .even { + background-color: $canvas-primary-palette-800; + } + + .fa { + color: $primary-palette-A400; + width: 10px; + height: 14px; + text-align: center; + } + + .icon { + color: $primary-palette-A400; + width: 10px; + text-align: center; + } + + .mat-column-moreDetails { + min-width: 30px; + } + + .mat-column-actions { + min-width: 115px; + } + } + + .mat-mdc-table .mdc-data-table__header-row { + height: 35px; + } + + .mat-mdc-table .mdc-data-table__row { + height: 35px; + } + } + + .mat-sort-header-arrow { + color: $canvas-primary-palette-900; + } + + .mat-sort-header-content { + overflow: hidden; + } +} diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/listing-table.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/listing-table.scss deleted file mode 100644 index 1b26a24606..0000000000 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/listing-table.scss +++ /dev/null @@ -1,86 +0,0 @@ -/*! - * 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. - */ - -.listing-table { - table { - width: 100%; - table-layout: fixed; - - td, - th { - max-width: 300px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding: 0 8px; - } - - th { - background-color: #728e9b; - color: #fff; - } - - tr:hover { - background-color: #dce3e6 !important; - } - - .selected { - background-color: #ffef85 !important; - } - - .even { - background-color: #f4f6f7; - } - - .fa { - color: #004849; - width: 10px; - height: 14px; - text-align: center; - } - - .icon { - color: #004849; - width: 10px; - text-align: center; - } - - .mat-column-moreDetails { - min-width: 30px; - } - - .mat-column-actions { - min-width: 115px; - } - } - - .mat-mdc-table .mdc-data-table__header-row { - height: 35px; - } - - .mat-mdc-table .mdc-data-table__row { - height: 35px; - } -} - -::ng-deep .mat-sort-header-arrow { - color: #fff; -} - -::ng-deep .mat-sort-header-content { - overflow: hidden; -} diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss new file mode 100644 index 0000000000..b96c925f12 --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss @@ -0,0 +1,205 @@ +/*! + * 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. + */ + +// Custom Colors following Material Design +// For more information: https://m2.material.io/design/color/the-color-system.html + +// The $material-primary-light-palette define the PRIMARY AND ACCENT palettes for all Angular Material components used throughout Apache NiFi +$material-primary-light-palette: ( + // 50 -> 900 are the PRIMARY colors (mat.define-palette($material-primary-light-palette, 300);) defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b + 50: rgba(249, 250, 251, 0.97), // .context-menu + 100: rgba(233, 239, 243, 1), // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect, + 200: #cbd8dd, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a, button.nifi-button, button.nifi-button:disabled + 300: #abbdc5, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank + 400: #8aa2ad, // Default hue for this palette (color="primary"). + 500: #728e9b, // .disabled, .not-transmitting, .splash, .access-policies-header, .operation-context-type, .bulletin-board-header, .counter-header, .stats-info, .active-thread-count-icon, .processor-type, .port-transmission-icon, .operation-context-type, .flow-status.fa, .flow-status.icon, .controller-bulletins, .prioritizers-list, .controller-services-header, .login-title, .parameter-context-header, .parameter-context-inheritance-list, .provenance-header, .flowfile-header, .queue-listing-header, .settings-header, .summary-header, .user-header, table th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, .section-header, + 600: #597b8a, // .breadcrumb-container, .birdseye-brush + 700: #4e6c79, // "darker" hue for this palette. Also #status-history-chart-container text, #status-history-chart-control-container text + 800: #3f5863, + 900: #31454e, + + // A100 -> A700 are the ACCENT color (mat.define-palette($material-primary-light-palette, A400, A100, A700);). These color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b + // These colors are also used by some custom canvas components that display the ANALOGOUS color for things like buttons, links, borders, info, etc. + A100: #c1dbd7, // .zero + A200: #9dc4be, // .enabled, .transmitting, .load-balance-icon-active + A400: #729b93, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu + A700: rgba(91, 109, 104, 1), // .hint-pattern + + // These are the $material-primary-light-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. + // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important + // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. + // + // NOTE: Care should be taken here to ensure the values meet accessibility standards. + // + // NOTE: When creating the Material palette definition mat.define-palette($material-primary-light-palette, 300); + // Since 300, was set as the default the contrast-300 will be used as the default text color. + contrast: ( + 50: rgba(black, 0.87), + 100: rgba(black, 0.87), + 200: rgba(black, 0.87), + 300: #ffffff, + 400: #ffffff, + 500: #ffffff, + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: rgba(black, 0.87), + A200: rgba(black, 0.87), + A400: #ffffff, + A700: #ffffff, + ) +); + +// The $nifi-canvas-light-palette defines the PRIMARY palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$nifi-canvas-light-palette: ( + // mat.define-palette($nifi-canvas-light-palette) + 50: rgba(0, 0, 0, 0.25), // .tooltip, .property-editor, g.component rect.border, .component-comments, g.connection path.connection-path, g.connection rect.backpressure-tick.data-size-prediction, g.connection rect.backpressure-tick.object-prediction, g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .breadcrumb-container, .navigation-control, .operation-control, header.nifi-header, .new-canvas-item.icon.hovering, .cdk-drag-disabled, .cdk-drag-preview, .context-menu, .global-menu:hover, + 100: rgba(black, 0.87), // .prioritizer-draggable-item, .parameter-context-draggable-item + 200: #000, // .tooltip, .cm-s-default .CodeMirror-matchingbracket, circle.flowfile-link + 300: #aaaaaa, // .context-menu-item:active, .CodeMirror, .cm-s-default .CodeMirror-matchingbracket + 400: #acacac, // .unset, .border.ghost, .backpressure-tick.not-configured, g.connection.ghost path.connection-path, g.connection.ghost rect.connection-label, .prioritizers-list, .prioritizer-draggable-item, .parameter-context-inheritance-list, .parameter-context-draggable-item + 500: #d8d8d8, // g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .cdk-drag-disabled, .resizable-triangle + 600: #f9fafb, // .canvas-background, .navigation-control, .operation-control, .lineage + 700: #e5ebed, // .canvas-background, g.component rect.body.unauthorized, g.component rect.processor-icon-container.unauthorized, g.connection rect.body.unauthorized, #birdseye, .lineage + 800: #f4f6f7, // .even, .remote-process-group-sent-stats, .processor-stats-in-out, .process-group-queued-stats, .process-group-read-write-stats + 900: rgba(255, 255, 255, 1), // circle.flowfile-link, .processor-read-write-stats, .process-group-stats-in-out, .tooltip, .property-editor, .disabled, .enabled, .stopped, .running, .has-errors, .invalid, .validating, .transmitting, .not-transmitting, .up-to-date, .locally-modified, .sync-failure, .stale, .locally-modified-and-stale, g.component rect.body, text.bulletin-icon, rect.processor-icon-container, circle.restricted-background, circle.is-primary-background, g.connection rect.body, text.connection-to-run-status, text.expiration-icon, text.load-balance-icon, text.penalized-icon, g.connection rect.backpressure-tick.data-size-prediction.prediction-down, g.connection rect.backpressure-tick.object-prediction.prediction-down, text.version-control, .breadcrumb-container, #birdseye, .controller-bulletins .fa, .search-container:hover, .search-container.open, .login-background, table th, .mat-sort-header-arrow, .CodeMirror, #status-history-chart-container, #status-history-chart-control-container, #status-history-chart-control-container, + + // some analog colors for headers and hover states, inputs, stats, etc + A100: rgba(227, 232, 235, 0), // .navigation-control-header:hover, .operation-control-header:hover, .axis path, .axis line + A200: #262626, // .operation-context-name, text.stats-label, text.processor-name, text.port-name, text.process-group-name, text.remote-process-group-name, .navigation-control-title, .operation-control-title, .operation-context-name, .search-input, .context-menu-item-text, .current-user + A400: #444, // rect.component-selection, rect.drag-selection, rect.label-drag + A700: #666, // text.processor-bundle, .search-container:hover, .search-container.open, .search-container.fa, .selected-type-bundle, .brush .selection + + // These are the $nifi-canvas-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. + // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important + // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. + // + // NOTE: Care should be taken here to ensure the values meet accessibility standards. + // + // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-light-palette); + // Since 500 is the default the contrast-500 will be used as the default text color. + contrast: ( + 50: rgba(black, 0.87), + 100: rgba(black, 0.87), + 200: rgba(black, 0.87), + 300: rgba(black, 0.87), + 400: #ffffff, + 500: #ffffff, + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: rgba(black, 0.87), + A200: rgba(black, 0.87), + A400: #ffffff, + A700: #ffffff, + ) +); + +// The $nifi-canvas-light-palette defines the ACCENT palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$nifi-canvas-accent-light-palette: ( + // 50 -> 900 are the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #52bf7e + 50: #e6f6ec, + 100: #c3e8d0, // "lighter" hue for this palette. + 200: #9dd9b2, //.running + 300: #73ca94, //.backpressure-percent + 400: #52bf7e, // color="primary" Default hue for this palette. Also .up-to-date + 500: #2cb367, + 600: #1A9964, //.version-control + 700: #016131, // "darker" hue for this palette Also .bulletin-normal + 800: #0000ff, //.endpoint, g.process-group.drop rect.border + 900: #00ff00, //.connectable-destination, .connector.connectable + + // A100 - A700 are the ANALOGOUS colors but are more customized. These colors are used to highlight, warn, denote midpoints and labelpoints, etc + A100: #ffef85, //.selected + A200: #f8bf47, //.invalid, .is-missing-port, circle.context + A400: #bda500, //.backpressure-percent-warning, .bulletin-warn, .backpressure-percent.warning, text.run-status-icon + A700: #ffcc00, //g.connection.selected rect.border, .connection-selection-path, .midpoint, .labelpoint + + // These are the $nifi-canvas-accent-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. + // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important + // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. + // + // NOTE: Care should be taken here to ensure the values meet accessibility standards. + // + // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-accent-light-palette, 400, 100, 700); + // Since 400 is the default the contrast-400 will be used as the default text color in some cases. + contrast: ( + 50: rgba(black, 0.87), + 100: rgba(black, 0.87), + 200: rgba(black, 0.87), + 300: rgba(black, 0.87), + 400: rgba(black, 0.87), + 500: rgba(black, 0.87), + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: rgba(black, 0.87), + A200: rgba(black, 0.87), + A400: rgba(black, 0.87), + A700: rgba(black, 0.87), + ) +); + +// The $warn-light-palette defines the WARN palette both for all Angular Material components used throughout Apache NiFi and for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$warn-light-palette: ( + // 50 -> 900 are the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #f64e4c + 50: #ffebee, + 100: #ffccd2, // "lighter" hue for this palette. Also .banner-error + 200: #f49999, //.stopped + 300: #eb7071, //.stale + 400: #f64e4c, // color="primary" Default hue for this palette. Also .unauthorized, .bulletin-background, .restricted, .connection-path.full, .connection-path.unauthorized, .backpressure-percent.error, .controller-bulletins.has-bulletins, .link.selected, circle.selected, .listing-message, .fa-shield + 500: #fa3b30, + 600: #ec3030, //.bulletin-error + 700: #ff1507, // "darker" hue for this palette + 800: #ff0000, //.connector, .startpoint + 900: #f10000, + + // A100 - A700 are the COMPLEMENTARY colors defined by the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b which is the primary color of the $material-primary-light-palette. + // These color are used for label values, stats, timestamps, counts, etc. + A100: #b6abaa, //.sync-failure + A200: #9c8886, // .operation-context-logo, .funnel-icon, .port-icon, .flowfile-icon + A400: #765452, // .value, .refresh-timestamp, .stats-value, .active-thread-count, .process-group-contents-count, .operation-context-id, .selected-type-name + A700: #4a3435, // .version-control + + // These are the $nifi-canvas-accent-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. + // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important + // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. + // + // NOTE: Care should be taken here to ensure the values meet accessibility standards. + // + // NOTE: When creating the Material palette definition mat.define-palette($warn-light-palette, 400, 100, 700); + // Since 400 is the default the contrast-400 will be used as the default text color in some cases. + contrast: ( + 50: rgba(black, 0.87), + 100: rgba(black, 0.87), + 200: rgba(black, 0.87), + 300: rgba(black, 0.87), + 400: rgba(black, 0.87), + 500: #ffffff, + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: rgba(black, 0.87), + A200: #ffffff, + A400: #ffffff, + A700: #ffffff, + ) +); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss new file mode 100644 index 0000000000..52e2dab337 --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss @@ -0,0 +1,207 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +// Custom Colors following Material Design +// For more information: https://m2.material.io/design/color/the-color-system.html + +// The $material-primary-light-palette define the PRIMARY AND ACCENT palettes for all Angular Material components used throughout Apache NiFi +$material-primary-light-palette: ( + // 50 -> 900 are the PRIMARY colors (mat.define-palette($material-primary-light-palette, 300);) defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b + 50: rgba(240, 231, 242, 1), // .context-menu + 100: rgba(218, 195, 224, 1), // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect, + 200: #c29dcc, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a, button.nifi-button, button.nifi-button:disabled + 300: #aa79b7, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank + 400: #985fa7, // Default hue for this palette (color="primary"). + 500: #874b98, // .disabled, .not-transmitting, .splash, .access-policies-header, .operation-context-type, .bulletin-board-header, .counter-header, .stats-info, .active-thread-count-icon, .processor-type, .port-transmission-icon, .operation-context-type, .flow-status.fa, .flow-status.icon, .controller-bulletins, .prioritizers-list, .controller-services-header, .login-title, .parameter-context-header, .parameter-context-inheritance-list, .provenance-header, .flowfile-header, .queue-listing-header, .settings-header, .summary-header, .user-header, table th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, .section-header, + 600: #7b4690, // .breadcrumb-container, .birdseye-brush + 700: #6b3f86, // "darker" hue for this palette. Also #status-history-chart-container text, #status-history-chart-control-container text + 800: #5d397b, + 900: #452f65, + + // A100 -> A700 are the ACCENT color (mat.define-palette($material-primary-light-palette, A400, A100, A700);). These color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b + // These colors are also used by some custom canvas components that display the ANALOGOUS color for things like buttons, links, borders, info, etc. + A100: #c8cbe2, // .zero + A200: #a5a9ce, // .enabled, .transmitting, .load-balance-icon-active + A400: #6a6eab, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu + A700: rgba(68, 67, 136, 1), // .hint-pattern + + // These are the $material-primary-light-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. + // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important + // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. + // + // NOTE: Care should be taken here to ensure the values meet accessibility standards. + // + // NOTE: When creating the Material palette definition mat.define-palette($material-primary-light-palette, 300); + // Since 300, was set as the default the contrast-300 will be used as the default text color. + contrast: ( + 50: rgba(black, 0.87), + 100: rgba(black, 0.87), + 200: rgba(black, 0.87), + 300: #ffffff, + 400: #ffffff, + 500: #ffffff, + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: rgba(black, 0.87), + A200: rgba(black, 0.87), + A400: #ffffff, + A700: #ffffff, + ) +); + +// The $nifi-canvas-light-palette defines the PRIMARY palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$nifi-canvas-light-palette: ( + // mat.define-palette($nifi-canvas-light-palette) + 50: rgba(0, 0, 0, 0.25), // .tooltip, .property-editor, g.component rect.border, .component-comments, g.connection path.connection-path, g.connection rect.backpressure-tick.data-size-prediction, g.connection rect.backpressure-tick.object-prediction, g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .breadcrumb-container, .navigation-control, .operation-control, header.nifi-header, .new-canvas-item.icon.hovering, .cdk-drag-disabled, .cdk-drag-preview, .context-menu, .global-menu:hover, + 100: rgba(black, 0.87), // .prioritizer-draggable-item, .parameter-context-draggable-item + 200: #000, // .tooltip, .cm-s-default .CodeMirror-matchingbracket, circle.flowfile-link + 300: #aaaaaa, // .context-menu-item:active, .CodeMirror, .cm-s-default .CodeMirror-matchingbracket + 400: #acacac, // .unset, .border.ghost, .backpressure-tick.not-configured, g.connection.ghost path.connection-path, g.connection.ghost rect.connection-label, .prioritizers-list, .prioritizer-draggable-item, .parameter-context-inheritance-list, .parameter-context-draggable-item + 500: #d8d8d8, // g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .cdk-drag-disabled, .resizable-triangle + 600: #f9fafb, // .canvas-background, .navigation-control, .operation-control, .lineage + 700: #e5ebed, // .canvas-background, g.component rect.body.unauthorized, g.component rect.processor-icon-container.unauthorized, g.connection rect.body.unauthorized, #birdseye, .lineage + 800: #f4f6f7, // .even, .remote-process-group-sent-stats, .processor-stats-in-out, .process-group-queued-stats, .process-group-read-write-stats + 900: rgba(255, 255, 255, 1), // circle.flowfile-link, .processor-read-write-stats, .process-group-stats-in-out, .tooltip, .property-editor, .disabled, .enabled, .stopped, .running, .has-errors, .invalid, .validating, .transmitting, .not-transmitting, .up-to-date, .locally-modified, .sync-failure, .stale, .locally-modified-and-stale, g.component rect.body, text.bulletin-icon, rect.processor-icon-container, circle.restricted-background, circle.is-primary-background, g.connection rect.body, text.connection-to-run-status, text.expiration-icon, text.load-balance-icon, text.penalized-icon, g.connection rect.backpressure-tick.data-size-prediction.prediction-down, g.connection rect.backpressure-tick.object-prediction.prediction-down, text.version-control, .breadcrumb-container, #birdseye, .controller-bulletins .fa, .search-container:hover, .search-container.open, .login-background, table th, .mat-sort-header-arrow, .CodeMirror, #status-history-chart-container, #status-history-chart-control-container, #status-history-chart-control-container, + + // some analog colors for headers and hover states, inputs, stats, etc + A100: rgba(227, 232, 235, 0), // .navigation-control-header:hover, .operation-control-header:hover, .axis path, .axis line + A200: #262626, // .operation-context-name, text.stats-label, text.processor-name, text.port-name, text.process-group-name, text.remote-process-group-name, .navigation-control-title, .operation-control-title, .operation-context-name, .search-input, .context-menu-item-text, .current-user + A400: #444, // rect.component-selection, rect.drag-selection, rect.label-drag + A700: #666, // text.processor-bundle, .search-container:hover, .search-container.open, .search-container.fa, .selected-type-bundle, .brush .selection + + // These are the $nifi-canvas-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. + // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important + // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. + // + // NOTE: Care should be taken here to ensure the values meet accessibility standards. + // + // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-light-palette); + // Since 500 is the default the contrast-500 will be used as the default text color. + contrast: ( + 50: rgba(black, 0.87), + 100: rgba(black, 0.87), + 200: rgba(black, 0.87), + 300: rgba(black, 0.87), + 400: #ffffff, + 500: #ffffff, + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: rgba(black, 0.87), + A200: rgba(black, 0.87), + A400: #ffffff, + A700: #ffffff, + ) +); + +// The $nifi-canvas-light-palette defines the ACCENT palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$nifi-canvas-accent-light-palette: ( + // 50 -> 900 are the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #52bf7e + 50: #e6f6ec, + 100: #c3e8d0, // "lighter" hue for this palette. + 200: #9dd9b2, //.running + 300: #73ca94, //.backpressure-percent + 400: #52bf7e, // color="primary" Default hue for this palette. Also .up-to-date + 500: #2cb367, + 600: #1A9964, //.version-control + 700: #016131, // "darker" hue for this palette Also .bulletin-normal + 800: #0000ff, //.endpoint, g.process-group.drop rect.border + 900: #00ff00, //.connectable-destination, .connector.connectable + + // A100 - A700 are the ANALOGOUS colors but are more customized. These colors are used to highlight, warn, denote midpoints and labelpoints, etc + A100: #ffef85, //.selected + A200: #f8bf47, //.invalid, .is-missing-port, circle.context + A400: #bda500, //.backpressure-percent-warning, .bulletin-warn, .backpressure-percent.warning, text.run-status-icon + A700: #ffcc00, //g.connection.selected rect.border, .connection-selection-path, .midpoint, .labelpoint + + // These are the $nifi-canvas-accent-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. + // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important + // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. + // + // NOTE: Care should be taken here to ensure the values meet accessibility standards. + // + // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-accent-light-palette, 400, 100, 700); + // Since 400 is the default the contrast-400 will be used as the default text color in some cases. + contrast: ( + 50: rgba(black, 0.87), + 100: rgba(black, 0.87), + 200: rgba(black, 0.87), + 300: rgba(black, 0.87), + 400: rgba(black, 0.87), + 500: rgba(black, 0.87), + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: rgba(black, 0.87), + A200: rgba(black, 0.87), + A400: rgba(black, 0.87), + A700: rgba(black, 0.87), + ) +); + +// The $warn-light-palette defines the WARN palette both for all Angular Material components used throughout Apache NiFi and for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$warn-light-palette: ( + // 50 -> 900 are the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #f64e4c + 50: #ffebee, + 100: #ffccd2, // "lighter" hue for this palette. Also .banner-error + 200: #f49999, //.stopped + 300: #eb7071, //.stale + 400: #f64e4c, // color="primary" Default hue for this palette. Also .unauthorized, .bulletin-background, .restricted, .connection-path.full, .connection-path.unauthorized, .backpressure-percent.error, .controller-bulletins.has-bulletins, .link.selected, circle.selected, .listing-message, .fa-shield + 500: #fa3b30, + 600: #ec3030, //.bulletin-error + 700: #ff1507, // "darker" hue for this palette + 800: #ff0000, //.connector, .startpoint + 900: #f10000, + + // A100 - A700 are the COMPLEMENTARY colors defined by the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b which is the primary color of the $material-primary-light-palette. + // These color are used for label values, stats, timestamps, counts, etc. + A100: #b6abaa, //.sync-failure + A200: #9c8886, // .operation-context-logo, .funnel-icon, .port-icon, .flowfile-icon + A400: #765452, // .value, .refresh-timestamp, .stats-value, .active-thread-count, .process-group-contents-count, .operation-context-id, .selected-type-name + A700: #4a3435, // .version-control + + // These are the $nifi-canvas-accent-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. + // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important + // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. + // + // NOTE: Care should be taken here to ensure the values meet accessibility standards. + // + // NOTE: When creating the Material palette definition mat.define-palette($warn-light-palette, 400, 100, 700); + // Since 400 is the default the contrast-400 will be used as the default text color in some cases. + contrast: ( + 50: rgba(black, 0.87), + 100: rgba(black, 0.87), + 200: rgba(black, 0.87), + 300: rgba(black, 0.87), + 400: rgba(black, 0.87), + 500: #ffffff, + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: rgba(black, 0.87), + A200: #ffffff, + A400: #ffffff, + A700: #ffffff, + ) +); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/index.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/index.html index 2f4e6ea514..b0e2c1a7af 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/index.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/index.html @@ -25,7 +25,7 @@ - + diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss index 602d7943cd..4da34607ca 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss @@ -16,8 +16,51 @@ */ // Custom Theming for Angular Material -// For more information: https://material.angular.io/guide/theming +// For more information: https://v16.material.angular.io/guide/theming-your-components @use '@angular/material' as mat; +@use 'sass:map'; +@use 'assets/styles/listing-table-theme' as listing-table; +@use 'app/app.component-theme' as app-component; +@use 'app/pages/access-policies/feature/access-policies.component-theme' as access-policies; +@use 'app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component-theme' as add-tenant-to-policy; +@use 'app/pages/access-policies/ui/component-access-policies/component-access-policies.component-theme' as component-access-policies; +@use 'app/pages/bulletins/feature/bulletins.component-theme' as bulletins; +@use 'app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component-theme' as bulletin-board-list; +@use 'app/pages/counters/feature/counters.component-theme' as counters; +@use 'app/pages/flow-designer/ui/canvas/canvas.component-theme' as canvas; +@use 'app/pages/flow-designer/ui/canvas/footer/footer.component-theme' as footer; +@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component-theme' as navigation-control; +@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/birdseye.component-theme' as birdseye-control; +@use 'app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component-theme' as operation-control; +@use 'app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component-theme' as flow-status; +@use 'app/pages/flow-designer/ui/canvas/header/header.component-theme' as header; +@use 'app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component-theme' as new-canvas-item; +@use 'app/pages/flow-designer/ui/canvas/header/search/search.component-theme' as search; +@use 'app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component-theme' as prioritizers; +@use 'app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component-theme' as create-process-group; +@use 'app/pages/flow-designer/ui/common/banner/banner.component-theme' as banner; +@use 'app/pages/flow-designer/ui/controller-service/controller-services.component-theme' as controller-service; +@use 'app/pages/login/feature/login.component-theme' as login; +@use 'app/pages/login/ui/login-form/login-form.component-theme' as login-form; +@use 'app/pages/provenance/feature/provenance.component-theme' as provenance; +@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component-theme' as provenance-event-table; +@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component-theme' as lineage; +@use 'app/pages/parameter-contexts/feature/parameter-contexts.component-theme' as parameter-contexts; +@use 'app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component-theme' as parameter-context-inheritance; +@use 'app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component-theme' as flowfile-dialog; +@use 'app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component-theme' as flowfile-table; +@use 'app/pages/settings/feature/settings.component-theme' as settings; +@use 'app/pages/summary/feature/summary.component-theme' as summary; +@use 'app/pages/users/feature/users.component-theme' as users; +@use 'app/ui/common/context-menu/context-menu.component-theme' as context-menu; +@use 'app/ui/common/extension-creation/extension-creation.component-theme' as extension-creation; +@use 'app/ui/common/navigation/navigation.component-theme' as navigation; +@use 'app/ui/common/property-table/editors/nf-editor/nf-editor.component-theme' as nf-editor; +@use 'app/ui/common/resizable/resizable.component-theme' as resizable; +@use 'app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component-theme' as system-diagnostics-dialog; +@use 'app/ui/common/status-history/status-history.component-theme' as status-history; +@use 'app/ui/common/tooltips/property-hint-tip/property-hint-tip.component-theme' as property-hint-tip; +@use 'app/ui/common/provenance-event-dialog/provenance-event-dialog.component-theme' as provenance-event-dialog; // Plus imports for other components in your app. @use 'roboto-fontface/css/roboto/roboto-fontface.css'; @@ -26,6 +69,10 @@ @use 'codemirror/lib/codemirror.css'; @use 'codemirror/addon/hint/show-hint.css'; +// NOTE: for faster developer cycles during theme development the theme can also be changed here. +// Ex: @import 'assets/themes/purple'; +@import 'assets/themes/nifi'; + $fontPrimary: 'Roboto', sans-serif; $fontSecondary: 'Robot Slab', sans-serif; $fontMedium: 'Roboto Medium', sans-serif; @@ -122,341 +169,332 @@ $appFontPath: '~roboto-fontface/fonts'; @tailwind components; @tailwind utilities; -$nifi-primary-palette: ( - 50: #eef1f3, - 100: #d5dde1, - 200: #b9c7cd, - 300: #9cb0b9, - 400: #879faa, - 500: #728e9b, - 600: #6a8693, - 700: #5f7b89, - 800: #55717f, - 900: #425f6d, - A100: #c7ecff, - A200: #94daff, - A400: #61c9ff, - A700: #47c0ff, - contrast: ( - 50: #000000, - 100: #000000, - 200: #000000, - 300: #000000, - 400: #000000, - 500: #000000, - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: #000000, - A200: #000000, - A400: #000000, - A700: #000000 - ) -); +//General status styles. TODO - Reconsider this... separating canvas/style styles from html styles... +@mixin theme($material-theme, $canvas-theme) { + // Get the color config from the theme. + $color-config: mat.get-color-config($material-theme); + $canvas-color-config: mat.get-color-config($canvas-theme); -$nifi-accent-palette: ( - 50: #fcfcfd, - 100: #f7f8f9, - 200: #f1f4f5, - 300: #ebeff1, - 400: #e7ebee, - 500: #e3e8eb, - 600: #e0e5e9, - 700: #dce2e5, - 800: #d8dee2, - 900: #d0d8dd, - A100: #ffffff, - A200: #ffffff, - A400: #ffffff, - A700: #ffffff, - contrast: ( - 50: #000000, - 100: #000000, - 200: #000000, - 300: #000000, - 400: #000000, - 500: #000000, - 600: #000000, - 700: #000000, - 800: #000000, - 900: #000000, - A100: #000000, - A200: #000000, - A400: #000000, - A700: #000000 - ) -); + // Get the color palette from the color-config. + $primary-palette: map.get($color-config, 'primary'); + $warn-palette: map.get($color-config, 'warn'); + $canvas-primary-palette: map.get($canvas-color-config, 'primary'); + $canvas-accent-palette: map.get($canvas-color-config, 'accent'); -// Define the palettes for your theme using the Material Design palettes available in palette.scss -// (imported above). For each palette, you can optionally specify a default, lighter, and darker -// hue. Available color palettes: https://material.io/design/color/ -$nifi-primary: mat.define-palette($nifi-primary-palette); -$nifi-accent: mat.define-palette($nifi-accent-palette); + // Get hues from palette + $primary-palette-50: mat.get-color-from-palette($primary-palette, 50); + $primary-palette-200: mat.get-color-from-palette($primary-palette, 200); + $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + $primary-palette-A100: mat.get-color-from-palette($primary-palette, 'A100'); + $primary-palette-A200: mat.get-color-from-palette($primary-palette, 'A200'); + $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400'); + $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); + $canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200); + $canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400); + $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); + $canvas-accent-palette-200: mat.get-color-from-palette($canvas-accent-palette, 200); + $canvas-accent-palette-400: mat.get-color-from-palette($canvas-accent-palette, 400); + $canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200'); + $warn-palette-200: mat.get-color-from-palette($warn-palette, 200); + $warn-palette-300: mat.get-color-from-palette($warn-palette, 300); + $warn-palette-A100: mat.get-color-from-palette($warn-palette, 'A100'); + $warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400'); -//#728e9b -//#aabbc3 -//#e3e8eb + html, + body { + height: 100%; + } -// The warn palette is optional (defaults to red). -$nifi-warn: mat.define-palette(mat.$red-palette); + body { + margin: 0; + font-family: Roboto, 'Helvetica Neue', sans-serif; + } -// Create the theme object. A theme consists of configurations for individual -// theming systems such as "color" or "typography". -$nifi-theme: mat.define-light-theme( - ( - color: ( - primary: $nifi-primary, - accent: $nifi-accent, - warn: $nifi-warn - ), - //typography: mat.define-typography-config(), - density: -3 - ) -); + a { + font-size: 13px; + cursor: pointer; + color: $primary-palette-A400; + font-weight: normal; + display: inline-block; + font-family: Roboto; + text-decoration: underline; + text-decoration-color: $primary-palette-200; + text-underline-offset: 3px; + } -// 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 mat.all-component-themes($nifi-theme); + a:hover { + text-decoration-color: $primary-palette-A400; + } -/* You can add global styles to this file, and also import other style files */ -html, -body { - height: 100%; -} + //Icon for styling mat-icon in forms throughout the application. + .info-icon { + font-size: 14px; + height: 14px !important; + width: 14px !important; + } -body { - margin: 0; - //font-family: Roboto, 'Helvetica Neue', sans-serif; -} + //This style is needed due to an incompatibility between material and tailwind. + .mdc-notched-outline__notch { + border-right: none; + } -a { - font-size: 13px; - cursor: pointer; - color: #004849; - font-weight: normal; - display: inline-block; - font-family: Roboto; - text-decoration: underline; - text-decoration-color: #ccdadb; - text-underline-offset: 3px; -} + .small-dialog { + min-width: 320px; + } -a:hover { - text-decoration-color: #004849; -} + .medium-dialog { + min-width: 470px; + } -header.nifi-header { - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); - position: relative; -} + .medium-short-dialog { + max-height: 32%; + max-width: 34%; + min-height: 250px; + min-width: 440px; + font-size: 13px; + } -/* - Icon for styling mat-icon in forms throughout the application. - */ + .large-dialog { + max-height: 72%; + max-width: 55%; + min-height: 560px; + min-width: 760px; + } -.info-icon { - font-size: 14px; - height: 14px !important; - width: 14px !important; -} + .edit-parameter-context-dialog { + max-height: 72%; + max-width: 55%; + min-width: 850px; + min-height: 575px; + } -/* - This style is needed due to an incompatibility between material and tailwind. - */ + .tooltip { + position: fixed; + max-width: 500px; + padding: 10px; + background-color: $canvas-primary-palette-900; + border-radius: 2px; + border-width: 1px; + border-color: $canvas-primary-palette-200; + box-shadow: 0 2px 5px $canvas-primary-palette-50; + font-size: 13px; + font-family: Roboto; + font-weight: 400; + word-wrap: break-word; + white-space: normal; + color: $canvas-primary-palette-200; + z-index: 1; -.mdc-notched-outline__notch { - border-right: none; -} + ul { + list-style: disc outside; + margin-left: 1em; + } + } -/* - Dialog styles - */ + .property-editor { + background-color: $canvas-primary-palette-900; + box-shadow: 0 2px 5px $canvas-primary-palette-50; + font-size: 13px; + font-family: Roboto; + font-weight: 400; + } -.small-dialog { - min-width: 320px; -} + .CodeMirror-hints { + font-size: 13px !important; + z-index: 1000 !important; + overflow-y: scroll !important; + } -.medium-dialog { - min-width: 470px; -} + .disabled { + color: $primary-palette-500 !important; + fill: $primary-palette-500 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } -.medium-short-dialog { - max-height: 32%; - max-width: 34%; - min-height: 250px; - min-width: 440px; - font-size: 13px; -} + .enabled { + color: $primary-palette-A200 !important; + fill: $primary-palette-A200 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } -.large-dialog { - max-height: 72%; - max-width: 55%; - min-height: 560px; - min-width: 760px; -} + .stopped { + color: $warn-palette-200 !important; + fill: $warn-palette-200 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } -.edit-parameter-context-dialog { - max-height: 72%; - max-width: 55%; - min-width: 850px; - min-height: 575px; -} + .running { + color: $canvas-accent-palette-200 !important; + fill: $canvas-accent-palette-200 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } -.tooltip { - position: fixed; - max-width: 500px; - padding: 10px; - background-color: #fff; - border-radius: 2px; - border-width: 1px; - border-color: #000; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); - font-size: 13px; - font-family: Roboto; - font-weight: 400; - word-wrap: break-word; - white-space: normal; - color: #000; - z-index: 1; + .has-errors, + .invalid { + color: $canvas-accent-palette-A200 !important; + fill: $canvas-accent-palette-A200 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } - ul { - list-style: disc outside; - margin-left: 1em; + .validating { + color: $canvas-primary-palette-400 !important; + fill: $canvas-primary-palette-400 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } + + .transmitting { + color: $primary-palette-A200 !important; + fill: $primary-palette-A200 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } + + .not-transmitting { + color: $primary-palette-500 !important; + fill: $primary-palette-500 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } + + .up-to-date { + color: $canvas-accent-palette-400 !important; + fill: $canvas-accent-palette-400 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } + + .locally-modified, + .sync-failure { + color: $warn-palette-A100 !important; + fill: $warn-palette-A100 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } + + .stale, + .locally-modified-and-stale { + color: $warn-palette-300 !important; + fill: $warn-palette-300 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } + + .zero { + color: $primary-palette-A100 !important; + fill: $primary-palette-A100 !important; + text-shadow: none !important; + } + + .blank, + .unset, + .sensitive { + font-weight: normal !important; + color: $canvas-primary-palette-400 !important; + } + + button.nifi-button { + height: 28px; + width: 28px; + line-height: 28px; + border: 1px solid $primary-palette-200; + background-color: $primary-palette-50; + color: $primary-palette-A400; + } + + button.nifi-button:hover { + cursor: pointer; + border-color: $primary-palette-A400; + } + + button.nifi-button:disabled { + cursor: not-allowed; + border: 1px solid $primary-palette-200; + + i { + color: $primary-palette-200 !important; + } + } + + .pointer { + cursor: pointer; + } + + .value, + .refresh-timestamp { + font-weight: 500; + color: $warn-palette-A400; } } -.property-editor { - background-color: #fff; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); - font-size: 13px; - font-family: Roboto; - font-weight: 400; -} +// Define the palettes for your theme +$material-primary-light: mat.define-palette($material-primary-light-palette, 300); +$material-accent-light: mat.define-palette($material-primary-light-palette, A400, A100, A700); +$nifi-canvas-primary-light: mat.define-palette($nifi-canvas-light-palette); +$nifi-canvas-accent-light: mat.define-palette($nifi-canvas-accent-light-palette, 400, 100, 700); +$warn-light: mat.define-palette($warn-light-palette, 400, 100, 700); -.CodeMirror-hints { - font-size: 13px !important; - z-index: 1000 !important; - overflow-y: scroll !important; -} +// Create the theme objects. We can extract the values we need from the theme passed into the mixins. +$material-theme-light: mat.define-light-theme( + ( + color: ( + primary: $material-primary-light, + accent: $material-accent-light, + warn: $warn-light, + ), + //typography: mat.define-typography-config(), // TODO: typography + density: -3 + ) +); -/* - General status styles. TODO - Reconsider this... separating canvas/style styles from html styles... - */ +$nifi-canvas-theme-light: mat.define-light-theme( + ( + color: ( + primary: $nifi-canvas-primary-light, + accent: $nifi-canvas-accent-light, + warn: $warn-light, + ), + //typography: mat.define-typography-config(), // TODO: typography + density: -3 + ) +); -.disabled { - color: #728e9b !important; - fill: #728e9b !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} - -.enabled { - color: #44a3cf !important; - fill: #44a3cf !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} - -.stopped { - color: #d18686 !important; - fill: #d18686 !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} - -.running { - color: #7dc7a0 !important; - fill: #7dc7a0 !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} - -.has-errors, -.invalid { - color: #cf9f5d !important; - fill: #cf9f5d !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} - -.validating { - color: #a8a8a8 !important; - fill: #a8a8a8 !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} - -.transmitting { - color: #44a3cf !important; - fill: #44a3cf !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} - -.not-transmitting { - color: #728e9b !important; - fill: #728e9b !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} - -.up-to-date { - color: #3da67a !important; - fill: #3da67a !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} - -.locally-modified, -.sync-failure { - color: #747474 !important; - fill: #747474 !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} - -.stale, -.locally-modified-and-stale { - color: #c7685d !important; - fill: #c7685d !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} - -.zero { - color: #aabec7 !important; - fill: #aabec7 !important; - text-shadow: none !important; -} - -.blank, -.unset, -.sensitive { - font-weight: normal !important; - color: #a8a8a8 !important; -} - -button.nifi-button { - height: 28px; - width: 28px; - line-height: 28px; - border: 1px solid #ccdadb; - background-color: rgba(249, 250, 251, 0.97); - color: #004849; -} - -button.nifi-button:hover { - cursor: pointer; - border-color: #004849; -} - -button.nifi-button:disabled { - cursor: not-allowed; - border: 1px solid #ccdadb; - - i { - color: #ccdadb !important; - } -} - -.pointer { - cursor: pointer; -} - -.value, -.refresh-timestamp { - font-weight: 500; - color: #775351; -} +@include mat.all-component-themes($material-theme-light); +@include app-component.theme($material-theme-light); +@include theme($material-theme-light, $nifi-canvas-theme-light); +@include listing-table.theme($material-theme-light, $nifi-canvas-theme-light); +@include access-policies.theme($material-theme-light); +@include add-tenant-to-policy.theme($material-theme-light); +@include component-access-policies.theme($material-theme-light, $nifi-canvas-theme-light); +@include bulletins.theme($material-theme-light); +@include bulletin-board-list.theme($material-theme-light, $nifi-canvas-theme-light); +@include counters.theme($material-theme-light); +@include canvas.theme($material-theme-light, $nifi-canvas-theme-light); +@include banner.theme($material-theme-light); +@include controller-service.theme($material-theme-light); +@include footer.theme($material-theme-light, $nifi-canvas-theme-light); +@include navigation-control.theme($material-theme-light, $nifi-canvas-theme-light); +@include birdseye-control.theme($material-theme-light, $nifi-canvas-theme-light); +@include operation-control.theme($material-theme-light, $nifi-canvas-theme-light); +@include flow-status.theme($material-theme-light, $nifi-canvas-theme-light); +@include header.theme($nifi-canvas-theme-light); +@include new-canvas-item.theme($material-theme-light, $nifi-canvas-theme-light); +@include search.theme($material-theme-light, $nifi-canvas-theme-light); +@include prioritizers.theme($material-theme-light, $nifi-canvas-theme-light); +@include create-process-group.theme($material-theme-light); +@include login.theme($material-theme-light, $nifi-canvas-theme-light); +@include login-form.theme($material-theme-light); +@include provenance-event-table.theme($material-theme-light, $nifi-canvas-theme-light); +@include provenance.theme($material-theme-light, $nifi-canvas-theme-light); +@include lineage.theme($material-theme-light, $nifi-canvas-theme-light); +@include parameter-context-inheritance.theme($material-theme-light, $nifi-canvas-theme-light); +@include parameter-contexts.theme($material-theme-light); +@include flowfile-dialog.theme($material-theme-light); +@include flowfile-table.theme($material-theme-light); +@include settings.theme($material-theme-light); +@include summary.theme($material-theme-light); +@include users.theme($material-theme-light); +@include context-menu.theme($material-theme-light, $nifi-canvas-theme-light); +@include extension-creation.theme($material-theme-light, $nifi-canvas-theme-light); +@include navigation.theme($material-theme-light, $nifi-canvas-theme-light); +@include nf-editor.theme($material-theme-light, $nifi-canvas-theme-light); +@include resizable.theme($material-theme-light, $nifi-canvas-theme-light); +@include system-diagnostics-dialog.theme($material-theme-light); +@include status-history.theme($material-theme-light, $nifi-canvas-theme-light); +@include property-hint-tip.theme($material-theme-light); +@include provenance-event-dialog.theme($material-theme-light); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/tailwind.config.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/tailwind.config.js index 44556adf99..a4e889a680 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/tailwind.config.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/tailwind.config.js @@ -18,13 +18,5 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,ts}'], - theme: { - extend: { - colors: { - 'nifi-primary': '#aabbc3', - 'nifi-accent': '#e3e8eb' - } - } - }, plugins: [] };