From 3467f6d1d5963275bc6b70c1515641a9fe808f59 Mon Sep 17 00:00:00 2001 From: Scott Aslan Date: Wed, 22 May 2024 07:45:10 -0400 Subject: [PATCH] [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 --- .../nf-editor/_nf-editor.component-theme.scss | 74 +----- .../editors/nf-editor/nf-editor.component.ts | 1 + .../src/assets/styles/_codemirror-theme.scss | 227 ++++++++++++++++++ .../src/main/nifi/src/styles.scss | 4 + 4 files changed, 233 insertions(+), 73 deletions(-) create mode 100644 nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_codemirror-theme.scss diff --git a/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 b/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 index 62f7f9a9ff..e482a65e21 100644 --- a/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 +++ b/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 @@ -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; } } } diff --git a/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 b/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 index 9764dba5da..1d9a230f5e 100644 --- a/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 +++ b/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 @@ -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', diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_codemirror-theme.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_codemirror-theme.scss new file mode 100644 index 0000000000..2f76db66fd --- /dev/null +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_codemirror-theme.scss @@ -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)); + } +} diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss index 762336d5c6..d773e6ae4f 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss @@ -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);