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>