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 {
display: inline-flex;
flex-wrap: wrap;
max-width: 10em;
&.-compact {
max-width: none;
}
.label {
flex: 1 1 auto;
grid-area: label;
}
.opt {
grid-area: checkbox;
margin-right: 0.5em;
}
&-field.input {
display: inline-flex;
flex: 0 0 0;
max-width: 9em;
flex: 1 1 10em;
max-width: 10em;
grid-area: input;
display: flex;
align-items: stretch;
input {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,11 +1,21 @@
.data-import-export-tab {
h3 {
margin-right: -2em;
}
.importer-exporter {
display: inline-flex;
flex-direction: column;
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>
</ul>
<h3>{{ $t('settings.account_backup') }}</h3>
<p>{{ $t('settings.account_backup_description') }}</p>
<table>
<div class="setting-list">
<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>
<tr>
<th>{{ $t('settings.account_backup_table_head') }}</th>
@ -112,18 +126,6 @@
/>
</button>
</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>
</template>

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

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

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

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

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

@ -1,5 +1,6 @@
import BooleanSetting from '../helpers/boolean_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 FontControl from 'src/components/font_control/font_control.vue'
@ -51,6 +52,7 @@ const GeneralTab = {
components: {
BooleanSetting,
ChoiceSetting,
IntegerSetting,
FontControl,
ProfileSettingIndicator
},

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

@ -2,14 +2,13 @@
min-width: var(--themeEditorMinWidth, fit-content);
.style-control {
display: flex;
flex-wrap: wrap;
align-items: baseline;
margin-bottom: 0.5em;
.label {
display: inline-block;
margin-right: 0.5em;
flex: 1 1 0;
flex: 1 1 auto;
line-height: 2;
min-height: 2em;
}
@ -18,10 +17,6 @@
margin-left: 1em;
}
.color-input {
flex: 0 0 0;
}
input,
select {
min-width: 3em;
@ -50,21 +45,24 @@
}
}
.setting-item.heading {
padding: 0;
}
.meta-preview {
display: grid;
grid-template:
"meta meta preview preview"
"meta meta preview preview"
"meta meta preview preview"
"meta meta preview preview";
grid-gap: 0.5em;
grid-template-columns: min-content min-content 6fr max-content;
"meta preview";
grid-gap: 1em;
grid-template-columns: min-content 6fr;
.theme-preview-container {
margin: 0;
}
ul.setting-list {
padding: 0;
margin: 0;
display: grid;
grid-template-rows: subgrid;
grid-area: meta;
> li {
@ -114,6 +112,7 @@
.list-edit-area {
grid-area: editor;
align-items: baseline;
}
.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 {
.variable-selector {
display: grid;
@ -249,6 +233,46 @@
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 {

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

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

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

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

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

@ -168,6 +168,7 @@
:disabled="disabled || !present"
:label="$t('settings.style.common.color')"
:fallback="getColorFallback"
:compact="true"
:show-optional-checkbox="false"
name="shadow"
@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
const active = this.activeIndex === index
const classes = [ active ? 'active' : 'hidden' ]
if (props.fullHeight) {
classes.push('full-height')
if (props.fullHeight || props['full-height']) {
classes.push('-full-height')
}
if (props.fullWidth || props['full-width']) {
classes.push('-full-width')
}
let delayRender = slot.props['delay-render']
if (delayRender && active) {

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

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