No OneTemporary
Actions

Authored By

Unknown

Size

60 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
	index 906a2f885d..e9474a986f 100644
	--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
	+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
	@@ -1,730 +1,748 @@
	import { ref, reactive, computed, watch, provide } from 'vue'
	+import { useStore } from 'vuex'
	import { get, set } from 'lodash'

	import Select from 'src/components/select/select.vue'
	import SelectMotion from 'src/components/select/select_motion.vue'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ComponentPreview from 'src/components/component_preview/component_preview.vue'
	import StringSetting from '../../helpers/string_setting.vue'
	import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
	import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	import Tooltip from 'src/components/tooltip/tooltip.vue'
	import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
	import Preview from '../theme_tab/theme_preview.vue'

	import VirtualDirectivesTab from './virtual_directives_tab.vue'

	import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js'
	import {
	getCssRules,
	getScopedVersion
	} from 'src/services/theme_data/css_utils.js'
	import { serialize } from 'src/services/theme_data/iss_serializer.js'
	import { deserializeShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
	import {
	rgb2hex,
	hex2rgb,
	getContrastRatio
	} from 'src/services/color_convert/color_convert.js'
	import {
	newImporter,
	newExporter
	} from 'src/services/export_import/export_import.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faFloppyDisk,
	faFolderOpen,
	faFile,
	faArrowsRotate,
	faCheck
	} from '@fortawesome/free-solid-svg-icons'

	// helper for debugging
	// eslint-disable-next-line no-unused-vars
	const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))

	// helper to make states comparable
	const normalizeStates = (states) => ['normal', ...(states?.filter(x => x !== 'normal') \|\| [])].join(':')

	library.add(
	faFile,
	faFloppyDisk,
	faFolderOpen,
	faArrowsRotate,
	faCheck
	)

	export default {
	components: {
	Select,
	SelectMotion,
	Checkbox,
	Tooltip,
	StringSetting,
	ComponentPreview,
	TabSwitcher,
	ShadowControl,
	ColorInput,
	PaletteEditor,
	OpacityInput,
	ContrastRatio,
	Preview,
	VirtualDirectivesTab
	},
	- setup () {
	+ setup (props, context) {
	const exports = {}
	+ const store = useStore()
	// All rules that are made by editor
	const allEditedRules = reactive({})

	// ## Meta stuff
	exports.name = ref('')
	exports.author = ref('')
	exports.license = ref('')
	exports.website = ref('')

	const metaOut = computed(() => {
	return [
	'@meta {',
	` name: ${exports.name.value};`,
	` author: ${exports.author.value};`,
	` license: ${exports.license.value};`,
	` website: ${exports.website.value};`,
	'}'
	].join('\n')
	})

	// ## Palette stuff
	const palettes = reactive([
	{
	name: 'dark',
	bg: '#121a24',
	fg: '#182230',
	text: '#b9b9ba',
	link: '#d8a070',
	accent: '#d8a070',
	cRed: '#FF0000',
	cBlue: '#0095ff',
	cGreen: '#0fa00f',
	cOrange: '#ffa500'
	},
	{
	name: 'light',
	bg: '#f2f6f9',
	fg: '#d6dfed',
	text: '#304055',
	underlay: '#5d6086',
	accent: '#f55b1b',
	cBlue: '#0095ff',
	cRed: '#d31014',
	cGreen: '#0fa00f',
	cOrange: '#ffa500',
	border: '#d8e6f9'
	}
	])
	exports.palettes = palettes

	// This is kinda dumb but you cannot "replace" reactive() object
	// and so v-model simply fails when you try to chage (increase only?)
	// length of the array. Since linter complains about mutating modelValue
	// inside SelectMotion, the next best thing is to just wipe existing array
	// and replace it with new one.

	const onPalettesUpdate = (e) => {
	palettes.splice(0, palettes.length)
	palettes.push(...e)
	}
	exports.onPalettesUpdate = onPalettesUpdate

	const selectedPaletteId = ref(0)
	const selectedPalette = computed({
	get () {
	return palettes[selectedPaletteId.value]
	},
	set (newPalette) {
	palettes[selectedPaletteId.value] = newPalette
	}
	})
	exports.selectedPaletteId = selectedPaletteId
	exports.selectedPalette = selectedPalette
	provide('selectedPalette', selectedPalette)

	exports.getNewPalette = () => ({
	name: 'new palette',
	bg: '#121a24',
	fg: '#182230',
	text: '#b9b9ba',
	link: '#d8a070',
	accent: '#d8a070',
	cRed: '#FF0000',
	cBlue: '#0095ff',
	cGreen: '#0fa00f',
	cOrange: '#ffa500'
	})

	const palettesOut = computed(() => {
	return palettes.map(({ name, ...palette }) => {
	const entries = Object
	.entries(palette)
	.map(([slot, data]) => ` ${slot}: ${data};`)
	.join('\n')

	return `@palette.${name} {\n${entries}\n}`
	}).join('\n\n')
	})

	// ## Components stuff
	// Getting existing components
	const componentsContext = require.context('src', true, /\.style.js(on)?$/)
	const componentKeysAll = componentsContext.keys()
	const componentsMap = new Map(
	componentKeysAll
	.map(
	key => [key, componentsContext(key).default]
	).filter(([key, component]) => !component.virtual && !component.notEditable)
	)
	exports.componentsMap = componentsMap
	const componentKeys = [...componentsMap.keys()]
	exports.componentKeys = componentKeys

	// selection basis
	const selectedComponentKey = ref(componentsMap.keys().next().value)
	exports.selectedComponentKey = selectedComponentKey
	const selectedComponent = computed(() => componentsMap.get(selectedComponentKey.value))
	const selectedComponentName = computed(() => selectedComponent.value.name)
	exports.selectedComponentVariants = computed(() => {
	return Object.keys({ normal: null, ...(selectedComponent.value.variants \|\| {}) })
	})
	const selectedComponentStatesAll = computed(() => {
	return Object.keys({ normal: null, ...(selectedComponent.value.states \|\| {}) })
	})
	exports.selectedComponentStates = computed(() => {
	return selectedComponentStatesAll.value.filter(x => x !== 'normal')
	})

	// selection
	const selectedVariant = ref('normal')
	exports.selectedVariant = selectedVariant
	const selectedState = reactive(new Set())
	exports.selectedState = selectedState
	exports.updateSelectedStates = (state, v) => {
	if (v) {
	selectedState.add(state)
	} else {
	selectedState.delete(state)
	}
	}

	// ### Rules stuff aka meat and potatoes
	// The native structure of separate rules and the child -> parent
	// relation isn't very convenient for editor, we replace the array
	// and child -> parent structure with map and parent -> child structure
	const rulesToEditorFriendly = (rules, root = {}) => rules.reduce((acc, rule) => {
	const { parent: rParent, component: rComponent } = rule
	const parent = rParent ?? rule
	const hasChildren = !!rParent
	const child = hasChildren ? rule : null

	const {
	component: pComponent,
	variant: pVariant = 'normal',
	state: pState = [] // no relation to Intel CPUs whatsoever
	} = parent

	const pPath = `${hasChildren ? pComponent : rComponent}.${pVariant}.${normalizeStates(pState)}`

	let output = get(acc, pPath)
	if (!output) {
	set(acc, pPath, {})
	output = get(acc, pPath)
	}

	if (hasChildren) {
	acc._children = acc._children ?? {}
	const {
	component: cComponent,
	variant: cVariant = 'normal',
	state: cState = [],
	directives
	} = child

	const cPath = `${cComponent}.${cVariant}.${normalizeStates(cState)}`
	set(output._children, cPath, directives)
	} else {
	output.directives = parent.directives
	}
	return acc
	}, root)

	const editorFriendlyFallbackStructure = computed(() => {
	const root = {}

	componentKeys.forEach((componentKey) => {
	const componentValue = componentsMap.get(componentKey)
	const { defaultRules, name } = componentValue
	rulesToEditorFriendly(
	defaultRules.map((rule) => ({ ...rule, component: name })),
	root
	)
	})

	return root
	})

	// Checkging whether component can support some "directives" which
	// are actually virtual subcomponents, i.e. Text, Link etc
	exports.componentHas = (subComponent) => {
	return !!selectedComponent.value.validInnerComponents?.find(x => x === subComponent)
	}

	// Path is path for lodash's get and set
	const getPath = (component, directive) => {
	const pathSuffix = component ? `._children.${component}.normal.normal` : ''
	const path = `${selectedComponentName.value}.${selectedVariant.value}.${normalizeStates([...selectedState])}${pathSuffix}.directives.${directive}`
	return path
	}

	// Templates for directives
	const isElementPresent = (component, directive, defaultValue = '') => computed({
	get () {
	return get(allEditedRules, getPath(component, directive)) != null
	},
	set (value) {
	if (value) {
	const fallback = get(
	editorFriendlyFallbackStructure.value,
	getPath(component, directive)
	)
	set(allEditedRules, getPath(component, directive), fallback ?? defaultValue)
	} else {
	set(allEditedRules, getPath(component, directive), null)
	}
	}
	})

	const getEditedElement = (component, directive, postProcess = x => x) => computed({
	get () {
	let usedRule
	const fallback = editorFriendlyFallbackStructure.value
	const real = allEditedRules
	const path = getPath(component, directive)

	usedRule = get(real, path) // get real
	if (!usedRule) {
	usedRule = get(fallback, path)
	}

	return postProcess(usedRule)
	},
	set (value) {
	set(allEditedRules, getPath(component, directive), value)
	}
	})

	// All the editable stuff for the component
	exports.editedBackgroundColor = getEditedElement(null, 'background')
	exports.isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF')
	exports.editedOpacity = getEditedElement(null, 'opacity')
	exports.isOpacityPresent = isElementPresent(null, 'opacity', 1)
	exports.editedTextColor = getEditedElement('Text', 'textColor')
	exports.isTextColorPresent = isElementPresent('Text', 'textColor', '#000000')
	exports.editedTextAuto = getEditedElement('Text', 'textAuto')
	exports.isTextAutoPresent = isElementPresent('Text', 'textAuto', '#000000')
	exports.editedLinkColor = getEditedElement('Link', 'textColor')
	exports.isLinkColorPresent = isElementPresent('Link', 'textColor', '#000080')
	exports.editedIconColor = getEditedElement('Icon', 'textColor')
	exports.isIconColorPresent = isElementPresent('Icon', 'textColor', '#909090')
	exports.editedBorderColor = getEditedElement('Border', 'textColor')
	exports.isBorderColorPresent = isElementPresent('Border', 'textColor', '#909090')

	const getContrast = (bg, text) => {
	try {
	const bgRgb = hex2rgb(bg)
	const textRgb = hex2rgb(text)

	const ratio = getContrastRatio(bgRgb, textRgb)
	return {
	// TODO this ideally should be part of <ContractRatio />
	ratio,
	text: ratio.toPrecision(3) + ':1',
	// AA level, AAA level
	aa: ratio >= 4.5,
	aaa: ratio >= 7,
	// same but for 18pt+ texts
	laa: ratio >= 3,
	laaa: ratio >= 4.5
	}
	} catch (e) {
	console.warn('Failure computing contrast', e)
	return { error: e }
	}
	}

	const normalizeShadows = (shadows) => {
	return shadows?.map(shadow => {
	if (typeof shadow === 'object') {
	return shadow
	}
	if (typeof shadow === 'string') {
	try {
	return deserializeShadow(shadow)
	} catch (e) {
	console.warn(e)
	}
	}
	return null
	})
	}
	provide('normalizeShadows', normalizeShadows)

	// Shadow is partially edited outside the ShadowControl
	// for better space utilization
	const editedShadow = getEditedElement(null, 'shadow', normalizeShadows)
	exports.editedShadow = editedShadow
	const editedSubShadowId = ref(null)
	exports.editedSubShadowId = editedSubShadowId
	const editedSubShadow = computed(() => {
	if (editedShadow.value == null \|\| editedSubShadowId.value == null) return null
	return editedShadow.value[editedSubShadowId.value]
	})
	exports.editedSubShadow = editedSubShadow
	exports.isShadowPresent = isElementPresent(null, 'shadow', [])
	exports.onSubShadow = (id) => {
	if (id != null) {
	editedSubShadowId.value = id
	} else {
	editedSubShadow.value = null
	}
	}
	exports.updateSubShadow = (axis, value) => {
	if (!editedSubShadow.value \|\| editedSubShadowId.value == null) return
	const newEditedShadow = [...editedShadow.value]

	newEditedShadow[editedSubShadowId.value] = {
	...newEditedShadow[editedSubShadowId.value],
	[axis]: value
	}

	editedShadow.value = newEditedShadow
	}
	exports.isShadowTabOpen = ref(false)
	exports.onTabSwitch = (tab) => {
	exports.isShadowTabOpen.value = tab === 'shadow'
	}

	// component preview
	exports.editorHintStyle = computed(() => {
	const editorHint = selectedComponent.value.editor
	const styles = []
	if (editorHint && Object.keys(editorHint).length > 0) {
	if (editorHint.aspect != null) {
	styles.push(`aspect-ratio: ${editorHint.aspect} !important;`)
	}
	if (editorHint.border != null) {
	styles.push(`border-width: ${editorHint.border}px !important;`)
	}
	}
	return styles.join('; ')
	})
	// Apart from "hover" we can't really show how component looks like in
	// certain states, so we have to fake them.
	const simulatePseudoSelectors = css => css
	.replace(selectedComponent.value.selector, '.ComponentPreview .preview-block')
	.replace(':active', '.preview-active')
	.replace(':hover', '.preview-hover')
	.replace(':active', '.preview-active')
	.replace(':focus', '.preview-focus')
	.replace(':focus-within', '.preview-focus-within')
	.replace(':disabled', '.preview-disabled')
	exports.previewClass = computed(() => {
	const selectors = []
	if (!!selectedComponent.value.variants?.normal \|\| selectedVariant.value !== 'normal') {
	selectors.push(selectedComponent.value.variants[selectedVariant.value])
	}
	if (selectedState.size > 0) {
	selectedState.forEach(state => {
	const original = selectedComponent.value.states[state]
	selectors.push(simulatePseudoSelectors(original))
	})
	}
	return selectors.map(x => x.substring(1)).join('')
	})
	const previewRules = reactive([])
	exports.previewRules = previewRules
	exports.previewCss = computed(() => {
	try {
	const scoped = getCssRules(previewRules).map(simulatePseudoSelectors)
	return scoped.join('\n')
	} catch (e) {
	console.error('Invalid ruleset', e)
	return null
	}
	})

	const applicablePreviewRules = computed(() => {
	return previewRules.filter(rule => {
	const filterable = rule.parent ? rule.parent : rule
	const variantMatches = filterable.variant === selectedVariant.value
	const stateMatches = filterable.state.filter(x => x !== 'normal').every(x => selectedState.has(x))
	return variantMatches && stateMatches
	})
	})
	const previewColors = computed(() => ({
	text: applicablePreviewRules.value.find(r => r.component === 'Text')?.virtualDirectives['--text'],
	link: applicablePreviewRules.value.find(r => r.component === 'Link')?.virtualDirectives['--link'],
	border: applicablePreviewRules.value.find(r => r.component === 'Border')?.virtualDirectives['--border'],
	icon: applicablePreviewRules.value.find(r => r.component === 'Icon')?.virtualDirectives['--icon'],
	background: applicablePreviewRules.value.find(r => r.parent == null)?.dynamicVars.stacked
	}))
	exports.previewColors = previewColors

	const editorFriendlyToOriginal = computed(() => {
	const resultRules = []

	const convert = (component, data = {}, parent) => {
	const variants = Object.entries(data \|\| {})

	variants.forEach(([variant, variantData]) => {
	const states = Object.entries(variantData)

	states.forEach(([jointState, stateData]) => {
	const state = jointState.split(/:/g)
	const result = {
	component,
	variant,
	state,
	directives: stateData.directives \|\| {}
	}

	if (parent) {
	result.parent = {
	component: parent
	}
	}

	resultRules.push(result)

	// Currently we only support single depth for simplicity's sake
	if (!parent) {
	Object.entries(stateData._children \|\| {}).forEach(([cName, child]) => convert(cName, child, component))
	}
	})
	})
	}

	- convert(selectedComponentName.value, allEditedRules[selectedComponentName.value])
	+ componentsMap.values().forEach(({ name }) => {
	+ convert(name, allEditedRules[name])
	+ })

	return resultRules
	})

	const updatePreview = () => {
	try {
	const { name, ...paletteData } = selectedPalette.value
	// This normally would be handled by Root but since we pass something
	// else we have to make do ourselves
	paletteData.accent = paletteData.accent \|\| paletteData.link
	paletteData.link = paletteData.link \|\| paletteData.accent
	const rules = init({
	inputRuleset: editorFriendlyToOriginal.value,
	initialStaticVars: {
	...paletteData
	},
	ultimateBackgroundColor: '#000000',
	rootComponentName: selectedComponentName.value,
	editMode: true,
	debug: true
	}).eager
	previewRules.splice(0, previewRules.length)
	previewRules.push(...rules)
	} catch (e) {
	console.error('Could not compile preview theme', e)
	}
	}

	const updateSelectedComponent = () => {
	selectedVariant.value = 'normal'
	selectedState.clear()
	updatePreview()
	}
	updateSelectedComponent()

	// export and import
	watch(
	allEditedRules,
	updatePreview
	)

	watch(
	palettes,
	updatePreview
	)

	watch(
	selectedPalette,
	updatePreview
	)

	watch(
	selectedComponentName,
	updateSelectedComponent
	)

	const allCustomVirtualDirectives = [...componentsMap.values()]
	.map(c => {
	return c
	.defaultRules
	.filter(c => c.component === 'Root')
	.map(x => Object.entries(x.directives))
	.flat()
	})
	.filter(x => x)
	.flat()
	.map(([name, value]) => {
	const [valType, valVal] = value.split('\|')
	return {
	name: name.substring(2),
	valType: valType.trim(),
	value: valVal.trim()
	}
	})

	const virtualDirectives = ref(allCustomVirtualDirectives)
	exports.virtualDirectives = virtualDirectives
	exports.updateVirtualDirectives = (value) => {
	virtualDirectives.value = value
	}

	const virtualDirectivesOut = computed(() => {
	return [
	'Root {',
	...virtualDirectives.value.map(vd => ` --${vd.name}: ${vd.valType} \| ${vd.value};`),
	'}'
	].join('\n')
	})

	exports.computeColor = (color) => {
	const computedColor = findColor(color, { dynamicVars: {}, staticVars: selectedPalette.value })
	if (computedColor) {
	return rgb2hex(computedColor)
	}
	return null
	}
	provide('computeColor', exports.computeColor)

	exports.contrast = computed(() => {
	return getContrast(
	exports.computeColor(previewColors.value.background),
	exports.computeColor(previewColors.value.text)
	)
	})

	- const overallPreviewRules = ref()
	- exports.overallPreviewRules = overallPreviewRules
	- exports.updateOverallPreview = () => {
	- try {
	- // This normally would be handled by Root but since we pass something
	- // else we have to make do ourselves
	+ const overallPreviewCssRules = ref()
	+ exports.overallPreviewCssRules = overallPreviewCssRules
	+
	+ const paletteRule = computed(() => {
	+ const { name, ...rest } = selectedPalette.value
	+ return {
	+ component: 'Root',
	+ directives: Object
	+ .entries(rest)
	+ .filter(([k, v]) => v)
	+ .map(([k, v]) => ['--' + k, v])
	+ .reduce((acc, [k, v]) => ({ ...acc, [k]: `color \| ${v}` }), {})
	+ }
	+ })

	- const { name, ...rest } = selectedPalette.value
	- const paletteRule = {
	- component: 'Root',
	- directives: Object
	- .entries(rest)
	- .map(([k, v]) => ['--' + k, v])
	- .reduce((acc, [k, v]) => ({ ...acc, [k]: `color \| ${v}` }), {})
	- }
	+ const virtualDirectivesRule = computed(() => ({
	+ component: 'Root',
	+ directives: Object.fromEntries(
	+ virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} \| ${vd.value}`])
	+ )
	+ }))

	- const virtualDirectivesRule = {
	- component: 'Root',
	- directives: Object.fromEntries(
	- virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} \| ${vd.value}`])
	- )
	- }
	+ const exportRules = computed(() => [
	+ paletteRule.value,
	+ virtualDirectivesRule.value,
	+ ...editorFriendlyToOriginal.value
	+ ])

	+ const compilePreviewRules = () => {
	+ try {
	const rules = init({
	- inputRuleset: [
	- paletteRule,
	- virtualDirectivesRule,
	- ...editorFriendlyToOriginal.value
	- ],
	+ inputRuleset: exportRules.value,
	ultimateBackgroundColor: '#000000',
	liteMode: true,
	debug: true
	}).eager

	- overallPreviewRules.value = getScopedVersion(
	- getCssRules(rules),
	- '#edited-style-preview'
	- ).join('\n')
	+ return rules
	} catch (e) {
	console.error('Could not compile preview theme', e)
	+ return null
	}
	}

	+ exports.updateOverallPreview = () => {
	+ const rules = compilePreviewRules()
	+ if (rules === null) return
	+ overallPreviewCssRules.value = getScopedVersion(
	+ getCssRules(rules),
	+ '#edited-style-preview'
	+ ).join('\n')
	+ }
	+
	+ exports.applyStyle = () => {
	+ store.dispatch('setStyleCustom', exportRules.value)
	+ }
	+
	// ## Export and Import
	const styleExporter = newExporter({
	filename: () => exports.name.value ?? 'pleroma_theme',
	mime: 'text/plain',
	extension: 'piss',
	getExportedObject: () => exportStyleData.value
	})

	const styleImporter = newImporter({
	accept: '.piss',
	parser: (string) => deserialize(string),
	onImport (parsed, filename) {
	const editorComponents = parsed.filter(x => x.component.startsWith('@'))
	const rootComponent = parsed.find(x => x.component === 'Root')
	const rules = parsed.filter(x => !x.component.startsWith('@') && x.component !== 'Root')
	const metaIn = editorComponents.find(x => x.component === '@meta').directives
	const palettesIn = editorComponents.filter(x => x.component === '@palette')

	exports.name.value = metaIn.name
	exports.license.value = metaIn.license
	exports.author.value = metaIn.author
	exports.website.value = metaIn.website

	const newVirtualDirectives = Object
	.entries(rootComponent.directives)
	.map(([name, value]) => {
	const [valType, valVal] = value.split('\|').map(x => x.trim())
	return { name: name.substring(2), valType, value: valVal }
	})
	virtualDirectives.value = newVirtualDirectives

	onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))

	Object.keys(allEditedRules).forEach((k) => delete allEditedRules[k])

	rules.forEach(rule => {
	rulesToEditorFriendly(
	[rule],
	allEditedRules
	)
	})
	}
	})

	const exportStyleData = computed(() => {
	return [
	metaOut.value,
	palettesOut.value,
	virtualDirectivesOut.value,
	serialize(editorFriendlyToOriginal.value)
	].join('\n\n')
	})

	exports.exportStyle = () => {
	styleExporter.exportData()
	}

	exports.importStyle = () => {
	styleImporter.importData()
	}

	return exports
	}
	}
	diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
	index 74153db3ac..ccba2c7dca 100644
	--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
	+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
	@@ -1,370 +1,370 @@
	<script src="./style_tab.js">
	</script>

	<template>
	<div class="StyleTab">
	<div class="setting-item heading">
	<!-- eslint-disable vue/no-v-text-v-html-on-component -->
	<component
	:is="'style'"
	- v-html="overallPreviewRules"
	+ v-html="overallPreviewCssRules"
	/>
	<!-- eslint-enable vue/no-v-text-v-html-on-component -->
	<Preview id="edited-style-preview" />
	<button
	class="btn button-default button-new"
	@click="clearTheme"
	>
	<FAIcon icon="file" />
	{{ $t('settings.style.themes3.editor.new_style') }}
	</button>
	<button
	class="btn button-default button-load"
	@click="importStyle"
	>
	<FAIcon icon="folder-open" />
	{{ $t('settings.style.themes3.editor.load_style') }}
	</button>
	<button
	class="btn button-default button-save"
	@click="exportStyle"
	>
	<FAIcon icon="floppy-disk" />
	{{ $t('settings.style.themes3.editor.save_style') }}
	</button>
	<button
	class="btn button-default button-refresh"
	@click="updateOverallPreview"
	>
	<FAIcon icon="arrows-rotate" />
	{{ $t('settings.style.themes3.editor.refresh_preview') }}
	</button>
	<button
	class="btn button-default button-apply"
	- @click="applyTheme"
	+ @click="applyStyle"
	>
	<FAIcon icon="check" />
	{{ $t('settings.style.themes3.editor.apply_preview') }}
	</button>
	<ul class="setting-list style-metadata">
	<li>
	<StringSetting class="meta-field" v-model="name">
	{{ $t('settings.style.themes3.editor.style_name') }}
	</StringSetting>
	</li>
	<li>
	<StringSetting class="meta-field" v-model="author">
	{{ $t('settings.style.themes3.editor.style_author') }}
	</StringSetting>
	</li>
	<li>
	<StringSetting class="meta-field" v-model="license">
	{{ $t('settings.style.themes3.editor.style_license') }}
	</StringSetting>
	</li>
	<li>
	<StringSetting class="meta-field" v-model="website">
	{{ $t('settings.style.themes3.editor.style_website') }}
	</StringSetting>
	</li>
	</ul>
	</div>
	<tab-switcher>
	<div
	key="component"
	class="setting-item component-editor"
	:label="$t('settings.style.themes3.editor.component_tab')"
	>
	<div class="component-selector">
	<label for="component-selector">
	{{ $t('settings.style.themes3.editor.component_selector') }}
	{{ ' ' }}
	</label>
	<Select
	id="component-selector"
	v-model="selectedComponentKey"
	>
	<option
	v-for="key in componentKeys"
	:key="'component-' + key"
	:value="key"
	>
	{{ componentsMap.get(key).name }}
	</option>
	</Select>
	</div>
	<div
	v-if="selectedComponentVariants.length > 1"
	class="variant-selector"
	>
	<label for="variant-selector">
	{{ $t('settings.style.themes3.editor.variant_selector') }}
	</label>
	<Select
	v-model="selectedVariant"
	>
	<option
	v-for="variant in selectedComponentVariants"
	:key="'component-variant-' + variant"
	:value="variant"
	>
	{{ variant }}
	</option>
	</Select>
	</div>
	<div
	v-if="selectedComponentStates.length > 0"
	class="state-selector"
	>
	<label>
	{{ $t('settings.style.themes3.editor.states_selector') }}
	</label>
	<ul
	class="state-selector-list"
	>
	<li
	v-for="state in selectedComponentStates"
	:key="'component-state-' + state"
	>
	<Checkbox
	:value="selectedState.has(state)"
	@update:modelValue="(v) => updateSelectedStates(state, v)"
	>
	{{ state }}
	</Checkbox>
	</li>
	</ul>
	</div>
	<div class="preview-container">
	<!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
	<component
	:is="'style'"
	v-html="previewCss"
	/>
	<!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
	<ComponentPreview
	class="component-preview"
	:show-text="componentHas('Text')"
	:shadow-control="isShadowTabOpen"
	:preview-class="previewClass"
	:preview-style="editorHintStyle"
	:preview-css="previewCss"
	:disabled="!editedSubShadow && typeof editedShadow !== 'string'"
	:shadow="editedSubShadow"
	:no-color-control="true"
	@update:shadow="({ axis, value }) => updateSubShadow(axis, value)"
	/>
	</div>
	<tab-switcher
	ref="tabSwitcher"
	class="component-settings"
	:on-switch="onTabSwitch"
	>
	<div
	key="main"
	class="editor-tab"
	:label="$t('settings.style.themes3.editor.main_tab')"
	>
	<ColorInput
	v-model="editedBackgroundColor"
	:fallback="computeColor(editedBackgroundColor) ?? previewColors.background"
	:disabled="!isBackgroundColorPresent"
	:label="$t('settings.style.themes3.editor.background')"
	:hide-optional-checkbox="true"
	/>
	<Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
	<Checkbox v-model="isBackgroundColorPresent" />
	</Tooltip>
	<ColorInput
	v-if="componentHas('Text')"
	v-model="editedTextColor"
	:fallback="computeColor(editedTextColor) ?? previewColors.text"
	:label="$t('settings.style.themes3.editor.text_color')"
	:disabled="!isTextColorPresent"
	:hide-optional-checkbox="true"
	/>
	<Tooltip
	v-if="componentHas('Text')"
	:text="$t('settings.style.themes3.editor.include_in_rule')"
	>
	<Checkbox v-model="isTextColorPresent" />
	</Tooltip>
	<div
	v-if="componentHas('Text')"
	class="style-control suboption"
	>
	<label
	for="textAuto"
	class="label"
	:class="{ faint: !isTextAutoPresent }"
	>
	{{ $t('settings.style.themes3.editor.text_auto.label') }}
	</label>
	<Select
	id="textAuto"
	v-model="editedTextAuto"
	:disabled="!isTextAutoPresent"
	>
	<option value="no-preserve">
	{{ $t('settings.style.themes3.editor.text_auto.no-preserve') }}
	</option>
	<option value="no-auto">
	{{ $t('settings.style.themes3.editor.text_auto.no-auto') }}
	</option>
	<option value="preserve">
	{{ $t('settings.style.themes3.editor.text_auto.preserve') }}
	</option>
	</Select>
	</div>
	<Tooltip
	v-if="componentHas('Text')"
	:text="$t('settings.style.themes3.editor.include_in_rule')"
	>
	<Checkbox v-model="isTextAutoPresent" />
	</Tooltip>
	<div
	class="style-control suboption"
	v-if="componentHas('Text')"
	>
	<label class="label">
	{{$t('settings.style.themes3.editor.contrast') }}
	</label>
	<ContrastRatio
	:show-ratio="true"
	:contrast="contrast"
	/>
	</div>
	<div v-if="componentHas('Text')">
	</div>
	<ColorInput
	v-if="componentHas('Link')"
	v-model="editedLinkColor"
	:fallback="computeColor(editedLinkColor) ?? previewColors.link"
	:label="$t('settings.style.themes3.editor.link_color')"
	:disabled="!isLinkColorPresent"
	:hide-optional-checkbox="true"
	/>
	<Tooltip
	v-if="componentHas('Link')"
	:text="$t('settings.style.themes3.editor.include_in_rule')"
	>
	<Checkbox v-model="isLinkColorPresent" />
	</Tooltip>
	<ColorInput
	v-if="componentHas('Icon')"
	v-model="editedIconColor"
	:fallback="computeColor(editedIconColor) ?? previewColors.icon"
	:label="$t('settings.style.themes3.editor.icon_color')"
	:disabled="!isIconColorPresent"
	:hide-optional-checkbox="true"
	/>
	<Tooltip
	v-if="componentHas('Icon')"
	:text="$t('settings.style.themes3.editor.include_in_rule')"
	>
	<Checkbox v-model="isIconColorPresent" />
	</Tooltip>
	<ColorInput
	v-if="componentHas('Border')"
	v-model="editedBorderColor"
	:fallback="computeColor(editedBorderColor) ?? previewColors.border"
	:label="$t('settings.style.themes3.editor.border_color')"
	:disabled="!isBorderColorPresent"
	:hide-optional-checkbox="true"
	/>
	<Tooltip
	v-if="componentHas('Border')"
	:text="$t('settings.style.themes3.editor.include_in_rule')"
	>
	<Checkbox v-model="isBorderColorPresent" />
	</Tooltip>
	<OpacityInput
	v-model="editedOpacity"
	:disabled="!isOpacityPresent"
	:label="$t('settings.style.themes3.editor.opacity')"
	/>
	<Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
	<Checkbox v-model="isOpacityPresent" />
	</Tooltip>
	</div>
	<div
	key="shadow"
	class="editor-tab shadow-tab"
	:label="$t('settings.style.themes3.editor.shadows_tab')"
	>
	<Checkbox
	v-model="isShadowPresent"
	class="style-control"
	>
	{{ $t('settings.style.themes3.editor.include_in_rule') }}
	</checkbox>
	<ShadowControl
	v-model="editedShadow"
	:disabled="!isShadowPresent"
	:no-preview="true"
	:compact="true"
	:static-vars="selectedPalette"
	@subShadowSelected="onSubShadow"
	/>
	</div>
	</tab-switcher>
	</div>
	<div
	key="palette"
	:label="$t('settings.style.themes3.editor.palette_tab')"
	class="setting-item list-editor palette-editor"
	>
	<label
	class="list-select-label"
	for="palette-selector"
	>
	{{ $t('settings.style.themes3.palette.label') }}
	{{ ' ' }}
	</label>
	<Select
	id="palette-selector"
	v-model="selectedPaletteId"
	class="list-select"
	size="4"
	>
	<option
	v-for="(p, index) in palettes"
	:key="p.name"
	:value="index"
	>
	{{ p.name }}
	</option>
	</Select>
	<SelectMotion
	class="list-select-movement"
	:modelValue="palettes"
	@update:modelValue="onPalettesUpdate"
	:selected-id="selectedPaletteId"
	:get-add-value="getNewPalette"
	@update:selectedId="e => selectedPaletteId = e"
	/>
	<div class="list-edit-area">
	<StringSetting
	class="palette-name-input"
	v-model="selectedPalette.name"
	>
	{{ $t('settings.style.themes3.palette.name_label') }}
	</StringSetting>
	<PaletteEditor
	class="palette-editor-single"
	v-model="selectedPalette"
	/>
	</div>
	</div>
	<VirtualDirectivesTab
	key="variables"
	:label="$t('settings.style.themes3.editor.variables_tab')"
	:model-value="virtualDirectives"
	@update:modelValue="updateVirtualDirectives"
	:normalize-shadows="normalizeShadows"
	/>
	</tab-switcher>
	</div>
	</template>

	<style src="./style_tab.scss" lang="scss"></style>
	diff --git a/src/modules/interface.js b/src/modules/interface.js
	index 74285c0354..3a4fd18dfb 100644
	--- a/src/modules/interface.js
	+++ b/src/modules/interface.js
	@@ -1,651 +1,648 @@
	import { getResourcesIndex, applyTheme, tryLoadCache } from '../services/style_setter/style_setter.js'
	import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_data.service.js'
	import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'

	const defaultState = {
	localFonts: null,
	themeApplied: false,
	themeVersion: 'v3',
	temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
	temporaryChangesConfirm: () => {}, // used for applying temporary options
	temporaryChangesRevert: () => {}, // used for reverting temporary options
	settingsModalState: 'hidden',
	settingsModalLoadedUser: false,
	settingsModalLoadedAdmin: false,
	settingsModalTargetTab: null,
	settingsModalMode: 'user',
	settings: {
	currentSaveStateNotice: null,
	noticeClearTimeout: null,
	notificationPermission: null
	},
	browserSupport: {
	cssFilter: window.CSS && window.CSS.supports && (
	window.CSS.supports('filter', 'drop-shadow(0 0)') \|\|
	window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
	),
	localFonts: typeof window.queryLocalFonts === 'function'
	},
	layoutType: 'normal',
	globalNotices: [],
	layoutHeight: 0,
	lastTimeline: null
	}

	const interfaceMod = {
	state: defaultState,
	mutations: {
	settingsSaved (state, { success, error }) {
	if (success) {
	if (state.noticeClearTimeout) {
	clearTimeout(state.noticeClearTimeout)
	}
	state.settings.currentSaveStateNotice = { error: false, data: success }
	state.settings.noticeClearTimeout = setTimeout(() => delete state.settings.currentSaveStateNotice, 2000)
	} else {
	state.settings.currentSaveStateNotice = { error: true, errorData: error }
	}
	},
	setTemporaryChanges (state, { timeoutId, confirm, revert }) {
	state.temporaryChangesTimeoutId = timeoutId
	state.temporaryChangesConfirm = confirm
	state.temporaryChangesRevert = revert
	},
	clearTemporaryChanges (state) {
	clearTimeout(state.temporaryChangesTimeoutId)
	state.temporaryChangesTimeoutId = null
	state.temporaryChangesConfirm = () => {}
	state.temporaryChangesRevert = () => {}
	},
	setThemeApplied (state) {
	state.themeApplied = true
	},
	setNotificationPermission (state, permission) {
	state.notificationPermission = permission
	},
	setLayoutType (state, value) {
	state.layoutType = value
	},
	closeSettingsModal (state) {
	state.settingsModalState = 'hidden'
	},
	togglePeekSettingsModal (state) {
	switch (state.settingsModalState) {
	case 'minimized':
	state.settingsModalState = 'visible'
	return
	case 'visible':
	state.settingsModalState = 'minimized'
	return
	default:
	throw new Error('Illegal minimization state of settings modal')
	}
	},
	openSettingsModal (state, value) {
	state.settingsModalMode = value
	state.settingsModalState = 'visible'
	if (value === 'user') {
	if (!state.settingsModalLoadedUser) {
	state.settingsModalLoadedUser = true
	}
	} else if (value === 'admin') {
	if (!state.settingsModalLoadedAdmin) {
	state.settingsModalLoadedAdmin = true
	}
	}
	},
	setSettingsModalTargetTab (state, value) {
	state.settingsModalTargetTab = value
	},
	pushGlobalNotice (state, notice) {
	state.globalNotices.push(notice)
	},
	removeGlobalNotice (state, notice) {
	state.globalNotices = state.globalNotices.filter(n => n !== notice)
	},
	setLayoutHeight (state, value) {
	state.layoutHeight = value
	},
	setLayoutWidth (state, value) {
	state.layoutWidth = value
	},
	setLastTimeline (state, value) {
	state.lastTimeline = value
	},
	setFontsList (state, value) {
	// Set is used here so that we filter out duplicate fonts (possibly same font but with different weight)
	state.localFonts = [...(new Set(value.map(font => font.family))).values()]
	}
	},
	actions: {
	setPageTitle ({ rootState }, option = '') {
	document.title = `${option} ${rootState.instance.name}`
	},
	settingsSaved ({ commit, dispatch }, { success, error }) {
	commit('settingsSaved', { success, error })
	},
	setNotificationPermission ({ commit }, permission) {
	commit('setNotificationPermission', permission)
	},
	closeSettingsModal ({ commit }) {
	commit('closeSettingsModal')
	},
	openSettingsModal ({ commit }, value = 'user') {
	commit('openSettingsModal', value)
	},
	togglePeekSettingsModal ({ commit }) {
	commit('togglePeekSettingsModal')
	},
	clearSettingsModalTargetTab ({ commit }) {
	commit('setSettingsModalTargetTab', null)
	},
	openSettingsModalTab ({ commit }, value) {
	commit('setSettingsModalTargetTab', value)
	commit('openSettingsModal', 'user')
	},
	pushGlobalNotice (
	{ commit, dispatch, state },
	{
	messageKey,
	messageArgs = {},
	level = 'error',
	timeout = 0
	}) {
	const notice = {
	messageKey,
	messageArgs,
	level
	}
	commit('pushGlobalNotice', notice)
	// Adding a new element to array wraps it in a Proxy, which breaks the comparison
	// TODO: Generate UUID or something instead or relying on !== operator?
	const newNotice = state.globalNotices[state.globalNotices.length - 1]
	if (timeout) {
	setTimeout(() => dispatch('removeGlobalNotice', newNotice), timeout)
	}
	return newNotice
	},
	removeGlobalNotice ({ commit }, notice) {
	commit('removeGlobalNotice', notice)
	},
	setLayoutHeight ({ commit }, value) {
	commit('setLayoutHeight', value)
	},
	// value is optional, assuming it was cached prior
	setLayoutWidth ({ commit, state, rootGetters, rootState }, value) {
	let width = value
	if (value !== undefined) {
	commit('setLayoutWidth', value)
	} else {
	width = state.layoutWidth
	}
	const mobileLayout = width <= 800
	const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
	const { thirdColumnMode } = rootGetters.mergedConfig
	if (thirdColumnMode === 'none' \|\| !rootState.users.currentUser) {
	commit('setLayoutType', normalOrMobile)
	} else {
	const wideLayout = width >= 1300
	commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
	}
	},
	queryLocalFonts ({ commit, dispatch, state }) {
	if (state.localFonts !== null) return
	commit('setFontsList', [])
	if (!state.browserSupport.localFonts) {
	return
	}
	window
	.queryLocalFonts()
	.then((fonts) => {
	commit('setFontsList', fonts)
	})
	.catch((e) => {
	dispatch('pushGlobalNotice', {
	messageKey: 'settings.style.themes3.font.font_list_unavailable',
	messageArgs: {
	error: e
	},
	level: 'error'
	})
	})
	},
	setLastTimeline ({ commit }, value) {
	commit('setLastTimeline', value)
	},
	async fetchPalettesIndex ({ commit, state }) {
	try {
	const value = await getResourcesIndex('/static/palettes/index.json')
	commit('setInstanceOption', { name: 'palettesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch palettes index', e)
	commit('setInstanceOption', { name: 'palettesIndex', value: { _error: e } })
	return Promise.resolve({})
	}
	},
	setPalette ({ dispatch, commit }, value) {
	dispatch('resetThemeV3Palette')
	dispatch('resetThemeV2')

	commit('setOption', { name: 'palette', value })

	dispatch('applyTheme')
	},
	setPaletteCustom ({ dispatch, commit }, value) {
	dispatch('resetThemeV3Palette')
	dispatch('resetThemeV2')

	commit('setOption', { name: 'paletteCustomData', value })

	dispatch('applyTheme')
	},
	async fetchStylesIndex ({ commit, state }) {
	try {
	const value = await getResourcesIndex('/static/styles/index.json')
	commit('setInstanceOption', { name: 'stylesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch styles index', e)
	commit('setInstanceOption', { name: 'stylesIndex', value: { _error: e } })
	return Promise.resolve({})
	}
	},
	setStyle ({ dispatch, commit }, value) {
	dispatch('resetThemeV3')
	dispatch('resetThemeV2')

	commit('setOption', { name: 'style', value })

	dispatch('applyTheme')
	},
	setStyleCustom ({ dispatch, commit }, value) {
	dispatch('resetThemeV3')
	dispatch('resetThemeV2')

	commit('setOption', { name: 'styleCustomData', value })

	dispatch('applyTheme')
	},
	async fetchThemesIndex ({ commit, state }) {
	try {
	const value = await getResourcesIndex('/static/styles.json')
	commit('setInstanceOption', { name: 'themesIndex', value })
	return value
	} catch (e) {
	console.error('Could not fetch themes index', e)
	commit('setInstanceOption', { name: 'themesIndex', value: { _error: e } })
	return Promise.resolve({})
	}
	},
	setTheme ({ dispatch, commit }, value) {
	dispatch('resetThemeV3')
	dispatch('resetThemeV3Palette')
	dispatch('resetThemeV2')

	commit('setOption', { name: 'theme', value })

	dispatch('applyTheme')
	},
	setThemeCustom ({ dispatch, commit }, value) {
	dispatch('resetThemeV3')
	dispatch('resetThemeV3Palette')
	dispatch('resetThemeV2')

	commit('setOption', { name: 'customTheme', value })
	commit('setOption', { name: 'customThemeSource', value })

	dispatch('applyTheme')
	},
	resetThemeV3 ({ dispatch, commit }) {
	commit('setOption', { name: 'style', value: null })
	commit('setOption', { name: 'styleCustomData', value: null })
	},
	resetThemeV3Palette ({ dispatch, commit }) {
	commit('setOption', { name: 'palette', value: null })
	commit('setOption', { name: 'paletteCustomData', value: null })
	},
	resetThemeV2 ({ dispatch, commit }) {
	commit('setOption', { name: 'theme', value: null })
	commit('setOption', { name: 'customTheme', value: null })
	commit('setOption', { name: 'customThemeSource', value: null })
	},
	async applyTheme (
	{ dispatch, commit, rootState, state },
	{ recompile = true } = {}
	) {
	// If we're not not forced to recompile try using
	// cache (tryLoadCache return true if load successful)

	const {
	style: instanceStyleName,
	palette: instancePaletteName
	} = rootState.instance
	let {
	theme: instanceThemeV2Name,
	themesIndex,
	stylesIndex,
	palettesIndex
	} = rootState.instance

	const {
	style: userStyleName,
	styleCustomData: userStyleCustomData,
	palette: userPaletteName,
	paletteCustomData: userPaletteCustomData,
	forceThemeRecompilation,
	themeDebug,
	theme3hacks
	} = rootState.config
	let {
	theme: userThemeV2Name,
	customTheme: userThemeV2Snapshot,
	customThemeSource: userThemeV2Source
	} = rootState.config

	const forceRecompile = forceThemeRecompilation \|\| recompile
	if (!forceRecompile && !themeDebug && tryLoadCache()) {
	return commit('setThemeApplied')
	}

	let majorVersionUsed

	console.log(
	- `USER V3 palette: ${userPaletteName}, style: ${userStyleName} `
	+ `USER V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`
	)
	console.log(
	- `USER V2 name: ${userThemeV2Name}, source: ${userThemeV2Source}, snapshot: ${userThemeV2Snapshot}`
	+ `USER V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`
	)

	console.log(`INST V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`)
	console.log('INST V2 theme: ' + instanceThemeV2Name)

	if (userPaletteName \|\| userPaletteCustomData \|\|
	userStyleName \|\| userStyleCustomData \|\|
	(
	// User V2 overrides instance V3
	(instancePaletteName \|\|
	instanceStyleName) &&
	instanceThemeV2Name == null &&
	userThemeV2Name == null
	)
	) {
	// Palette and/or style overrides V2 themes
	instanceThemeV2Name = null
	userThemeV2Name = null
	userThemeV2Source = null
	userThemeV2Snapshot = null

	majorVersionUsed = 'v3'
	} else if (
	(userThemeV2Name \|\|
	userThemeV2Snapshot \|\|
	userThemeV2Source \|\|
	instanceThemeV2Name)
	) {
	majorVersionUsed = 'v2'
	} else {
	// if all fails fallback to v3
	majorVersionUsed = 'v3'
	}

	if (majorVersionUsed === 'v3') {
	const result = await Promise.all([
	dispatch('fetchPalettesIndex'),
	dispatch('fetchStylesIndex')
	])

	palettesIndex = result[0]
	stylesIndex = result[1]
	} else {
	// Promise.all just to be uniform with v3
	const result = await Promise.all([
	dispatch('fetchThemesIndex')
	])

	themesIndex = result[0]
	}

	state.themeVersion = majorVersionUsed

	let styleDataUsed = null
	let styleNameUsed = null
	let paletteDataUsed = null
	- let paletteNameUsed = null
	- let themeNameUsed = null
	+ // let paletteNameUsed = null
	+ // let themeNameUsed = null
	let themeDataUsed = null

	const getData = async (resource, index, customData, name) => {
	const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
	const result = {}

	if (customData) {
	result.nameUsed = 'custom' // custom data overrides name
	result.dataUsed = customData
	} else {
	result.nameUsed = name

	if (result.nameUsed === 'stock') {
	result.dataUsed = null
	return result
	}

	let fetchFunc = index[result.nameUsed]
	// Fallbacks
	if (!fetchFunc) {
	const newName = Object.keys(index)[0]
	fetchFunc = index[newName]
	console.warn(`${capitalizedResource} with id '${styleNameUsed}' not found, trying back to '${newName}'`)
	if (!fetchFunc) {
	console.warn(`${capitalizedResource} doesn't have a fallback, defaulting to stock.`)
	fetchFunc = () => Promise.resolve(null)
	}
	}
	result.dataUsed = await fetchFunc()
	}
	return result
	}

	console.log('VERSION', majorVersionUsed)

	if (majorVersionUsed === 'v3') {
	const palette = await getData(
	'palette',
	palettesIndex,
	userPaletteCustomData,
	userPaletteName \|\| instancePaletteName
	)
	- paletteNameUsed = palette.nameUsed
	+ // paletteNameUsed = palette.nameUsed
	paletteDataUsed = palette.dataUsed
	if (Array.isArray(paletteDataUsed)) {
	const [
	name,
	background,
	foreground,
	text,
	link,
	cRed = '#FF0000',
	cGreen = '#00FF00',
	cBlue = '#0000FF',
	cOrange = '#E3FF00'
	] = paletteDataUsed
	paletteDataUsed = { name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange }
	}
	- console.log('PAL', userPaletteName, paletteNameUsed)
	- console.log('PAL', paletteDataUsed)

	+ console.log('USCD', userStyleCustomData)
	const style = await getData(
	'style',
	stylesIndex,
	userStyleCustomData,
	userStyleName \|\| instanceStyleName
	)
	styleNameUsed = style.nameUsed
	styleDataUsed = style.dataUsed
	} else {
	const theme = await getData(
	'theme',
	themesIndex,
	userThemeV2Source \|\| userThemeV2Snapshot,
	userThemeV2Name \|\| instanceThemeV2Name
	)
	- themeNameUsed = theme.nameUsed
	+ // themeNameUsed = theme.nameUsed
	themeDataUsed = theme.dataUsed

	// Themes v2 editor support
	commit('setInstanceOption', { name: 'themeData', value: themeDataUsed })
	}

	- console.log('STYLE', styleNameUsed, paletteNameUsed, themeNameUsed)
	-
	// commit('setOption', { name: 'palette', value: paletteNameUsed })
	// commit('setOption', { name: 'style', value: styleNameUsed })
	// commit('setOption', { name: 'theme', value: themeNameUsed })

	const paletteIss = (() => {
	if (!paletteDataUsed) return null
	const result = {
	component: 'Root',
	directives: {}
	}

	console.log('PALETTE', paletteDataUsed)
	Object
	.entries(paletteDataUsed)
	.filter(([k]) => k !== 'name')
	.forEach(([k, v]) => {
	let issRootDirectiveName
	switch (k) {
	case 'background':
	issRootDirectiveName = 'bg'
	break
	case 'foreground':
	issRootDirectiveName = 'fg'
	break
	default:
	issRootDirectiveName = k
	}
	result.directives['--' + issRootDirectiveName] = 'color \| ' + v
	})
	return result
	})()

	const theme2ruleset = themeDataUsed && convertTheme2To3(normalizeThemeData(themeDataUsed))
	const hacks = []

	Object.entries(theme3hacks).forEach(([key, value]) => {
	switch (key) {
	case 'fonts': {
	Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
	if (!font?.family) return
	switch (fontKey) {
	case 'interface':
	hacks.push({
	component: 'Root',
	directives: {
	'--font': 'generic \| ' + font.family
	}
	})
	break
	case 'input':
	hacks.push({
	component: 'Input',
	directives: {
	'--font': 'generic \| ' + font.family
	}
	})
	break
	case 'post':
	hacks.push({
	component: 'RichContent',
	directives: {
	'--font': 'generic \| ' + font.family
	}
	})
	break
	case 'monospace':
	hacks.push({
	component: 'Root',
	directives: {
	'--monoFont': 'generic \| ' + font.family
	}
	})
	break
	}
	})
	break
	}
	case 'underlay': {
	if (value !== 'none') {
	const newRule = {
	component: 'Underlay',
	directives: {}
	}
	if (value === 'opaque') {
	newRule.directives.opacity = 1
	newRule.directives.background = '--wallpaper'
	}
	if (value === 'transparent') {
	newRule.directives.opacity = 0
	}
	hacks.push(newRule)
	}
	break
	}
	}
	})

	const rulesetArray = [
	theme2ruleset,
	styleDataUsed,
	paletteIss,
	hacks
	].filter(x => x)

	return applyTheme(
	rulesetArray.flat(),
	() => commit('setThemeApplied'),
	themeDebug
	)
	}
	}
	}

	export default interfaceMod

	export const normalizeThemeData = (input) => {
	let themeData, themeSource

	if (input.themeFileVerison === 1) {
	// this might not be even used at all, some leftover of unimplemented code in V2 editor
	return generatePreset(input).theme
	} else if (
	Object.prototype.hasOwnProperty.call(input, '_pleroma_theme_version') \|\|
	Object.prototype.hasOwnProperty.call(input, 'source') \|\|
	Object.prototype.hasOwnProperty.call(input, 'theme')
	) {
	// We got passed a full theme file
	themeData = input.theme
	themeSource = input.source
	} else if (
	Object.prototype.hasOwnProperty.call(input, 'themeEngineVersion') \|\|
	Object.prototype.hasOwnProperty.call(input, 'colors')
	) {
	// We got passed a source/snapshot
	themeData = input
	themeSource = input
	}
	// New theme presets don't have 'theme' property, they use 'source'

	let out // shout, shout let it all out
	if (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION) {
	// There are some themes in wild that have completely broken source
	out = { ...(themeData \|\| {}), ...themeSource }
	} else {
	out = themeData
	}

	// generatePreset here basically creates/updates "snapshot",
	// while also fixing the 2.2 -> 2.3 colors/shadows/etc
	return generatePreset(out).theme
	}

File Metadata

Mime Type: text/x-diff
Expires: Mon, Nov 2, 8:16 AM (7 h, 37 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1803760
Default Alt Text: (60 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions