Fix ace editor and color picker dark theme styles

lib/vue/src/components/input/CAceEditor.vue

@@ -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>

lib/vue/src/components/input/CInputColorPicker.vue

@@ -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>

lib/vue/src/components/navigation/CSidebar.vue

@@ -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 {