From 29f69de240530048a31319f8a78274ca7d607853 Mon Sep 17 00:00:00 2001
From: Ole Bertram <git@bertr.am>
Date: Thu, 28 Jun 2018 01:08:06 +0200
Subject: [PATCH] Add theme export feature

---
 src/components/style_switcher/style_switcher.js | 17 +++++++++++++++++
 .../style_switcher/style_switcher.vue           |  3 +++
 src/i18n/messages.js                            |  1 +
 3 files changed, 21 insertions(+)

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 6f4845c4..041d4b17 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -51,6 +51,23 @@ export default {
     this.attachmentRadiusLocal = this.$store.state.config.radii.attachmentRadius || 5
   },
   methods: {
+    exportCurrentTheme () {
+      const stringified = JSON.stringify({
+        colors: this.$store.state.config.colors,
+        radii: this.$store.state.config.radii
+      }, null, 2) // 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)
+    },
+
     setCustomTheme () {
       if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) {
         // reset to picked themes
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 7acba1dc..c8d955e1 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -8,6 +8,9 @@
         <i class="icon-down-open"/>
       </label>
     </div>
+    <div>
+      <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
+    </div>
     <div class="color-container">
       <p>{{$t('settings.theme_help')}}</p>
       <div class="color-item">
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index e9d6e176..ee0fcd2a 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -288,6 +288,7 @@ const en = {
     settings: 'Settings',
     theme: 'Theme',
     presets: 'Presets',
+    export_theme: 'Export current theme',
     theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.',
     radii_help: 'Set up interface edge rounding (in pixels)',
     background: 'Background',