From f82bca2940eed4ebfe6d612e3cdfbb45423df3eb Mon Sep 17 00:00:00 2001 From: Mumbi Francis Date: Fri, 19 Jan 2024 16:27:33 +0300 Subject: [PATCH] Add color swatchers on color picker component --- .../Settings/UI/CUIBrandingEditor.vue | 19 ++++++- .../src/components/User/CUserEditorAvatar.vue | 49 ++++++++++++++++ client/web/admin/yarn.lock | 14 +---- .../ModuleFields/Configurator/File.vue | 43 ++++++++++++++ .../FeedSource/configs/Record.vue | 43 ++++++++++++++ .../FeedSource/configs/Reminder.vue | 45 +++++++++++++++ .../PageBlocks/FileConfigurator.vue | 43 ++++++++++++++ .../FeedSource/configs/Record.vue | 43 ++++++++++++++ .../PageBlocks/MetricConfigurator/MStyle.vue | 50 ++++++++++++++++ .../PageBlocks/Navigation/Configurator.vue | 46 +++++++++++++++ .../compose/src/views/Admin/Charts/Edit.vue | 39 +++++++++++++ .../DisplayElements/Configurators/Metric.vue | 48 ++++++++++++++++ lib/vue/src/components/Tour/Tour.vue | 10 +++- .../components/input/CInputColorPicker.vue | 57 +++++++++++++++++-- locale/en/corteza-webapp-compose/general.yaml | 18 ++++++ .../display-element.yaml | 17 ++++++ 16 files changed, 563 insertions(+), 21 deletions(-) diff --git a/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue b/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue index 0727266cd..92a6a1d9d 100644 --- a/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue +++ b/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue @@ -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" /> @@ -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)) { diff --git a/client/web/admin/src/components/User/CUserEditorAvatar.vue b/client/web/admin/src/components/User/CUserEditorAvatar.vue index 5ba782b31..f12b3dbdd 100644 --- a/client/web/admin/src/components/User/CUserEditorAvatar.vue +++ b/client/web/admin/src/components/User/CUserEditorAvatar.vue @@ -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" /> @@ -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" /> @@ -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: { diff --git a/client/web/admin/yarn.lock b/client/web/admin/yarn.lock index 8293d2534..4c901d025 100644 --- a/client/web/admin/yarn.lock +++ b/client/web/admin/yarn.lock @@ -799,13 +799,6 @@ resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.10.tgz#eeeec1e4e8850bed0468f938292b06cda793bf34" integrity sha512-b2+SLF31h32LSepVcXe+BQ63yvbq5qmTCy4KfFogCYm2bn68H5sDWUnX+U7MBqnM2aeEk9M7xSoqGnu+wSdY6w== -"@googlemaps/js-api-loader@^1.14.3": - version "1.16.2" - resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz#3fe748e21243f8e8322c677a5525c569ae9cdbe9" - integrity sha512-psGw5u0QM6humao48Hn4lrChOM2/rA43ZCm3tKK9qQsEj1/VzqkCqnvGfEOshDbBQflydfaRovbKwZMF4AyqbA== - dependencies: - fast-deep-equal "^3.1.3" - "@hapi/address@2.x.x": version "2.1.4" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" @@ -4371,7 +4364,7 @@ fast-deep-equal@^1.0.0: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614" integrity sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ= -fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: +fast-deep-equal@^3.1.1: version "3.1.3" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== @@ -10897,11 +10890,6 @@ vue2-dropzone@^3.6.0: dependencies: dropzone "^5.5.1" -vue2-leaflet@^2.7.1: - version "2.7.1" - resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz#2f95c287621bf778f10804c88223877f5c049257" - integrity sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ== - vue@2.6.14: version "2.6.14" resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235" diff --git a/client/web/compose/src/components/ModuleFields/Configurator/File.vue b/client/web/compose/src/components/ModuleFields/Configurator/File.vue index 3d6c4af40..31618d379 100644 --- a/client/web/compose/src/components/ModuleFields/Configurator/File.vue +++ b/client/web/compose/src/components/ModuleFields/Configurator/File.vue @@ -169,9 +169,14 @@ v-model="f.options.backgroundColor" :translations="{ modalTitle: $t('kind.file.view.colorPicker'), + light: $t('general:swatchers.labels.light'), + dark: $t('general:swatchers.labels.dark'), cancelBtnLabel: $t('general:label.cancel'), saveBtnLabel: $t('general:label.saveAndClose') }" + :color-tooltips="colorSchemeTooltips" + :swatchers="themeColors" + :swatcher-labels="swatcherLabels" /> @@ -196,6 +201,25 @@ export default { extends: base, + data () { + return { + swatcherLabels: [ + 'black', + 'white', + 'primary', + 'secondary', + 'success', + 'warning', + 'danger', + 'light', + 'extra-light', + 'body-bg', + 'sidebar-bg', + 'topbar-bg', + ], + } + }, + computed: { modes () { return [ @@ -208,6 +232,25 @@ export default { const { mode } = this.f.options return mode === 'gallery' }, + + colorSchemeTooltips () { + return this.swatcherLabels.reduce((acc, label) => { + acc[label] = this.$t(`general:swatchers.tooltips.${label}`) + return acc + }, {}) + }, + + themeColors () { + const theme = this.$Settings.get('ui.studio.themes', []) + if (!theme.length) { + return theme + } + + return theme.map(theme => { + theme.values = JSON.parse(theme.values) + return theme + }) + }, }, } diff --git a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue index 552b2a72a..3c0d6c2ff 100644 --- a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue +++ b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue @@ -32,9 +32,14 @@ v-model="feed.options.color" :translations="{ modalTitle: $t('calendar.recordFeed.colorPicker'), + light: $t('general:swatchers.labels.light'), + dark: $t('general:swatchers.labels.dark'), cancelBtnLabel: $t('general:label.cancel'), saveBtnLabel: $t('general:label.saveAndClose') }" + :color-tooltips="colorSchemeTooltips" + :swatchers="themeColors" + :swatcher-labels="swatcherLabels" /> @@ -154,6 +159,25 @@ export default { extends: base, + data () { + return { + swatcherLabels: [ + 'black', + 'white', + 'primary', + 'secondary', + 'success', + 'warning', + 'danger', + 'light', + 'extra-light', + 'body-bg', + 'sidebar-bg', + 'topbar-bg', + ], + } + }, + computed: { /** * Finds the module, this feed configurator should use @@ -217,6 +241,25 @@ export default { }), ].filter(f => f.kind === 'DateTime' && !f.isMulti) }, + + colorSchemeTooltips () { + return this.swatcherLabels.reduce((acc, label) => { + acc[label] = this.$t(`general:swatchers.tooltips.${label}`) + return acc + }, {}) + }, + + themeColors () { + const theme = this.$Settings.get('ui.studio.themes', []) + if (!theme.length) { + return theme + } + + return theme.map(theme => { + theme.values = JSON.parse(theme.values) + return theme + }) + }, }, } diff --git a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue index 92c1362a8..327281848 100644 --- a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue +++ b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue @@ -11,9 +11,14 @@ v-model="feed.options.color" :translations="{ modalTitle: $t('calendar.recordFeed.colorPicker'), + light: $t('general:swatchers.labels.light'), + dark: $t('general:swatchers.labels.dark'), cancelBtnLabel: $t('general:label.cancel'), saveBtnLabel: $t('general:label.saveAndClose') }" + :color-tooltips="colorSchemeTooltips" + :swatchers="themeColors" + :swatcher-labels="swatcherLabels" /> @@ -34,5 +39,45 @@ export default { }, extends: base, + + data () { + return { + swatcherLabels: [ + 'black', + 'white', + 'primary', + 'secondary', + 'success', + 'warning', + 'danger', + 'light', + 'extra-light', + 'body-bg', + 'sidebar-bg', + 'topbar-bg', + ], + } + }, + + computed: { + colorSchemeTooltips () { + return this.swatcherLabels.reduce((acc, label) => { + acc[label] = this.$t(`general:swatchers.tooltips.${label}`) + return acc + }, {}) + }, + + themeColors () { + const theme = this.$Settings.get('ui.studio.themes', []) + if (!theme.length) { + return theme + } + + return theme.map(theme => { + theme.values = JSON.parse(theme.values) + return theme + }) + }, + }, } diff --git a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue index 46de061bd..771cbe2de 100644 --- a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue +++ b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue @@ -173,9 +173,14 @@ v-model="options.backgroundColor" :translations="{ modalTitle: $t('kind.file.view.colorPicker'), + light: $t('general:swatchers.labels.light'), + dark: $t('general:swatchers.labels.dark'), cancelBtnLabel: $t('general:label.cancel'), saveBtnLabel: $t('general:label.saveAndClose') }" + :color-tooltips="colorSchemeTooltips" + :swatchers="themeColors" + :swatcher-labels="swatcherLabels" /> @@ -205,6 +210,25 @@ export default { extends: base, + data () { + return { + swatcherLabels: [ + 'black', + 'white', + 'primary', + 'secondary', + 'success', + 'warning', + 'danger', + 'light', + 'extra-light', + 'body-bg', + 'sidebar-bg', + 'topbar-bg', + ], + } + }, + computed: { endpoint () { const { pageID } = this.page @@ -226,6 +250,25 @@ export default { const { mode } = this.options return mode === 'gallery' }, + + colorSchemeTooltips () { + return this.swatcherLabels.reduce((acc, label) => { + acc[label] = this.$t(`general:swatchers.tooltips.${label}`) + return acc + }, {}) + }, + + themeColors () { + const theme = this.$Settings.get('ui.studio.themes', []) + if (!theme.length) { + return theme + } + + return theme.map(theme => { + theme.values = JSON.parse(theme.values) + return theme + }) + }, }, methods: { diff --git a/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue b/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue index 2d390abb5..fa6701f4c 100644 --- a/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue +++ b/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue @@ -84,9 +84,14 @@ v-model="feed.options.color" :translations="{ modalTitle: $t('geometry.recordFeed.colorPicker'), + light: $t('general:swatchers.labels.light'), + dark: $t('general:swatchers.labels.dark'), cancelBtnLabel: $t('general:label.cancel'), saveBtnLabel: $t('general:label.saveAndClose') }" + :color-tooltips="colorSchemeTooltips" + :swatchers="themeColors" + :swatcher-labels="swatcherLabels" /> @@ -140,6 +145,25 @@ export default { extends: base, + data () { + return { + swatcherLabels: [ + 'black', + 'white', + 'primary', + 'secondary', + 'success', + 'warning', + 'danger', + 'light', + 'extra-light', + 'body-bg', + 'sidebar-bg', + 'topbar-bg', + ], + } + }, + computed: { /** * Finds the module, this feed configurator should use @@ -205,6 +229,25 @@ export default { }), ].filter(f => f.kind === 'Geometry') }, + + colorSchemeTooltips () { + return this.swatcherLabels.reduce((acc, label) => { + acc[label] = this.$t(`general:swatchers.tooltips.${label}`) + return acc + }, {}) + }, + + themeColors () { + const theme = this.$Settings.get('ui.studio.themes', []) + if (!theme.length) { + return theme + } + + return theme.map(theme => { + theme.values = JSON.parse(theme.values) + return theme + }) + }, }, } diff --git a/client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue b/client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue index 9b326a3b9..2b650148b 100644 --- a/client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue +++ b/client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue @@ -11,9 +11,14 @@ v-model="options.color" :translations="{ modalTitle: $t('metric.editStyle.colorPicker'), + light: $t('general:swatchers.labels.light'), + dark: $t('general:swatchers.labels.dark'), cancelBtnLabel: $t('general:label.cancel'), saveBtnLabel: $t('general:label.saveAndClose') }" + :color-tooltips="colorSchemeTooltips" + :swatchers="themeColors" + :swatcher-labels="swatcherLabels" class="mb-1" /> @@ -26,9 +31,14 @@ v-model="options.backgroundColor" :translations="{ modalTitle: $t('geometry.recordFeed.colorPicker'), + light: $t('general:swatchers.labels.light'), + dark: $t('general:swatchers.labels.dark'), cancelBtnLabel: $t('general:label.cancel'), saveBtnLabel: $t('general:label.saveAndClose') }" + :color-tooltips="colorSchemeTooltips" + :swatchers="themeColors" + :swatcher-labels="swatcherLabels" class="mb-1" /> @@ -70,5 +80,45 @@ export default { default: () => ({}), }, }, + + data () { + return { + swatcherLabels: [ + 'black', + 'white', + 'primary', + 'secondary', + 'success', + 'warning', + 'danger', + 'light', + 'extra-light', + 'body-bg', + 'sidebar-bg', + 'topbar-bg', + ], + } + }, + + computed: { + colorSchemeTooltips () { + return this.swatcherLabels.reduce((acc, label) => { + acc[label] = this.$t(`general:swatchers.tooltips.${label}`) + return acc + }, {}) + }, + + themeColors () { + const theme = this.$Settings.get('ui.studio.themes', []) + if (!theme.length) { + return theme + } + + return theme.map(theme => { + theme.values = JSON.parse(theme.values) + return theme + }) + }, + }, } diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue index 4059ce1d3..a6f016af4 100644 --- a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue +++ b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue @@ -146,9 +146,14 @@ v-model="item.options.textColor" :translations="{ modalTitle: $t('navigation.colorPicker'), + light: $t('general:swatchers.labels.light'), + dark: $t('general:swatchers.labels.dark'), cancelBtnLabel: $t('general:label.cancel'), saveBtnLabel: $t('general:label.saveAndClose') }" + :color-tooltips="colorSchemeTooltips" + :swatchers="themeColors" + :swatcher-labels="swatcherLabels" class="w-100" /> @@ -158,9 +163,14 @@ v-model="item.options.backgroundColor" :translations="{ modalTitle: $t('navigation.colorPicker'), + light: $t('general:swatchers.labels.light'), + dark: $t('general:swatchers.labels.dark'), cancelBtnLabel: $t('general:label.cancel'), saveBtnLabel: $t('general:label.saveAndClose') }" + :color-tooltips="colorSchemeTooltips" + :swatchers="themeColors" + :swatcher-labels="swatcherLabels" class="w-100" /> @@ -282,9 +292,45 @@ export default { { value: 'dropdown', text: this.$t('navigation.dropdown') }, { value: 'text-section', text: this.$t('navigation.text') }, ], + + swatcherLabels: [ + 'black', + 'white', + 'primary', + 'secondary', + 'success', + 'warning', + 'danger', + 'light', + 'extra-light', + 'body-bg', + 'sidebar-bg', + 'topbar-bg', + ], } }, + computed: { + colorSchemeTooltips () { + return this.swatcherLabels.reduce((acc, label) => { + acc[label] = this.$t(`general:swatchers.tooltips.${label}`) + return acc + }, {}) + }, + + themeColors () { + const theme = this.$Settings.get('ui.studio.themes', []) + if (!theme.length) { + return theme + } + + return theme.map(theme => { + theme.values = JSON.parse(theme.values) + return theme + }) + }, + }, + beforeDestroy () { this.setDefaultValues() }, diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue index 0b20f0ac9..762b3706f 100644 --- a/client/web/compose/src/views/Admin/Charts/Edit.vue +++ b/client/web/compose/src/views/Admin/Charts/Edit.vue @@ -366,9 +366,14 @@ data-test-id="input-scheme-color" :translations="{ modalTitle: $t('colorScheme.pickAColor'), + light: $t('general:swatchers.labels.light'), + dark: $t('general:swatchers.labels.dark'), cancelBtnLabel: $t('general:label.cancel'), saveBtnLabel: $t('general:label.saveAndClose') }" + :color-tooltips="colorSchemeTooltips" + :swatchers="themeColors" + :swatcher-labels="swatcherLabels" class="d-inline-flex mr-1" >