Add color swatchers on color picker component

2024-01-30 17:46:05 +03:00
parent cc99327618
commit f82bca2940
16 changed files with 563 additions and 21 deletions
@@ -48,9 +48,14 @@
                :translations="{
                  modalTitle: $t('colorPicker'),
                  defaultBtnLabel: $t('label.default'),
+                  light: $t('tabs.light'),
+                  dark: $t('tabs.dark'),
                  cancelBtnLabel: $t('general:label.cancel'),
                  saveBtnLabel: $t('general:label.saveAndClose')
                }"
+                :color-tooltips="colorSchemeTooltips"
+                :swatchers="themeColors"
+                :swatcher-labels="themeVariables"
              />
            </b-form-group>
          </b-col>
@@ -203,6 +208,7 @@ export default {
      },

      themes: [],
+      themeColors: [],

      customCSSModal: {
        show: false,
@@ -221,6 +227,12 @@ export default {
      const [year, month] = VERSION.split('.')
      return `https://docs.cortezaproject.org/corteza-docs/${year}.${month}/integrator-guide/corteza-studio/index.html`
    },
+    colorSchemeTooltips () {
+      return this.themeVariables.reduce((acc, label) => {
+        acc[label] = this.$t(`theme.variables.${label}`)
+        return acc
+      }, {})
+    },
  },

  watch: {
@@ -230,11 +242,16 @@ export default {
        const themes = settings['ui.studio.themes'] || []
        const customCSS = settings['ui.studio.custom-css'] || []

+        this.themeColors = themes.map(theme => {
+          theme.values = JSON.parse(theme.values)
+          return theme
+        })
+
        this.themes = this.themeTabs.map((id) => {
          const { title, values = '' } = themes.find(t => t.id === id) || {}
          const defaultCustomCSS = customCSS.find(t => t.id === id) || {}

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

          if (['light', 'dark'].includes(id)) {
@@ -59,9 +59,14 @@
              data-test-id="input-text-color"
              :translations="{
                modalTitle: $t('colorPicker'),
+                light: $t('ui.settings:editor.corteza-studio.tabs.light'),
+                dark: $t('ui.settings:editor.corteza-studio.tabs.dark'),
                cancelBtnLabel: $t('general:label.cancel'),
                saveBtnLabel: $t('general:label.saveAndClose')
              }"
+              :color-tooltips="colorSchemeTooltips"
+              :swatchers="themeColors"
+              :swatcher-labels="swatcherLabels"
            />
          </b-form-group>
        </b-col>
@@ -79,9 +84,14 @@
              data-test-id="input-background-color"
              :translations="{
                modalTitle: $t('colorPicker'),
+                light: $t('ui.settings:editor.corteza-studio.tabs.light'),
+                dark: $t('ui.settings:editor.corteza-studio.tabs.dark'),
                cancelBtnLabel: $t('general:label.cancel'),
                saveBtnLabel: $t('general:label.saveAndClose')
              }"
+              :color-tooltips="colorSchemeTooltips"
+              :swatchers="themeColors"
+              :swatcher-labels="swatcherLabels"
            />
          </b-form-group>
        </b-col>
@@ -137,10 +147,49 @@ export default {
    },
  },

+  data () {
+    return {
+      swatcherLabels: [
+        'black',
+        'white',
+        'primary',
+        'secondary',
+        'success',
+        'warning',
+        'danger',
+        'light',
+        'extra-light',
+        'body-bg',
+        'sidebar-bg',
+        'topbar-bg',
+      ],
+    }
+  },
+
  computed: {
    isKindAvatar () {
      return this.user.meta.avatarKind === 'avatar'
    },
+
+    colorSchemeTooltips () {
+      return this.swatcherLabels.reduce((acc, label) => {
+        acc[label] = this.$t(`ui.settings:editor.corteza-studio.theme.variables.${label}`)
+        return acc
+      }, {})
+    },
+
+    themeColors () {
+      const theme = this.$Settings.get('ui.studio.themes', [])
+      if (!theme.length) {
+        return theme
+      }
+
+      return theme.map(theme => {
+        console.log(theme.values)
+        theme.values = JSON.parse(theme.values)
+        return theme
+      })
+    },
  },

  methods: {