fix(ui/code-editor): apply theme colors [EE-5104] (#8558)

* fix(ui/code-editor): apply theme colors [EE-5104] fix [EE-5104] * fix(kube/yaml): expand yaml inspector * fix(ui/code-editor): have default height * fix(ui/code-editor): boolean color * fix(ui/code-editor): style search bar
2023-03-06 09:13:42 +02:00 · 2023-03-06 09:13:42 +02:00 · 03712966e4
parent 07100258cd
commit 03712966e4
12 changed files with 128 additions and 82 deletions
--- a/app/assets/css/theme.css
+++ b/app/assets/css/theme.css
@ -120,8 +120,6 @@
  --bg-navtabs-hover-color: var(--grey-16);
  --bg-nav-tab-active-color: var(--ui-gray-4);
  --bg-table-selected-color: var(--grey-14);
-  --bg-codemirror-color: var(--white-color);
-  --bg-codemirror-gutters-color: var(--grey-17);
  --bg-dropdown-menu-color: var(--white-color);
  --bg-log-viewer-color: var(--white-color);
  --bg-log-line-selected-color: var(--grey-18);
@ -136,7 +134,6 @@
  --bg-item-highlighted-color: var(--grey-21);
  --bg-item-highlighted-null-color: var(--grey-14);
  --bg-panel-body-color: var(--white-color);
-  --bg-codemirror-selected-color: var(--grey-22);
  --bg-tooltip-color: var(--ui-gray-11);
  --bg-input-sm-color: var(--white-color);
  --bg-app-datatable-thead: var(--grey-23);
@ -182,11 +179,7 @@
  --text-navtabs-color: var(--grey-7);
  --text-navtabs-hover-color: var(--grey-6);
  --text-nav-tab-active-color: var(--grey-25);
-  --text-cm-default-color: var(--blue-1);
-  --text-cm-meta-color: var(--black-color);
-  --text-cm-string-color: var(--red-3);
-  --text-cm-number-color: var(--green-1);
-  --text-codemirror-color: var(--black-color);
+
  --text-dropdown-menu-color: var(--grey-6);
  --text-log-viewer-color: var(--black-color);
  --text-json-tree-color: var(--blue-3);
@ -224,7 +217,6 @@
  --border-md-checkbox-color: var(--grey-19);
  --border-modal-header-color: var(--grey-45);
  --border-navtabs-color: var(--ui-white);
-  --border-codemirror-cursor-color: var(--black-color);
  --border-pre-color: var(--grey-43);
  --border-pagination-span-color: var(--ui-white);
  --border-pagination-hover-color: var(--ui-white);
@ -281,9 +273,6 @@
  --bg-card-color: var(--grey-1);
  --bg-checkbox-border-color: var(--grey-8);
  --bg-code-color: var(--grey-2);
-  --bg-codemirror-color: var(--grey-2);
-  --bg-codemirror-gutters-color: var(--grey-3);
-  --bg-codemirror-selected-color: var(--grey-3);
  --bg-dropdown-menu-color: var(--ui-gray-warm-8);
  --bg-main-color: var(--grey-2);
  --bg-sidebar-color: var(--grey-1);
@ -361,11 +350,7 @@
  --text-navtabs-color: var(--grey-8);
  --text-navtabs-hover-color: var(--grey-9);
  --text-nav-tab-active-color: var(--white-color);
-  --text-cm-default-color: var(--blue-10);
-  --text-cm-meta-color: var(--white-color);
-  --text-cm-string-color: var(--red-5);
-  --text-cm-number-color: var(--green-2);
-  --text-codemirror-color: var(--white-color);
+
  --text-dropdown-menu-color: var(--white-color);
  --text-log-viewer-color: var(--white-color);
  --text-json-tree-color: var(--grey-40);
@ -403,7 +388,6 @@
  --border-md-checkbox-color: var(--grey-41);
  --border-modal-header-color: var(--grey-1);
  --border-navtabs-color: var(--grey-38);
-  --border-codemirror-cursor-color: var(--white-color);
  --border-pre-color: var(--grey-3);
  --border-blocklist: var(--ui-gray-9);
  --border-blocklist-item-selected-color: var(--grey-38);
@ -468,15 +452,12 @@
  --bg-switch-box-color: var(--grey-53);
  --bg-panel-body-color: var(--black-color);
  --bg-dropdown-menu-color: var(--ui-gray-warm-8);
-  --bg-codemirror-selected-color: var(--grey-3);
  --bg-motd-body-color: var(--black-color);
  --bg-blocklist-hover-color: var(--black-color);
  --bg-blocklist-item-selected-color: var(--black-color);
  --bg-input-group-addon-color: var(--grey-3);
  --bg-table-color: var(--black-color);
-  --bg-codemirror-gutters-color: var(--ui-gray-warm-11);
-  --bg-codemirror-color: var(--black-color);
-  --bg-codemirror-selected-color: var(--grey-3);
+
  --bg-log-viewer-color: var(--black-color);
  --bg-log-line-selected-color: var(--grey-3);
  --bg-modal-content-color: var(--black-color);
@ -536,7 +517,6 @@
  --text-tooltip-color: var(--white-color);
  --text-blocklist-item-selected-color: var(--blue-9);
  --text-input-group-addon-color: var(--white-color);
-  --text-codemirror-color: var(--white-color);
  --text-dropdown-menu-color: var(--white-color);
  --text-log-viewer-color: var(--white-color);
  --text-summary-color: var(--white-color);
@ -582,7 +562,6 @@
  --border-pre-next-month: var(--white-color);
  --border-daterangepicker-after: var(--black-color);
  --border-pre-color: var(--grey-3);
-  --border-codemirror-cursor-color: var(--white-color);
  --border-modal: 1px solid var(--white-color);
  --border-sortbutton: var(--black-color);
  --border-bootbox: var(--black-color);
@ -596,9 +575,7 @@

  --text-input-textarea: var(--black-color);
  --bg-item-highlighted-null-color: var(--grey-2);
-  --text-cm-default-color: var(--blue-9);
-  --text-cm-meta-color: var(--white-color);
-  --text-cm-string-color: var(--red-7);
+
  --text-progress-bar-color: var(--black-color);

  --user-menu-icon-color: var(--white-color);
--- a/app/assets/css/vendor-override.css
+++ b/app/assets/css/vendor-override.css
@ -154,50 +154,6 @@ code {
  background-color: var(--bg-table-selected-color);
 }

-.CodeMirror-gutters {
-  background: var(--bg-codemirror-gutters-color);
-  border-right: 0px;
-}
-
-.CodeMirror-linenumber {
-  text-align: left;
-}
-
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-  padding: 0 20px;
-}
-
-.CodeMirror {
-  background: var(--bg-codemirror-color);
-  color: var(--text-codemirror-color);
-  border-radius: 8px;
-}
-
-.CodeMirror-selected {
-  background: var(--bg-codemirror-selected-color) !important;
-}
-
-.CodeMirror-cursor {
-  border-left: 1px solid var(--border-codemirror-cursor-color);
-}
-
-.cm-s-default .cm-atom {
-  color: var(--text-cm-default-color);
-}
-
-.cm-s-default .cm-meta {
-  color: var(--text-cm-meta-color);
-}
-
-.cm-s-default .cm-string {
-  color: var(--text-cm-string-color);
-}
-
-.cm-s-default .cm-number {
-  color: var(--text-cm-number-color);
-}
-
 .dropdown-menu {
  background: var(--bg-dropdown-menu-color);
  border-radius: 8px;
--- a/app/kubernetes/components/yaml-inspector/yamlInspector.html
+++ b/app/kubernetes/components/yaml-inspector/yamlInspector.html
@ -6,6 +6,7 @@
    placeholder="# Define or paste the content of your manifest here"
    read-only="true"
    hide-title="true"
+    height="{{ $ctrl.expanded ? '800px' : '500px' }}"
  >
  </web-editor-form>
  <div class="py-5">
--- a/app/kubernetes/components/yaml-inspector/yamlInspectorController.js
+++ b/app/kubernetes/components/yaml-inspector/yamlInspectorController.js
@ -33,9 +33,6 @@ class KubernetesYamlInspectorController {
  }

  toggleYAMLInspectorExpansion() {
-    let selector = 'kubernetes-yaml-inspector code-editor > div.CodeMirror';
-    let height = this.expanded ? '500px' : '80vh';
-    $(selector).css({ height: height });
    this.expanded = !this.expanded;
  }

--- a/app/portainer/components/code-editor/code-editor.html
+++ b/app/portainer/components/code-editor/code-editor.html
@ -5,4 +5,5 @@
  readonly="$ctrl.readOnly"
  on-change="($ctrl.handleChange)"
  value="$ctrl.value"
+  height="$ctrl.height || undefined"
 ></react-code-editor>
--- a/app/portainer/components/code-editor/code-editor.js
+++ b/app/portainer/components/code-editor/code-editor.js
@ -10,5 +10,6 @@ angular.module('portainer.app').component('codeEditor', {
    readOnly: '<',
    onChange: '<',
    value: '<',
+    height: '@',
  },
 });
--- a/app/portainer/components/form-components/web-editor-form/index.js
+++ b/app/portainer/components/form-components/web-editor-form/index.js
@ -12,6 +12,7 @@ export const webEditorForm = {
    readOnly: '<',
    onChange: '<',
    hideTitle: '<',
+    height: '@',
  },

  transclude: {
--- a/app/portainer/components/form-components/web-editor-form/web-editor-form.html
+++ b/app/portainer/components/form-components/web-editor-form/web-editor-form.html
@ -47,6 +47,7 @@
          yml="$ctrl.yml"
          value="$ctrl.value"
          on-change="($ctrl.onChange)"
+          height="{{ $ctrl.height }}"
        ></code-editor>
      </div>
    </div>
--- a/app/react/components/CodeEditor.module.css
+++ b/app/react/components/CodeEditor.module.css
@ -0,0 +1,72 @@
+.root {
+  --text-cm-default-color: var(--blue-1);
+  --text-cm-meta-color: var(--black-color);
+  --text-cm-string-color: var(--red-3);
+  --text-cm-number-color: var(--green-1);
+  --text-cm-keyword-color: var(--ui-blue-dark-9);
+  --text-codemirror-color: var(--black-color);
+  --bg-codemirror-color: var(--white-color);
+  --bg-codemirror-gutters-color: var(--grey-17);
+  --bg-codemirror-selected-color: var(--grey-22);
+  --border-codemirror-cursor-color: var(--black-color);
+}
+
+:global([theme='dark']) .root {
+  --text-cm-default-color: var(--blue-10);
+  --text-cm-meta-color: var(--white-color);
+  --text-cm-string-color: var(--red-5);
+  --text-cm-number-color: var(--green-2);
+  --text-cm-keyword-color: var(--ui-purple-6);
+  --text-codemirror-color: var(--white-color);
+  --bg-codemirror-color: var(--grey-2);
+  --bg-codemirror-gutters-color: var(--grey-3);
+  --bg-codemirror-selected-color: var(--grey-3);
+  --border-codemirror-cursor-color: var(--white-color);
+}
+
+:global([theme='highcontrast']) .root {
+  --text-cm-default-color: var(--blue-9);
+  --text-cm-meta-color: var(--white-color);
+  --text-cm-string-color: var(--red-7);
+  --text-cm-number-color: var(--green-2);
+  --text-cm-keyword-color: var(--ui-purple-6);
+  --text-codemirror-color: var(--white-color);
+  --bg-codemirror-color: var(--black-color);
+  --bg-codemirror-gutters-color: var(--ui-gray-warm-11);
+  --bg-codemirror-selected-color: var(--grey-3);
+  --border-codemirror-cursor-color: var(--white-color);
+}
+
+.root :global(.cm-editor .cm-gutters) {
+  border-right: 0px;
+}
+
+.root :global(.cm-editor .cm-gutters .cm-lineNumbers .cm-gutterElement) {
+  text-align: left;
+}
+
+.root :global(.cm-editor),
+.root :global(.cm-editor .cm-scroller) {
+  border-radius: 8px;
+}
+
+/*  Search Panel  */
+/* Ideally we would use a react component for that, but this is the easy solution for onw */
+
+.root :global(.cm-panels.cm-panels-bottom) {
+  background-color: var(--bg-codemirror-gutters-color);
+  border-top-color: transparent;
+  color: var(--text-codemirror-color);
+}
+
+.root :global(.cm-button) {
+  @apply bg-blue-8;
+  color: var(--text-codemirror-color);
+  background-image: none;
+}
+
+.root :global(.cm-textfield) {
+  border: 1px solid var(--border-form-control-color);
+  background-color: var(--bg-inputbox);
+  color: var(--text-form-control-color);
+}
--- a/app/react/components/CodeEditor.tsx
+++ b/app/react/components/CodeEditor.tsx
@ -1,7 +1,11 @@
 import CodeMirror from '@uiw/react-codemirror';
-import { StreamLanguage } from '@codemirror/language';
+import { StreamLanguage, LanguageSupport } from '@codemirror/language';
 import { yaml } from '@codemirror/legacy-modes/mode/yaml';
 import { useMemo } from 'react';
+import { createTheme } from '@uiw/codemirror-themes';
+import { tags as highlightTags } from '@lezer/highlight';
+
+import styles from './CodeEditor.module.css';

 interface Props {
  id: string;
@ -13,6 +17,30 @@ interface Props {
  height?: string;
 }

+const theme = createTheme({
+  theme: 'light',
+  settings: {
+    background: 'var(--bg-codemirror-color)',
+    foreground: 'var(--text-codemirror-color)',
+    caret: 'var(--border-codemirror-cursor-color)',
+    selection: 'var(--bg-codemirror-selected-color)',
+    selectionMatch: 'var(--bg-codemirror-selected-color)',
+    gutterBackground: 'var(--bg-codemirror-gutters-color)',
+  },
+  styles: [
+    { tag: highlightTags.atom, color: 'var(--text-cm-default-color)' },
+    { tag: highlightTags.meta, color: 'var(--text-cm-meta-color)' },
+    {
+      tag: [highlightTags.string, highlightTags.special(highlightTags.brace)],
+      color: 'var(--text-cm-string-color)',
+    },
+    { tag: highlightTags.number, color: 'var(--text-cm-number-color)' },
+    { tag: highlightTags.keyword, color: 'var(--text-cm-keyword-color)' },
+  ],
+});
+
+const yamlLanguage = new LanguageSupport(StreamLanguage.define(yaml));
+
 export function CodeEditor({
  id,
  onChange,
@ -22,13 +50,12 @@ export function CodeEditor({
  height = '500px',
  yaml: isYaml,
 }: Props) {
-  const extensions = useMemo(
-    () => (isYaml ? [StreamLanguage.define(yaml)] : []),
-    [isYaml]
-  );
+  const extensions = useMemo(() => (isYaml ? [yamlLanguage] : []), [isYaml]);

  return (
    <CodeMirror
+      className={styles.root}
+      theme={theme}
      value={value}
      onChange={onChange}
      readOnly={readonly}
--- a/package.json
+++ b/package.json
@ -74,6 +74,8 @@
    "@codemirror/state": "^6.2.0",
    "@codemirror/theme-one-dark": "^6.1.0",
    "@codemirror/view": "^6.7.1",
+    "@lezer/common": "^1.0.2",
+    "@lezer/highlight": "^1.1.3",
    "@lineup-lite/hooks": "^1.6.0",
    "@nxmix/tokenize-ansi": "^3.0.0",
    "@open-amt-cloud-toolkit/ui-toolkit-react": "2.0.0",
@ -84,6 +86,7 @@
    "@uirouter/angularjs": "1.0.11",
    "@uirouter/react": "^1.0.7",
    "@uirouter/react-hybrid": "^1.0.4",
+    "@uiw/codemirror-themes": "^4.19.9",
    "@uiw/react-codemirror": "^4.19.5",
    "angular": "1.8.2",
    "angular-clipboard": "^1.6.2",
@ -128,8 +131,8 @@
    "lodash": "^4.17.21",
    "lucide-react": "^0.101.0",
    "moment": "^2.29.1",
-    "msw": "^0.49.2",
    "moment-timezone": "^0.5.40",
+    "msw": "^0.49.2",
    "mustache": "^4.2.0",
    "ng-file-upload": "~12.2.13",
    "parse-duration": "^1.0.2",
--- a/yarn.lock
+++ b/yarn.lock
@ -2978,12 +2978,12 @@
  resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
  integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==

-"@lezer/common@^1.0.0":
+"@lezer/common@^1.0.0", "@lezer/common@^1.0.2":
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.2.tgz#8fb9b86bdaa2ece57e7d59e5ffbcb37d71815087"
  integrity sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==

-"@lezer/highlight@^1.0.0":
+"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3":
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.1.3.tgz#bf5a36c2ee227f526d74997ac91f7777e29bd25d"
  integrity sha512-3vLKLPThO4td43lYRBygmMY18JN3CPh9w+XS2j8WC30vR4yZeFG4z1iFe4jXE43NtGqe//zHW5q8ENLlHvz9gw==
@ -5295,6 +5295,15 @@
    "@codemirror/state" "^6.0.0"
    "@codemirror/view" "^6.0.0"

+"@uiw/codemirror-themes@^4.19.9":
+  version "4.19.9"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-themes/-/codemirror-themes-4.19.9.tgz#988876213a2e350244ac2a0d479ebb792afbe94d"
+  integrity sha512-PH3hl1w42z7GXe/zoD9gSadOGBWyKPl7vHm/8V1PUuHXT21+neyfRc7v0xPwb05pGP6ExfbmPi78y4+g6cHopg==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
 "@uiw/react-codemirror@^4.19.5":
  version "4.19.5"
  resolved "https://registry.yarnpkg.com/@uiw/react-codemirror/-/react-codemirror-4.19.5.tgz#a3fac44a741a3cbefb0fd58be4fa621e201f247e"