Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[NIFI-13257] codemirror light and dark mode theme (#8855) 

* [NIFI-13257] codemirror light and dark mode theme

* update non matching parameter or EL function a red color to signify it is not matching

This closes #8855
This commit is contained in:
Scott Aslan 2024-05-22 07:45:10 -04:00 committed by GitHub
parent f625d4c6c1
commit 3467f6d1d5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 233 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
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
View File

@ -19,85 +19,13 @@
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $nifi-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
$nifi-theme-surface-palette-default: mat.get-color-from-palette($nifi-theme-surface-palette, default);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
darker-contrast
);
$nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
lighter-contrast
);
$surface-contrast: if(
$is-dark,
$nifi-theme-surface-palette-darker-contrast,
$nifi-theme-surface-palette-lighter-contrast
);
$alternate-surface: if(
$is-dark,
rgba($nifi-theme-surface-palette-darker-contrast, 0.28),
rgba($nifi-theme-surface-palette-lighter-contrast, 0.2)
);
.property-editor {
@include mat.button-density(-1);
.nf-editor {
border-color: var(--mdc-outlined-text-field-label-text-color);
&.blank {
border-color: var(--mdc-outlined-text-field-disabled-label-text-color);
}
.CodeMirror {
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
}
.CodeMirror-code {
@extend .surface-contrast;
}
.CodeMirror-selected {
background: var(--mat-menu-item-hover-state-layer-color);
}
.CodeMirror-gutters {
background: if(
$is-dark,
rgba($nifi-theme-surface-palette-default, 0.4),
rgba($nifi-theme-surface-palette-default, 0.08)
);
}
.CodeMirror-linenumber {
color: rgba($surface-contrast, 0.4);
}
/*
Override some defaults...
*/
.cm-s-default .CodeMirror-matchingbracket {
color: $alternate-surface !important;
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
cursor: not-allowed !important;
}
}
}

1
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.ts
View File

@ -172,6 +172,7 @@ export class NfEditor implements OnDestroy {
mode: this.mode,
readOnly: this.readonly,
lineNumbers: true,
theme: 'nifi',
matchBrackets: true,
extraKeys: {
'Ctrl-Space': 'autocomplete',

227
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_codemirror-theme.scss Normal file
View File

@ -0,0 +1,227 @@
/*!
* 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 generate-nifi-theme($material-theme, $nifi-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
$nifi-theme-surface-palette-default: mat.get-color-from-palette($nifi-theme-surface-palette, default);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
darker-contrast
);
$nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
lighter-contrast
);
.cm-s-nifi.CodeMirror {
@extend .surface-contrast;
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
border: 1px solid var(--mdc-outlined-text-field-label-text-color);
}
.cm-s-nifi .CodeMirror-gutters {
background: if($is-dark, #3b3b3b, #efefef);
}
.cm-s-nifi .CodeMirror-guttermarker,
.cm-s-nifi .CodeMirror-guttermarker-subtle,
.cm-s-nifi .CodeMirror-linenumber {
color: if($is-dark, #bbbbbb, #b4b4b4);
}
.cm-s-nifi .CodeMirror-cursor {
border-left: 1px solid
if($is-dark, $nifi-theme-surface-palette-darker-contrast, $nifi-theme-surface-palette-lighter-contrast);
}
.cm-s-nifi div.CodeMirror-selected {
background: if(
$is-dark,
rgba($material-theme-primary-palette-default, 0.4),
rgba($material-theme-primary-palette-darker, 0.4)
);
}
.cm-s-nifi.CodeMirror-focused div.CodeMirror-selected {
background: if(
$is-dark,
rgba($material-theme-primary-palette-default, 0.4),
rgba($material-theme-primary-palette-darker, 0.4)
);
}
.cm-s-nifi .CodeMirror-line::selection,
.cm-s-nifi .CodeMirror-line > span::selection,
.cm-s-nifi .CodeMirror-line > span > span::selection {
background: if($is-dark, rgba(128, 203, 196, 0.2), rgba(128, 203, 196, 0.8));
}
.cm-s-nifi .CodeMirror-line::-moz-selection,
.cm-s-nifi .CodeMirror-line > span::-moz-selection,
.cm-s-nifi .CodeMirror-line > span > span::-moz-selection {
background: if($is-dark, rgba(128, 203, 196, 0.2), rgba(128, 203, 196, 0.8));
}
.cm-s-nifi .cm-header {
color: if($is-dark, #b8b8ff, #0000ff);
}
.cm-s-nifi .cm-quote {
color: if($is-dark, #6bfd6b, #009400);
}
.cm-s-nifi .cm-negative {
color: if($is-dark, #fc9797, #de3535);
}
.cm-s-nifi .cm-positive {
color: if($is-dark, #8cfd8c, #219a21);
}
.cm-s-nifi .cm-bracket {
color: if($is-dark, #93937c, #93937c);
}
.cm-s-nifi .cm-link {
color: if($is-dark, #8e8ef6, #0000ce);
}
.cm-s-nifi .cm-invalidchar {
color: if($is-dark, #ff9c9c, #ff0000);
}
.cm-s-nifi .cm-keyword {
color: if($is-dark, #c792ea, #6800ab);
}
.cm-s-nifi .cm-operator {
color: if($is-dark, #89ddff, #0083b9);
}
.cm-s-nifi .cm-variable-2 {
color: if($is-dark, #72b6fc, #0054a6);
}
.cm-s-nifi .cm-variable-3,
.cm-s-nifi .cm-type {
color: if($is-dark, #f07178, #ad0007);
}
.cm-s-nifi .cm-builtin {
color: if($is-dark, #a280f3, #3400ad);
}
.cm-s-nifi .cm-atom {
color: if($is-dark, #f78c6c, #bd2b00);
}
.cm-s-nifi .cm-number {
color: if($is-dark, #fd758c, #c20021);
}
.cm-s-nifi .cm-def {
color: if($is-dark, #82aaff, #0553f8);
}
.cm-s-nifi .cm-string {
color: if($is-dark, #f07178, #ec000c);
}
.cm-s-nifi .cm-string-2 {
color: if($is-dark, #f07178, #ec000c);
}
.cm-s-nifi .cm-comment {
color: if($is-dark, #d7d7d7, #545454);
}
.cm-s-nifi .cm-variable,
.cm-s-nifi .cm-punctuation,
.cm-s-nifi .cm-property,
.cm-s-nifi .cm-operator {
color: if($is-dark, #f07178, #ec000c);
}
.cm-s-nifi .cm-tag {
color: if($is-dark, #fc768d, #f8052e);
}
.cm-s-nifi .cm-meta {
color: rgba($material-theme-primary-palette-default, if($is-dark, 0.87, 0.4));
}
.cm-s-nifi .cm-attribute {
color: if($is-dark, #c792ea, #8e01ea);
}
.cm-s-nifi .cm-property {
color: if($is-dark, #c792ea, #8e01ea);
}
.cm-s-nifi .cm-qualifier {
color: rgba($material-theme-primary-palette-default, if($is-dark, 0.87, 0.4));
}
.cm-s-nifi .cm-variable-3,
.cm-s-nifi .cm-s-default,
.cm-s-nifi .cm-type {
color: rgba($material-theme-primary-palette-default, if($is-dark, 0.87, 0.4));
}
.cm-s-nifi .cm-error {
color: if($is-dark, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-color: if($is-dark, #ff002a, #ff8094);
}
.cm-s-nifi .CodeMirror-matchingbracket {
text-decoration: underline;
color: $nifi-theme-surface-palette-darker-contrast !important;
background-color: $nifi-theme-surface-palette-default;
}
.cm-s-nifi .CodeMirror-nonmatchingbracket {
color: if($is-dark, #fc7a7a, #a62020);
}
.cm-s-nifi .CodeMirror-matchingtag {
background: if($is-dark, rgba(255, 150, 0, 0.97), rgba(255, 150, 0, 0.3));
}
.cm-s-nifi .CodeMirror-activeline-background {
background: if($is-dark, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5));
}
}

4
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
View File

@ -20,6 +20,7 @@
@use '@angular/material' as mat;
@use 'sass:map';
@use 'assets/styles/app' as app;
@use 'assets/styles/codemirror-theme' as codemirror-theme;
@use 'assets/styles/listing-table' as listing-table;
@use 'app/app.component-theme' as app-component;
@use 'app/pages/flow-designer/ui/canvas/canvas.component-theme' as canvas;
@ -46,6 +47,7 @@
@use 'assets/fonts/flowfont/flowfont.css';
@use 'font-awesome/css/font-awesome.min.css';
@use 'codemirror/lib/codemirror.css';
@use 'codemirror/addon/fold/foldgutter.css';
@use 'codemirror/addon/hint/show-hint.css';
// To override the canvas theme, you need to set the variables $nifi-theme-light and $nifi-theme-dark
@ -72,6 +74,7 @@
// generate light mode stylesheets
@include app.generate-material-theme($material-theme-light);
@include app.generate-nifi-theme($nifi-theme-light);
@include codemirror-theme.generate-nifi-theme($material-theme-light, $nifi-theme-light);
@include app-component.generate-theme($material-theme-light);
@include listing-table.generate-theme($material-theme-light, $nifi-theme-light);
@include canvas.generate-theme($material-theme-light, $nifi-theme-light);
@ -101,6 +104,7 @@
// generate dark mode stylesheets
@include app.generate-material-theme($material-theme-dark);
@include app.generate-nifi-theme($nifi-theme-dark);
@include codemirror-theme.generate-nifi-theme($material-theme-dark, $nifi-theme-dark);
@include app-component.generate-theme($material-theme-dark);
@include listing-table.generate-theme($material-theme-dark, $nifi-theme-dark);
@include canvas.generate-theme($material-theme-dark, $nifi-theme-dark);