DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Add color swatchers on color picker component

Browse Source
This commit is contained in:
Mumbi Francis
2024-01-19 16:27:33 +03:00
parent cc99327618
commit f82bca2940
16 changed files with 563 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
View File

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

49
client/web/admin/src/components/User/CUserEditorAvatar.vue
View File

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

14
client/web/admin/yarn.lock
View File

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

43
client/web/compose/src/components/ModuleFields/Configurator/File.vue
View File

@@ -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"
/>
</b-form-group>
</b-col>
@@ -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
})
},
},
}
</script>

43
client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue
View File

@@ -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"
/>
</b-form-group>
@@ -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
})
},
},
}
</script>

45
client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue
View File

@@ -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"
/>
</b-form-group>
</div>
@@ -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
})
},
},
}
</script>

43
client/web/compose/src/components/PageBlocks/FileConfigurator.vue
View File

@@ -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"
/>
</b-form-group>
</b-col>
@@ -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: {

43
client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue
View File

@@ -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"
/>
</b-form-group>
@@ -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
})
},
},
}
</script>

50
client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue
View File

@@ -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"
/>
</b-form-group>
@@ -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"
/>
</b-form-group>
@@ -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
})
},
},
}
</script>

46
client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
View File

@@ -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"
/>
</td>
@@ -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"
/>
</td>
@@ -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()
},

39
client/web/compose/src/views/Admin/Charts/Edit.vue
View File

@@ -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"
>
<template #footer>
@@ -510,6 +515,21 @@ export default {
on: this.$t('general:label.yes'),
off: this.$t('general:label.no'),
},
swatcherLabels: [
'black',
'white',
'primary',
'secondary',
'success',
'warning',
'danger',
'light',
'extra-light',
'body-bg',
'sidebar-bg',
'topbar-bg',
],
}
},
@@ -559,6 +579,13 @@ export default {
return this.$t(`colorScheme.custom.${this.colorSchemeModal.edit ? 'edit' : 'add'}`)
},
colorSchemeTooltips () {
return this.swatcherLabels.reduce((acc, label) => {
acc[label] = this.$t(`general:swatchers.tooltips.${label}`)
return acc
}, {})
},
defaultReport () {
return Object.assign({}, defaultReport)
},
@@ -660,6 +687,18 @@ export default {
const { config = {} } = this.chart || {}
return config.colorScheme && config.colorScheme.includes('custom') && this.canManageColorSchemes
},
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
})
},
},
watch: {

48
client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Metric.vue
View File

@@ -58,9 +58,14 @@
v-model="options.color"
:translations="{
modalTitle: $t('color.picker'),
light: $t('swatchers.labels.light'),
dark: $t('swatchers.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
/>
</b-form-group>
</b-col>
@@ -73,9 +78,14 @@
v-model="options.backgroundColor"
:translations="{
modalTitle: $t('color.picker'),
light: $t('swatchers.labels.light'),
dark: $t('swatchers.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
/>
</b-form-group>
</b-col>
@@ -102,6 +112,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: {
valueColumns () {
const columns = this.columns.length ? this.columns[0] : []
@@ -109,6 +138,25 @@ export default {
...columns.filter(({ kind }) => ['Number'].includes(kind)),
].sort((a, b) => a.label.localeCompare(b.label))
},
colorSchemeTooltips () {
return this.swatcherLabels.reduce((acc, label) => {
acc[label] = this.$t(`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
})
},
},
}
</script>

10
lib/vue/src/components/Tour/Tour.vue
View File

@@ -42,6 +42,7 @@
<b-button
data-test-id="button-stop-tour"
variant="primary"
class="text-light"
@click="onStop"
>
<template v-if="tour.isLast && !(callbacks || {}).onNextRedirect">
@@ -55,6 +56,7 @@
data-test-id="button-previous"
v-if="tour.isFirst && (callbacks || {}).onPrevRedirect"
variant="primary"
class="text-light"
:href="callbacks.onPrevRedirect"
>
{{ $t('buttons.previous') }}
@@ -63,6 +65,7 @@
data-test-id="button-previous"
v-else-if="!tour.isFirst"
variant="primary"
class="text-light"
@click="tour.previousStep"
>
{{ $t('buttons.previous') }}
@@ -71,6 +74,7 @@
data-test-id="button-next"
v-if="tour.isLast && (callbacks || {}).onNextRedirect"
variant="primary"
class="text-light"
:href="callbacks.onNextRedirect"
>
{{ $t('buttons.next') }}
@@ -78,7 +82,7 @@
<b-button
data-test-id="button-next"
v-else-if="!tour.isLast"
variant="primary"
variant="light"
@click="tour.nextStep"
>
{{ $t('buttons.next') }}
@@ -154,7 +158,7 @@ export default {
<style lang="scss">
.v-step {
background: #5C5C5C;
background: var(--primary);
max-width: 320px;
z-index: 10000;
border-radius: 1.1rem;
@@ -180,7 +184,7 @@ export default {
visibility: hidden;
}
.v-step__arrow--dark:before {
background: #5C5C5C;
background: var(--primary);
}
.v-step__arrow:before {
visibility: visible;

57
lib/vue/src/components/input/CInputColorPicker.vue
View File

@@ -67,11 +67,33 @@
@input="updateColor"
/>
<hr/>
<div
v-for="swatcher in swatchers"
:key="swatcher.id"
class="d-flex flex-nowrap p-2"
>
<div
v-for="key in swatcherLabels"
:key="key"
class="mb-2"
>
<b-button
squared
class="swatcher"
v-b-tooltip.hover="{ title: colorToolTip(swatcher.id,key), container: '#body' }"
:style="{ backgroundColor: swatcher.values[key], borderColor: swatcher.values[key] }"
@click="setColor(swatcher.values[key])"
>
</b-button>
</div>
</div>
<template #modal-footer>
<b-button
v-if="defaultValue"
variant="light"
@click="resetColor()"
@click="setColor()"
>
{{ translations.defaultBtnLabel }}
</b-button>
@@ -135,7 +157,21 @@ export default {
showText: {
type: Boolean,
default: true,
}
},
swatchers: {
type: Array,
default: [],
},
swatcherLabels: {
type: Array,
default: [],
},
colorTooltips: {
type: Object,
},
},
data () {
@@ -159,8 +195,8 @@ export default {
this.currentColor = hex8
}, 300),
resetColor () {
this.currentColor = this.defaultValue
setColor (defaultColor = this.defaultValue) {
this.currentColor = defaultColor
},
saveColor () {
@@ -176,6 +212,11 @@ export default {
}
},
saveColor () {
this.$emit('input', this.currentColor || this.value)
this.closeMenu()
},
openMenu () {
this.showModal = true
},
@@ -183,11 +224,19 @@ export default {
closeMenu () {
this.showModal = false
},
colorToolTip (themeID, label) {
return `${this.translations[themeID]} - ${this.colorTooltips[label]}`
},
},
}
</script>
<style lang="scss">
.swatcher {
width: 32px;
height: 32px;
}
.vc-chrome {
font-family: var(--font-medium) !important;

18
locale/en/corteza-webapp-compose/general.yaml
View File

@@ -179,3 +179,21 @@ variants:
warning: Warning
editor:
unsavedChanges: Unsaved changes will be lost. Do you wish to leave the page?
swatchers:
labels:
light: Light
dark: Dark
tooltips:
white: White
black: Black
primary: Primary
secondary: Secondary
success: Success
warning: Warning
danger: Danger
light: Light
extra-light: Extra light
body-bg: Body background
sidebar-bg: Sidebar background
topbar-bg: Topbar background

17
locale/en/corteza-webapp-reporter/display-element.yaml
View File

@@ -90,6 +90,23 @@ metric:
background: Background color
text: Text color
picker: Choose a color
swatchers:
labels:
light: Light theme
dark: Dark theme
tooltips:
white: White
black: Black
primary: Primary
secondary: Secondary
success: Success
warning: Warning
danger: Danger
light: Light
extra-light: Extra light
body-bg: Body background
sidebar-bg: Sidebar background
topbar-bg: Topbar background
format: Format
label-column: Label column
none: None