No OneTemporary
Actions

Size

45 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 2605e8d8b4..343b56aa1f 100644
	--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
	+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
	@@ -1,752 +1,766 @@
	import { ref, reactive, computed, watch, provide } from 'vue'
	import { useStore } from 'vuex'
	import { get, set, unset } 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 (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: 'default',
	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

	// Component list and selection
	const selectedComponentKey = ref(componentsMap.keys().next().value)
	exports.selectedComponentKey = selectedComponentKey

	const selectedComponent = computed(() => componentsMap.get(selectedComponentKey.value))
	const selectedComponentName = computed(() => selectedComponent.value.name)

	// Selection basis
	exports.selectedComponentVariants = computed(() => {
	return Object.keys({ normal: null, ...(selectedComponent.value.variants \|\| {}) })
	})
	exports.selectedComponentStates = computed(() => {
	const all = Object.keys({ normal: null, ...(selectedComponent.value.states \|\| {}) })
	return all.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)
	}
	}

	// Reset variant and state on component change
	const updateSelectedComponent = () => {
	selectedVariant.value = 'normal'
	selectedState.clear()
	}

	watch(
	selectedComponentName,
	updateSelectedComponent
	)

	// ### 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
	})

	// Checking 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 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 {
	unset(allEditedRules, getPath(component, directive))
	}
	}
	})

	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) {
	if (value) {
	set(allEditedRules, getPath(component, directive), value)
	} else {
	unset(allEditedRules, getPath(component, directive))
	}
	}
	})

	// 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('; ')
	})

	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))
	}
	})
	})
	}

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

	return resultRules
	})

	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: dynamicVars.value, staticVars: selectedPalette.value })
	+ const computedColor = findColor(color, { dynamicVars: dynamicVars.value, staticVars: staticVars.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 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 virtualDirectivesRule = computed(() => ({
	component: 'Root',
	directives: Object.fromEntries(
	virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} \| ${vd.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
	)
	})

	exports.updateOverallPreview()
	}
	})

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

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

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

	const exportRules = computed(() => [
	paletteRule.value,
	virtualDirectivesRule.value,
	...editorFriendlyToOriginal.value
	])

	exports.applyStyle = () => {
	store.dispatch('setStyleCustom', exportRules.value)
	}

	const overallPreviewRules = ref([])
	exports.overallPreviewRules = overallPreviewRules

	const overallPreviewCssRules = computed(() => getScopedVersion(
	getCssRules(overallPreviewRules.value),
	'#edited-style-preview'
	).join('\n'))
	exports.overallPreviewCssRules = overallPreviewCssRules

	const updateOverallPreview = () => {
	try {
	overallPreviewRules.value = init({
	inputRuleset: exportRules.value,
	ultimateBackgroundColor: '#000000',
	liteMode: true,
	debug: true
	}).eager
	} catch (e) {
	console.error('Could not compile preview theme', e)
	return null
	}
	}
	//
	// Apart from "hover" we can't really show how component looks like in
	// certain states, so we have to fake them.
	const simulatePseudoSelectors = (css, prefix) => css
	.replace(prefix, '.component-preview .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')

	const previewRules = computed(() => {
	const filtered = overallPreviewRules.value.filter(r => {
	const componentMatch = r.component === selectedComponentName.value
	const parentComponentMatch = r.parent?.component === selectedComponentName.value
	if (!componentMatch && !parentComponentMatch) return false
	const rule = parentComponentMatch ? r.parent : r
	if (rule.component !== selectedComponentName.value) return false
	if (rule.variant !== selectedVariant.value) return false
	const ruleState = new Set(rule.state.filter(x => x !== 'normal'))
	const differenceA = [...ruleState].filter(x => !selectedState.has(x))
	const differenceB = [...selectedState].filter(x => !ruleState.has(x))
	return (differenceA.length + differenceB.length) === 0
	})
	const sorted = [...filtered]
	.filter(x => x.component === selectedComponentName.value)
	.sort((a, b) => {
	const aSelectorLength = a.selector.split(/ /g).length
	const bSelectorLength = b.selector.split(/ /g).length
	return aSelectorLength - bSelectorLength
	})

	const prefix = sorted[0].selector

	return filtered.filter(x => x.selector.startsWith(prefix))
	})

	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]
	console.log('ORIG', original)
	selectors.push(simulatePseudoSelectors(original))
	})
	}
	return selectors.map(x => x.substring(1)).join('')
	})

	exports.previewCss = computed(() => {
	try {
	const prefix = previewRules.value[0].selector
	const scoped = getCssRules(previewRules.value).map(x => simulatePseudoSelectors(x, prefix))
	return scoped.join('\n')
	} catch (e) {
	console.error('Invalid ruleset', e)
	return null
	}
	})

	const dynamicVars = computed(() => {
	return previewRules.value[0].dynamicVars
	})

	+ const staticVars = computed(() => {
	+ const rootComponent = overallPreviewRules.value.find(r => {
	+ return r.component === 'Root'
	+ })
	+ const rootDirectivesEntries = Object.entries(rootComponent.directives)
	+ const directives = Object.fromEntries(
	+ rootDirectivesEntries
	+ .filter(([k, v]) => k.startsWith('--') && v.startsWith('color \| '))
	+ .map(([k, v]) => [k.substring(2), v.substring('color \| '.length)]))
	+ return directives
	+ })
	+ provide('staticVars', staticVars)
	+ exports.staticVars = staticVars
	+
	const previewColors = computed(() => {
	const stacked = dynamicVars.value.stacked
	const background = typeof stacked === 'string' ? stacked : rgb2hex(stacked)
	return {
	text: previewRules.value.find(r => r.component === 'Text')?.virtualDirectives['--text'],
	link: previewRules.value.find(r => r.component === 'Link')?.virtualDirectives['--link'],
	border: previewRules.value.find(r => r.component === 'Border')?.virtualDirectives['--border'],
	icon: previewRules.value.find(r => r.component === 'Icon')?.virtualDirectives['--icon'],
	background
	}
	})
	exports.previewColors = previewColors
	exports.updateOverallPreview = updateOverallPreview

	updateOverallPreview()

	watch(
	[
	allEditedRules,
	palettes,
	selectedPalette,
	selectedState,
	selectedVariant
	],
	updateOverallPreview
	)

	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 ccba2c7dca..638b789a22 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="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="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"
	+ :static-vars="staticVars"
	@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/components/settings_modal/tabs/style_tab/virtual_directives_tab.js b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
	index 8233d90791..d98dea615d 100644
	--- a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
	+++ b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
	@@ -1,132 +1,132 @@
	import { ref, computed, watch, inject } from 'vue'

	import Select from 'src/components/select/select.vue'
	import SelectMotion from 'src/components/select/select_motion.vue'
	import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
	import ColorInput from 'src/components/color_input/color_input.vue'

	import { serializeShadow } from 'src/services/theme_data/iss_serializer.js'

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

	export default {
	components: {
	Select,
	SelectMotion,
	ShadowControl,
	ColorInput
	},
	props: ['modelValue'],
	emits: ['update:modelValue'],
	setup (props, context) {
	const exports = {}
	const emit = context.emit

	exports.emit = emit
	exports.computeColor = inject('computeColor')
	- exports.selectedPalette = inject('selectedPalette')
	+ exports.staticVars = inject('staticVars')

	const selectedVirtualDirectiveId = ref(0)
	exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId

	const selectedVirtualDirective = computed({
	get () {
	return props.modelValue[selectedVirtualDirectiveId.value]
	},
	set (value) {
	const newVD = [...props.modelValue]
	newVD[selectedVirtualDirectiveId.value] = value

	emit('update:modelValue', newVD)
	}
	})
	exports.selectedVirtualDirective = selectedVirtualDirective

	exports.selectedVirtualDirectiveValType = computed({
	get () {
	return props.modelValue[selectedVirtualDirectiveId.value].valType
	},
	set (value) {
	const newValType = value
	let newValue
	switch (value) {
	case 'shadow':
	newValue = '0 0 0 #000000 / 1'
	break
	case 'color':
	newValue = '#000000'
	break
	default:
	newValue = 'none'
	}
	const newName = props.modelValue[selectedVirtualDirectiveId.value].name
	props.modelValue[selectedVirtualDirectiveId.value] = {
	name: newName,
	value: newValue,
	valType: newValType
	}
	}
	})

	const draftVirtualDirectiveValid = ref(true)
	const draftVirtualDirective = ref({})
	exports.draftVirtualDirective = draftVirtualDirective
	const normalizeShadows = inject('normalizeShadows')

	watch(
	selectedVirtualDirective,
	(directive) => {
	switch (directive.valType) {
	case 'shadow': {
	if (Array.isArray(directive.value)) {
	draftVirtualDirective.value = normalizeShadows(directive.value)
	} else {
	const splitShadow = directive.value.split(/,/g).map(x => x.trim())
	draftVirtualDirective.value = normalizeShadows(splitShadow)
	}
	break
	}
	case 'color':
	draftVirtualDirective.value = directive.value
	break
	default:
	draftVirtualDirective.value = directive.value
	break
	}
	},
	{ immediate: true }
	)

	watch(
	draftVirtualDirective,
	(directive) => {
	try {
	switch (selectedVirtualDirective.value.valType) {
	case 'shadow': {
	props.modelValue[selectedVirtualDirectiveId.value].value =
	directive.map(x => serializeShadow(x)).join(', ')
	break
	}
	default:
	props.modelValue[selectedVirtualDirectiveId.value].value = directive
	}
	draftVirtualDirectiveValid.value = true
	} catch (e) {
	console.error('Invalid virtual directive value', e)
	draftVirtualDirectiveValid.value = false
	}
	},
	{ immediate: true }
	)

	exports.getNewVirtualDirective = () => ({
	name: 'newDirective',
	valType: 'generic',
	value: 'foobar'
	})

	return exports
	}
	}
	diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
	index c66b3af48d..65c5e2f124 100644
	--- a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
	+++ b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
	@@ -1,83 +1,83 @@
	<script src="./virtual_directives_tab.js"></script>

	<template>
	<div class="setting-item list-editor variables-editor">
	<label
	class="list-select-label"
	for="variables-selector"
	>
	{{ $t('settings.style.themes3.editor.variables.label') }}
	{{ ' ' }}
	</label>
	<Select
	id="variables-selector"
	v-model="selectedVirtualDirectiveId"
	class="list-select"
	size="20"
	>
	<option
	v-for="(p, index) in modelValue"
	:key="p.name"
	:value="index"
	>
	{{ p.name }}
	</option>
	</Select>
	<SelectMotion
	class="list-select-movement"
	:model-value="modelValue"
	@update:modelValue="e => emit('update:modelValue', e)"
	:selected-id="selectedVirtualDirectiveId"
	@update:selectedId="e => selectedVirtualDirectiveId = e"
	:get-add-value="getNewVirtualDirective"
	/>
	<div class="list-edit-area">
	<div class="variable-selector">
	<label
	class="variable-name-label"
	for="variables-selector"
	>
	{{ $t('settings.style.themes3.editor.variables.name_label') }}
	{{ ' ' }}
	</label>
	<input
	class="input"
	v-model="selectedVirtualDirective.name"
	>
	<label
	class="variable-type-label"
	for="variables-selector"
	>
	{{ $t('settings.style.themes3.editor.variables.type_label') }}
	{{ ' ' }}
	</label>
	<Select
	v-model="selectedVirtualDirectiveValType"
	>
	<option value='shadow'>
	{{ $t('settings.style.themes3.editor.variables.type_shadow') }}
	</option>
	<option value='color'>
	{{ $t('settings.style.themes3.editor.variables.type_color') }}
	</option>
	<option value='generic'>
	{{ $t('settings.style.themes3.editor.variables.type_generic') }}
	</option>
	</Select>
	</div>
	<ShadowControl
	v-if="selectedVirtualDirectiveValType === 'shadow'"
	v-model="draftVirtualDirective"
	- :static-vars="selectedPalette"
	+ :static-vars="staticVars"
	:compact="true"
	/>
	<ColorInput
	v-if="selectedVirtualDirectiveValType === 'color'"
	v-model="draftVirtualDirective"
	:fallback="computeColor(draftVirtualDirective)"
	:label="$t('settings.style.themes3.editor.variables.virtual_color')"
	:hide-optional-checkbox="true"
	/>
	</div>
	</div>
	</template>

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 29, 4:50 PM (1 d, 17 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1737197
Default Alt Text: (45 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions