From 83b85cd412245b8bfb65ff650b5543da4974ae46 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 11 Dec 2018 16:36:27 +0300
Subject: [PATCH] better layouting for import-export, error display fixes

---
 .../export_import/export_import.vue           | 16 +++++++-
 .../style_switcher/style_switcher.vue         | 38 ++++++++++---------
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/export_import/export_import.vue b/src/components/export_import/export_import.vue
index 9914d54a..451a2668 100644
--- a/src/components/export_import/export_import.vue
+++ b/src/components/export_import/export_import.vue
@@ -1,8 +1,11 @@
 <template>
-<div class="import-export">
+<div class="import-export-container">
+  <slot name="before"/>
   <button class="btn" @click="exportData">{{ exportLabel }}</button>
   <button class="btn" @click="importData">{{ importLabel }}</button>
-  <p v-if="importFailed" class="import-warning">{{ importFailedText }}</p>
+  <slot name="afterButtons"/>
+  <p v-if="importFailed" class="alert error">{{ importFailedText }}</p>
+  <slot name="afterError"/>
 </div>
 </template>
 
@@ -73,3 +76,12 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.import-export-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: center;
+}
+</style>
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 6acb7755..84963c81 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -2,30 +2,32 @@
 <div class="style-switcher">
   <div class="presets-container">
     <div class="save-load">
-      <div class="presets">
-        {{$t('settings.presets')}}
-        <label for="preset-switcher" class='select'>
-          <select id="preset-switcher" v-model="selected" class="preset-switcher">
-            <option v-for="style in availableStyles"
-                    :value="style"
-                    :style="{
-                            backgroundColor: style[1] || style.theme.colors.bg,
-                            color: style[3] || style.theme.colors.text
-                            }">
-              {{style[0] || style.name}}
-            </option>
-          </select>
-          <i class="icon-down-open"/>
-        </label>
-      </div>
       <export-import
         :exportObject='exportedTheme'
         :exportLabel='$t("settings.export_theme")'
         :importLabel='$t("settings.import_theme")'
         :importFailedText='$t("settings.invalid_theme_imported")'
         :onImport='onImport'
-        :validator='importValidator'
-        />
+        :validator='importValidator'>
+        <template slot="before">
+          <div class="presets">
+            {{$t('settings.presets')}}
+            <label for="preset-switcher" class='select'>
+              <select id="preset-switcher" v-model="selected" class="preset-switcher">
+                <option v-for="style in availableStyles"
+                        :value="style"
+                        :style="{
+                                backgroundColor: style[1] || style.theme.colors.bg,
+                                color: style[3] || style.theme.colors.text
+                                }">
+                  {{style[0] || style.name}}
+                </option>
+              </select>
+              <i class="icon-down-open"/>
+            </label>
+          </div>
+        </template>
+      </export-import>
     </div>
     <div class="save-load-options">
       <span class="keep-option">