Re: [PR] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
rfellows merged PR #8294: URL: https://github.com/apache/nifi/pull/8294 -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org
Re: [PR] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
rfellows commented on code in PR #8294:
URL: https://github.com/apache/nifi/pull/8294#discussion_r1471257727
##
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;
Review Comment:
Let's just come back to this in the future. This PR is too big to keep
rebasing over and over.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
Re: [PR] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
rfellows commented on code in PR #8294:
URL: https://github.com/apache/nifi/pull/8294#discussion_r1471227264
##
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;
Review Comment:
This translates into a transparent stroke for the chart axis lines
(invisible).
New UI, no x or y axis:
https://github.com/apache/nifi/assets/713866/05fd832e-5051-458c-b0b5-0149dd203944;>
Old UI, both x and y axis
https://github.com/apache/nifi/assets/713866/c3dd91cd-d1e3-4435-a061-c942d908db97;>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
Re: [PR] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
scottyaslan commented on PR #8294: URL: https://github.com/apache/nifi/pull/8294#issuecomment-1915986287 > Create Process Group dialog isn't right. Its inlined, the form elements should be on separate lines: https://private-user-images.githubusercontent.com/713866/300623646-89d83559-a08c-4308-9329-44843b0fe492.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDY1NzEwOTgsIm5iZiI6MTcwNjU3MDc5OCwicGF0aCI6Ii83MTM4NjYvMzAwNjIzNjQ2LTg5ZDgzNTU5LWEwOGMtNDMwOC05MzI5LTQ0ODQzYjBmZTQ5Mi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMTI5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDEyOVQyMzI2MzhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mYjVhMGMwYzczODFjYTE3ZmQzOTA1ZTEyNGQxNWQwMjE5Yzc1NWI2MTFhN2U0NjYwNTMzNTAwNjY2YmFjOTg4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.yZ6Uc5r7P9-IUj7T-tAesoGch9BEnbTjTKCWm7Jbej8;> This is fixed in my latest commit. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org
Re: [PR] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
scottyaslan commented on code in PR #8294:
URL: https://github.com/apache/nifi/pull/8294#discussion_r1470525304
##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss:
##
@@ -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: #00,
-100: #00,
-200: #00,
-300: #00,
-400: #00,
-500: #00,
-600: #ff,
-700: #ff,
-800: #ff,
-900: #ff,
-A100: #00,
-A200: #00,
-A400: #00,
-A700: #00
-)
-);
-
-$nifi-accent-palette: (
-50: #fcfcfd,
-100: #f7f8f9,
-200: #f1f4f5,
-300: #ebeff1,
-400: #e7ebee,
-500: #e3e8eb,
-600: #e0e5e9,
-700: #dce2e5,
-800: #d8dee2,
-900: #d0d8dd,
-A100: #ff,
-A200: #ff,
-A400: #ff,
-A700: #ff,
-contrast: (
-50: #00,
-100: #00,
-200: #00,
-300: #00,
-400: #00,
-500: #00,
-600: #00,
-700: #00,
-800: #00,
-900: #00,
-A100: #00,
-A200: #00,
-A400: #00,
-A700: #00
-)
-);
-
-// 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);
-
-//#728e9b
-//#aabbc3
-//#e3e8eb
-
-// The warn palette is optional (defaults to red).
-$nifi-warn: mat.define-palette(mat.$red-palette);
-
-// 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
-)
-);
-
-// 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);
-
-/* You can add global styles to this file, and also import other style files */
-
-html,
-body {
-height: 100%;
-}
-
-body {
-margin: 0;
-//font-family: Roboto, 'Helvetica Neue', sans-serif;
-}
-
-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;
-}
+//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);
+
+// Get the color palette from the color-config.
+$primary-palette: map.get($color-config, 'primary');
+$accent-palette: map.get($color-config, 'accent');
+$warn-palette: map.get($color-config, 'warn');
+$canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+// 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);
+$accent-palette-200: mat.get-color-from-palette($accent-palette, 200);
+$accent-palette-400: mat.get-color-from-palette($accent-palette, 400);
+$accent-palette-A200: mat.get-color-from-palette($accent-palette,
Re: [PR] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
rfellows commented on code in PR #8294:
URL: https://github.com/apache/nifi/pull/8294#discussion_r1470330696
##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss:
##
@@ -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: #00,
-100: #00,
-200: #00,
-300: #00,
-400: #00,
-500: #00,
-600: #ff,
-700: #ff,
-800: #ff,
-900: #ff,
-A100: #00,
-A200: #00,
-A400: #00,
-A700: #00
-)
-);
-
-$nifi-accent-palette: (
-50: #fcfcfd,
-100: #f7f8f9,
-200: #f1f4f5,
-300: #ebeff1,
-400: #e7ebee,
-500: #e3e8eb,
-600: #e0e5e9,
-700: #dce2e5,
-800: #d8dee2,
-900: #d0d8dd,
-A100: #ff,
-A200: #ff,
-A400: #ff,
-A700: #ff,
-contrast: (
-50: #00,
-100: #00,
-200: #00,
-300: #00,
-400: #00,
-500: #00,
-600: #00,
-700: #00,
-800: #00,
-900: #00,
-A100: #00,
-A200: #00,
-A400: #00,
-A700: #00
-)
-);
-
-// 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);
-
-//#728e9b
-//#aabbc3
-//#e3e8eb
-
-// The warn palette is optional (defaults to red).
-$nifi-warn: mat.define-palette(mat.$red-palette);
-
-// 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
-)
-);
-
-// 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);
-
-/* You can add global styles to this file, and also import other style files */
-
-html,
-body {
-height: 100%;
-}
-
-body {
-margin: 0;
-//font-family: Roboto, 'Helvetica Neue', sans-serif;
-}
-
-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;
-}
+//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);
+
+// Get the color palette from the color-config.
+$primary-palette: map.get($color-config, 'primary');
+$accent-palette: map.get($color-config, 'accent');
+$warn-palette: map.get($color-config, 'warn');
+$canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+// 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);
+$accent-palette-200: mat.get-color-from-palette($accent-palette, 200);
+$accent-palette-400: mat.get-color-from-palette($accent-palette, 400);
+$accent-palette-A200: mat.get-color-from-palette($accent-palette,
Re: [PR] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
scottyaslan commented on code in PR #8294:
URL: https://github.com/apache/nifi/pull/8294#discussion_r1470034592
##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts:
##
@@ -669,20 +669,20 @@ export class ProcessorManager {
// update the run status
updated
.select('text.run-status-icon')
-.attr('fill', function (d: any) {
-let fill: string = '#728e9b';
+.attr('class', function (d: any) {
+let clazz: string = 'primary-500';
if (d.status.aggregateSnapshot.runStatus === 'Validating') {
-fill = '#a8a8a8';
+clazz = 'warn-contrast-300';
} else if (d.status.aggregateSnapshot.runStatus === 'Invalid')
{
-fill = '#cf9f5d';
+clazz = 'accent-A200';
} else if (d.status.aggregateSnapshot.runStatus === 'Running')
{
-fill = '#7dc7a0';
+clazz = 'accent-200';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped')
{
-fill = '#d18686';
+clazz = 'warn-200';
}
-return fill;
+return clazz;
Review Comment:
Great catch! I have updated these in my latest commit. Thanks!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
Re: [PR] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
rfellows commented on code in PR #8294:
URL: https://github.com/apache/nifi/pull/8294#discussion_r1466795410
##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts:
##
@@ -1075,22 +1075,22 @@ export class ProcessGroupManager {
const versionControl = processGroup
.select('text.version-control')
.style('visibility',
self.isUnderVersionControl(processGroupData) ? 'visible' : 'hidden')
-.style('fill', function () {
+.style('class', function () {
Review Comment:
i think you intended this to be
```suggestion
.attr('class', function () {
```
however, when doing that, it would wipe out the `version-control` class on
the same element (used when determining the selection on line 1076. Might need
to return both with this approach or find a way to concat with the existing
class(es)
##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts:
##
@@ -669,20 +669,20 @@ export class ProcessorManager {
// update the run status
updated
.select('text.run-status-icon')
-.attr('fill', function (d: any) {
-let fill: string = '#728e9b';
+.attr('class', function (d: any) {
+let clazz: string = 'primary-500';
if (d.status.aggregateSnapshot.runStatus === 'Validating') {
-fill = '#a8a8a8';
+clazz = 'warn-contrast-300';
} else if (d.status.aggregateSnapshot.runStatus === 'Invalid')
{
-fill = '#cf9f5d';
+clazz = 'accent-A200';
} else if (d.status.aggregateSnapshot.runStatus === 'Running')
{
-fill = '#7dc7a0';
+clazz = 'accent-200';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped')
{
-fill = '#d18686';
+clazz = 'warn-200';
}
-return fill;
+return clazz;
Review Comment:
I think this is overwriting the `run-status-icon` class already on this
element.
It seems to be preventing the icon from updating when the processor is
started/stopped.
Ports have the same issue.
probably want something like:
```
.attr('class', function (d: any) {
let clazz: string = 'primary-500';
if (d.status.aggregateSnapshot.runStatus === 'Validating') {
clazz = 'warn-contrast-300';
} else if (d.status.aggregateSnapshot.runStatus ===
'Invalid') {
clazz = 'accent-A200';
} else if (d.status.aggregateSnapshot.runStatus ===
'Running') {
clazz = 'accent-200';
} else if (d.status.aggregateSnapshot.runStatus ===
'Stopped') {
clazz = 'warn-200';
}
return `run-status-icon ${clazz}`;
})
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
Re: [PR] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
scottyaslan commented on PR #8294: URL: https://github.com/apache/nifi/pull/8294#issuecomment-1910695264 > Looks pretty good to me. Left a couple of comments inline. The only thing that really stands out to me but I didn't understand how it all works to really comment inline... the text on primary buttons is too dark IMO. Makes the text hard to read. Can we customize the text color in those scenarios? Let me take a look and see what else we can do here... -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org
Re: [PR] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
rfellows commented on code in PR #8294:
URL: https://github.com/apache/nifi/pull/8294#discussion_r1465526272
##
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:
##
@@ -0,0 +1,70 @@
+/*
+ * 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');
+$accent-palette: map.get($color-config, 'accent');
+$warn-palette: map.get($color-config, 'warn');
+
+// Get hues from palette
+$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
+$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+$primary-palette-contrast-900:
mat.get-color-from-palette($primary-palette, '900-contrast');
+$accent-palette-400: mat.get-color-from-palette($accent-palette, 400);
+$warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400');
+
+.flow-status {
+border-bottom: 1px solid $primary-palette-300;
+box-sizing: content-box;
+font-size: 15px;
+
+.fa,
+.icon {
+font-size: 15px;
+font-style: normal;
+color: $primary-palette-500;
+}
+
+.status-value {
+white-space: nowrap;
+font-weight: 500;
+color: $warn-palette-A400;
+text-shadow: none;
+}
+
+.controller-bulletins {
+border-left: 1px solid $primary-palette-300;
+background-color: $primary-palette-500;
+cursor: default;
+}
+
+.controller-bulletins.has-bulletins {
+background-color: $accent-palette-400;
Review Comment:
this is showing as a green bulletin icon. i think we need:
```suggestion
background-color: $warn-light-400;
```
##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/pom.xml:
##
@@ -32,6 +32,11 @@
v20.5.1
${basedir}/src/main/nifi
${project.build.directory}/frontend-working-directory
+
+purple
Review Comment:
This should default to `nifi`.
To override during the build, you can just pass in an override to set it
(`-Dfrontend.theme=<>`)...
```
mvn -T 2 install -Dfrontend.theme=purple -DskipTests
-P\!minify-and-compress,avoid-archive-formats,include-new-ui
```
##
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 @@ Add Users/Groups To Policy
-Cancel
+Cancel
Review Comment:
we shouldn't have 2 primary buttons on the same dialog. this one should
probably be:
```suggestion
Cancel
```
##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/pom.xml:
##
@@ -87,6 +92,27 @@
+
+com.coderplus.maven.plugins
+copy-rename-maven-plugin
+1.0
Review Comment:
should probably variablize this version, just to be consistent.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
