From e7eb1059c3da6b24c97af46bc303a7fb76e314df Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 25 Sep 2024 00:46:58 +0300 Subject: [PATCH] better display and also temporary fallback for lowerLevelBackground --- src/components/button.style.js | 4 +++ src/components/button_unstyled.style.js | 1 + src/components/modal/modals.style.js | 1 + src/components/scrollbar.style.js | 1 + src/components/scrollbar_element.style.js | 1 + .../tabs/style_tab/style_tab.js | 28 +++++++++++++++---- .../tabs/style_tab/style_tab.vue | 1 + src/i18n/en.json | 12 ++++++-- .../theme_data/theme_data_3.service.js | 11 ++++++-- 9 files changed, 50 insertions(+), 10 deletions(-) diff --git a/src/components/button.style.js b/src/components/button.style.js index 1423d5c7..ab519c73 100644 --- 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 index 65b5c57b..a4f0f6f9 100644 --- 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 index c401a0cd..f53a5f90 100644 --- 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 index 94e6135d..714e9c81 100644 --- 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 index da942ab2..83bbb120 100644 --- 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 index 54920805..87867e7a 100644 --- 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 index c92c9217..93ab250d 100644 --- 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 @@ diff --git a/src/i18n/en.json b/src/i18n/en.json index 293a4409..d1cebb67 100644 --- 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 index 868d72ae..f49715f3 100644 --- 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 || []