Merge branch 'feature/theming2' into shigusegubu

* feature/theming2:
  fixed keep checkboxes working when exporting
  unbreak user profiles
  fix preview input text using wrong string
  fix panel link color, fix broken user profiles

src/components/style_switcher/style_switcher.js

@@ -62,6 +62,7 @@ export default {
 
       panelColorLocal: undefined,
       panelTextColorLocal: undefined,
+      panelLinkColorLocal: undefined,
       panelFaintColorLocal: undefined,
       panelOpacityLocal: undefined,
 
@@ -155,6 +156,7 @@ export default {
 
         panel: this.panelColorLocal,
         panelText: this.panelTextColorLocal,
+        panelLink: this.panelLinkColorLocal,
         panelFaint: this.panelFaintColorLocal,
 
         input: this.inputColorLocal,
@@ -230,6 +232,7 @@ export default {
       const fgs = {
         text: hex2rgb(colors.text),
         panelText: hex2rgb(colors.panelText),
+        panelLink: hex2rgb(colors.panelLink),
         btnText: hex2rgb(colors.btnText),
         topBarText: hex2rgb(colors.topBarText),
         inputText: hex2rgb(colors.inputText),
@@ -268,6 +271,7 @@ export default {
         tintText: getContrastRatio(alphaBlend(bgs.bg, 0.5, fgs.panelText), fgs.text),
 
         panelText: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelText), fgs.panelText),
+        panelLink: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelLink), fgs.panelLink),
 
         btnText: getContrastRatio(alphaBlend(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText),
 
@@ -328,16 +332,34 @@ export default {
   },
   methods: {
     exportCurrentTheme () {
+      const saveEverything = !this.keepFonts && !this.keepShadows && !this.keepColors && !this.keepOpacity && !this.keepRoundness
+      const theme = {
+        shadows: this.shadowsLocal,
+        fonts: this.fontsLocal,
+        opacity: this.currentOpacity,
+        colors: this.currentColors,
+        radii: this.currentRadii
+      }
+
+      if (!this.keepFonts && !saveEverything) {
+        delete theme.fonts
+      }
+      if (!this.keepShadows && !saveEverything) {
+        delete theme.shadows
+      }
+      if (!this.keepOpacity && !saveEverything) {
+        delete theme.opacity
+      }
+      if (!this.keepColors && !saveEverything) {
+        delete theme.colors
+      }
+      if (!this.keepRoundness && !saveEverything) {
+        delete theme.radii
+      }
+
       const stringified = JSON.stringify({
         // To separate from other random JSON files and possible future theme formats
-        _pleroma_theme_version: 2,
-        theme: {
-          shadows: this.shadowsLocal,
-          fonts: this.fontsLocal,
-          opacity: this.currentOpacity,
-          colors: this.currentColors,
-          radii: this.currentRadii
-        }
+        _pleroma_theme_version: 2, theme
       }, null, 2) // Pretty-print and indent with 2 spaces
 
       // Create an invisible link with a data url and simulate a click
@@ -400,7 +422,9 @@ export default {
     },
 
     clearAll () {
-      this.normalizeLocalState(this.$store.state.config.customTheme)
+      const state = this.$store.state.config.customTheme
+      const version = state.colors ? 2 : 'l1'
+      this.normalizeLocalState(this.$store.state.config.customTheme, version)
     },
 
     // Clears all the extra stuff when loading V1 theme
@@ -438,9 +462,13 @@ export default {
     },
 
     /**
-     * This applies stored theme data onto form.
+     * This applies stored theme data onto form. Supports three versions of data:
+     * v2 (version = 2) - newer version of themes.
+     * v1 (version = 1) - older version of themes (import from file)
+     * v1l (version = l1) - older version of theme (load from local storage)
+     * v1 and v1l differ because of way themes were stored/exported.
      * @param {Object} input - input data
-     * @param {Number} version - version of data. 0 means try to guess based on data.
+     * @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
      */
     normalizeLocalState (input, version = 0) {
       const colors = input.colors || input
@@ -461,6 +489,8 @@ export default {
         }
       }
 
+      console.log(version)
+
       // Stuff that differs between V1 and V2
       if (version === 1) {
         this.fgColorLocal = rgb2hex(colors.btn)
@@ -468,7 +498,7 @@ export default {
       }
 
       const keys = new Set(version !== 1 ? Object.keys(colors) : [])
-      if (version === 1) {
+      if (version === 1 || version === 'l1') {
         // V1 ignores the rest
         this.clearV1()
         keys
@@ -479,6 +509,7 @@ export default {
           .add('cGreen')
           .add('cOrange')
       }
+
       keys.forEach(key => {
         this[key + 'ColorLocal'] = rgb2hex(colors[key])
       })

src/components/style_switcher/style_switcher.vue

@@ -97,7 +97,7 @@
         <br>
         <br>
 
-        <input :value="$t('settings.style.preview.error')" type="text">
+        <input :value="$t('settings.style.preview.input')" type="text">
         <span class="alert error">
           {{$t('settings.style.preview.error')}}
         </span>
@@ -183,8 +183,10 @@
           <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
           <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
           <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
-          <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
+          <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.text')"/>
           <ContrastRatio :contrast="previewContrast.panelText" large="1"/>
+          <ColorInput name="panelLinkColor" v-model="panelLinkColorLocal" :fallback="previewTheme.colors.panelLink" :label="$t('settings.links')"/>
+          <ContrastRatio :contrast="previewContrast.panelLink" large="1"/>
         </div>
         <div class="color-item">
           <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>

src/components/user_card_content/user_card_content.js

@@ -12,7 +12,10 @@ export default {
   },
   computed: {
     headingStyle () {
-      const color = this.$store.state.config.customTheme.colors.bg
+      const color = this.$store.state.config.customTheme.colors ?
+            this.$store.state.config.customTheme.colors.bg : // v2
+            this.$store.state.config.colors.bg // v1
+
       if (color) {
         const rgb = (typeof color === 'string') ? hex2rgb(color) : color
         const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`

src/components/user_card_content/user_card_content.vue

@@ -105,10 +105,9 @@
         <span v-if="!hideUserStatsLocal">{{user.followers_count}}</span>
       </div>
     </div>
+    <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
+    <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
   </div>
-  <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
-  <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
-</div>
 </div>
 </template>