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

* upstream/develop: (23 commits)
  Rename expandCW to collapseMessageWithSubject.
  fix indent
  Add support for configurable CW clickthrough.
  Merge upstream
  fix lint issues
  allow default visibility scope to be configured
  Revert "storing entire config instead of each separate thing of it, so that future"
  fixes hella ton of annoyances with file upload display
  using custom ascend value as suggested here: https://github.com/fontello/fontello/issues/513#issuecomment-237551101 helped.
  disable hinting because it breaks alignment on some icons (namely - locks)
  fix for timeago being ass when post has replies. added hover colors for clickable icons on the right side. Reverted line-height to its original value
  Configurable video looping, option to not to loop silent videos. Updated localization strings.
  added pointer cursor for nsfw placeholder. fixed nsfw videos requiring double-click
  Made pausing TL updating configurable. Added styles for disabled checkboxes. Shuffled settings a bit b/c all the settings are in "Attachments" section depsite the fact not all of them are attachments-related.
  storing entire config instead of each separate thing of it, so that future options won't be lost during reloads because developer forgot to update that list of settings to be persisted
  fix potential stretched spurdo
  fixed custom emoji in nickname. changed icons on right side to be more streamlined. adjusted CSS so that all text in header of post is on same baseline and all icons/images are middle-aligned.
  Add validation of the imported theme and the corresponding warning message
  Unify button styles and use min-width
  Add German localization for theme import/export
  ...

1 files changed, 74 insertions, 17 deletions

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 6f4845c4..95c15b49 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -5,6 +5,7 @@ export default {
     return {
       availableStyles: [],
       selected: this.$store.state.config.theme,
+      invalidThemeImported: false,
       bgColorLocal: '',
       btnColorLocal: '',
       textColorLocal: '',
@@ -32,25 +33,61 @@ export default {
       })
   },
   mounted () {
-    this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors.bg)
-    this.btnColorLocal = rgbstr2hex(this.$store.state.config.colors.btn)
-    this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg)
-    this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors.link)
-
-    this.redColorLocal = rgbstr2hex(this.$store.state.config.colors.cRed)
-    this.blueColorLocal = rgbstr2hex(this.$store.state.config.colors.cBlue)
-    this.greenColorLocal = rgbstr2hex(this.$store.state.config.colors.cGreen)
-    this.orangeColorLocal = rgbstr2hex(this.$store.state.config.colors.cOrange)
-
-    this.btnRadiusLocal = this.$store.state.config.radii.btnRadius || 4
-    this.inputRadiusLocal = this.$store.state.config.radii.inputRadius || 4
-    this.panelRadiusLocal = this.$store.state.config.radii.panelRadius || 10
-    this.avatarRadiusLocal = this.$store.state.config.radii.avatarRadius || 5
-    this.avatarAltRadiusLocal = this.$store.state.config.radii.avatarAltRadius || 50
-    this.tooltipRadiusLocal = this.$store.state.config.radii.tooltipRadius || 2
-    this.attachmentRadiusLocal = this.$store.state.config.radii.attachmentRadius || 5
+    this.normalizeLocalState(this.$store.state.config.colors, this.$store.state.config.radii)
   },
   methods: {
+    exportCurrentTheme () {
+      const stringified = JSON.stringify({
+        // To separate from other random JSON files and possible future theme formats
+        _pleroma_theme_version: 1,
+        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)
+    },
+
+    importTheme () {
+      this.invalidThemeImported = 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)
+              if (parsed._pleroma_theme_version === 1) {
+                this.normalizeLocalState(parsed.colors, parsed.radii)
+              } else {
+                // A theme from the future, spooky
+                this.invalidThemeImported = true
+              }
+            } catch (e) {
+              // This will happen both if there is a JSON syntax error or the theme is missing components
+              this.invalidThemeImported = true
+            }
+          }
+          reader.readAsText(event.target.files[0])
+        }
+      })
+
+      document.body.appendChild(filePicker)
+      filePicker.click()
+      document.body.removeChild(filePicker)
+    },
+
     setCustomTheme () {
       if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) {
         // reset to picked themes
@@ -95,6 +132,26 @@ export default {
             attachmentRadius: this.attachmentRadiusLocal
           }})
       }
+    },
+
+    normalizeLocalState (colors, radii) {
+      this.bgColorLocal = rgbstr2hex(colors.bg)
+      this.btnColorLocal = rgbstr2hex(colors.btn)
+      this.textColorLocal = rgbstr2hex(colors.fg)
+      this.linkColorLocal = rgbstr2hex(colors.link)
+
+      this.redColorLocal = rgbstr2hex(colors.cRed)
+      this.blueColorLocal = rgbstr2hex(colors.cBlue)
+      this.greenColorLocal = rgbstr2hex(colors.cGreen)
+      this.orangeColorLocal = rgbstr2hex(colors.cOrange)
+
+      this.btnRadiusLocal = radii.btnRadius || 4
+      this.inputRadiusLocal = radii.inputRadius || 4
+      this.panelRadiusLocal = radii.panelRadius || 10
+      this.avatarRadiusLocal = radii.avatarRadius || 5
+      this.avatarAltRadiusLocal = radii.avatarAltRadius || 50
+      this.tooltipRadiusLocal = radii.tooltipRadius || 2
+      this.attachmentRadiusLocal = radii.attachmentRadius || 5
     }
   },
   watch: {