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: #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 - ) -); - -$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 - ) -); - -// 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, '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'); + + html, + body { + height: 100%; + } -a:hover { - text-decoration-color: #004849; -} + body { + margin: 0; + font-family: Roboto, 'Helvetica Neue', sans-serif; + } -header.nifi-header { - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); - position: relative; -} + 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; + } -/* - Icon for styling mat-icon in forms throughout the application. - */ + a:hover { + text-decoration-color: $primary-palette-A400; + } -.info-icon { - font-size: 14px; - height: 14px !important; - width: 14px !important; -} -/* - This style is needed due to an incompatibility between material and tailwind. - */ + //Icon for styling mat-icon in forms throughout the application. + .info-icon { + font-size: 14px; + height: 14px !important; + width: 14px !important; + } -.mdc-notched-outline__notch { - border-right: none; -} + //This style is needed due to an incompatibility between material and tailwind. + .mdc-notched-outline__notch { + border-right: none; + } -/* - Dialog styles - */ + .small-dialog { + min-width: 320px; + } -.small-dialog { - min-width: 320px; -} + .medium-dialog { + min-width: 470px; + } -.medium-dialog { - min-width: 470px; -} + .medium-short-dialog { + max-height: 32%; + max-width: 34%; + min-height: 250px; + min-width: 440px; + font-size: 13px; + } -.medium-short-dialog { - max-height: 32%; - max-width: 34%; - min-height: 250px; - min-width: 440px; - font-size: 13px; -} + .large-dialog { + max-height: 72%; + max-width: 55%; + min-height: 560px; + min-width: 760px; + } -.large-dialog { - max-height: 72%; - max-width: 55%; - min-height: 560px; - min-width: 760px; -} + .edit-parameter-context-dialog { + max-height: 72%; + max-width: 55%; + min-width: 850px; + min-height: 575px; + } -.edit-parameter-context-dialog { - max-height: 72%; - max-width: 55%; - min-width: 850px; - min-height: 575px; -} + .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; + + ul { + list-style: disc outside; + margin-left: 1em; + } + } -.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; - - ul { - list-style: disc outside; - margin-left: 1em; + .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; } -} -.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; -} + .CodeMirror-hints { + font-size: 13px !important; + z-index: 1000 !important; + overflow-y: scroll !important; + } -.CodeMirror-hints { - font-size: 13px !important; - z-index: 1000 !important; - overflow-y: scroll !important; -} + .disabled { + color: $primary-palette-500 !important; + fill: $primary-palette-500 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } -/* - General status styles. TODO - Reconsider this... separating canvas/style styles from html styles... - */ + .enabled { + color: $primary-palette-A200 !important; + fill: $primary-palette-A200 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } -.disabled { - color: #728e9b !important; - fill: #728e9b !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} + .stopped { + color: $warn-palette-200 !important; + fill: $warn-palette-200 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } -.enabled { - color: #44a3cf !important; - fill: #44a3cf !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} + .running { + color: $accent-palette-200 !important; + fill: $accent-palette-200 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } Review Comment: This doesn't seem like the right color. Other usages of the running icon (processor component on canvas) uses: `canvas-accent-200` which is a nice green signifying it is running. however, this is translating into what appears to just be the same color as the running icon is when it is not running (looking disable almost. Process Group when processors are running, icon color isn't right... <img width="395" alt="Screenshot 2024-01-29 at 5 50 44 PM" src="https://github.com/apache/nifi/assets/713866/3e1b6761-9ab6-4a8a-8ec0-39b7b2f0a0b6";> Processor running, icon is good... <img width="365" alt="Screenshot 2024-01-29 at 5 51 08 PM" src="https://github.com/apache/nifi/assets/713866/af6e8e47-5b77-49c4-903a-50f08f2140b0";> Summary listing showing the same running color issue. <img width="793" alt="Screenshot 2024-01-29 at 6 02 10 PM" src="https://github.com/apache/nifi/assets/713866/909ac03f-3270-4449-9f6a-53a9eb4f39e3";> ########## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.component.ts: ########## @@ -21,8 +21,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'nifi', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] Review Comment: I think we still need the `styleUrls` here. Without it, there is no nifi logo on the splash screen. -- 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
