From fb40694e8e3573bda0c11cf1e115493a4b45b79c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 26 Sep 2024 22:31:28 +0300 Subject: [PATCH] basic colors / settings present --- src/components/alert.style.js | 4 + src/components/button.style.js | 3 +- .../component_preview/component_preview.vue | 13 +- src/components/root.style.js | 1 + .../tabs/style_tab/style_tab.js | 79 ++++++++- .../tabs/style_tab/style_tab.scss | 63 +++++--- .../tabs/style_tab/style_tab.vue | 152 +++++++++++++----- .../tabs/theme_tab/theme_tab.scss | 8 +- .../shadow_control/shadow_control.vue | 6 +- src/i18n/en.json | 7 +- 10 files changed, 256 insertions(+), 80 deletions(-) diff --git a/src/components/alert.style.js b/src/components/alert.style.js index abbeb5ba..86851476 100644 --- a/src/components/alert.style.js +++ b/src/components/alert.style.js @@ -14,6 +14,10 @@ export default { warning: '.warning', success: '.success' }, + editor: { + border: 1, + aspect: '3 / 1' + }, defaultRules: [ { directives: { diff --git a/src/components/button.style.js b/src/components/button.style.js index ab519c73..434189f3 100644 --- a/src/components/button.style.js +++ b/src/components/button.style.js @@ -23,8 +23,7 @@ export default { // This (currently) is further multipled by number of places where component can exist. }, editor: { - aspect: '6:1', - border: 0 + aspect: '2 / 1' }, // This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever). validInnerComponents: [ diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue index ea2a437a..e470d76c 100644 --- a/src/components/component_preview/component_preview.vue +++ b/src/components/component_preview/component_preview.vue @@ -168,12 +168,13 @@ display: flex; justify-content: center; align-items: center; - width: 33%; - height: 33%; - border-radius: var(--roundness); - background: var(--background); - box-shadow: var(--shadow); - border: 1px solid var(--border); + min-width: 33%; + min-height: 33%; + max-width: 80%; + max-height: 80%; + border-width: 0; + border-style: solid; + border-color: var(--border); } } } diff --git a/src/components/root.style.js b/src/components/root.style.js index 4bd735aa..d4accc17 100644 --- a/src/components/root.style.js +++ b/src/components/root.style.js @@ -1,6 +1,7 @@ export default { name: 'Root', selector: ':root', + notEditable: true, validInnerComponents: [ 'Underlay', 'Modals', 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 1f4ff190..5649feaa 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.js +++ b/src/components/settings_modal/tabs/style_tab/style_tab.js @@ -1,11 +1,15 @@ import { ref, reactive, computed, watch } from 'vue' +import { get } from 'lodash' import Select from 'src/components/select/select.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 OpacityInput from 'src/components/opacity_input/opacity_input.vue' import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' +import Popover from 'src/components/popover/popover.vue' import { init } from 'src/services/theme_data/theme_data_3.service.js' import { getCssRules } from 'src/services/theme_data/css_utils.js' @@ -25,10 +29,13 @@ export default { components: { Select, Checkbox, + Popover, StringSetting, ComponentPreview, TabSwitcher, - ShadowControl + ShadowControl, + ColorInput, + OpacityInput }, setup () { // Meta stuff @@ -168,6 +175,60 @@ export default { return selectedComponentRulesObject.value[component]?.[variant]?.[states] }) + const editedSubrulesFallback = computed(() => { + const parentComponent = selectedComponentName.value + + const subrules = {} + selectedComponentRulesList.forEach(sr => { + console.log('SR', toValue(sr)) + if (!sr.parent) return + if (sr.parent.component === parentComponent) { + const component = sr.component + const { variant = 'normal', state = [] } = sr + + subrules[component] = {} || subrules[component] + subrules[component][variant] = {} || subrules[component][variant] + subrules[component][variant][state.join(':')] = sr + } + }) + + return subrules + }) + + const componentHas = (subComponent) => { + return !!selectedComponent.value.validInnerComponents?.find(x => x === subComponent) + } + + const editedTextColor = computed(() => get( + editedSubrulesFallback.value, + 'Text.normal.normal.directives.textColor', + null + )) + + const editedLinkColor = computed(() => get( + editedSubrulesFallback.value, + 'Link.normal.normal.directives.linkColor', + null + )) + + const editedIconColor = computed(() => get( + editedSubrulesFallback.value, + 'Icon.normal.normal.directives.iconColor', + null + )) + + const editedBackground = computed(() => get( + editedRuleFallback.value, + 'directives.background', + null + )) + + const editedOpacity = computed(() => get( + editedSubrulesFallback.value, + 'Link.normal.normal.directives.linkColor', + null + )) + const editedShadow = computed(() => { return editedRuleFallback.value?.directives.shadow }) @@ -189,8 +250,6 @@ export default { selectedComponentRulesList.splice(0, selectedComponentRulesList.length) selectedComponentRulesList.push(...processedRulesList) - console.log('FALLBACK', toValue(editedRuleFallback.value)) - previewRules.splice(0, previewRules.length) previewRules.push(...init({ inputRuleset: [{ @@ -213,6 +272,11 @@ export default { updateSelectedComponent ) + const isShadowTabOpen = ref(false) + const onTabSwitch = (tab) => { + isShadowTabOpen.value = tab === 'shadow' + } + return { name, author, @@ -236,6 +300,12 @@ export default { } }, editedRuleFallback, + editedSubrulesFallback, + editedBackground, + editedOpacity, + editedTextColor, + editedLinkColor, + editedIconColor, editedShadow, previewCss, previewClass, @@ -243,6 +313,9 @@ export default { getFriendlyNamePath, getVariantPath, getStatePath, + componentHas, + isShadowTabOpen, + onTabSwitch, fallbackI18n (translated, fallback) { if (translated.startsWith('settings.style.themes3')) { return fallback 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 87e12337..250bf8c1 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.scss +++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss @@ -6,8 +6,8 @@ margin-bottom: 0.5em; .label { - margin-right: 1em; - flex: 1 1 10em; + margin-right: 0.5em; + flex: 1 1 0; line-height: 2; } @@ -26,14 +26,18 @@ flex: 0; &[type="number"] { - min-width: 5em; + min-width: 9em; + + &.-small { + min-width: 5em; + } } &[type="range"] { flex: 1; - min-width: 2em; + min-width: 9em; align-self: center; - margin: 0 0.5em; + margin: 0 0.25em; } &[type="checkbox"] + i { @@ -84,42 +88,38 @@ .component-editor { display: grid; - grid-template-columns: 10em 2fr 3fr; + grid-template-columns: 4fr 3fr 5fr; grid-template-rows: auto auto 1fr; grid-gap: 0.5em; grid-template-areas: - "component-label component ." - "variant preview settings" - "state preview settings"; + "component component variant" + "state state state" + "preview settings settings"; - .compopnent-selector { + .component-selector { grid-area: component; align-self: center; } - .component-selector-label { - grid-area: component-label; - align-self: center; - text-align: right; - font-weight: bold; - } - + .component-selector, .state-selector, .variant-selector { display: grid; - grid-template-rows: auto auto; - grid-auto-flow: rows; + grid-template-columns: 1fr minmax(1fr, 10em); + grid-template-rows: auto; + grid-auto-flow: column; grid-gap: 0.5em; + align-items: baseline; - > label { + > label:not(.Select) { font-weight: bold; + justify-self: right; } } .state-selector { grid-area: state; - align-content: flex-start; - align-items: flex-start; + grid-template-columns: minmax(min-content, 7em) 1fr; } .variant-selector { @@ -129,13 +129,19 @@ .state-selector-list { display: grid; list-style: none; - grid-template-rows: auto; + grid-auto-flow: dense; + grid-template-columns: repeat(5, minmax(min-content, 1fr)); + grid-auto-rows: 1fr; grid-gap: 0.5em; padding: 0; margin: 0; } .preview-container { + --border: none; + --shadow: none; + --roundness: none; + grid-area: preview; } @@ -144,10 +150,21 @@ } .editor-tab { + display: grid; + grid-template-columns: 1fr 2em; + grid-column-gap: 0.5em; + align-items: center; + grid-auto-rows: min-content; + grid-auto-flow: dense; border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0.5em; } + + .shadow-tab { + grid-template-columns: 1fr; + justify-items: center; + } } } 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 8e6c7fb1..199caed8 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.vue +++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue @@ -52,38 +52,32 @@
- - -