Merge remote-tracking branch 'upstream/develop' into async_follow

* upstream/develop: (131 commits)
  Fix typo that prevented scope copy from working.
  added check for activatePanel is function or not
  addressed PR comments
  activate panel on user screen click
  added not preload check so hidden toggles asap
  removed counters from left panel
  added router-links to all relavent links
  added activatePanel onclick for timeago button
  added PR comments
  removed brackets from condition
  resolved lint issue
  renamed config to preload images and add ident to config
  added config for preload and made attachment responsive to it
  preload nsfw image
  fix
  fixed wrong height for selects
  better layouting for import-export, error display fixes
  added keep-colors option
  separated preview and exported from style_switcher
  revert that, it's actually used, i'm an idiot
  ...

1 files changed, 87 insertions, 0 deletions

diff --git a/src/components/export_import/export_import.vue b/src/components/export_import/export_import.vue
new file mode 100644
index 00000000..451a2668
--- /dev/null
+++ b/src/components/export_import/export_import.vue
@@ -0,0 +1,87 @@
+<template>
+<div class="import-export-container">
+  <slot name="before"/>
+  <button class="btn" @click="exportData">{{ exportLabel }}</button>
+  <button class="btn" @click="importData">{{ importLabel }}</button>
+  <slot name="afterButtons"/>
+  <p v-if="importFailed" class="alert error">{{ importFailedText }}</p>
+  <slot name="afterError"/>
+</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>
+
+<style lang="scss">
+.import-export-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: center;
+}
+</style>