qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

basic colors / settings present

Browse source
This commit is contained in:
Henry Jameson 2024-09-26 22:31:28 +03:00
parent ef795becf6
commit fb40694e8e
10 changed files with 256 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/alert.style.js
View file

@ -14,6 +14,10 @@ export default {
warning: '.warning',
success: '.success'
},
editor: {
border: 1,
aspect: '3 / 1'
},
defaultRules: [
{
directives: {

3
src/components/button.style.js
View file

@ -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: [

13
src/components/component_preview/component_preview.vue
View file

@ -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);
}
}
}

1
src/components/root.style.js
View file

@ -1,6 +1,7 @@
export default {
name: 'Root',
selector: ':root',
notEditable: true,
validInnerComponents: [
'Underlay',
'Modals',

79
src/components/settings_modal/tabs/style_tab/style_tab.js
View file

@ -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

63
src/components/settings_modal/tabs/style_tab/style_tab.scss
View file

@ -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;
}
}
}

152
src/components/settings_modal/tabs/style_tab/style_tab.vue
View file

@ -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"

8
src/components/settings_modal/tabs/theme_tab/theme_tab.scss
View file

@ -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;
}

6
src/components/shadow_control/shadow_control.vue
View file

@ -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)"
>

7
src/i18n/en.json
View file

@ -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",