Fix ace editor and color picker dark theme styles

2024-01-17 16:31:54 +01:00
parent 3239092331
commit 19d3c8b964
21 changed files with 286 additions and 182 deletions
@@ -220,6 +220,7 @@
      footer-bg-variant="white"
      header-class="border-bottom"
      body-class="p-0"
+      footer-class="border-top"
      class="shadow-sm mt-3"
    >
      <template #header>
@@ -244,6 +245,7 @@
        :set-options="{
          useWorker: false,
        }"
+        class="border-0 rounded-0"
      />
    </b-card>
  </div>
@@ -43,26 +43,15 @@
              <c-input-color-picker
                ref="picker"
                v-model="theme.variables[key]"
+                :default-value="theme.defaultVariables[key]"
                :data-test-id="`input-${key}-color`"
                :translations="{
                  modalTitle: $t('colorPicker'),
+                  defaultBtnLabel: $t('label.default'),
                  cancelBtnLabel: $t('general:label.cancel'),
                  saveBtnLabel: $t('general:label.saveAndClose')
                }"
-              >
-                <template
-                  v-if="['light', 'dark'].includes(theme.id)"
-                  #footer
-                >
-                  <b-button
-                    variant="outline-primary"
-                    class="mr-auto"
-                    @click="resetColor(key, theme)"
-                  >
-                    {{ $t('label.default') }}
-                  </b-button>
-                </template>
-              </c-input-color-picker>
+              />
            </b-form-group>
          </b-col>
        </b-row>
@@ -79,7 +68,6 @@
                height="400px"
                font-size="14px"
                show-line-numbers
-                :border="false"
                :show-popout="true"
                @open="openCustomCSSModal(theme.id)"
              />
@@ -92,7 +80,7 @@
    <b-modal
      id="custom-css-editor"
      v-model="customCSSModal.show"
-      :title="$t('modal.editor')"
+      :title="$t('custom-css')"
      cancel-variant="link"
      size="lg"
      :ok-title="$t('general:label.saveAndClose')"
@@ -247,15 +235,21 @@ export default {
          const defaultCustomCSS = customCSS.find(t => t.id === id) || {}

          let variables = JSON.parse(values || '{}')
+          let defaultVariables

-          if (!values && ['light', 'dark'].includes(id)) {
-            variables = id === 'light' ? this.lightModeVariables : this.darkModeVariables
+          if (['light', 'dark'].includes(id)) {
+            if (!values) {
+              variables = id === 'light' ? this.lightModeVariables : this.darkModeVariables
+            }
+
+            defaultVariables = id === 'light' ? this.lightModeVariables : this.darkModeVariables
          }

          return {
            id: id,
            title: title || this.$t(`tabs.${id}`),
            variables,
+            defaultVariables,
            customCSS: defaultCustomCSS.values || '',
          }
        })
@@ -14,6 +14,7 @@
    :editor-props="{
      $blockScrolling: false,
    }"
+    class="border-0 rounded-0"
  />
 </template>

@@ -14,6 +14,7 @@
    :editor-props="{
      $blockScrolling: false,
    }"
+    class="border-0 rounded-0"
  />
 </template>

@@ -22,7 +22,7 @@
        header-bg-variant="white"
        footer-bg-variant="white"
        header-class="d-flex align-items-center border-bottom"
-        footer-class="d-flex flex-wrap flex-fill-child gap-1"
+        footer-class="border-top d-flex flex-wrap flex-fill-child gap-1"
        class="shadow-sm"
      >
        <component
@@ -63,7 +63,7 @@
        header-bg-variant="white"
        footer-bg-variant="white"
        header-class="border-bottom"
-        footer-class="d-flex justify-content-end flex-wrap flex-fill-child gap-1"
+        footer-class="border-top d-flex justify-content-end flex-wrap flex-fill-child gap-1"
        class="shadow-sm mt-3"
      >
        <!-- Partial templates can't be previewed -->
@@ -83,6 +83,7 @@
          :editor-props="{
            $blockScrolling: false,
          }"
+          class="border-0 rounded-0"
        />

        <template #header>
@@ -1,11 +1,11 @@
 <svg width="8192" height="8192" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
-      <path d="M 8 0 L 0 0 0 8" fill="none" stroke="#c4c4c4" stroke-width="0.5"/>
+      <path d="M 8 0 L 0 0 0 8" fill="none" stroke="#E4E9EF" stroke-width="0.5"/>
    </pattern>
    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
      <rect width="80" height="80" fill="url(#smallGrid)"/>
-      <path d="M 80 0 L 0 0 0 80" fill="none" stroke="#c4c4c4" stroke-width="1"/>
+      <path d="M 80 0 L 0 0 0 80" fill="none" stroke="#E4E9EF" stroke-width="1"/>
    </pattern>
  </defs>

@@ -35,6 +35,7 @@ export default (options = {}) => {
        }

        // switch the webapp theme based on user preference
+        // disabled for now as it's not working properly
        if (user.meta.theme) {
          document.getElementsByTagName('html')[0].setAttribute('data-color-mode', user.meta.theme)
        }
@@ -26,7 +26,7 @@
            lang="javascript"
            font-size="18px"
            show-line-numbers
-            :border="false"
+            :show-popout="false"
            @input="valueChanged"
          />
        </b-form-group>
@@ -25,7 +25,7 @@
          lang="javascript"
          font-size="18px"
          show-line-numbers
-          :border="false"
+          :show-popout="false"
          @open="openInEditor"
          @input="valueChanged"
        />
@@ -54,7 +54,7 @@
    >
      <b-card-header
        header-tag="header"
-        class="d-flex align-items-center bg-white p-4"
+        class="d-flex align-items-center bg-white"
      >
        <h5
          class="mb-0"
@@ -213,7 +213,7 @@
    >
      <b-card-header
        header-tag="header"
-        class="d-flex align-items-center bg-white p-4"
+        class="d-flex align-items-center bg-white"
      >
        <h5
          class="mb-0"
@@ -36,7 +36,7 @@
            <expression-editor
              :value.sync="edge.expr"
              lang="javascript"
-              height="60"
+              height="100"
              show-line-numbers
              :show-popout="false"
              @input="updateEdge(edge.id, $event)"
@@ -71,7 +71,7 @@
    >
      <b-card-header
        header-tag="header"
-        class="d-flex align-items-center bg-white p-4"
+        class="d-flex align-items-center bg-white"
      >
        <h5
          class="mb-0"
@@ -246,7 +246,7 @@
    >
      <b-card-header
        header-tag="header"
-        class="bg-white p-4"
+        class="bg-white"
      >
        <h5
          class="mb-0"
@@ -9,7 +9,7 @@
      theme="chrome"
      width="100%"
      :height="height"
-      :class="{ 'border': border }"
+      :class="{ 'border-0 rounded-0': !border }"
      v-on="$listeners"
      @init="editorInit"
    />
@@ -106,12 +106,6 @@ export default {
 </script>

 <style lang="scss" scoped>
-.border {
-  background-color: var(--white);
-  border: 2px solid var(--light);
-  border-radius: 0.25rem;
-}
-
 .popout {
  z-index: 7;
  bottom: 0;
@@ -19,7 +19,7 @@
        img-height="100px"
        img-top
        :title="title"
-        class="text-left"
+        class="text-left text-dark"
      >
        <b-card-text>
          {{ text }}
@@ -68,7 +68,7 @@ export default {
 }

 .tooltip.b-tooltip-light.bs-tooltip-right .arrow::before {
-  border-right-color: #2D2D2D !important;
+  border-right-color: var(--dark) !important;
 }

 .tooltip.b-tooltip {
@@ -900,7 +900,7 @@ export default {

        if (cell.edge) {
          if (cell.value) {
-            label = `<div id="openSidebar" class="text-nowrap py-1 px-3 mb-0 rounded bg-white pointer" style="border: 2px solid #A7D0E3; border-radius: 5px; color: #2D2D2D;">${encodeHTML(cell.value)}</div>`
+            label = `<div id="openSidebar" class="text-nowrap py-1 px-3 mb-0 rounded bg-white pointer" style="border: 2px solid #A7D0E3; border-radius: 5px; color: var(--dark);">${encodeHTML(cell.value)}</div>`
          }
        } else if (this.vertices[cell.id]) {
          const vertex = this.vertices[cell.id]
@@ -911,7 +911,7 @@ export default {
            const type = this.$t(`steps:${style}.short`)
            const isSelected = this.selection.includes(cell.mxObjectId)
            const border = isSelected ? 'selected-border' : 'border-light'
-            const shadow = isSelected ? 'shadow-lg' : 'shadow'
+            const shadow = isSelected ? 'shadow' : 'shadow-sm'
            const cog = 'icons/cog.svg'
            const issue = 'icons/issue.svg'
            const playIcon = 'icons/play.svg'
@@ -1767,7 +1767,7 @@ export default {
      style[mxConstants.STYLE_ARCSIZE] = 5
      style[mxConstants.STYLE_RESIZABLE] = false
      style[mxConstants.STYLE_FILLCOLOR] = 'none'
-      style[mxConstants.STYLE_FONTCOLOR] = '#2D2D2D'
+      style[mxConstants.STYLE_FONTCOLOR] = 'var(--dark)'
      style[mxConstants.STYLE_FONTSIZE] = 13
      this.graph.getStylesheet().putDefaultVertexStyle(style)

@@ -1778,7 +1778,7 @@ export default {
      style[mxConstants.STYLE_ROUNDED] = true
      style[mxConstants.STYLE_ORTHOGONAL] = true
      style[mxConstants.STYLE_MOVABLE] = false
-      style[mxConstants.STYLE_FONTCOLOR] = '#2D2D2D'
+      style[mxConstants.STYLE_FONTCOLOR] = 'var(--dark)'
      style[mxConstants.STYLE_STROKEWIDTH] = 2
      style[mxConstants.STYLE_ENDSIZE] = 15
      style[mxConstants.STYLE_STARTSIZE] = 15
@@ -1797,7 +1797,7 @@ export default {
      style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_MIDDLE
      style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE
      style[mxConstants.STYLE_FILLCOLOR] = 'white'
-      style[mxConstants.STYLE_STROKECOLOR] = '#2D2D2D'
+      style[mxConstants.STYLE_STROKECOLOR] = 'var(--dark)'
      style[mxConstants.STYLE_STROKEWIDTH] = 0
      style[mxConstants.STYLE_STROKEWIDTH] = 2
      this.graph.getStylesheet().putCellStyle('swimlane', style)
@@ -2542,6 +2542,10 @@ export default {
 </script>

 <style lang="scss" scoped>
+#workflow-editor {
+  color: var(--dark);
+}
+
 #graph {
  outline: none;
 }
@@ -32,5 +32,5 @@ div.mxTooltip {
  position: absolute;
  cursor: default;
  padding: 10px;
-  color: #2D2D2D;
+  color: var(--dark);
 }
@@ -1,127 +1,141 @@
 <template>
-    <div
-      class="position-relative"
+  <div
+    class="position-relative"
+  >
+    <ace-editor
+      v-model="editorValue"
+      :lang="lang"
+      :mode="lang"
+      theme="chrome"
+      width="100%"
+      :height="height"
+      :class="{ 'border-0 rounded-0': !border }"
+      v-on="$listeners"
+      @init="editorInit"
+    />
+
+    <b-button
+      v-if="showPopout"
+      variant="link"
+      class="popout position-absolute px-2 py-1 mr-3"
+      @click="$emit('open')"
    >
-      <ace-editor
-        v-model="editorValue"
-        :lang="lang"
-        :mode="lang"
-        theme="chrome"
-        width="100%"
-        :height="height"
-        :class="{ 'border': border }"
-        v-on="$listeners"
-        @init="editorInit"
+      <font-awesome-icon
+        :icon="['fas', 'expand-alt']"
      />
+    </b-button>
+  </div>
+</template>

-      <b-button
-        v-if="showPopout"
-        variant="link"
-        class="popout position-absolute px-2 py-1 mr-3"
-        @click="$emit('open')"
-      >
-        <font-awesome-icon
-          :icon="['fas', 'expand-alt']"
-        />
-      </b-button>
-    </div>
-  </template>
+<script>
+import AceEditor from 'vue2-ace-editor'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faExpandAlt} from '@fortawesome/free-solid-svg-icons'

-  <script>
-  import AceEditor from 'vue2-ace-editor'
-  import { library } from '@fortawesome/fontawesome-svg-core'
-  import { faExpandAlt} from '@fortawesome/free-solid-svg-icons'
+library.add(faExpandAlt)

-  library.add(faExpandAlt)
+export default {
+  components: {
+    AceEditor,
+  },

-  export default {
-    components: {
-      AceEditor,
+  props: {
+    value: {
+      type: String,
+      default: '',
    },

-    props: {
-      value: {
-        type: String,
-        default: '',
-      },
-
-      lang: {
-        type: String,
-        default: 'text',
-      },
-
-      height: {
-        type: String,
-        default: '80',
-      },
-
-      showLineNumbers: {
-        type: Boolean,
-        default: false,
-      },
-
-      fontSize: {
-        type: String,
-        default: '14px',
-      },
-
-      border: {
-        type: Boolean,
-        default: true,
-      },
-
-      showPopout: {
-        type: Boolean,
-        default: false,
-      },
+    lang: {
+      type: String,
+      default: 'text',
    },

-    computed: {
-      editorValue: {
-        get () {
-          return this.value
-        },
-
-        set (value = '') {
-          this.$emit('update:value', value)
-        },
-      },
+    height: {
+      type: String,
+      default: '80',
    },

-    methods: {
-      editorInit (editor) {
-        require('brace/mode/text')
-        require('brace/mode/html')
-        require('brace/mode/css')
-        require('brace/mode/scss')
-        require('brace/mode/javascript')
-        require('brace/theme/chrome')
+    showLineNumbers: {
+      type: Boolean,
+      default: false,
+    },

-        editor.setOptions({
-          tabSize: 2,
-          fontSize: this.fontSize,
-          wrap: true,
-          indentedSoftWrap: false,
-          showLineNumbers: this.showLineNumbers,
-          showGutter: this.showLineNumbers,
-          displayIndentGuides: this.lang !== 'text',
-          useWorker: false,
-        })
+    fontSize: {
+      type: String,
+      default: '14px',
+    },
+
+    border: {
+      type: Boolean,
+      default: true,
+    },
+
+    showPopout: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    editorValue: {
+      get () {
+        return this.value
+      },
+
+      set (value = '') {
+        this.$emit('update:value', value)
      },
    },
+  },
+
+  methods: {
+    editorInit (editor) {
+      require('brace/mode/text')
+      require('brace/mode/html')
+      require('brace/mode/css')
+      require('brace/mode/scss')
+      require('brace/mode/javascript')
+      require('brace/theme/chrome')
+
+      editor.setOptions({
+        tabSize: 2,
+        fontSize: this.fontSize,
+        wrap: true,
+        indentedSoftWrap: false,
+        showPrintMargin: false,
+        showLineNumbers: this.showLineNumbers,
+        showGutter: this.showLineNumbers,
+        displayIndentGuides: this.lang !== 'text',
+        useWorker: false,
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.popout {
+  z-index: 7;
+  bottom: 0;
+  right: 0;
+}
+</style>
+
+<style lang="scss">
+// Remove from server/assets/src/scss/main/18201141_custom_webapp.scss when all ace-editors use c-ace-editor
+.ace_editor {
+  color: var(--black) !important;
+  background-color: var(--white) !important;
+  border-radius: 0.25rem;
+  border: 2px solid var(--extra-light);
+
+  .ace_gutter {
+    background-color: var(--light) !important;
+    color: var(--black) !important;
+
+    .ace_gutter-active-line {
+      background-color: var(--extra-light) !important;
+    }
  }
-  </script>
-
-  <style lang="scss" scoped>
-  .border {
-    background-color: var(--light);
-    border: 2px solid var(--extra-light);
-    border-radius: 0.25rem;
-  }
-
-  .popout {
-    z-index: 7;
-    bottom: 0;
-    right: 0;
-  }
-  </style>
+}
+</style>
@@ -2,7 +2,7 @@
  <div>
    <div class="d-flex align-items-center">
      <b-button
-        :style="`color: ${pickedColor}; fill: ${pickedColor};`"
+        :style="`color: ${currentColor}; fill: ${currentColor};`"
        class="p-0 rounded-circle bg-white border-white shadow-none"
        @click="toggleMenu"
      >
@@ -62,17 +62,24 @@
      @hide="closeMenu"
    >
      <chrome
-        :value="value"
+        :value="currentColor"
        class="w-100 shadow-none"
        @input="updateColor"
      />

      <template #modal-footer>
+        <b-button
+          v-if="defaultValue"
+          variant="light"
+          @click="resetColor()"
+        >
+          {{ translations.defaultBtnLabel }}
+        </b-button>
        <slot name="footer" />

        <b-button
-          variant="link"
-          class="ml-auto"
+          variant="outline-light"
+          class="ml-auto text-primary border-0"
          @click="closeMenu"
        >
          {{ translations.cancelBtnLabel }}
@@ -106,6 +113,11 @@ export default {
      default: 'rgba(0,0,0,0)',
    },

+    defaultValue: {
+      type: String,
+      default: '',
+    },
+
    translations: {
      type: Object,
    },
@@ -133,21 +145,12 @@ export default {
    }
  },

-  computed: {
-    pickedColor: {
-      get () {
-        return this.value
-      },
-
-      set (pickedColor) {
-        this.pickedColor = pickedColor
-      },
-    },
-  },
-
  watch: {
-    value (value) {
-      this.currentColor = value
+    value: {
+      immediate: true,
+      handler (value) {
+        this.currentColor = value
+      },
    },
  },

@@ -156,6 +159,15 @@ export default {
      this.currentColor = hex8
    }, 300),

+    resetColor () {
+      this.currentColor = this.defaultValue
+    },
+
+    saveColor () {
+      this.$emit('input', this.currentColor)
+      this.closeMenu()
+    },
+
    toggleMenu () {
      if (this.showModal) {
        this.closeMenu()
@@ -164,11 +176,6 @@ export default {
      }
    },

-    saveColor () {
-      this.$emit('input', this.currentColor)
-      this.closeMenu()
-    },
-
    openMenu () {
      this.showModal = true
    },
@@ -180,12 +187,31 @@ export default {
 }
 </script>

-<style>
+<style lang="scss">
 .vc-chrome {
  font-family: var(--font-medium) !important;
-}

-.vc-chrome {
-  background-color: var(--white) !important;
+  .vc-chrome-body {
+    background: var(--white) !important;
+
+    .vc-input__input {
+      color: var(--black) !important;
+      background-color: var(--white) !important;
+    }
+
+    .vc-input__label {
+      color: var(--black) !important;
+    }
+
+    .vc-chrome-toggle-btn {
+      path {
+        fill: var(--black) !important;
+      }
+
+      .vc-chrome-toggle-icon-highlight {
+        background: var(--light) !important;
+      }
+    }
+  }
 }
 </style>
@@ -12,6 +12,7 @@
        :footer-class="`rounded-right ${isExpanded ? 'px-2' : ''}`"
        :no-header="!isExpanded"
        :backdrop="isMobile"
+        backdrop-variant="white"
        :shadow="isExpanded && 'sm'"
        no-slide
        :right="right"
@@ -338,7 +339,11 @@ $header-height: 64px;
 $nav-width: 320px;

 .b-sidebar {
-  background-color: var(--sidebar-bg) !important;
+  background-color: var(--white) !important;
+}
+
+.b-sidebar-backdrop {
+  opacity: 0.75 !important;
 }

 .sidebar {
@@ -116,4 +116,61 @@ a.btn:not(.btn-link) {
    -o-transition: min-width 0.2s ease-in-out;
    transition: min-width 0.2s ease-in-out;
  }
+}
+
+// Remove from here when all ace-editors use c-ace-editor
+.ace_editor {
+  color: var(--black) !important;
+  background-color: var(--white) !important;
+  border-radius: 0.25rem;
+  border: 2px solid var(--extra-light);
+
+  .ace_cursor {
+    border-left: 2px solid var(--black);
+  }
+
+  .ace_gutter {
+    background-color: var(--light) !important;
+    color: var(--black) !important;
+
+    .ace_gutter-active-line {
+      background-color: var(--extra-light) !important;
+    }
+  }
+
+  .ace_text {
+    color: var(--black) !important;
+  }
+
+  .ace_keyword {
+    color: var(--primary) !important;
+  }
+
+  .ace_string {
+    color: var(--secondary) !important;
+  }
+
+  .ace_variable {
+    color: var(--warning) !important;
+  }
+
+  .ace_type {
+    color: var(--secondary) !important;
+  }
+
+  .ace_constant {
+    color: var(--primary) !important;
+  }
+
+  .ace_tag {
+    color: var(--primary) !important;
+  }
+
+  .ace_attribute {
+    color: var(--warning) !important;
+  }
+
+  .ace_comment {
+    color: var(--extra-light) !important;
+  }
 }
@@ -69,6 +69,10 @@ $body-color: $black !default;
 $border-color: $extra-light !default;
 $hr-border-color: $border-color !default;

+// Modal
+$modal-backdrop-bg: $white !default;
+$modal-backdrop-opacity: .75 !default;
+
 // Options
 $enable-rounded:   true !default;
 $enable-gradients: false !default;