From 51dccb788798364bbb662d378f2aa2647f1845cf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 11 Dec 2018 02:46:17 +0300
Subject: separated preview and exported from style_switcher

---
 src/components/export_import/export_import.vue | 75 ++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/components/export_import/export_import.vue

(limited to 'src/components/export_import')

diff --git a/src/components/export_import/export_import.vue b/src/components/export_import/export_import.vue
new file mode 100644
index 00000000..9914d54a
--- /dev/null
+++ b/src/components/export_import/export_import.vue
@@ -0,0 +1,75 @@
+<template>
+<div class="import-export">
+  <button class="btn" @click="exportData">{{ exportLabel }}</button>
+  <button class="btn" @click="importData">{{ importLabel }}</button>
+  <p v-if="importFailed" class="import-warning">{{ importFailedText }}</p>
+</div>
+</template>
+
+<script>
+export default {
+  props: [
+    'exportObject',
+    'importLabel',
+    'exportLabel',
+    'importFailedText',
+    'validator',
+    'onImport',
+    'onImportFailure'
+  ],
+  data () {
+    return {
+      importFailed: false
+    }
+  },
+  methods: {
+    exportData () {
+      const stringified = JSON.stringify(this.exportObject) // Pretty-print and indent with 2 spaces
+
+      // Create an invisible link with a data url and simulate a click
+      const e = document.createElement('a')
+      e.setAttribute('download', 'pleroma_theme.json')
+      e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
+      e.style.display = 'none'
+
+      document.body.appendChild(e)
+      e.click()
+      document.body.removeChild(e)
+    },
+    importData () {
+      this.importFailed = false
+      const filePicker = document.createElement('input')
+      filePicker.setAttribute('type', 'file')
+      filePicker.setAttribute('accept', '.json')
+
+      filePicker.addEventListener('change', event => {
+        if (event.target.files[0]) {
+          // eslint-disable-next-line no-undef
+          const reader = new FileReader()
+          reader.onload = ({target}) => {
+            try {
+              const parsed = JSON.parse(target.result)
+              const valid = this.validator(parsed)
+              if (valid) {
+                this.onImport(parsed)
+              } else {
+                this.importFailed = true
+                // this.onImportFailure(valid)
+              }
+            } catch (e) {
+              // This will happen both if there is a JSON syntax error or the theme is missing components
+              this.importFailed = true
+              // this.onImportFailure(e)
+            }
+          }
+          reader.readAsText(event.target.files[0])
+        }
+      })
+
+      document.body.appendChild(filePicker)
+      filePicker.click()
+      document.body.removeChild(filePicker)
+    }
+  }
+}
+</script>
-- 
cgit v1.2.3-70-g09d2


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: better layouting for import-export, error display fixes

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

(limited to 'src/components/export_import')

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">
-- 
cgit v1.2.3-70-g09d2