diff --git a/src/App.scss b/src/App.scss index 8c9df0ba4..15dec7ecf 100644 --- a/src/App.scss +++ b/src/App.scss @@ -407,6 +407,11 @@ main-router { min-width: 1px; align-self: stretch; } + + a { + color: $fallback--link; + color: var(--panelLink, $fallback--link) + } } .panel-heading.stub { @@ -417,6 +422,11 @@ main-router { .panel-footer { border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); + + a { + color: $fallback--link; + color: var(--panelLink, $fallback--link) + } } .panel-body > p { diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index d833341f4..ccdb4c4f8 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/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]) }) diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 2a7756ed3..655e0589c 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -97,7 +97,7 @@

- + {{$t('settings.style.preview.error')}} @@ -183,8 +183,10 @@

{{ $t('settings.style.advanced_colors.panel_header') }}

- + + +

{{ $t('settings.style.advanced_colors.top_bar') }}

diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 064c984dc..e7ca21c73 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/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)` diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index bb1e314f0..5529948e7 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -105,10 +105,9 @@ {{user.followers_count}}
+

+

{{ user.description }}

-

-

{{ user.description }}

- diff --git a/src/i18n/en.json b/src/i18n/en.json index ab7b954ad..74e7a5563 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -183,7 +183,7 @@ "keep_opacity": "Keep opacity", "keep_roundness": "Keep roundness", "keep_fonts": "Keep fonts", - "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme.", + "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.", "reset": "Reset", "clear_all": "Clear all", "clear_opacity": "Clear opacity" diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index f2c9c13e7..7c375206e 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -172,6 +172,7 @@ const generateColors = (input) => { colors.panel = col.panel || Object.assign({}, col.fg) colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText) + colors.panelLink = col.panelLink || getTextColor(colors.panel, colors.fgLink) colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint) colors.topBar = col.topBar || Object.assign({}, col.fg)