diff --git a/src/components/button.style.js b/src/components/button.style.js index 248da8bbd..95ef3e403 100644 --- a/src/components/button.style.js +++ b/src/components/button.style.js @@ -35,11 +35,11 @@ export default { { component: 'Root', directives: { - '--buttonDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5', - '--buttonDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5', - '--buttonDefaultShadow': 'shadow | 0 0 2 #000000', - '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)', - '--buttonPressedBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)' + '--defaultButtonHoverGlow': 'shadow | 0 0 4 --text / 0.5', + '--defaultButtonFocusGlow': 'shadow | 0 0 4 4 --link / 0.5', + '--defaultButtonShadow': 'shadow | 0 0 2 #000000', + '--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)', + '--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)' } }, { @@ -47,53 +47,53 @@ export default { // like within it directives: { background: '--fg', - shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel'], + shadow: ['--defaultButtonShadow', '--defaultButtonBevel'], roundness: 3 } }, { state: ['hover'], directives: { - shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel'] + shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel'] } }, { state: ['focused'], directives: { - shadow: ['--buttonDefaultFocusGlow', '--buttonDefaultBevel'] + shadow: ['--defaultButtonFocusGlow', '--defaultButtonBevel'] } }, { state: ['pressed'], directives: { - shadow: ['--buttonDefaultShadow', '--buttonPressedBevel'] + shadow: ['--defaultButtonShadow', '--pressedButtonBevel'] } }, { state: ['pressed', 'hover'], directives: { - shadow: ['--buttonPressedBevel', '--buttonDefaultHoverGlow'] + shadow: ['--pressedButtonBevel', '--defaultButtonHoverGlow'] } }, { state: ['toggled'], directives: { background: '--inheritedBackground,-14.2', - shadow: ['--buttonDefaultShadow', '--buttonPressedBevel'] + shadow: ['--defaultButtonShadow', '--pressedButtonBevel'] } }, { state: ['toggled', 'hover'], directives: { background: '--inheritedBackground,-14.2', - shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel'] + shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel'] } }, { state: ['disabled'], directives: { background: '$blend(--inheritedBackground 0.25 --parent)', - shadow: ['--buttonDefaultBevel'] + shadow: ['--defaultButtonBevel'] } }, { diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue index e34a6f3cb..b6ef235a5 100644 --- a/src/components/component_preview/component_preview.vue +++ b/src/components/component_preview/component_preview.vue @@ -111,8 +111,6 @@ export default { "x-num x-slide . " "options options options"; grid-gap: 0.5em; - max-width: 25em; - max-height: 25em; .header { grid-area: header; diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue index 16148262c..cebe73ee1 100644 --- a/src/components/palette_editor/palette_editor.vue +++ b/src/components/palette_editor/palette_editor.vue @@ -107,7 +107,7 @@ const updatePalette = (paletteKey, value) => { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr) auto; grid-gap: 0.5em; - align-items: baseline; + align-items: space-between; .palette-import-button { grid-column: 1 / span 2; diff --git a/src/components/select/select_motion.vue b/src/components/select/select_motion.vue index 57ffd7c33..be42b040d 100644 --- a/src/components/select/select_motion.vue +++ b/src/components/select/select_motion.vue @@ -82,7 +82,9 @@ const moveDn = () => { } const add = () => { - const newModel = [...props.modelValue, props.getAddValue()] + const newModel = [...props.modelValue] + newModel.push(props.getAddValue()) + console.log(newModel) emit('update:modelValue', newModel) emit('update:selectedId', Math.max(newModel.length - 1, 0)) 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 c75e6b6b4..fb42e193e 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.js +++ b/src/components/settings_modal/tabs/style_tab/style_tab.js @@ -17,16 +17,12 @@ import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue' import { init } from 'src/services/theme_data/theme_data_3.service.js' import { getCssRules } from 'src/services/theme_data/css_utils.js' import { serialize } from 'src/services/theme_data/iss_serializer.js' -import { parseShadow /* , deserialize */ } from 'src/services/theme_data/iss_deserializer.js' +import { 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 } from '@fortawesome/free-solid-svg-icons' @@ -60,40 +56,23 @@ export default { ContrastRatio }, setup () { - // All rules that are made by editor - const allEditedRules = reactive({}) - - // ## Meta stuff + // ### Meta stuff const name = ref('') const author = ref('') const license = ref('') const website = ref('') const metaOut = computed(() => { - return [ - '@meta {', - ` name: ${name.value};`, - ` author: ${author.value};`, - ` license: ${license.value};`, - ` website: ${website.value};`, - '}' - ].join('\n') + return `@meta { + name: ${name.value}; + author: ${author.value}; + license: ${license.value}; + website: ${website.value}; +}` }) - // ## Palette stuff + // ### 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', @@ -106,17 +85,44 @@ export default { cGreen: '#0fa00f', cOrange: '#ffa500', border: '#d8e6f9' + }, + { + name: 'dark', + bg: '#121a24', + fg: '#182230', + text: '#b9b9ba', + link: '#d8a070', + accent: '#d8a070', + cRed: '#FF0000', + cBlue: '#0095ff', + cGreen: '#0fa00f', + cOrange: '#ffa500' } ]) - const selectedPaletteId = ref(0) - const selectedPalette = computed({ + + const palettesOut = computed(() => { + console.log('WORK DAMN', palettes) + 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') + }) + + const editedPalette = ref(0) + const palette = computed({ get () { - return palettes[selectedPaletteId.value] + console.log(palettes, editedPalette.value) + return palettes[editedPalette.value] }, set (newPalette) { - palettes[selectedPaletteId.value] = newPalette + palettes[editedPalette.value] = newPalette } }) + const getNewPalette = () => ({ name: 'new palette', bg: '#121a24', @@ -130,21 +136,34 @@ export default { cOrange: '#ffa500' }) - const palettesOut = computed(() => { - return palettes.map(({ name, ...palette }) => { - const entries = Object - .entries(palette) - .map(([slot, data]) => ` ${slot}: ${data};`) - .join('\n') + // ### I18n stuff + // The paths in i18n are getting ridicously long, this effectively shortens them + const getI18nPath = (componentName) => `settings.style.themes3.editor.components.${componentName}` + // vue i18n doesn't seem to have (working) mechanic to have a fallback so we have to + // make do ourselves + const fallbackI18n = (translated, fallback) => { + if (translated.startsWith('settings.style.themes3')) { + return fallback + } + return translated + } + const getFriendlyNamePath = (componentName) => getI18nPath(componentName) + '.friendlyName' + const getVariantPath = (componentName, variant) => { + return variant === 'normal' + ? 'settings.style.themes3.editor.components.normal.variant' + : `${getI18nPath(componentName)}.variants.${variant}` + } + const getStatePath = (componentName, state) => { + return state === 'normal' + ? 'settings.style.themes3.editor.components.normal.state' + : `${getI18nPath(componentName)}.states.${state}` + } - return `@palette.${name} {\n${entries}\n}` - }).join('\n\n') - }) - - // ## Components stuff + // ### Initialization stuff // Getting existing components const componentsContext = require.context('src', true, /\.style.js(on)?$/) const componentKeysAll = componentsContext.keys() + const componentsMap = new Map( componentKeysAll .map( @@ -153,23 +172,23 @@ export default { ) const componentKeys = [...componentsMap.keys()] - // selection basis + // Initializing selected component and its computed descendants const selectedComponentKey = ref(componentsMap.keys().next().value) const selectedComponent = computed(() => componentsMap.get(selectedComponentKey.value)) const selectedComponentName = computed(() => selectedComponent.value.name) - const selectedComponentVariants = computed(() => { + + const selectedVariant = ref('normal') + const selectedComponentVariantsAll = computed(() => { return Object.keys({ normal: null, ...(selectedComponent.value.variants || {}) }) }) + + const selectedState = reactive(new Set()) const selectedComponentStatesAll = computed(() => { return Object.keys({ normal: null, ...(selectedComponent.value.states || {}) }) }) const selectedComponentStates = computed(() => { return selectedComponentStatesAll.value.filter(x => x !== 'normal') }) - - // selection - const selectedVariant = ref('normal') - const selectedState = reactive(new Set()) const updateSelectedStates = (state, v) => { if (v) { selectedState.add(state) @@ -178,6 +197,56 @@ export default { } } + // ### Preview stuff + const 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') + + const previewRules = reactive([]) + const 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 previewCss = computed(() => { + try { + const scoped = getCssRules(previewRules).map(simulatePseudoSelectors) + return scoped.join('\n') + } catch (e) { + console.error('Invalid ruleset', e) + return null + } + }) + // ### 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 @@ -228,6 +297,9 @@ export default { return root }) + // All rules that are made by editor + const allEditedRules = reactive({}) + // Checkging whether component can support some "directives" which // are actually virtual subcomponents, i.e. Text, Link etc const componentHas = (subComponent) => { @@ -259,7 +331,7 @@ export default { } }) - const getEditedElement = (component, directive, postProcess = x => x) => computed({ + const getEditedElement = (component, directive) => computed({ get () { let usedRule const fallback = editorFriendlyFallbackStructure.value @@ -271,11 +343,7 @@ export default { usedRule = get(fallback, path) } - if (directive === 'shadow') { - console.log('EDITED', usedRule) - console.log('PP', postProcess(usedRule)) - } - return postProcess(usedRule) + return usedRule }, set (value) { set(allEditedRules, getPath(component, directive), value) @@ -284,71 +352,21 @@ export default { // All the editable stuff for the component const editedBackgroundColor = getEditedElement(null, 'background') - const isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF') const editedOpacity = getEditedElement(null, 'opacity') - const isOpacityPresent = isElementPresent(null, 'opacity', 1) const editedTextColor = getEditedElement('Text', 'textColor') - const isTextColorPresent = isElementPresent('Text', 'textColor', '#000000') const editedTextAuto = getEditedElement('Text', 'textAuto') - const isTextAutoPresent = isElementPresent('Text', 'textAuto', '#000000') const editedLinkColor = getEditedElement('Link', 'textColor') - const isLinkColorPresent = isElementPresent('Link', 'textColor', '#000080') const editedIconColor = getEditedElement('Icon', 'textColor') - const isIconColorPresent = isElementPresent('Icon', 'textColor', '#909090') - // TODO this is VERY primitive right now, need to make it - // support variables, fallbacks etc. - 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 - 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) => { - console.log('NORMALIZE') - return shadows?.map(shadow => { - if (typeof shadow === 'object') { - return shadow - } - if (typeof shadow === 'string') { - return parseShadow(shadow) - } - return null - }) - } + const editedShadow = getEditedElement(null, 'shadow') // Shadow is partially edited outside the ShadowControl // for better space utilization - const editedShadow = getEditedElement(null, 'shadow', normalizeShadows) const editedSubShadowId = ref(null) const editedSubShadow = computed(() => { if (editedShadow.value == null || editedSubShadowId.value == null) return null return editedShadow.value[editedSubShadowId.value] }) - const isShadowPresent = isElementPresent(null, 'shadow', []) - const onSubShadow = (id) => { - if (id != null) { - editedSubShadowId.value = id - } else { - editedSubShadow.value = null - } - } + const updateSubShadow = (axis, value) => { if (!editedSubShadow.value || editedSubShadowId.value == null) return const newEditedShadow = [...editedShadow.value] @@ -360,58 +378,26 @@ export default { editedShadow.value = newEditedShadow } - const isShadowTabOpen = ref(false) - const onTabSwitch = (tab) => { - isShadowTabOpen.value = tab === 'shadow' + + const onSubShadow = (id) => { + if (id != null) { + editedSubShadowId.value = id + } else { + editedSubShadow.value = null + } } - // component preview - const 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') - const 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([]) - const previewCss = computed(() => { - try { - const scoped = getCssRules(previewRules).map(simulatePseudoSelectors) - return scoped.join('\n') - } catch (e) { - console.error('Invalid ruleset', e) - return null - } - }) + // 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 isOpacityPresent = isElementPresent(null, 'opacity', 1) + const isTextColorPresent = isElementPresent('Text', 'textColor', '#000000') + const isTextAutoPresent = isElementPresent('Text', 'textAuto', '#000000') + const isLinkColorPresent = isElementPresent('Link', 'textColor', '#000080') + const isIconColorPresent = isElementPresent('Icon', 'textColor', '#909090') + const isShadowPresent = isElementPresent(null, 'shadow', []) + const editorFriendlyToOriginal = computed(() => { const resultRules = [] @@ -453,11 +439,8 @@ export default { 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 { name, ...paletteData } = palette.value + console.log('WORK', paletteData) const rules = init({ inputRuleset: editorFriendlyToOriginal.value, initialStaticVars: { @@ -482,7 +465,6 @@ export default { } updateSelectedComponent() - // export and import watch( allEditedRules, updatePreview @@ -494,7 +476,7 @@ export default { ) watch( - selectedPalette, + editedPalette, updatePreview ) @@ -503,139 +485,97 @@ export default { updateSelectedComponent ) - // ## Variables - 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('|') + // TODO this is VERY primitive right now, need to make it + // support variables, fallbacks etc. + const getContrast = (bg, text) => { + try { + const bgRgb = hex2rgb(bg) + const textRgb = hex2rgb(text) + + const ratio = getContrastRatio(bgRgb, textRgb) return { - name: name.substring(2), - valType: valType.trim(), - value: valVal.trim() - } - }) - const virtualDirectives = reactive(allCustomVirtualDirectives) - const selectedVirtualDirectiveId = ref(0) - const selectedVirtualDirective = computed(() => virtualDirectives[selectedVirtualDirectiveId.value]) - const selectedVirtualDirectiveParsed = computed({ - get () { - switch (selectedVirtualDirective.value.valType) { - case 'shadow': { - const directiveValue = selectedVirtualDirective.value.value - if (Array.isArray(directiveValue)) { - return normalizeShadows(directiveValue) - } else { - const splitShadow = directiveValue.split(/,/g).map(x => x.trim()) - return normalizeShadows(splitShadow) - } - } - default: - return null + // TODO this ideally should be part of + 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 getNewDirective = () => ({ - name: 'newDirective', - valType: 'generic', - value: 'foobar' - }) + const isShadowTabOpen = ref(false) + const onTabSwitch = (tab) => { + isShadowTabOpen.value = tab === 'shadow' + } - // ## Export and Import - const styleExporter = newExporter({ - filename: name.value || 'pleroma_theme', - mime: 'text/plain', - extension: 'piss', - getExportedObject: () => exportStyleData.value - }) - const exportStyleData = computed(() => { - return [ + const exportStyle = () => { + console.log('ORIG', toValue(editorFriendlyToOriginal.value)) + console.log('SERI', serialize(editorFriendlyToOriginal.value)) + + const result = [ metaOut.value, palettesOut.value, serialize(editorFriendlyToOriginal.value) ].join('\n\n') - }) - const exportStyle = () => { - styleExporter.exportData() + + console.log('RESULT', result) + console.log('DESERI', deserialize(result)) } return { - // ## Meta name, author, license, website, - - // ## Palette + palette, palettes, - selectedPalette, - selectedPaletteId, + editedPalette, getNewPalette, - - // ## Components componentKeys, componentsMap, - - // selection basis selectedComponent, selectedComponentName, selectedComponentKey, - selectedComponentVariants, + selectedComponentVariantsAll, selectedComponentStates, - - // selection selectedVariant, selectedState, updateSelectedStates, - - // component directives - componentHas, - - // component colors editedBackgroundColor, - isBackgroundColorPresent, editedOpacity, - isOpacityPresent, editedTextColor, - isTextColorPresent, editedTextAuto, - isTextAutoPresent, editedLinkColor, - isLinkColorPresent, editedIconColor, - isIconColorPresent, - getContrast, - - // component shadow editedShadow, editedSubShadow, - isShadowPresent, onSubShadow, updateSubShadow, - isShadowTabOpen, - onTabSwitch, - - // component preview - editorHintStyle, + getContrast, + isBackgroundColorPresent, + isOpacityPresent, + isTextColorPresent, + isTextAutoPresent, + isLinkColorPresent, + isIconColorPresent, + isShadowPresent, previewCss, previewClass, - - // ## Variables - virtualDirectives, - selectedVirtualDirective, - selectedVirtualDirectiveId, - selectedVirtualDirectiveParsed, - getNewDirective, - - // ## Export and Import + editorHintStyle, + getFriendlyNamePath, + fallbackI18n, + getVariantPath, + getStatePath, + componentHas, + isShadowTabOpen, + onTabSwitch, exportStyle } } diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss index 51d4a1a75..f557b7d59 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.scss +++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss @@ -87,72 +87,48 @@ } } - .list-editor { + .palette-editor { display: grid; grid-template-areas: "label editor" "selector editor" - "movement editor"; - grid-template-columns: 10em 1fr; + "motion editor"; + grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; grid-gap: 0.5em; - .list-edit-area { + .palette-editor-edit { grid-area: editor; } - .list-select { - grid-area: selector; - margin: 0; - + .palette-selector { &-label { font-weight: bold; grid-area: label; margin: 0; - align-self: baseline; } + } + + .palette-list { + grid-area: selector; + margin: 0; &-movement { - grid-area: movement; + grid-area: motion; margin: 0; } } } - .palettes-editor { - .list-edit-area { - align-self: baseline; - } - } - - .variables-editor { - .variable-selector { - display: grid; - grid-template-columns: auto 1fr auto 10em; - grid-template-rows: subgrid; - align-items: baseline; - grid-gap: 0 0.5em; - } - - .list-edit-area { - display: grid; - grid-template-rows: subgrid; - } - - .shadow-control { - grid-row: 2 / span 2; - } - } - .component-editor { display: grid; grid-template-columns: 6fr 3fr 4fr; grid-template-rows: auto auto 1fr; grid-gap: 0.5em; grid-template-areas: - "component component variant" - "state state state" - "preview settings settings"; + "component component variant" + "state state state" + "preview settings settings"; .component-selector { grid-area: component; 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 1ccd7ab8b..704cdc1bc 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.vue +++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue @@ -4,7 +4,6 @@ diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js index 03797fc53..fc227b5be 100644 --- a/src/components/shadow_control/shadow_control.js +++ b/src/components/shadow_control/shadow_control.js @@ -41,17 +41,14 @@ const toModel = (input) => { export default { props: [ - 'modelValue', - 'fallback', - 'separateInset', - 'noPreview', - 'disabled', - 'compact' + 'modelValue', 'fallback', 'separateInset', 'noPreview', 'disabled' ], emits: ['update:modelValue', 'subShadowSelected'], data () { return { - selectedId: 0 + selectedId: 0, + // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason) + cValue: (this.modelValue ?? this.fallback ?? []).map(toModel) } }, components: { @@ -64,14 +61,6 @@ export default { ComponentPreview }, computed: { - cValue: { - get () { - return (this.modelValue ?? this.fallback ?? []).map(toModel) - }, - set (newVal) { - this.$emit('update:modelValue', newVal) - } - }, selectedType: { get () { return typeof this.selected @@ -126,6 +115,9 @@ export default { } }, watch: { + modelValue (value) { + if (!value) this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel) + }, selected (value) { this.$emit('subShadowSelected', this.selectedId) } diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss index 06381b1b3..de4159c11 100644 --- a/src/components/shadow_control/shadow_control.scss +++ b/src/components/shadow_control/shadow_control.scss @@ -1,31 +1,12 @@ -.ShadowControl { - display: grid; - grid-template-columns: 10em 1fr 1fr; - grid-template-rows: 1fr; - grid-template-areas: "selector preview tweak"; - grid-gap: 0.5em; +.settings-modal .settings-modal-panel .shadow-control { + display: flex; + flex-wrap: wrap; justify-content: stretch; + grid-gap: 0.25em; margin-bottom: 1em; width: 100%; - &.-compact { - grid-template-columns: 10em 1fr; - grid-template-rows: auto auto; - grid-template-areas: - "selector preview" - "tweak tweak"; - - &.-no-preview { - grid-template-columns: 1fr; - grid-template-rows: 10em 1fr; - grid-template-areas: - "selector" - "tweak"; - } - } - .shadow-switcher { - grid-area: selector; order: 1; flex: 1 0 6em; min-width: 6em; @@ -39,7 +20,6 @@ } .shadow-tweak { - grid-area: tweak; order: 3; flex: 2 0 10em; min-width: 10em; @@ -85,10 +65,6 @@ } &.-no-preview { - grid-template-columns: 10em 1fr; - grid-template-rows: 1fr; - grid-template-areas: "selector tweak"; - .shadow-tweak { order: 0; flex: 2 0 8em; @@ -111,11 +87,11 @@ } .shadow-preview { - grid-area: preview; + order: 2; + flex: 3 3 15em; min-width: 10em; margin-left: 0.125em; align-self: start; - justify-self: center; } } diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index 4f0906c70..29adfff4a 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -1,7 +1,7 @@