commit: fb40694e8e3573bda0c11cf1e115493a4b45b79c
parent ef795becf6b2d6b0fa0aeeb5c1ad80c74e63e85b
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 26 Sep 2024 22:31:28 +0300
basic colors / settings present
Diffstat:
10 files changed, 256 insertions(+), 80 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -52,38 +52,32 @@
</ul>
</div>
<div class="setting-item component-editor">
- <label
- for="component-selector"
- class="component-selector-label"
- >
- {{ $t('settings.style.themes3.editor.component_selector') }}
- {{ ' ' }}
- </label>
- <Select
- v-model="selectedComponentKey"
- id="component-selector"
- class="component-selector"
- >
- <option
- v-for="key in componentKeys"
- :key="'component-' + key"
- :value="key"
- >
- {{ fallbackI18n($t(getFriendlyNamePath(componentsMap.get(key).name)), componentsMap.get(key).name) }}
- </option>
- </Select>
- <label
- for="component-selector"
- class="component-selector-label"
- >
+ <div class="component-selector">
+ <label for="component-selector">
{{ $t('settings.style.themes3.editor.component_selector') }}
+ {{ ' ' }}
</label>
- <div class="variant-selector">
+ <Select
+ v-model="selectedComponentKey"
+ id="component-selector"
+ >
+ <option
+ v-for="key in componentKeys"
+ :key="'component-' + key"
+ :value="key"
+ >
+ {{ fallbackI18n($t(getFriendlyNamePath(componentsMap.get(key).name)), componentsMap.get(key).name) }}
+ </option>
+ </Select>
+ </div>
+ <div
+ class="variant-selector"
+ v-if="selectedComponentVariantsAll.length > 1"
+ >
<label for="variant-selector">
{{ $t('settings.style.themes3.editor.variant_selector') }}
</label>
<Select
- v-if="selectedComponentVariantsAll.length > 1"
v-model="selectedVariant"
>
<option
@@ -94,16 +88,15 @@
{{ fallbackI18n($t(getVariantPath(selectedComponentName, variant)), variant) }}
</option>
</Select>
- <div v-else>
- {{ $t('settings.style.themes3.editor.only_variant') }}
- </div>
</div>
- <div class="state-selector">
- <label for="variant-selector">
+ <div
+ class="state-selector"
+ v-if="selectedComponentStates.length > 0"
+ >
+ <label>
{{ $t('settings.style.themes3.editor.states_selector') }}
</label>
<ul
- v-if="selectedComponentStates.length > 0"
class="state-selector-list"
>
<li
@@ -118,9 +111,6 @@
</Checkbox>
</li>
</ul>
- <div v-else>
- {{ $t('settings.style.themes3.editor.only_state') }}
- </div>
</div>
<div class="preview-container">
<!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
@@ -131,6 +121,8 @@
<!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
<ComponentPreview
class="component-preview"
+ showText="componentHas('Text')"
+ :shadowControl="isShadowTabOpen && editedShadow"
:previewClass="previewClass"
:previewStyle="editorHintStyle"
@update:shadow="({ axis, value }) => updateProperty(axis, value)"
@@ -144,15 +136,97 @@
<div
class="editor-tab"
:label="$t('settings.style.themes3.editor.main_tab')"
- :data-tab-name="main"
+ key="main"
>
- lol
+ <ColorInput
+ v-model="editedBackground"
+ :disabled="!editedBackgroundPresent"
+ :label="$t('settings.style.themes3.editor.background')"
+ />
+ <Popover trigger="hover">
+ <template #trigger>
+ <Checkbox v-model="editedBackgroundPresent" />
+ </template>
+ <template #content>
+ {{ $t('settings.style.themes3.editor.include_in_rule') }}
+ </template>
+ </Popover>
+ <OpacityInput
+ v-model="editedOpacity"
+ :disabled="!editedOpacityPresent"
+ :label="$t('settings.style.themes3.editor.opacity')"
+ />
+ <Popover trigger="hover">
+ <template #trigger>
+ <Checkbox v-model="editedOpacityPresent" />
+ </template>
+ <template #content>
+ {{ $t('settings.style.themes3.editor.include_in_rule') }}
+ </template>
+ </Popover>
+ <ColorInput
+ v-model="editedTextColor"
+ :label="$t('settings.style.themes3.editor.text_color')"
+ :disabled="!editedTextPresent"
+ v-if="componentHas('Text')"
+ />
+ <Popover
+ trigger="hover"
+ v-if="componentHas('Text')"
+ >
+ <template #trigger>
+ <Checkbox v-model="editedTextPresent" />
+ </template>
+ <template #content>
+ {{ $t('settings.style.themes3.editor.include_in_rule') }}
+ </template>
+ </Popover>
+ <ColorInput
+ v-model="editedLinkColor"
+ :label="$t('settings.style.themes3.editor.link_color')"
+ :disabled="!editedLinkPresent"
+ v-if="componentHas('Link')"
+ />
+ <Popover
+ trigger="hover"
+ v-if="componentHas('Link')"
+ >
+ <template #trigger>
+ <Checkbox v-model="editedLinkPresent" />
+ </template>
+ <template #content>
+ {{ $t('settings.style.themes3.editor.include_in_rule') }}
+ </template>
+ </Popover>
+ <ColorInput
+ v-model="editedIconColor"
+ :label="$t('settings.style.themes3.editor.icon_color')"
+ :disabled="!editedOpacityPresent"
+ v-if="componentHas('Icon')"
+ />
+ <Popover
+ trigger="hover"
+ v-if="componentHas('Icon')"
+ >
+ <template #trigger>
+ <Checkbox v-model="editedIconPresent" />
+ </template>
+ <template #content>
+ {{ $t('settings.style.themes3.editor.include_in_rule') }}
+ </template>
+ </Popover>
</div>
<div
- class="editor-tab"
+ class="editor-tab shadow-tab"
:label="$t('settings.style.themes3.editor.shadows_tab')"
- :data-tab-name="shadow"
+ key="shadow"
>
+ <Checkbox
+ class="style-control"
+ v-model="editedOpacityPresent"
+ >
+ {{ $t('settings.style.themes3.editor.include_in_rule') }}
+ </checkbox>
<ShadowControl
v-model="editedShadow"
:no-preview="true"
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -45,12 +45,16 @@
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;
}
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
@@ -144,7 +144,7 @@
:value="selected?.blur"
:disabled="!present"
:class="{ disabled: !present }"
- class="input input-number"
+ class="input input-number -small"
type="number"
min="0"
@input="e => updateProperty('blur', e.target.value)"
@@ -167,7 +167,7 @@
:disabled="!present || (separateInset && !selected?.inset)"
:class="{ disabled: !present || (separateInset && !selected?.inset) }"
name="spread"
- class="input input-range"
+ class="input input-number -small"
type="range"
max="20"
min="-20"
@@ -177,7 +177,7 @@
:value="selected?.spread"
:disabled="{ disabled: !present || (separateInset && !selected?.inset) }"
:class="{ disabled: !present || (separateInset && !selected?.inset) }"
- class="input input-number"
+ class="input input-number -small"
type="number"
@input="e => updateProperty('spread', e.target.value)"
>
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -765,10 +765,13 @@
"component_selector": "Component",
"variant_selector": "Variant",
"states_selector": "States",
- "only_variant": "Component doesn't have any variants",
- "only_state": "Component only has default state",
"main_tab": "Main",
"shadows_tab": "Shadows",
+ "background": "Background color",
+ "text_color": "Text color",
+ "icon_color": "Icon color",
+ "link_color": "Link color",
+ "include_in_rule": "Add to rule",
"components": {
"normal": {
"state": "Normal",
