popover and palette

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>

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,

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">
+          <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
-            <template #trigger>
+            <Checkbox v-model="isBackgroundColorPresent" />
-              <Checkbox v-model="isBackgroundColorPresent" />
+          </Tooltip>
-            </template>
-            <template #content>
-              {{ $t('settings.style.themes3.editor.include_in_rule') }}
-            </template>
-          </Popover>
           <OpacityInput
             v-model="editedOpacity"
             :disabled="!isOpacityPresent"
             :label="$t('settings.style.themes3.editor.opacity')"
           />
-          <Popover trigger="hover">
+          <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
-            <template #trigger>
+            <Checkbox v-model="isOpacityPresent" />
-              <Checkbox v-model="isOpacityPresent" />
+          </Tooltip>
-            </template>
-            <template #content>
-              {{ $t('settings.style.themes3.editor.include_in_rule') }}
-            </template>
-          </Popover>
           <ColorInput
             v-model="editedTextColor"
             :label="$t('settings.style.themes3.editor.text_color')"
             :disabled="!isTextColorPresent"
             v-if="componentHas('Text')"
           />
-          <Popover
+          <Tooltip
-            trigger="hover"
             v-if="componentHas('Text')"
+            :text="$t('settings.style.themes3.editor.include_in_rule')"
           >
-            <template #trigger>
+            <Checkbox v-model="isTextColorPresent" />
-              <Checkbox v-model="isTextColorPresent" />
+          </Tooltip>
-            </template>
-            <template #content>
-              {{ $t('settings.style.themes3.editor.include_in_rule') }}
-            </template>
-          </Popover>
           <div class="style-control suboption">
             <label
               for="textAuto"
@@ -227,17 +212,12 @@
               </option>
             </Select>
           </div>
-          <Popover
+          <Tooltip
-            trigger="hover"
             v-if="componentHas('Text')"
+            :text="$t('settings.style.themes3.editor.include_in_rule')"
           >
-            <template #trigger>
+            <Checkbox v-model="isTextAutoPresent" />
-              <Checkbox v-model="isTextAutoPresent" />
+          </Tooltip>
-            </template>
-            <template #content>
-              {{ $t('settings.style.themes3.editor.include_in_rule') }}
-            </template>
-          </Popover>
           <div>
             <ContrastRatio :contrast="getContrast(editedBackgroundColor, editedTextColor)" />
           </div>
@@ -250,34 +230,24 @@
             :disabled="!isLinkColorPresent"
             v-if="componentHas('Link')"
           />
-          <Popover
+          <Tooltip
-            trigger="hover"
             v-if="componentHas('Link')"
+            :text="$t('settings.style.themes3.editor.include_in_rule')"
           >
-            <template #trigger>
+            <Checkbox v-model="isLinkColorPresent" />
-              <Checkbox v-model="isLinkColorPresent" />
+          </Tooltip>
-            </template>
-            <template #content>
-              {{ $t('settings.style.themes3.editor.include_in_rule') }}
-            </template>
-          </Popover>
           <ColorInput
             v-model="editedIconColor"
             :label="$t('settings.style.themes3.editor.icon_color')"
             :disabled="!isIconColorPresent"
             v-if="componentHas('Icon')"
           />
-          <Popover
+          <Tooltip
-            trigger="hover"
             v-if="componentHas('Icon')"
+            :text="$t('settings.style.themes3.editor.include_in_rule')"
           >
-            <template #trigger>
+            <Checkbox v-model="isIconColorPresent" />
-              <Checkbox v-model="isIconColorPresent" />
+          </Tooltip>
-            </template>
-            <template #content>
-              {{ $t('settings.style.themes3.editor.include_in_rule') }}
-            </template>
-          </Popover>
         </div>
         <div
           class="editor-tab shadow-tab"

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>

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