commit: e7eb1059c3da6b24c97af46bc303a7fb76e314df parent e1d3ebc943f12bd7928878982405307c29d1b32b Author: Henry Jameson <me@hjkos.com> Date: Wed, 25 Sep 2024 00:46:58 +0300 better display and also temporary fallback for lowerLevelBackgroundDiffstat:
9 files changed, 50 insertions(+), 10 deletions(-)diff --git a/src/components/button.style.js b/src/components/button.style.js@@ -22,6 +22,10 @@ export default { // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants. // This (currently) is further multipled by number of places where component can exist. }, + editor: { + aspect: '6:1', + border: 0 + }, // This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever). validInnerComponents: [ 'Text',diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js@@ -1,6 +1,7 @@ export default { name: 'ButtonUnstyled', selector: '.button-unstyled', + notEditable: true, states: { toggled: '.toggled', disabled: ':disabled',diff --git a/src/components/modal/modals.style.js b/src/components/modal/modals.style.js@@ -2,6 +2,7 @@ export default { name: 'Modals', selector: '.modal-view', lazy: true, + notEditable: true, validInnerComponents: [ 'Panel' ],diff --git a/src/components/scrollbar.style.js b/src/components/scrollbar.style.js@@ -1,6 +1,7 @@ export default { name: 'Scrollbar', selector: '::-webkit-scrollbar', + notEditable: true, // for now defaultRules: [ { directives: {diff --git a/src/components/scrollbar_element.style.js b/src/components/scrollbar_element.style.js@@ -31,6 +31,7 @@ const hoverGlow = { export default { name: 'ScrollbarElement', selector: '::-webkit-scrollbar-button', + notEditable: true, // for now states: { pressed: ':active', hover: ':hover:not(:disabled)',diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js@@ -67,7 +67,7 @@ export default { componentKeysRaw .map( key => [key, componentsContext(key).default] - ).filter(([key, component]) => !component.virtual) + ).filter(([key, component]) => !component.virtual && !component.notEditable) ) const componentKeys = [...componentsMap.keys()] @@ -108,20 +108,37 @@ export default { const previewRules = reactive([]) const previewClass = computed(() => { const selectors = [] - selectors.push(selectedComponentValue.value.variants[selectedVariant.value]) + if (!!selectedComponentValue.value.variants?.normal || selectedVariant.value !== 'normal') { + selectors.push(selectedComponentValue.value.variants[selectedVariant.value]) + } if (selectedStates.size > 0) { selectedStates.forEach(state => { const original = selectedComponentValue.value.states[state] selectors.push(simulatePseudoSelectors(original)) }) } - console.log(selectors) return selectors.map(x => x.substring(1)).join('') }) + const editorHintStyle = computed(() => { + const editorHint = selectedComponentValue.value.editor + const styles = [] + if (editorHint && Object.keys(editorHint).length > 0) { + console.log('EH', editorHint) + if (editorHint.aspect != null) { + styles.push(`aspect-ratio: ${editorHint.aspect} !important;`) + } + if (editorHint.border != null) { + styles.push(`border-width: ${editorHint.border}px !important;`) + } + } + console.log('EH', styles) + return styles.join('; ') + }) + const previewCss = computed(() => { - console.log(previewRules) - const scoped = getCssRules(previewRules).map(simulatePseudoSelectors) + const scoped = getCssRules(previewRules) + .map(simulatePseudoSelectors) return scoped.join('\n') }) @@ -170,6 +187,7 @@ export default { getFriendlyNamePath, getStatePath, getVariantPath, + editorHintStyle, previewCss, previewClass, fallbackI18n (translated, fallback) {diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue@@ -132,6 +132,7 @@ <ComponentPreview class="component-preview" :previewClass="previewClass" + :previewStyle="editorHintStyle" @update:shadow="({ axis, value }) => updateProperty(axis, value)" /> </div>diff --git a/src/i18n/en.json b/src/i18n/en.json@@ -769,8 +769,16 @@ "only_state": "Component only has default state", "components": { "normal": { - "normal": "Normal state", - "variant": "Default variant" + "state": "Normal", + "variant": "Default" + }, + "Alert": { + "friendlyName": "Alert", + "variants": { + "error": "Error", + "warning": "Warning", + "success": "Success" + } }, "Button": { "friendlyName": "Button",diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js@@ -231,6 +231,7 @@ export const init = ({ .map(({ data }) => data) const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name)) + const nonEditableComponents = new Set(Object.values(components).filter(c => c.notEditable).map(c => c.name)) const processCombination = (combination) => { const selector = ruleToSelector(combination, true) @@ -240,7 +241,11 @@ export const init = ({ const soloSelector = selector.split(/ /g).slice(-1)[0] const lowerLevelSelector = parentSelector - const lowerLevelBackground = computed[lowerLevelSelector]?.background + let lowerLevelBackground = computed[lowerLevelSelector]?.background + if (editMode && !lowerLevelBackground) { + // FIXME hack for editor until it supports handling component backgrounds + lowerLevelBackground = '#00FFFF' + } const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw @@ -448,8 +453,8 @@ export const init = ({ let validInnerComponents if (editMode) { const temp = (component.validInnerComponentsLite || component.validInnerComponents || []) - validInnerComponents = temp.filter(c => virtualComponents.has(c)) - } else if (editMode) { + validInnerComponents = temp.filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c)) + } else if (liteMode) { validInnerComponents = (component.validInnerComponentsLite || component.validInnerComponents || []) } else { validInnerComponents = component.validInnerComponents || []