Merge remote-tracking branch 'origin/develop' into better-selects

* origin/develop: (76 commits)
  Translated using Weblate (Italian)
  Translated using Weblate (Basque)
  Translated using Weblate (Spanish)
  Translated using Weblate (Chinese (Simplified))
  Translated using Weblate (Italian)
  Translated using Weblate (Chinese (Traditional))
  Translated using Weblate (Russian)
  Translated using Weblate (Italian)
  Translated using Weblate (French)
  Translated using Weblate (Russian)
  Translated using Weblate (Italian)
  Translated using Weblate (French)
  Translated using Weblate (Basque)
  Translated using Weblate (Spanish)
  Translated using Weblate (Chinese (Simplified))
  Translated using Weblate (Japanese)
  Translated using Weblate (Italian)
  Translated using Weblate (Esperanto)
  Translated using Weblate (Chinese (Traditional))
  Translated using Weblate (Norwegian Bokmål)
  ...

2 files changed, 46 insertions, 16 deletions

diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 73068e19..1388f74b 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -16,6 +16,10 @@ import {
   colors2to3
 } from 'src/services/style_setter/style_setter.js'
 import {
+  newImporter,
+  newExporter
+} from 'src/services/export_import/export_import.js'
+import {
   SLOT_INHERITANCE
 } from 'src/services/theme_data/pleromafe.js'
 import {
@@ -31,7 +35,6 @@ import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
 import FontControl from 'src/components/font_control/font_control.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
-import ExportImport from 'src/components/export_import/export_import.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
 
@@ -60,6 +63,15 @@ const colorConvert = (color) => {
 export default {
   data () {
     return {
+      themeImporter: newImporter({
+        validator: this.importValidator,
+        onImport: this.onImport,
+        onImportFailure: this.onImportFailure
+      }),
+      themeExporter: newExporter({
+        filename: 'pleroma_theme',
+        getExportedObject: () => this.exportedTheme
+      }),
       availableStyles: [],
       selected: this.$store.getters.mergedConfig.theme,
       themeWarning: undefined,
@@ -376,7 +388,6 @@ export default {
     FontControl,
     TabSwitcher,
     Preview,
-    ExportImport,
     Checkbox,
     Select
   },
@@ -522,10 +533,15 @@ export default {
         this.previewColors.mod
       )
     },
+    importTheme () { this.themeImporter.importData() },
+    exportTheme () { this.themeExporter.exportData() },
     onImport (parsed, forceSource = false) {
       this.tempImportFile = parsed
       this.loadTheme(parsed, 'file', forceSource)
     },
+    onImportFailure (result) {
+      this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
+    },
     importValidator (parsed) {
       const version = parsed._pleroma_theme_version
       return version >= 1 || version <= 2
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 2b4b8ba0..570cd11b 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -48,17 +48,13 @@
             </template>
           </div>
         </div>
-        <ExportImport
-          :export-object="exportedTheme"
-          :export-label="$t(&quot;settings.export_theme&quot;)"
-          :import-label="$t(&quot;settings.import_theme&quot;)"
-          :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
-          :on-import="onImport"
-          :validator="importValidator"
-        >
-          <template slot="before">
-            <div class="presets">
-              {{ $t('settings.presets') }}
+        <div class="top">
+          <div class="presets">
+            {{ $t('settings.presets') }}
+            <label
+              for="preset-switcher"
+              class="select"
+            >
               <Select
                 id="preset-switcher"
                 v-model="selected"
@@ -76,9 +72,27 @@
                   {{ style[0] || style.name }}
                 </option>
               </Select>
-            </div>
-          </template>
-        </ExportImport>
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
+            </label>
+          </div>
+          <div class="export-import">
+            <button
+              class="btn button-default"
+              @click="importTheme"
+            >
+              {{ $t(&quot;settings.import_theme&quot;) }}
+            </button>
+            <button
+              class="btn button-default"
+              @click="exportTheme"
+            >
+              {{ $t(&quot;settings.export_theme&quot;) }}
+            </button>
+          </div>
+        </div>
       </div>
       <div class="save-load-options">
         <span class="keep-option">