fixed import-export

This commit is contained in:
Henry Jameson 2019-12-28 17:02:34 +02:00
parent e5a34870f0
commit 1a78461443
4 changed files with 56 additions and 11 deletions

View file

@ -42,7 +42,7 @@ export default {
}, },
methods: { methods: {
exportData () { exportData () {
const stringified = JSON.stringify(this.exportObject) // Pretty-print and indent with 2 spaces const stringified = JSON.stringify(this.exportObject, null, 2) // Pretty-print and indent with 2 spaces
// Create an invisible link with a data url and simulate a click // Create an invisible link with a data url and simulate a click
const e = document.createElement('a') const e = document.createElement('a')

View file

@ -1,6 +1,7 @@
import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js' import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'
import { set, delete as del } from 'vue' import { set, delete as del } from 'vue'
import { generateColors, generateShadows, generateRadii, generateFonts, composePreset, getThemes } from '../../services/style_setter/style_setter.js' import { merge } from 'lodash'
import { generateCompat, generateColors, generateShadows, generateRadii, generateFonts, composePreset, getThemes } from '../../services/style_setter/style_setter.js'
import ColorInput from '../color_input/color_input.vue' import ColorInput from '../color_input/color_input.vue'
import RangeInput from '../range_input/range_input.vue' import RangeInput from '../range_input/range_input.vue'
import OpacityInput from '../opacity_input/opacity_input.vue' import OpacityInput from '../opacity_input/opacity_input.vue'
@ -123,6 +124,15 @@ export default {
selectedVersion () { selectedVersion () {
return Array.isArray(this.selected) ? 1 : 2 return Array.isArray(this.selected) ? 1 : 2
}, },
currentCompat () {
return generateCompat({
shadows: this.shadowsLocal,
fonts: this.fontsLocal,
opacity: this.currentOpacity,
colors: this.currentColors,
radii: this.currentRadii
})
},
currentColors () { currentColors () {
return { return {
bg: this.bgColorLocal, bg: this.bgColorLocal,
@ -332,7 +342,7 @@ export default {
return { return {
// To separate from other random JSON files and possible future theme formats // To separate from other random JSON files and possible future theme formats
_pleroma_theme_version: 2, theme _pleroma_theme_version: 2, theme: merge(theme, this.currentCompat)
} }
} }
}, },
@ -364,7 +374,7 @@ export default {
onImport (parsed) { onImport (parsed) {
if (parsed._pleroma_theme_version === 1) { if (parsed._pleroma_theme_version === 1) {
this.normalizeLocalState(parsed, 1) this.normalizeLocalState(parsed, 1)
} else if (parsed._pleroma_theme_version === 2) { } else if (parsed._pleroma_theme_version >= 2) {
this.normalizeLocalState(parsed.theme, 2) this.normalizeLocalState(parsed.theme, 2)
} }
}, },
@ -414,6 +424,7 @@ export default {
/** /**
* This applies stored theme data onto form. Supports three versions of data: * This applies stored theme data onto form. Supports three versions of data:
* v3 (version = 3) - same as 2 but with some incompatible changes
* v2 (version = 2) - newer version of themes. * v2 (version = 2) - newer version of themes.
* v1 (version = 1) - older version of themes (import from file) * v1 (version = 1) - older version of themes (import from file)
* v1l (version = l1) - older version of theme (load from local storage) * v1l (version = l1) - older version of theme (load from local storage)
@ -421,12 +432,21 @@ export default {
* @param {Object} input - input data * @param {Object} input - input data
* @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type * @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
*/ */
normalizeLocalState (input, version = 0) { normalizeLocalState (originalInput, version = 0) {
const colors = input.colors || input let input
if (typeof originalInput.v3compat !== undefined) {
version = 3
input = merge(originalInput, originalInput.v3compat)
} else {
input = originalInput
}
const compat = input.v3compat
const radii = input.radii || input const radii = input.radii || input
const opacity = input.opacity const opacity = input.opacity
const shadows = input.shadows || {} const shadows = input.shadows || {}
const fonts = input.fonts || {} const fonts = input.fonts || {}
const colors = input.colors || input
if (version === 0) { if (version === 0) {
if (input.version) version = input.version if (input.version) version = input.version
@ -530,6 +550,7 @@ export default {
currentColors () { currentColors () {
try { try {
this.previewColors = generateColors({ this.previewColors = generateColors({
v3compat: this.currentCompat,
opacity: this.currentOpacity, opacity: this.currentOpacity,
colors: this.currentColors colors: this.currentColors
}) })
@ -542,8 +563,9 @@ export default {
currentOpacity () { currentOpacity () {
try { try {
this.previewColors = generateColors({ this.previewColors = generateColors({
v3compat: this.currentCompat,
opacity: this.currentOpacity, opacity: this.currentOpacity,
colors: this.currentColors colors: this.currentColors,
}) })
} catch (e) { } catch (e) {
console.warn(e) console.warn(e)

View file

@ -2,7 +2,7 @@
<div class="style-switcher"> <div class="style-switcher">
<div class="presets-container"> <div class="presets-container">
<div class="save-load"> <div class="save-load">
<export-import <ExportImport
:export-object="exportedTheme" :export-object="exportedTheme"
:export-label="$t(&quot;settings.export_theme&quot;)" :export-label="$t(&quot;settings.export_theme&quot;)"
:import-label="$t(&quot;settings.import_theme&quot;)" :import-label="$t(&quot;settings.import_theme&quot;)"
@ -38,7 +38,7 @@
</label> </label>
</div> </div>
</template> </template>
</export-import> </ExportImport>
</div> </div>
<div class="save-load-options"> <div class="save-load-options">
<span class="keep-option"> <span class="keep-option">

View file

@ -148,6 +148,26 @@ const getCssColor = (input, a) => {
return rgb2rgba({ ...rgb, a }) return rgb2rgba({ ...rgb, a })
} }
// Generates a "patch" for theme to make it compatible with v2
export const generateCompat = (input) => {
const { colors } = input
const v3compat = {
colors: {}
}
const v2colorsPatch = {}
// # Link became optional in v3
if (typeof colors.link === 'undefined') {
v2colorsPatch.link = colors.accent
v3compat.colors.link = null
}
return {
v3compat,
colors: v2colorsPatch
}
}
const generateColors = (input) => { const generateColors = (input) => {
const colors = {} const colors = {}
const opacity = Object.assign({ const opacity = Object.assign({
@ -164,7 +184,10 @@ const generateColors = (input) => {
const inputColors = input.colors || input const inputColors = input.colors || input
const compat = input.v3compat || {} const compat = input.v3compat || {}
const compatColors = compat.colors || {} const compatColors = Object.entries(compat.colors || {}).reduce((acc, [key, value]) => {
const newVal = value === null ? undefined : value
return { ...acc, [key]: newVal }
}, {})
const col = Object.entries({ ...inputColors, ...compatColors }).reduce((acc, [k, v]) => { const col = Object.entries({ ...inputColors, ...compatColors }).reduce((acc, [k, v]) => {
if (typeof v === 'object') { if (typeof v === 'object') {
@ -210,7 +233,7 @@ const generateColors = (input) => {
colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText) colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText)
colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink) colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink)
colors.faintLink = col.faintLink || Object.assign({}, col.link) colors.faintLink = col.faintLink || Object.assign({}, col.link || col.accent)
colors.linkBg = alphaBlend(colors.link, 0.4, colors.bg) colors.linkBg = alphaBlend(colors.link, 0.4, colors.bg)
colors.icon = mixrgb(colors.bg, colors.text) colors.icon = mixrgb(colors.bg, colors.text)