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

Compare commits

base: hj:f77c2bef5f32b2e827da95d5dcd2c66ca4e747d4
Branches Tags
hj:shigusegubu-themes3
hj:shigusegubu
hj:develop
hj:shigusegubu-clean
hj:shigusegubu-vue3
..
compare: hj:f2db3818179406b7ecad416f21f43e2525dd941d
Branches Tags
hj:shigusegubu-themes3
hj:shigusegubu
hj:develop
hj:shigusegubu-clean
hj:shigusegubu-vue3

No commits in common. "f77c2bef5f32b2e827da95d5dcd2c66ca4e747d4" and "f2db3818179406b7ecad416f21f43e2525dd941d" have entirely different histories.
f77c2bef5f ... f2db381817

22 changed files with 135 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,27 +1,18 @@
.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 {
flex: 1 1 10em; display: inline-flex;
max-width: 10em; flex: 0 0 0;
grid-area: input; max-width: 9em;
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, '-compact': compact }" :class="{ disabled: !present || disabled }"
> >
<label <label
:for="name" :for="name"
@ -127,10 +127,6 @@ 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,7 +104,6 @@
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 || $t('settings.style.themes3.editor.opacity') }} {{ label }}
</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,52 +1,44 @@
<template> <template>
<div <div
class="PaletteEditor" class="PaletteEditor"
:class="{ '-compact': compact, '-apply': apply, '-mobile': mobile }" :class="{ '-compact': compact, '-apply': apply }"
> >
<div class="palette"> <ColorInput
<ColorInput v-for="key in paletteKeys"
v-for="key in paletteKeys" :key="key"
:key="key" :name="key"
:name="key" :model-value="props.modelValue[key]"
:model-value="props.modelValue[key]" :fallback="fallback(key)"
:fallback="fallback(key)" :label="$t('settings.style.themes3.palette.' + key)"
:label="$t('settings.style.themes3.palette.' + key)" @update:model-value="value => updatePalette(key, value)"
@update:model-value="value => updatePalette(key, value)" />
/> <button
</div> class="btn button-default palette-import-button"
<div class="buttons"> @click="importPalette"
<button >
class="btn button-default palette-import-button" <FAIcon icon="file-import" />
@click="importPalette" {{ $t('settings.style.themes3.palette.import') }}
> </button>
<FAIcon icon="file-import" /> <button
{{ $t('settings.style.themes3.palette.import') }} class="btn button-default palette-export-button"
</button> @click="exportPalette"
<button >
class="btn button-default palette-export-button" <FAIcon icon="file-export" />
@click="exportPalette" {{ $t('settings.style.themes3.palette.export') }}
> </button>
<FAIcon icon="file-export" /> <button
{{ $t('settings.style.themes3.palette.export') }} v-if="apply"
</button> class="btn button-default palette-apply-button"
</div> :disabled="disabled"
<div class="buttons"> :class="{ disabled }"
<button @click="applyPalette"
v-if="apply" >
class="btn button-default palette-apply-button" {{ $t('settings.style.themes3.palette.apply') }}
:disabled="disabled" </button>
: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,
@ -59,8 +51,6 @@ 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
@ -114,10 +104,6 @@ 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
@ -143,28 +129,13 @@ 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;
} }
@ -200,21 +171,23 @@ const updatePalette = (paletteKey, value) => {
grid-column: 1 / span 2; grid-column: 1 / span 2;
} }
} }
}
&.-mobile { .-mobile & {
&.-apply { grid-template-columns: 1fr;
.palette-apply-button { grid-template-rows: repeat(10, 1fr) auto;
grid-column: 1 / span 2;
.palette-import-button {
grid-column: 1;
} }
}
.color-input { .palette-export-button {
display: grid; grid-column: 1;
gap: 0.5em; }
label { &.-apply {
flex: 1; .palette-apply-button {
grid-column: 1;
}
} }
} }
} }

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

@ -128,6 +128,7 @@ 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) {
@ -156,7 +157,6 @@ 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,15 +118,11 @@
.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,6 +6,7 @@
.palette, .palette,
.theme-notice { .theme-notice {
padding: 0.5em; padding: 0.5em;
margin: 1em;
} }
.theme-name { .theme-name {
@ -13,6 +14,7 @@
padding-bottom: 0.5em; padding-bottom: 0.5em;
} }
input[type="file"] { input[type="file"] {
padding: 0.25em; padding: 0.25em;
height: auto; height: auto;
@ -59,7 +61,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-bottom: 0.5em; margin: -0.5em;
margin-top: 0; margin-top: 0;
} }

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

@ -75,6 +75,8 @@
<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,22 +4,32 @@
<h3>{{ $t('settings.interface') }}</h3> <h3>{{ $t('settings.interface') }}</h3>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<BooleanSetting path="alwaysShowSubjectInput"> <BooleanSetting
path="alwaysShowSubjectInput"
expert="1"
>
{{ $t('settings.subject_input_always_show') }} {{ $t('settings.subject_input_always_show') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting path="minimalScopesMode"> <BooleanSetting
path="minimalScopesMode"
expert="1"
>
{{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.minimal_scopes_mode') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting path="hidePostStats"> <BooleanSetting
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') }}
@ -41,6 +51,7 @@
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>
@ -53,6 +64,7 @@
<li> <li>
<IntegerSetting <IntegerSetting
path="maxThumbnails" path="maxThumbnails"
expert="1"
:min="0" :min="0"
> >
{{ $t('settings.max_thumbnails') }} {{ $t('settings.max_thumbnails') }}
@ -69,13 +81,17 @@
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting path="userCardHidePersonalMarks"> <BooleanSetting
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,7 +59,6 @@
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,21 +1,11 @@
.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,22 +56,8 @@
</li> </li>
</ul> </ul>
<h3>{{ $t('settings.account_backup') }}</h3> <h3>{{ $t('settings.account_backup') }}</h3>
<div class="setting-list"> <p>{{ $t('settings.account_backup_description') }}</p>
<p>{{ $t('settings.account_backup_description') }}</p> <table>
<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>
@ -126,6 +112,18 @@
/> />
</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,7 +31,6 @@ 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,7 +33,10 @@
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li>
<BooleanSetting path="userCardLeftJustify"> <BooleanSetting
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,6 +1,5 @@
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'
@ -52,7 +51,6 @@ 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,13 +2,14 @@
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 auto; flex: 1 1 0;
line-height: 2; line-height: 2;
min-height: 2em; min-height: 2em;
} }
@ -17,6 +18,10 @@
margin-left: 1em; margin-left: 1em;
} }
.color-input {
flex: 0 0 0;
}
input, input,
select { select {
min-width: 3em; min-width: 3em;
@ -45,24 +50,21 @@
} }
} }
.setting-item.heading {
padding: 0;
}
.meta-preview { .meta-preview {
display: grid; display: grid;
grid-template: grid-template:
"meta preview"; "meta meta preview preview"
grid-gap: 1em; "meta meta preview preview"
grid-template-columns: min-content 6fr; "meta meta preview preview"
"meta meta preview preview";
.theme-preview-container { grid-gap: 0.5em;
margin: 0; grid-template-columns: min-content min-content 6fr max-content;
}
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 {
@ -112,7 +114,6 @@
.list-edit-area { .list-edit-area {
grid-area: editor; grid-area: editor;
align-items: baseline;
} }
.list-select { .list-select {
@ -133,6 +134,21 @@
} }
} }
.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;
@ -233,46 +249,6 @@
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,6 +4,7 @@
<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
@ -84,7 +85,6 @@
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,7 +332,6 @@
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"
@ -380,7 +379,6 @@
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,10 +6,6 @@
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;
@ -114,6 +110,7 @@
.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,7 +168,6 @@
: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,11 +138,8 @@ 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 || props['full-height']) { if (props.fullHeight) {
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,15 +70,6 @@
} }
} }
.-full-width:not(.hidden) {
display: flex;
flex-direction: column;
> *:not(.mobile-label) {
width: auto;
}
}
&.scrollable-tabs { &.scrollable-tabs {
overflow-y: auto; overflow-y: auto;
} }