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

Merge branch 'settings-shuffle' into shigusegubu-themes3

Browse source
This commit is contained in:
Henry Jameson 2025-11-26 00:25:41 +02:00
commit f77c2bef5f
22 changed files with 215 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/color_input/color_input.scss
View file

@ -1,18 +1,27 @@
.color-input { .color-input {
display: inline-flex; display: inline-flex;
flex-wrap: wrap;
max-width: 10em;
&.-compact {
max-width: none;
}
.label { .label {
flex: 1 1 auto; flex: 1 1 auto;
grid-area: label;
} }
.opt { .opt {
grid-area: checkbox;
margin-right: 0.5em; margin-right: 0.5em;
} }
&-field.input { &-field.input {
display: inline-flex; flex: 1 1 10em;
flex: 0 0 0; max-width: 10em;
max-width: 9em; grid-area: input;
display: flex;
align-items: stretch; align-items: stretch;
input { input {

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

@ -1,7 +1,7 @@
<template> <template>
<div <div
class="color-input style-control" class="color-input style-control"
:class="{ disabled: !present || disabled }" :class="{ disabled: !present || disabled, '-compact': compact }"
> >
<label <label
:for="name" :for="name"
@ -127,6 +127,10 @@ export default {
required: false, required: false,
type: Boolean, type: Boolean,
default: false default: false
},
compact: {
required: false,
type: Boolean
} }
}, },
emits: ['update:modelValue'], emits: ['update:modelValue'],

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

@ -104,6 +104,7 @@
v-model="colorOverride" v-model="colorOverride"
class="input-color-input" class="input-color-input"
fallback="#606060" fallback="#606060"
:compact="true"
:label="$t('settings.style.shadows.color_override')" :label="$t('settings.style.shadows.color_override')"
/> />
</div> </div>

2
src/components/opacity_input/opacity_input.vue
View file

@ -8,7 +8,7 @@
class="label" class="label"
:class="{ faint: !present || disabled }" :class="{ faint: !present || disabled }"
> >
{{ label }} {{ label || $t('settings.style.themes3.editor.opacity') }}
</label> </label>
<Checkbox <Checkbox
v-if="typeof fallback !== 'undefined'" v-if="typeof fallback !== 'undefined'"

121
src/components/palette_editor/palette_editor.vue
View file

@ -1,44 +1,52 @@
<template> <template>
<div <div
class="PaletteEditor" class="PaletteEditor"
:class="{ '-compact': compact, '-apply': apply }" :class="{ '-compact': compact, '-apply': apply, '-mobile': mobile }"
> >
<ColorInput <div class="palette">
v-for="key in paletteKeys" <ColorInput
:key="key" v-for="key in paletteKeys"
:name="key" :key="key"
:model-value="props.modelValue[key]" :name="key"
:fallback="fallback(key)" :model-value="props.modelValue[key]"
:label="$t('settings.style.themes3.palette.' + key)" :fallback="fallback(key)"
@update:model-value="value => updatePalette(key, value)" :label="$t('settings.style.themes3.palette.' + key)"
/> @update:model-value="value => updatePalette(key, value)"
<button />
class="btn button-default palette-import-button" </div>
@click="importPalette" <div class="buttons">
> <button
<FAIcon icon="file-import" /> class="btn button-default palette-import-button"
{{ $t('settings.style.themes3.palette.import') }} @click="importPalette"
</button> >
<button <FAIcon icon="file-import" />
class="btn button-default palette-export-button" {{ $t('settings.style.themes3.palette.import') }}
@click="exportPalette" </button>
> <button
<FAIcon icon="file-export" /> class="btn button-default palette-export-button"
{{ $t('settings.style.themes3.palette.export') }} @click="exportPalette"
</button> >
<button <FAIcon icon="file-export" />
v-if="apply" {{ $t('settings.style.themes3.palette.export') }}
class="btn button-default palette-apply-button" </button>
:disabled="disabled" </div>
:class="{ disabled }" <div class="buttons">
@click="applyPalette" <button
> v-if="apply"
{{ $t('settings.style.themes3.palette.apply') }} class="btn button-default palette-apply-button"
</button> :disabled="disabled"
:class="{ disabled }"
@click="applyPalette"
>
{{ $t('settings.style.themes3.palette.apply') }}
</button>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed } from 'vue'
import ColorInput from 'src/components/color_input/color_input.vue' import ColorInput from 'src/components/color_input/color_input.vue'
import { import {
newImporter, newImporter,
@ -51,6 +59,8 @@ import {
faFileExport faFileExport
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import { useInterfaceStore } from 'src/stores/interface'
library.add( library.add(
faFileImport, faFileImport,
faFileExport faFileExport
@ -104,6 +114,10 @@ const applyPalette = () => {
emit('applyPalette', getExportedObject()) emit('applyPalette', getExportedObject())
} }
const mobile = computed(() => {
return useInterfaceStore().layoutType === 'mobile'
})
const fallback = (key) => { const fallback = (key) => {
if (key === 'accent') { if (key === 'accent') {
return props.modelValue.link return props.modelValue.link
@ -129,13 +143,28 @@ const updatePalette = (paletteKey, value) => {
<style lang="scss"> <style lang="scss">
.PaletteEditor { .PaletteEditor {
display: grid;
justify-content: space-around; justify-content: space-around;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr) auto; grid-template-rows: repeat(5, 1fr) auto;
grid-gap: 0.5em; grid-gap: 0.5em;
align-items: baseline; align-items: baseline;
.buttons {
margin-top: 0.5em;
display: grid;
gap: 0.5em
}
.palette {
display: grid;
grid-template-rows: 1fr;
grid-auto-flow: row;
grid-auto-rows: auto;
grid-template-columns: repeat(auto-fill, 10em);
grid-gap: 0.5em;
margin-bottom: 0.5em;
}
.palette-import-button { .palette-import-button {
grid-column: 1 / span 2; grid-column: 1 / span 2;
} }
@ -171,23 +200,21 @@ const updatePalette = (paletteKey, value) => {
grid-column: 1 / span 2; grid-column: 1 / span 2;
} }
} }
}
.-mobile & { &.-mobile {
grid-template-columns: 1fr; &.-apply {
grid-template-rows: repeat(10, 1fr) auto; .palette-apply-button {
grid-column: 1 / span 2;
.palette-import-button {
grid-column: 1;
} }
}
.palette-export-button { .color-input {
grid-column: 1; display: grid;
} gap: 0.5em;
&.-apply { label {
.palette-apply-button { flex: 1;
grid-column: 1;
}
} }
} }
} }

2
src/components/settings_modal/helpers/vertical_tab_switcher.jsx
View file

@ -128,7 +128,6 @@ export default {
const props = slot.props const props = slot.props
if (!props) return if (!props) return
const active = this.activeIndex === index const active = this.activeIndex === index
const wrapperClasses = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
let delayRender = slot.props['delay-render'] let delayRender = slot.props['delay-render']
if (delayRender && active) { if (delayRender && active) {
@ -157,6 +156,7 @@ export default {
</h2> </h2>
) )
const wrapperClasses = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
const contentClasses = ['tab-content'] const contentClasses = ['tab-content']
if (props['full-width']) { if (props['full-width']) {
contentClasses.push('-full-width') contentClasses.push('-full-width')

4
src/components/settings_modal/settings_modal.scss
View file

@ -118,11 +118,15 @@
.option-list { .option-list {
padding-left: 0.25em; padding-left: 0.25em;
/* stylelint-disable no-descending-specificity */
// it makes no sense
> li { > li {
margin: 1em 0; margin: 1em 0;
line-height: 1.5em; line-height: 1.5em;
vertical-align: middle; vertical-align: middle;
} }
/* stylelint-enable no-descending-specificity */
&.two-column { &.two-column {
grid-template-columns: 1fr; grid-template-columns: 1fr;

4
src/components/settings_modal/tabs/appearance_tab.scss
View file

@ -6,7 +6,6 @@
.palette, .palette,
.theme-notice { .theme-notice {
padding: 0.5em; padding: 0.5em;
margin: 1em;
} }
.theme-name { .theme-name {
@ -14,7 +13,6 @@
padding-bottom: 0.5em; padding-bottom: 0.5em;
} }
input[type="file"] { input[type="file"] {
padding: 0.25em; padding: 0.25em;
height: auto; height: auto;
@ -61,7 +59,7 @@
scrollbar-gutter: stable; scrollbar-gutter: stable;
border-radius: var(--roundness); border-radius: var(--roundness);
border: 1px solid var(--border); border: 1px solid var(--border);
margin: -0.5em; margin-bottom: 0.5em;
margin-top: 0; margin-top: 0;
} }

2
src/components/settings_modal/tabs/appearance_tab.vue
View file

@ -75,8 +75,6 @@
<FAIcon icon="folder-open" /> <FAIcon icon="folder-open" />
{{ $t('settings.style.themes3.editor.load_style') }} {{ $t('settings.style.themes3.editor.load_style') }}
</button> </button>
</div>
<div class="setting-item">
<h4>{{ $t('settings.style.themes3.palette.label') }}</h4> <h4>{{ $t('settings.style.themes3.palette.label') }}</h4>
<div <div
v-if="customThemeVersion === 'v3'" v-if="customThemeVersion === 'v3'"

24
src/components/settings_modal/tabs/clutter_tab.vue
View file

@ -4,32 +4,22 @@
<h3>{{ $t('settings.interface') }}</h3> <h3>{{ $t('settings.interface') }}</h3>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<BooleanSetting <BooleanSetting path="alwaysShowSubjectInput">
path="alwaysShowSubjectInput"
expert="1"
>
{{ $t('settings.subject_input_always_show') }} {{ $t('settings.subject_input_always_show') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="minimalScopesMode">
path="minimalScopesMode"
expert="1"
>
{{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.minimal_scopes_mode') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="hidePostStats">
expert="1"
path="hidePostStats"
>
{{ $t('settings.hide_post_stats') }} {{ $t('settings.hide_post_stats') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting
expert="1"
path="hideUserStats" path="hideUserStats"
> >
{{ $t('settings.hide_user_stats') }} {{ $t('settings.hide_user_stats') }}
@ -51,7 +41,6 @@
path="hideScrobblesAfter" path="hideScrobblesAfter"
:units="['m', 'h', 'd']" :units="['m', 'h', 'd']"
unit-set="time" unit-set="time"
expert="1"
> >
{{ $t('settings.hide_scrobbles_after') }} {{ $t('settings.hide_scrobbles_after') }}
</UnitSetting> </UnitSetting>
@ -64,7 +53,6 @@
<li> <li>
<IntegerSetting <IntegerSetting
path="maxThumbnails" path="maxThumbnails"
expert="1"
:min="0" :min="0"
> >
{{ $t('settings.max_thumbnails') }} {{ $t('settings.max_thumbnails') }}
@ -81,17 +69,13 @@
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="userCardHidePersonalMarks">
path="userCardHidePersonalMarks"
expert="1"
>
{{ $t('settings.user_card_hide_personal_marks') }} {{ $t('settings.user_card_hide_personal_marks') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li v-if="instanceShoutboxPresent"> <li v-if="instanceShoutboxPresent">
<BooleanSetting <BooleanSetting
path="hideShoutbox" path="hideShoutbox"
expert="1"
> >
{{ $t('settings.hide_shoutbox') }} {{ $t('settings.hide_shoutbox') }}
</BooleanSetting> </BooleanSetting>

1
src/components/settings_modal/tabs/composing_tab.vue
View file

@ -59,6 +59,7 @@
id="unsavedPostAction" id="unsavedPostAction"
path="unsavedPostAction" path="unsavedPostAction"
:options="unsavedPostActionOptions" :options="unsavedPostActionOptions"
expert="1"
> >
{{ $t('settings.unsaved_post_action') }} {{ $t('settings.unsaved_post_action') }}
</ChoiceSetting> </ChoiceSetting>

18
src/components/settings_modal/tabs/data_import_export_tab.scss
View file

@ -1,11 +1,21 @@
.data-import-export-tab { .data-import-export-tab {
h3 {
margin-right: -2em;
}
.importer-exporter { .importer-exporter {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
gap: 0.5em; gap: 0.5em;
} }
table {
td, th {
line-height: 1.5;
}
th {
padding: 0 0.5em;
}
td {
padding: 0.5em;
}
}
} }

30
src/components/settings_modal/tabs/data_import_export_tab.vue
View file

@ -56,8 +56,22 @@
</li> </li>
</ul> </ul>
<h3>{{ $t('settings.account_backup') }}</h3> <h3>{{ $t('settings.account_backup') }}</h3>
<p>{{ $t('settings.account_backup_description') }}</p> <div class="setting-list">
<table> <p>{{ $t('settings.account_backup_description') }}</p>
<button
class="btn button-default"
@click="addBackup"
>
{{ $t('settings.add_backup') }}
</button>
<p v-if="addedBackup">
{{ $t('settings.added_backup') }}
</p>
<template v-if="addBackupError !== false">
<p>{{ $t('settings.add_backup_error', { error: addBackupError }) }}</p>
</template>
</div>
<table class="setting-list">
<thead> <thead>
<tr> <tr>
<th>{{ $t('settings.account_backup_table_head') }}</th> <th>{{ $t('settings.account_backup_table_head') }}</th>
@ -112,18 +126,6 @@
/> />
</button> </button>
</div> </div>
<button
class="btn button-default"
@click="addBackup"
>
{{ $t('settings.add_backup') }}
</button>
<p v-if="addedBackup">
{{ $t('settings.added_backup') }}
</p>
<template v-if="addBackupError !== false">
<p>{{ $t('settings.add_backup_error', { error: addBackupError }) }}</p>
</template>
</div> </div>
</div> </div>
</template> </template>

1
src/components/settings_modal/tabs/layout_tab.js
View file

@ -31,6 +31,7 @@ const GeneralTab = {
postFormats () { postFormats () {
return this.$store.state.instance.postFormats || [] return this.$store.state.instance.postFormats || []
}, },
instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
columns () { columns () {
const mode = this.$store.getters.mergedConfig.thirdColumnMode const mode = this.$store.getters.mergedConfig.thirdColumnMode

5
src/components/settings_modal/tabs/layout_tab.vue
View file

@ -33,10 +33,7 @@
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting path="userCardLeftJustify">
path="userCardLeftJustify"
expert="1"
>
{{ $t('settings.user_card_left_justify') }} {{ $t('settings.user_card_left_justify') }}
</BooleanSetting> </BooleanSetting>
</li> </li>

2
src/components/settings_modal/tabs/posts_tab.js
View file

@ -1,5 +1,6 @@
import BooleanSetting from '../helpers/boolean_setting.vue' import BooleanSetting from '../helpers/boolean_setting.vue'
import ChoiceSetting from '../helpers/choice_setting.vue' import ChoiceSetting from '../helpers/choice_setting.vue'
import IntegerSetting from '../helpers/integer_setting.vue'
import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue' import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
import FontControl from 'src/components/font_control/font_control.vue' import FontControl from 'src/components/font_control/font_control.vue'
@ -51,6 +52,7 @@ const GeneralTab = {
components: { components: {
BooleanSetting, BooleanSetting,
ChoiceSetting, ChoiceSetting,
IntegerSetting,
FontControl, FontControl,
ProfileSettingIndicator ProfileSettingIndicator
}, },

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

@ -2,14 +2,13 @@
min-width: var(--themeEditorMinWidth, fit-content); min-width: var(--themeEditorMinWidth, fit-content);
.style-control { .style-control {
display: flex;
flex-wrap: wrap;
align-items: baseline; align-items: baseline;
margin-bottom: 0.5em; margin-bottom: 0.5em;
.label { .label {
display: inline-block;
margin-right: 0.5em; margin-right: 0.5em;
flex: 1 1 0; flex: 1 1 auto;
line-height: 2; line-height: 2;
min-height: 2em; min-height: 2em;
} }
@ -18,10 +17,6 @@
margin-left: 1em; margin-left: 1em;
} }
.color-input {
flex: 0 0 0;
}
input, input,
select { select {
min-width: 3em; min-width: 3em;
@ -50,21 +45,24 @@
} }
} }
.setting-item.heading {
padding: 0;
}
.meta-preview { .meta-preview {
display: grid; display: grid;
grid-template: grid-template:
"meta meta preview preview" "meta preview";
"meta meta preview preview" grid-gap: 1em;
"meta meta preview preview" grid-template-columns: min-content 6fr;
"meta meta preview preview";
grid-gap: 0.5em; .theme-preview-container {
grid-template-columns: min-content min-content 6fr max-content; margin: 0;
}
ul.setting-list { ul.setting-list {
padding: 0; padding: 0;
margin: 0; margin: 0;
display: grid;
grid-template-rows: subgrid;
grid-area: meta; grid-area: meta;
> li { > li {
@ -114,6 +112,7 @@
.list-edit-area { .list-edit-area {
grid-area: editor; grid-area: editor;
align-items: baseline;
} }
.list-select { .list-select {
@ -134,21 +133,6 @@
} }
} }
.palette-editor {
width: min-content;
.list-edit-area {
display: grid;
align-self: baseline;
grid-template-rows: subgrid;
grid-template-columns: 1fr;
}
.palette-editor-single {
grid-row: 2 / span 2;
}
}
.variables-editor { .variables-editor {
.variable-selector { .variable-selector {
display: grid; display: grid;
@ -249,6 +233,46 @@
justify-items: center; justify-items: center;
} }
} }
.-mobile & {
.meta-preview {
grid-template:
"meta"
"preview"
}
.list-editor {
display: grid;
grid-template-areas:
"label"
"selector"
"movement"
"editor"
"editor"
"editor"
"editor";
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
}
.component-editor {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"component"
"variant"
"state"
"preview"
"settings";
}
.variable-selector {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-auto-flow: row;
grid-gap: 0.5em;
}
}
} }
.extra-content { .extra-content {

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

@ -4,7 +4,6 @@
<template> <template>
<div class="StyleTab"> <div class="StyleTab">
<div class="setting-item heading"> <div class="setting-item heading">
<h2> {{ $t('settings.style.themes3.editor.title') }} </h2>
<div class="meta-preview"> <div class="meta-preview">
<Preview id="edited-style-preview" /> <Preview id="edited-style-preview" />
<teleport <teleport
@ -85,6 +84,7 @@
key="component" key="component"
class="setting-item component-editor" class="setting-item component-editor"
:label="$t('settings.style.themes3.editor.component_tab')" :label="$t('settings.style.themes3.editor.component_tab')"
:full-width="true"
> >
<div class="component-selector"> <div class="component-selector">
<label for="component-selector"> <label for="component-selector">
@ -332,6 +332,7 @@
key="palette" key="palette"
:label="$t('settings.style.themes3.editor.palette_tab')" :label="$t('settings.style.themes3.editor.palette_tab')"
class="setting-item list-editor palette-editor" class="setting-item list-editor palette-editor"
:full-width="true"
> >
<label <label
class="list-select-label" class="list-select-label"
@ -379,6 +380,7 @@
key="variables" key="variables"
:label="$t('settings.style.themes3.editor.variables_tab')" :label="$t('settings.style.themes3.editor.variables_tab')"
:model-value="virtualDirectives" :model-value="virtualDirectives"
:full-width="true"
@update:model-value="updateVirtualDirectives" @update:model-value="updateVirtualDirectives"
/> />
</tab-switcher> </tab-switcher>

5
src/components/shadow_control/shadow_control.scss
View file

@ -6,6 +6,10 @@
grid-gap: 0.5em; grid-gap: 0.5em;
justify-content: stretch; justify-content: stretch;
.style-control {
display: flex;
}
&.-compact { &.-compact {
grid-template-columns: 10em 1fr; grid-template-columns: 10em 1fr;
grid-template-rows: auto auto; grid-template-rows: auto auto;
@ -110,7 +114,6 @@
.shadow-preview { .shadow-preview {
grid-area: preview; grid-area: preview;
min-width: 25em;
margin-left: 0.125em; margin-left: 0.125em;
place-self: start center; place-self: start center;
} }

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

@ -168,6 +168,7 @@
:disabled="disabled || !present" :disabled="disabled || !present"
:label="$t('settings.style.common.color')" :label="$t('settings.style.common.color')"
:fallback="getColorFallback" :fallback="getColorFallback"
:compact="true"
:show-optional-checkbox="false" :show-optional-checkbox="false"
name="shadow" name="shadow"
@update:model-value="e => updateProperty('color', e)" @update:model-value="e => updateProperty('color', e)"

7
src/components/tab_switcher/tab_switcher.jsx
View file

@ -138,8 +138,11 @@ export default {
if (!props) return if (!props) return
const active = this.activeIndex === index const active = this.activeIndex === index
const classes = [ active ? 'active' : 'hidden' ] const classes = [ active ? 'active' : 'hidden' ]
if (props.fullHeight) { if (props.fullHeight || props['full-height']) {
classes.push('full-height') classes.push('-full-height')
}
if (props.fullWidth || props['full-width']) {
classes.push('-full-width')
} }
let delayRender = slot.props['delay-render'] let delayRender = slot.props['delay-render']
if (delayRender && active) { if (delayRender && active) {

11
src/components/tab_switcher/tab_switcher.scss
View file

@ -60,7 +60,7 @@
display: none; display: none;
} }
.full-height:not(.hidden) { .-full-height:not(.hidden) {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -70,6 +70,15 @@
} }
} }
.-full-width:not(.hidden) {
display: flex;
flex-direction: column;
> *:not(.mobile-label) {
width: auto;
}
}
&.scrollable-tabs { &.scrollable-tabs {
overflow-y: auto; overflow-y: auto;
} }