scottyaslan commented on code in PR #8480:
URL: https://github.com/apache/nifi/pull/8480#discussion_r1518277266
##########
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.ts:
##########
@@ -339,13 +339,13 @@ export class Canvas implements OnInit, OnDestroy {
.attr('orient', 'auto')
.attr('class', function (d: string) {
if (d === 'ghost') {
- return 'primary-contrast-300';
+ return 'primary-canvas-400';
Review Comment:
Is defined as:
```
.primary-canvas-400 {
fill: $canvas-primary-palette-500;
}
```
Is it intentional to make the `.primary-canvas-400` be
canvas-primary-palette-500??? Seems like if the correct color is
canvas-primary-palette-500 then the name of this class should be
`.canvas-primary-palette-500`...
##########
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:
##########
@@ -25,33 +26,46 @@
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
- $accent-palette: map.get($color-config, 'accent');
- $canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
- $primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
- $primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
- $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400');
- $canvas-primary-palette-50:
mat.get-color-from-palette($canvas-primary-palette, 50);
+ // Get hues from palette
Review Comment:
Additional comment. Is it necessary?
##########
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts:
##########
@@ -1253,9 +1253,9 @@ export class CanvasUtils {
})
.attr('class', function () {
if (terminatedThreads > 0) {
- return `active-thread-count-icon warn-400`;
+ return `active-thread-count-icon warn-default`;
Review Comment:
`warn-default` is not defined anywhere.
##########
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss:
##########
@@ -187,153 +192,145 @@ $appFontPath: '~roboto-fontface/fonts';
$canvas-accent-palette: map.get($canvas-color-config, 'accent');
// 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);
- $accent-palette-A100: mat.get-color-from-palette($accent-palette, 'A100');
- $accent-palette-A200: mat.get-color-from-palette($accent-palette, 'A200');
- $accent-palette-A400: mat.get-color-from-palette($accent-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');
+
+ // Start with the canvas theme.
+ $canvas-primary-palette-A200:
mat.get-color-from-palette($canvas-primary-palette, A200);
+ $canvas-primary-palette-500:
mat.get-color-from-palette($canvas-primary-palette, 500);
+ $canvas-accent-palette-lighter:
mat.get-color-from-palette($canvas-accent-palette, lighter);
+ $canvas-accent-palette-default:
mat.get-color-from-palette($canvas-accent-palette, default);
+
+ $primary-palette-lighter: mat.get-color-from-palette($primary-palette,
lighter);
+ $primary-palette-default: mat.get-color-from-palette($primary-palette,
'default');
+ $primary-palette-A400: mat.get-color-from-palette($primary-palette,
'A400');
+
+ $accent-palette-default: mat.get-color-from-palette($accent-palette,
'default');
+ $accent-palette-lighter: mat.get-color-from-palette($accent-palette,
'lighter');
+
+ $warn-palette-lighter: mat.get-color-from-palette($warn-palette, lighter);
+ $warn-palette-default: mat.get-color-from-palette($warn-palette,
'default');
+
+ // Alternative hue for warn colors.
+ $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
+
+ $surface: utils.get-surface($canvas-color-config);
+ $surface-darker: utils.get-surface($canvas-color-config, darker);
+ $surface-highlight: utils.get-on-surface($canvas-color-config, highlight);
+ $on-surface: utils.get-on-surface($canvas-color-config);
+ $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
+
+ * { // Tailwind sets a default that doesn't shift with light and dark
themes
+ border-color: $on-surface-lighter;
+ }
a {
- color: $accent-palette-A400;
- text-decoration-color: $primary-palette-200;
+ color: utils.get-color-on-surface($color-config, $surface);
+ text-decoration-color: $primary-palette-lighter;
}
a:hover {
- text-decoration-color: $accent-palette-A400;
+ text-decoration-color: utils.get-color-on-surface($color-config,
$surface);
}
.tooltip {
- background-color: $canvas-primary-palette-900;
- border-color: $canvas-primary-palette-200;
- box-shadow: 0 2px 5px $canvas-primary-palette-50;
- color: $canvas-primary-palette-200;
+ background-color: $surface;
+ border-color: $on-surface;
+ box-shadow: 0 2px 5px $canvas-primary-palette-A200;
+ color: $on-surface;
}
.property-editor {
- background-color: $canvas-primary-palette-900;
- box-shadow: 0 2px 5px $canvas-primary-palette-50;
+ background-color: $surface;
+ box-shadow: 0 2px 5px $canvas-primary-palette-A200;
}
.disabled {
- color: $primary-palette-500 !important;
- fill: $primary-palette-500 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $primary-palette-default !important;
+ fill: $primary-palette-default !important;
}
.enabled {
- color: $accent-palette-A200 !important;
- fill: $accent-palette-A200 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $primary-palette-A400 !important;
+ fill: $primary-palette-A400 !important;
}
.stopped {
- color: $warn-palette-200 !important;
- fill: $warn-palette-200 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $warn-palette-lighter !important;
+ fill: $warn-palette-lighter !important;
}
.running {
- color: $canvas-accent-palette-200 !important;
- fill: $canvas-accent-palette-200 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $canvas-accent-palette-lighter !important;
+ fill: $canvas-accent-palette-lighter !important;
}
.has-errors,
.invalid {
- color: $canvas-accent-palette-A200 !important;
- fill: $canvas-accent-palette-A200 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $warn-palette-A200 !important;
+ fill: $warn-palette-A200 !important;
}
.validating {
- color: $canvas-primary-palette-400 !important;
- fill: $canvas-primary-palette-400 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $canvas-primary-palette-500 !important;
+ fill: $canvas-primary-palette-500 !important;
}
.transmitting {
- color: $accent-palette-A200 !important;
- fill: $accent-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;
+ color: $canvas-accent-palette-default !important;
+ fill: $canvas-accent-palette-default !important;
}
.up-to-date {
- color: $canvas-accent-palette-400 !important;
- fill: $canvas-accent-palette-400 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $canvas-accent-palette-default !important;
+ fill: $canvas-accent-palette-default !important;
}
.locally-modified,
.sync-failure {
- color: $warn-palette-A100 !important;
- fill: $warn-palette-A100 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $accent-palette-lighter !important;
+ fill: $accent-palette-lighter !important;
}
.stale,
.locally-modified-and-stale {
- color: $warn-palette-300 !important;
- fill: $warn-palette-300 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $warn-palette-default !important;
+ fill: $warn-palette-default !important;
}
.zero {
- color: $accent-palette-A100 !important;
- fill: $accent-palette-A100 !important;
- text-shadow: none !important;
+ opacity: 0.5;
}
.blank,
.unset,
.sensitive {
- color: $canvas-primary-palette-400 !important;
+ color: $canvas-primary-palette-500 !important;
}
button.nifi-button {
- border: 1px solid $primary-palette-200;
- background-color: $primary-palette-50;
- color: $accent-palette-A400;
+ color: utils.get-color-on-surface($color-config, $surface-darker);
}
button.nifi-button:hover {
- border-color: $accent-palette-A400;
+ background-color: $surface-highlight;
}
button.nifi-button:disabled {
- color: $primary-palette-200 !important;
+ color: $on-surface-lighter;
+ background-color: transparent;
cursor: not-allowed;
- border: 1px solid $primary-palette-200;
-
+
i {
- color: $primary-palette-200 !important;
+ color: $on-surface-lighter;
}
}
.value,
.refresh-timestamp {
- color: $warn-palette-A400;
+ color: utils.get-color-on-surface($color-config, $surface, 'accent');
}
- ngx-skeleton-loader .skeleton-loader {
Review Comment:
Why did you delete these skeleten-loader styles?
--
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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
