DeforaNetworks/corteza
DeforaNetworks/corteza
3
0
Fork 0
Code

Fix color picker

Browse Source
This commit is contained in:
Mumbi Francis 2024-01-25 18:59:54 +03:00
parent a1665e6a80
commit 25195b5ba4
16 changed files with 135 additions and 486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,9 +51,7 @@
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="themeVariables"
:theme-settings="settings['ui.studio.themes']"
/>
</b-form-group>
</b-col>
@ -225,12 +223,6 @@ 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: {
@ -240,16 +232,11 @@ 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 = values
let variables = JSON.parse(values || '{}')
let defaultVariables
if (['light', 'dark'].includes(id)) {

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

@ -62,9 +62,7 @@
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
:theme-settings="themeSettings"
/>
</b-form-group>
</b-col>
@ -87,9 +85,7 @@
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
:theme-settings="themeSettings"
/>
</b-form-group>
</b-col>
@ -145,48 +141,13 @@ 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
})
themeSettings () {
return this.$Settings.get('ui.studio.themes', [])
},
},

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

@ -169,14 +169,12 @@
v-model="f.options.backgroundColor"
:translations="{
modalTitle: $t('kind.file.view.colorPicker'),
light: $t('general:swatchers.labels.light'),
dark: $t('general:swatchers.labels.dark'),
light: $t('general:themes.labels.light'),
dark: $t('general:themes.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
:theme-settings="themeSettings"
/>
</b-form-group>
</b-col>
@ -201,25 +199,6 @@ 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 [
@ -233,23 +212,8 @@ export default {
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
})
themeSettings () {
return this.$Settings.get('ui.studio.themes', [])
},
},
}

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

@ -32,14 +32,12 @@
v-model="feed.options.color"
:translations="{
modalTitle: $t('calendar.recordFeed.colorPicker'),
light: $t('general:swatchers.labels.light'),
dark: $t('general:swatchers.labels.dark'),
light: $t('general:themes.labels.light'),
dark: $t('general:themes.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
:theme-settings="themeSettings"
/>
</b-form-group>
@ -159,25 +157,6 @@ 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
@ -242,23 +221,8 @@ 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
})
themeSettings () {
return this.$Settings.get('ui.studio.themes', [])
},
},
}

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

@ -11,14 +11,12 @@
v-model="feed.options.color"
:translations="{
modalTitle: $t('calendar.recordFeed.colorPicker'),
light: $t('general:swatchers.labels.light'),
dark: $t('general:swatchers.labels.dark'),
light: $t('general:themes.labels.light'),
dark: $t('general:themes.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
:theme-settings="themeSettings"
/>
</b-form-group>
</div>
@ -40,43 +38,9 @@ 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
})
themeSettings () {
return this.$Settings.get('ui.studio.themes', [])
},
},
}

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

@ -173,14 +173,12 @@
v-model="options.backgroundColor"
:translations="{
modalTitle: $t('kind.file.view.colorPicker'),
light: $t('general:swatchers.labels.light'),
dark: $t('general:swatchers.labels.dark'),
light: $t('general:themes.labels.light'),
dark: $t('general:themes.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
:theme-settings="themeSettings"
/>
</b-form-group>
</b-col>
@ -210,25 +208,6 @@ 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
@ -251,23 +230,8 @@ export default {
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
})
themeSettings () {
return this.$Settings.get('ui.studio.themes', [])
},
},

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

@ -84,14 +84,12 @@
v-model="feed.options.color"
:translations="{
modalTitle: $t('geometry.recordFeed.colorPicker'),
light: $t('general:swatchers.labels.light'),
dark: $t('general:swatchers.labels.dark'),
light: $t('general:themes.labels.light'),
dark: $t('general:themes.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
theme-settings="themeSettings"
/>
</b-form-group>
@ -145,25 +143,6 @@ 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
@ -230,23 +209,8 @@ 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
})
themeSettings () {
return this.$Settings.get('ui.studio.themes', [])
},
},
}

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

@ -11,14 +11,12 @@
v-model="options.color"
:translations="{
modalTitle: $t('metric.editStyle.colorPicker'),
light: $t('general:swatchers.labels.light'),
dark: $t('general:swatchers.labels.dark'),
light: $t('general:themes.labels.light'),
dark: $t('general:themes.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
:theme-settings="themeSettings"
class="mb-1"
/>
</b-form-group>
@ -31,14 +29,12 @@
v-model="options.backgroundColor"
:translations="{
modalTitle: $t('geometry.recordFeed.colorPicker'),
light: $t('general:swatchers.labels.light'),
dark: $t('general:swatchers.labels.dark'),
light: $t('general:themes.labels.light'),
dark: $t('general:themes.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
:theme-settings="themeSettings"
class="mb-1"
/>
</b-form-group>
@ -81,43 +77,9 @@ export 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
})
themeSettings () {
return this.$Settings.get('ui.studio.themes', [])
},
},
}

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

@ -146,14 +146,12 @@
v-model="item.options.textColor"
:translations="{
modalTitle: $t('navigation.colorPicker'),
light: $t('general:swatchers.labels.light'),
dark: $t('general:swatchers.labels.dark'),
light: $t('general:themes.labels.light'),
dark: $t('general:themes.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
:theme-settings="themeSettings"
class="w-100"
/>
</td>
@ -163,14 +161,12 @@
v-model="item.options.backgroundColor"
:translations="{
modalTitle: $t('navigation.colorPicker'),
light: $t('general:swatchers.labels.light'),
dark: $t('general:swatchers.labels.dark'),
light: $t('general:themes.labels.light'),
dark: $t('general:themes.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
:theme-settings="themeSettings"
class="w-100"
/>
</td>
@ -292,42 +288,12 @@ 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
})
themeSettings () {
return this.$Settings.get('ui.studio.themes', [])
},
},

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

@ -363,14 +363,12 @@
data-test-id="input-scheme-color"
:translations="{
modalTitle: $t('colorScheme.pickAColor'),
light: $t('general:swatchers.labels.light'),
dark: $t('general:swatchers.labels.dark'),
light: $t('general:themes.labels.light'),
dark: $t('general:themes.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
:theme-settings="themeSettings"
class="d-inline-flex mr-1"
>
<template #footer>
@ -512,21 +510,6 @@ 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',
],
}
},
@ -576,13 +559,6 @@ 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)
},
@ -685,16 +661,8 @@ export default {
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
})
themeSettings () {
return this.$Settings.get('ui.studio.themes', [])
},
},

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

@ -58,14 +58,12 @@
v-model="options.color"
:translations="{
modalTitle: $t('color.picker'),
light: $t('swatchers.labels.light'),
dark: $t('swatchers.labels.dark'),
light: $t('general:themes.labels.light'),
dark: $t('general:themes.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
:theme-settings="themeSettings"
/>
</b-form-group>
</b-col>
@ -78,14 +76,12 @@
v-model="options.backgroundColor"
:translations="{
modalTitle: $t('color.picker'),
light: $t('swatchers.labels.light'),
dark: $t('swatchers.labels.dark'),
light: $t('general:themes.labels.light'),
dark: $t('general:themes.labels.dark'),
cancelBtnLabel: $t('general:label.cancel'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
:color-tooltips="colorSchemeTooltips"
:swatchers="themeColors"
:swatcher-labels="swatcherLabels"
:theme-settings="themeSettings"
/>
</b-form-group>
</b-col>
@ -112,25 +108,6 @@ 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] : []
@ -139,23 +116,8 @@ export default {
].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
})
themeSettings () {
return this.$Settings.get('ui.studio.themes', [])
},
},
}

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

@ -67,23 +67,23 @@
@input="updateColor"
/>
<hr/>
<hr v-if="themes.length > 0" />
<div
v-for="swatcher in swatchers"
:key="swatcher.id"
class="d-flex flex-nowrap p-2"
v-for="theme in themes"
:key="theme.id"
class="d-flex p-2"
>
<div
v-for="key in swatcherLabels"
:key="key"
v-for="variable in themeVariables"
:key="variable.label"
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])"
class="swatch"
v-b-tooltip.hover="{ title: colorToolTip(theme.id,variable.value), container: '#body' }"
:style="{ backgroundColor: theme.values[variable.label], borderColor: theme.values[variable.label] }"
@click="setColor(theme.values[variable.label])"
>
</b-button>
</div>
@ -159,19 +159,48 @@ export default {
default: true,
},
swatchers: {
themeSettings: {
type: Array,
default: [],
},
swatcherLabels: {
themeVariables: {
type: Array,
default: [],
},
colorTooltips: {
type: Object,
},
default: () => [
{
label: 'white',
value: 'White',
},
{
label: 'primary',
value: 'Primary',
},
{
label: 'secondary',
value: 'Secondary',
},
{
label: 'success',
value: 'Success',
},
{
label: 'warning',
value: 'Warning',
},
{
label: 'danger',
value: 'Danger',
},
{
label: 'light',
value: 'Light',
},
{
label: 'extra-light',
value: 'Extra light',
},
],
}
},
data () {
@ -181,6 +210,19 @@ export default {
}
},
computed: {
themes () {
return this.themeSettings
.filter((theme) => theme.id !== 'general') // remove general theme
.map((theme) => {
return {
id: theme.id,
values: JSON.parse(theme.values),
}
})
},
},
watch: {
value: {
immediate: true,
@ -226,14 +268,14 @@ export default {
},
colorToolTip (themeID, label) {
return `${this.translations[themeID]} - ${this.colorTooltips[label]}`
return `${this.translations[themeID]} - ${label}`
},
},
}
</script>
<style lang="scss">
.swatcher {
.swatch {
width: 32px;
height: 32px;
}

5
locale/en/corteza-webapp-admin/general.yaml
View File

@ -57,3 +57,8 @@ editor:
resourceList:
pagination:
recordsPerPage: Records per page
themes:
labels:
light: Light
dark: Dark

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

@ -180,20 +180,7 @@ variants:
editor:
unsavedChanges: Unsaved changes will be lost. Do you wish to leave the page?
swatchers:
themes:
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,23 +90,6 @@ 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

6
locale/en/corteza-webapp-reporter/general.yaml
View File

@ -33,3 +33,9 @@ resourceList:
single: 'One {{data}}'
single_plural: '{{count}} {{data}}'
recordsPerPage: Records per page
themes:
labels:
light: Light
dark: Dark