commit: 07a48315a14bee16a3b6a1822502301180803e60
parent 89b05cfc576d61ab57c21c5b87769ffb704f3d4d
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 30 Sep 2024 15:11:43 +0300
popover and palette
Diffstat:
5 files changed, 112 insertions(+), 55 deletions(-)
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
@@ -0,0 +1,63 @@
+<template>
+ <div class="PaletteEditor">
+ <ColorInput
+ v-for="key in paletteKeys"
+ :key="key"
+ :model-value="props.modelValue[key]"
+ :fallback="fallback(key)"
+ :label="$t('settings.style.themes3.editor.palette.' + key)"
+ @update:modelValue="value => updatePalette(key, value)"
+ />
+ </div>
+</template>
+
+<script setup>
+import ColorInput from 'src/components/color_input/color_input.vue'
+
+const props = defineProps(['modelValue'])
+const emit = defineEmits(['update:modelValue'])
+
+const paletteKeys = [
+ 'bg',
+ 'fg',
+ 'text',
+ 'link',
+ 'accent',
+ 'cRed',
+ 'cBlue',
+ 'cGreen',
+ 'cOrange',
+ 'extra1',
+ 'extra2',
+ 'extra3'
+]
+
+const fallback = (key) => {
+ if (key === 'accent') {
+ return props.modelValue.link
+ }
+ if (key === 'link') {
+ return props.modelValue.accent
+ }
+ if (key.startsWith('extra')) {
+ return '#000000'
+ }
+}
+
+const updatePalette = (paletteKey, value) => {
+ emit('update:modelValue', {
+ ...props.modelValue,
+ [paletteKey]: value
+ })
+}
+</script>
+
+<style lang="scss">
+.PaletteEditor {
+ display: grid;
+ justify-content: space-around;
+ grid-template-columns: repeat(4, min-content);
+ grid-template-rows: repeat(auto-fit, min-content);
+ grid-gap: 0.5em;
+}
+</style>
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -10,7 +10,7 @@ import ColorInput from 'src/components/color_input/color_input.vue'
import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
-import Popover from 'src/components/popover/popover.vue'
+import Tooltip from 'src/components/tooltip/tooltip.vue'
import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
import { init } from 'src/services/theme_data/theme_data_3.service.js'
@@ -43,7 +43,7 @@ export default {
components: {
Select,
Checkbox,
- Popover,
+ Tooltip,
StringSetting,
ComponentPreview,
TabSwitcher,
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -165,44 +165,29 @@
:disabled="!isBackgroundColorPresent"
:label="$t('settings.style.themes3.editor.background')"
/>
- <Popover trigger="hover">
- <template #trigger>
- <Checkbox v-model="isBackgroundColorPresent" />
- </template>
- <template #content>
- {{ $t('settings.style.themes3.editor.include_in_rule') }}
- </template>
- </Popover>
+ <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
+ <Checkbox v-model="isBackgroundColorPresent" />
+ </Tooltip>
<OpacityInput
v-model="editedOpacity"
:disabled="!isOpacityPresent"
:label="$t('settings.style.themes3.editor.opacity')"
/>
- <Popover trigger="hover">
- <template #trigger>
- <Checkbox v-model="isOpacityPresent" />
- </template>
- <template #content>
- {{ $t('settings.style.themes3.editor.include_in_rule') }}
- </template>
- </Popover>
+ <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
+ <Checkbox v-model="isOpacityPresent" />
+ </Tooltip>
<ColorInput
v-model="editedTextColor"
:label="$t('settings.style.themes3.editor.text_color')"
:disabled="!isTextColorPresent"
v-if="componentHas('Text')"
/>
- <Popover
- trigger="hover"
+ <Tooltip
v-if="componentHas('Text')"
+ :text="$t('settings.style.themes3.editor.include_in_rule')"
>
- <template #trigger>
- <Checkbox v-model="isTextColorPresent" />
- </template>
- <template #content>
- {{ $t('settings.style.themes3.editor.include_in_rule') }}
- </template>
- </Popover>
+ <Checkbox v-model="isTextColorPresent" />
+ </Tooltip>
<div class="style-control suboption">
<label
for="textAuto"
@@ -227,17 +212,12 @@
</option>
</Select>
</div>
- <Popover
- trigger="hover"
+ <Tooltip
v-if="componentHas('Text')"
+ :text="$t('settings.style.themes3.editor.include_in_rule')"
>
- <template #trigger>
- <Checkbox v-model="isTextAutoPresent" />
- </template>
- <template #content>
- {{ $t('settings.style.themes3.editor.include_in_rule') }}
- </template>
- </Popover>
+ <Checkbox v-model="isTextAutoPresent" />
+ </Tooltip>
<div>
<ContrastRatio :contrast="getContrast(editedBackgroundColor, editedTextColor)" />
</div>
@@ -250,34 +230,24 @@
:disabled="!isLinkColorPresent"
v-if="componentHas('Link')"
/>
- <Popover
- trigger="hover"
+ <Tooltip
v-if="componentHas('Link')"
+ :text="$t('settings.style.themes3.editor.include_in_rule')"
>
- <template #trigger>
- <Checkbox v-model="isLinkColorPresent" />
- </template>
- <template #content>
- {{ $t('settings.style.themes3.editor.include_in_rule') }}
- </template>
- </Popover>
+ <Checkbox v-model="isLinkColorPresent" />
+ </Tooltip>
<ColorInput
v-model="editedIconColor"
:label="$t('settings.style.themes3.editor.icon_color')"
:disabled="!isIconColorPresent"
v-if="componentHas('Icon')"
/>
- <Popover
- trigger="hover"
+ <Tooltip
v-if="componentHas('Icon')"
+ :text="$t('settings.style.themes3.editor.include_in_rule')"
>
- <template #trigger>
- <Checkbox v-model="isIconColorPresent" />
- </template>
- <template #content>
- {{ $t('settings.style.themes3.editor.include_in_rule') }}
- </template>
- </Popover>
+ <Checkbox v-model="isIconColorPresent" />
+ </Tooltip>
</div>
<div
class="editor-tab shadow-tab"
diff --git a/src/components/tooltip/tooltip.vue b/src/components/tooltip/tooltip.vue
@@ -0,0 +1,24 @@
+<template>
+ <Popover trigger="hover">
+ <template #trigger>
+ <slot />
+ </template>
+ <template #content>
+ <div class="tooltip">
+ {{ props.text }}
+ </div>
+ </template>
+ </Popover>
+</template>
+
+<script setup>
+import Popover from 'src/components/popover/popover.vue'
+
+const props = defineProps(['text'])
+</script>
+
+<style lang="scss">
+.tooltip {
+ margin: 0.5em 1em;
+}
+</style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -779,7 +779,7 @@
"no-auto": "Disabled"
},
"palette": {
- "label": "Edited palette",
+ "label": "Palette",
"dark": "Dark mode",
"light": "Light mode",
"bg": "Panel background",
