From 144d426864402606029157d8d0ac02c0e7e1912a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 24 Sep 2024 03:07:27 +0300 Subject: [PATCH 001/149] some initial work on theme editor --- .../settings_modal/helpers/setting.js | 24 ++- .../settings_modal/helpers/string_setting.vue | 1 + .../settings_modal/settings_modal.scss | 8 +- .../settings_modal_user_content.js | 4 + .../settings_modal_user_content.vue | 7 + .../tabs/style_tab/style_tab.js | 40 +++++ .../tabs/style_tab/style_tab.scss | 59 ++++++++ .../tabs/style_tab/style_tab.vue | 138 ++++++++++++++++++ src/i18n/en.json | 10 ++ 9 files changed, 283 insertions(+), 8 deletions(-) create mode 100644 src/components/settings_modal/tabs/style_tab/style_tab.js create mode 100644 src/components/settings_modal/tabs/style_tab/style_tab.scss create mode 100644 src/components/settings_modal/tabs/style_tab/style_tab.vue diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js index 3b3e6268..6c5dd76e 100644 --- a/src/components/settings_modal/helpers/setting.js +++ b/src/components/settings_modal/helpers/setting.js @@ -10,9 +10,13 @@ export default { ProfileSettingIndicator }, props: { + modelValue: { + type: String, + default: null + }, path: { type: [String, Array], - required: true + required: false }, disabled: { type: Boolean, @@ -68,7 +72,7 @@ export default { } }, created () { - if (this.realDraftMode && this.realSource !== 'admin') { + if (this.realDraftMode && (this.realSource !== 'admin' || this.path == null)) { this.draft = this.state } }, @@ -76,14 +80,14 @@ export default { draft: { // TODO allow passing shared draft object? get () { - if (this.realSource === 'admin') { + if (this.realSource === 'admin' || this.path == null) { return get(this.$store.state.adminSettings.draft, this.canonPath) } else { return this.localDraft } }, set (value) { - if (this.realSource === 'admin') { + if (this.realSource === 'admin' || this.path == null) { this.$store.commit('updateAdminDraft', { path: this.canonPath, value }) } else { this.localDraft = value @@ -91,6 +95,9 @@ export default { } }, state () { + if (this.path == null) { + return this.modelValue + } const value = get(this.configSource, this.canonPath) if (value === undefined) { return this.defaultState @@ -145,6 +152,9 @@ export default { return this.backendDescription?.suggestions }, shouldBeDisabled () { + if (this.path == null) { + return this.disabled + } const parentValue = this.parentPath !== undefined ? get(this.configSource, this.parentPath) : null return this.disabled || (parentValue !== null ? (this.parentInvert ? parentValue : !parentValue) : false) }, @@ -159,6 +169,9 @@ export default { } }, configSink () { + if (this.path == null) { + return (k, v) => this.$emit('modelValue:update', v) + } switch (this.realSource) { case 'profile': return (k, v) => this.$store.dispatch('setProfileOption', { name: k, value: v }) @@ -184,6 +197,7 @@ export default { return this.realSource === 'profile' }, isChanged () { + if (this.path == null) return false switch (this.realSource) { case 'profile': case 'admin': @@ -193,9 +207,11 @@ export default { } }, canonPath () { + if (this.path == null) return null return Array.isArray(this.path) ? this.path : this.path.split('.') }, isDirty () { + if (this.path == null) return false if (this.realSource === 'admin' && this.canonPath.length > 3) { return false // should not show draft buttons for "grouped" values } else { diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue index 7b30d1b9..fbea0b50 100644 --- a/src/components/settings_modal/helpers/string_setting.vue +++ b/src/components/settings_modal/helpers/string_setting.vue @@ -15,6 +15,7 @@ + {{ ' ' }} +
+ +
+import { ref, computed } from 'vue' + +import Select from 'src/components/select/select.vue' +import Checkbox from 'src/components/checkbox/checkbox.vue' +import StringSetting from '../../helpers/string_setting.vue' +// import Preview from '../theme_tab/theme_preview.vue' + +import { library } from '@fortawesome/fontawesome-svg-core' +import { faFloppyDisk, faFolderOpen, faFile } from '@fortawesome/free-solid-svg-icons' + +library.add( + faFile, + faFloppyDisk, + faFolderOpen +) + +const name = ref('') +const author = ref('') +const license = ref('') +const website = ref('') + +// Getting existing components +const componentsContext = require.context('src', true, /\.style.js(on)?$/) +const componentKeys = componentsContext.keys() + +const componentsMap = new Map( + componentKeys + .map( + key => [key, componentsContext(key).default] + ) +) +// const componentValues = componentsMap.values() + +// Initializing selected component and its computed descendants +const selectedComponentKey = ref(componentKeys[0]) +const selectedComponentValue = computed(() => componentsMap.get(selectedComponentKey.value)) + +// const selectedComponentName = computed(() => selectedComponent.value.name) +const selectedComponentVariants = computed(() => { + return new Set([...(Object.keys(selectedComponentValue.value.variants || {})), 'normal']) +}) +const selectedComponentStates = computed(() => { + return new Set([...(Object.keys(selectedComponentValue.value.states || {})), 'normal']) +}) + + + + + + diff --git a/src/i18n/en.json b/src/i18n/en.json index 423ce65e..1321e556 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -753,6 +753,16 @@ "update_preview": "Update preview", "themes3": { "define": "Override", + "editor": { + "title": "Style", + "new_style": "New", + "load_style": "Open", + "save_style": "Save", + "style_name": "Stylesheet name", + "style_author": "Made by", + "style_license": "License", + "style_website": "Website" + }, "hacks": { "underlay_overrides": "Change underlay", "underlay_override_mode_none": "Theme default", From e1d3ebc943f12bd7928878982405307c29d1b32b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 24 Sep 2024 21:32:13 +0300 Subject: [PATCH 002/149] some initial drafts of component editor --- .../component_preview/component_preview.vue | 9 +- .../tabs/style_tab/style_tab.js | 217 +++++++++++++++--- .../tabs/style_tab/style_tab.scss | 53 ++++- .../tabs/style_tab/style_tab.vue | 124 +++++----- src/i18n/en.json | 38 ++- .../theme_data/theme_data_3.service.js | 26 ++- 6 files changed, 352 insertions(+), 115 deletions(-) diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue index f29284c8..f8f51620 100644 --- a/src/components/component_preview/component_preview.vue +++ b/src/components/component_preview/component_preview.vue @@ -33,8 +33,11 @@ >
+ > + TEST +
@@ -163,6 +165,9 @@ } .preview-block { + display: flex; + justify-content: center; + align-items: center; width: 33%; height: 33%; border-radius: var(--roundness); 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 a2e6f7db..54920805 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.js +++ b/src/components/settings_modal/tabs/style_tab/style_tab.js @@ -1,40 +1,183 @@ -// import { -// rgb2hex, -// hex2rgb, -// getContrastRatioLayers, -// relativeLuminance -// } from 'src/services/color_convert/color_convert.js' - -// import { -// getThemes -// } from 'src/services/style_setter/style_setter.js' - -// import { -// newImporter, -// newExporter -// } from 'src/services/export_import/export_import.js' - -// import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js' -// import { init } from 'src/services/theme_data/theme_data_3.service.js' -// import { -// getCssRules, -// getScopedVersion -// } from 'src/services/theme_data/css_utils.js' - -// import ColorInput from 'src/components/color_input/color_input.vue' -// import RangeInput from 'src/components/range_input/range_input.vue' -// import OpacityInput from 'src/components/opacity_input/opacity_input.vue' -// import ShadowControl from 'src/components/shadow_control/shadow_control.vue' -// import FontControl from 'src/components/font_control/font_control.vue' -// import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue' -// import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' -// import Checkbox from 'src/components/checkbox/checkbox.vue' -/* eslint-disable no-unused-vars */ +import { ref, reactive, computed, watch } from 'vue' import Select from 'src/components/select/select.vue' -import Preview from './theme_preview.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 { defineOptions, ref } from 'vue' -const componentsContext = require.context('src', true, /\.style.js(on)?$/) -const componentNames = componentsContext.keys() -const componentName = ref(componentNames[0]) +import { init } from 'src/services/theme_data/theme_data_3.service.js' +import { getCssRules } from 'src/services/theme_data/css_utils.js' + +import { library } from '@fortawesome/fontawesome-svg-core' +import { faFloppyDisk, faFolderOpen, faFile } from '@fortawesome/free-solid-svg-icons' + +library.add( + faFile, + faFloppyDisk, + faFolderOpen +) + +export default { + components: { + Select, + Checkbox, + StringSetting, + ComponentPreview + }, + setup () { + const name = ref('') + const author = ref('') + const license = ref('') + const website = ref('') + + const palette = { + // These are here just to establish order, + // themes should override those + bg: '#121a24', + fg: '#182230', + text: '#b9b9ba', + link: '#d8a070', + accent: '#d8a070', + cRed: '#FF0000', + cBlue: '#0095ff', + cGreen: '#0fa00f', + cOrange: '#ffa500' + } + + const getI18nPath = (componentName) => `settings.style.themes3.editor.components.${componentName}` + + 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}` + } + + // Getting existing components + const componentsContext = require.context('src', true, /\.style.js(on)?$/) + const componentKeysRaw = componentsContext.keys() + + const componentsMap = new Map( + componentKeysRaw + .map( + key => [key, componentsContext(key).default] + ).filter(([key, component]) => !component.virtual) + ) + const componentKeys = [...componentsMap.keys()] + + // const componentValues = componentsMap.values() + + // Initializing selected component and its computed descendants + const selectedComponentKey = ref(componentKeys[0]) + const selectedComponentValue = computed(() => componentsMap.get(selectedComponentKey.value)) + + const selectedComponentName = computed(() => selectedComponentValue.value.name) + const selectedComponentVariants = computed(() => { + return new Set(['normal', ...(Object.keys(selectedComponentValue.value.variants || {}))]) + }) + const selectedComponentStates = computed(() => { + return new Set([...(Object.keys(selectedComponentValue.value.states || {}).filter(x => x !== 'normal'))]) + }) + + const selectedVariant = ref('normal') + const selectedStates = reactive(new Set()) + + const updateSelectedStates = (state, v) => { + if (v) { + selectedStates.add(state) + } else { + selectedStates.delete(state) + } + } + + const simulatePseudoSelectors = css => css + .replace(selectedComponentValue.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 = [] + 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 previewCss = computed(() => { + console.log(previewRules) + const scoped = getCssRules(previewRules).map(simulatePseudoSelectors) + return scoped.join('\n') + }) + + const updateSelectedComponent = () => { + selectedVariant.value = 'normal' + selectedStates.clear() + + previewRules.splice(0, previewRules.length) + previewRules.push(...init({ + inputRuleset: [{ + component: selectedComponentName.value + }], + initialStaticVars: { + ...palette + }, + ultimateBackgroundColor: '#000000', + rootComponentName: selectedComponentName.value, + editMode: true, + debug: true + }).eager) + } + + updateSelectedComponent() + + watch( + selectedComponentName, + updateSelectedComponent + ) + + return { + name, + author, + license, + website, + componentKeys, + componentsMap, + + selectedComponentValue, + selectedComponentName, + selectedComponentKey, + selectedComponentVariants, + selectedComponentStates, + updateSelectedStates, + selectedVariant, + selectedStates, + getFriendlyNamePath, + getStatePath, + getVariantPath, + previewCss, + previewClass, + fallbackI18n (translated, fallback) { + if (translated.startsWith('settings.style.themes3')) { + return fallback + } + return translated + } + } + } +} 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 04b6d984..91c5572b 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.scss +++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss @@ -40,11 +40,37 @@ .component-editor { display: grid; - grid-template-columns: 10em, 1fr, 2fr; - grid-template-rows: auto 1fr; + grid-template-columns: 10em 2fr 3fr; + grid-template-rows: auto auto 1fr; + grid-gap: 0.5em; grid-template-areas: - "variant" "preview" "controls", - "state" "preview" "controls"; + "component-label component ." + "variant preview settings" + "state preview settings"; + + .compopnent-selector { + grid-area: component; + align-self: center; + } + + .component-selector-label { + grid-area: component-label; + align-self: center; + text-align: right; + font-weight: bold; + } + + .state-selector, + .variant-selector { + display: grid; + grid-template-rows: auto auto; + grid-auto-flow: rows; + grid-gap: 0.5em; + + > label { + font-weight: bold; + } + } .state-selector { grid-area: state; @@ -52,8 +78,23 @@ .variant-selector { grid-area: variant; - display: flex; - flex-direction: column; + } + + .state-selector-list { + display: grid; + list-style: none; + grid-template-rows: auto; + grid-gap: 0.5em; + padding: 0; + margin: 0; + } + + .preview-container { + grid-area: preview; + } + + .component-settings { + grid-area: settings; } } } 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 1a1180b7..c92c9217 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.vue +++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue @@ -1,49 +1,4 @@ - diff --git a/src/i18n/en.json b/src/i18n/en.json index d1cebb67..f97852a5 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -767,6 +767,8 @@ "states_selector": "States", "only_variant": "Component doesn't have any variants", "only_state": "Component only has default state", + "main_tab": "Main", + "shadows_tab": "Shadows", "components": { "normal": { "state": "Normal", From fb40694e8e3573bda0c11cf1e115493a4b45b79c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 26 Sep 2024 22:31:28 +0300 Subject: [PATCH 005/149] 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 @@
- - -