User palette editor

src/components/palette_editor/palette_editor.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="PaletteEditor">
+  <div
+    class="PaletteEditor"
+    :class="{ '-compact': compact, '-apply': apply }"
+  >
     <ColorInput
       v-for="key in paletteKeys"
       :key="key"
@@ -22,6 +25,13 @@
       <FAIcon icon="file-export" />
       {{ $t('settings.style.themes3.palette.export') }}
     </button>
+    <button
+      v-if="apply"
+      class="btn button-default palette-apply-button"
+      @click="applyPalette"
+    >
+      {{ $t('settings.style.themes3.palette.apply') }}
+    </button>
   </div>
 </template>
 
@@ -43,12 +53,34 @@ library.add(
   faFileExport
 )
 
-const props = defineProps(['modelValue'])
-const emit = defineEmits(['update:modelValue'])
+const paletteKeys = [
+  'bg',
+  'fg',
+  'text',
+  'link',
+  'accent',
+  'cRed',
+  'cBlue',
+  'cGreen',
+  'cOrange',
+  'wallpaper'
+]
+
+const props = defineProps(['modelValue', 'compact', 'apply'])
+const emit = defineEmits(['update:modelValue', 'applyPalette'])
+const getExportedObject = () => paletteKeys.reduce((acc, key) => {
+  const value = props.modelValue[key]
+  if (value == null) {
+    return acc
+  } else {
+    return { ...acc, [key]: props.modelValue[key] }
+  }
+}, {})
+
 const paletteExporter = newExporter({
   filename: 'pleroma_palette',
   extension: 'json',
-  getExportedObject: () => props.modelValue
+  getExportedObject
 })
 const paletteImporter = newImporter({
   accept: '.json',
@@ -65,18 +97,9 @@ const importPalette = () => {
   paletteImporter.importData()
 }
 
-const paletteKeys = [
-  'bg',
-  'fg',
-  'text',
-  'link',
-  'accent',
-  'cRed',
-  'cBlue',
-  'cGreen',
-  'cOrange',
-  'wallpaper'
-]
+const applyPalette = (data) => {
+  emit('applyPalette', getExportedObject())
+}
 
 const fallback = (key) => {
   if (key === 'accent') {
@@ -118,8 +141,33 @@ const updatePalette = (paletteKey, value) => {
     grid-column: 3 / span 2;
   }
 
+  .palette-apply-button {
+    grid-column: 1 / span 2;
+  }
+
   .color-input.style-control {
     margin: 0;
   }
+
+  &.-compact {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(5, 1fr) auto;
+
+    .palette-import-button {
+      grid-column: 1;
+    }
+
+    .palette-export-button {
+      grid-column: 2;
+    }
+
+    &.-apply {
+      grid-template-rows: repeat(5, 1fr) auto auto;
+
+      .palette-apply-button {
+        grid-column: 1 / span 2;
+      }
+    }
+  }
 }
 </style>

src/components/settings_modal/tabs/appearance_tab.js

@@ -3,6 +3,7 @@ import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
 import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
+import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
 
 import FontControl from 'src/components/font_control/font_control.vue'
 
@@ -50,6 +51,7 @@ const AppearanceTab = {
         'cBlue',
         'cOrange'
       ],
+      userPalette: {},
       intersectionObserver: null,
       thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
         key: mode,
@@ -76,7 +78,8 @@ const AppearanceTab = {
     UnitSetting,
     ProfileSettingIndicator,
     FontControl,
-    Preview
+    Preview,
+    PaletteEditor
   },
   mounted () {
     const updateIndex = (resource) => {
@@ -105,6 +108,7 @@ const AppearanceTab = {
 
     updateIndex('palette').then(bundledPalettes => {
       bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
+        let palette
         if (Array.isArray(v)) {
           const [
             name,
@@ -117,9 +121,15 @@ const AppearanceTab = {
             cBlue = '#0000FF',
             cOrange = '#E3FF00'
           ] = v
-          this.bundledPalettes.push({ key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange })
+          palette = { key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
+          this.bundledPalettes.push()
         } else {
-          this.bundledPalettes.push({ key, ...v })
+          palette = { key, ...v }
+        }
+        this.bundledPalettes.push(palette)
+
+        if (this.isPaletteActive(key)) {
+          this.userPalette = palette
         }
       }))
     })
@@ -292,15 +302,18 @@ const AppearanceTab = {
       this.$store.dispatch('setTheme', name)
       this.$store.dispatch('applyTheme')
     },
-    setPalette (name) {
+    setPalette (name, data) {
       this.$store.dispatch('resetThemeV2')
       this.$store.dispatch('setPalette', name)
       this.$store.dispatch('applyTheme')
+      this.userPalette = data
     },
-    setPaletteCustom (p) {
+    setPaletteCustom (data) {
+      console.log('APPLY CUSTOM', data)
       this.$store.dispatch('resetThemeV2')
-      this.$store.dispatch('setPaletteCustom', p)
+      this.$store.dispatch('setPaletteCustom', data)
       this.$store.dispatch('applyTheme')
+      this.userPalette = data
     },
     resetTheming (name) {
       this.$store.dispatch('resetThemeV2')

src/components/settings_modal/tabs/appearance_tab.scss

@@ -26,7 +26,8 @@
     grid-gap: 0.5em;
 
     h4,
-    .unsupported-theme-v2 {
+    .unsupported-theme-v2,
+    .userPalette {
       grid-column: 1 / span 2;
     }
   }
@@ -71,6 +72,7 @@
     border-radius: var(--roundness);
     border: 1px solid var(--border);
     padding: 0;
+    margin-bottom: 1em;
 
     .theme-preview {
       font-size: 1rem; // fix for firefox

src/components/settings_modal/tabs/appearance_tab.vue

@@ -5,15 +5,6 @@
   >
     <div class="setting-item">
       <h2>{{ $t('settings.theme') }}</h2>
-      <button
-        class="btn button-default"
-        @click="importFile"
-      >
-        <FAIcon icon="folder-open" />
-        {{ $t('settings.style.themes3.editor.load_style') }}
-      </button>
-    </div>
-    <div class="setting-item">
       <ul
         ref="themeList"
         class="theme-list"
@@ -88,7 +79,7 @@
               :key="p.name"
               class="btn button-default palette-entry"
               :class="{ toggled: isPaletteActive(p.key) }"
-              @click="() => setPalette(p.key)"
+              @click="() => setPalette(p.key, p)"
             >
               <label>
                 {{ p.name }}
@@ -120,6 +111,16 @@
                 :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
               />
             </button>
+            <h4>
+              {{ $t('settings.style.themes3.palette.user') }}
+            </h4>
+            <PaletteEditor
+              class="userPalette"
+              v-model="userPalette"
+              :compact="true"
+              :apply="true"
+              @applyPalette="data => setPaletteCustom(data)"
+            />
           </template>
           <template v-else-if="customThemeVersion === 'v2'">
             <div class="alert neutral theme-notice unsupported-theme-v2">

src/i18n/en.json

@@ -759,8 +759,9 @@
         "palette": {
           "label": "Color schemes",
           "name_label": "Color scheme name",
-          "import": "Import",
-          "export": "Export",
+          "import": "Import palette",
+          "export": "Export palette",
+          "apply": "Apply palette",
           "bg": "Panel background",
           "fg": "Buttons etc.",
           "text": "Text",
@@ -773,7 +774,8 @@
           "wallpaper": "Wallpaper",
           "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes",
           "bundled": "Bundled palettes",
-          "style": "Palettes provided by selected style"
+          "style": "Palettes provided by selected style",
+          "user": "Custom palette"
         },
         "editor": {
           "title": "Style",