qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

comments

Browse source
This commit is contained in:
Henry Jameson 2024-09-29 19:37:53 +03:00
parent 596a1e4961
commit d5571216fe
1 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/settings_modal/tabs/style_tab/style_tab.js
View file

@ -50,13 +50,13 @@ export default {
ContrastRatio ContrastRatio
}, },
setup () { setup () {
// Meta stuff // ### Meta stuff
const name = ref('') const name = ref('')
const author = ref('') const author = ref('')
const license = ref('') const license = ref('')
const website = ref('') const website = ref('')
// Initialization stuff // ### Initialization stuff
const palette = { const palette = {
// These are here just to establish order, // These are here just to establish order,
// themes should override those // themes should override those
@ -71,10 +71,9 @@ export default {
cOrange: '#ffa500' cOrange: '#ffa500'
} }
// The paths in i18n are getting ridicously long, this effectively shortens them
const getI18nPath = (componentName) => `settings.style.themes3.editor.components.${componentName}` const getI18nPath = (componentName) => `settings.style.themes3.editor.components.${componentName}`
const getFriendlyNamePath = (componentName) => getI18nPath(componentName) + '.friendlyName' const getFriendlyNamePath = (componentName) => getI18nPath(componentName) + '.friendlyName'
const getVariantPath = (componentName, variant) => { const getVariantPath = (componentName, variant) => {
return variant === 'normal' return variant === 'normal'
? 'settings.style.themes3.editor.components.normal.variant' ? 'settings.style.themes3.editor.components.normal.variant'
@ -116,7 +115,7 @@ export default {
return selectedComponentStatesAll.value.filter(x => x !== 'normal') return selectedComponentStatesAll.value.filter(x => x !== 'normal')
}) })
// Preview stuff // ### Preview stuff
const editorHintStyle = computed(() => { const editorHintStyle = computed(() => {
const editorHint = selectedComponent.value.editor const editorHint = selectedComponent.value.editor
const styles = [] const styles = []
@ -131,6 +130,8 @@ export default {
return styles.join('; ') 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 const simulatePseudoSelectors = css => css
.replace(selectedComponent.value.selector, '.ComponentPreview .preview-block') .replace(selectedComponent.value.selector, '.ComponentPreview .preview-block')
.replace(':active', '.preview-active') .replace(':active', '.preview-active')
@ -213,16 +214,20 @@ export default {
// All rules that are made by editor // All rules that are made by editor
const allEditedRules = reactive({}) const allEditedRules = reactive({})
// Checkging whether component can support some "directives" which
// are actually virtual subcomponents, i.e. Text, Link etc
const componentHas = (subComponent) => { const componentHas = (subComponent) => {
return !!selectedComponent.value.validInnerComponents?.find(x => x === subComponent) return !!selectedComponent.value.validInnerComponents?.find(x => x === subComponent)
} }
// Path is path for lodash's get and set
const getPath = (component, directive) => { const getPath = (component, directive) => {
const pathSuffix = component ? `._children.${component}.normal.normal` : '' const pathSuffix = component ? `._children.${component}.normal.normal` : ''
const path = `${selectedComponentName.value}.${selectedVariant.value}.${normalizeStates([...selectedState])}${pathSuffix}.directives.${directive}` const path = `${selectedComponentName.value}.${selectedVariant.value}.${normalizeStates([...selectedState])}${pathSuffix}.directives.${directive}`
return path return path
} }
// Templates for directives
const isElementPresent = (component, directive, defaultValue = '') => computed({ const isElementPresent = (component, directive, defaultValue = '') => computed({
get () { get () {
return get(allEditedRules, getPath(component, directive)) != null return get(allEditedRules, getPath(component, directive)) != null
@ -296,6 +301,9 @@ export default {
} }
} }
// Whether specific directives present in the edited rule or not
// Somewhat serves double-duty as it creates/removes the directive
// when set
const isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF') const isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF')
const isOpacityPresent = isElementPresent(null, 'opacity', 1) const isOpacityPresent = isElementPresent(null, 'opacity', 1)
const isTextColorPresent = isElementPresent('Text', 'textColor', '#000000') const isTextColorPresent = isElementPresent('Text', 'textColor', '#000000')