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

improved theme-related stuff on mobile somewhat (except shadow editor)

Browse source
This commit is contained in:
Henry Jameson 2025-11-25 22:56:14 +02:00
commit dba63e6825
10 changed files with 160 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,18 +1,28 @@
.color-input { .color-input {
display: inline-flex; display: inline-flex;
flex-wrap: wrap;
max-width: 10em;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"label checkbox"
"input input";
.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 {

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/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'"

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

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

@ -2,8 +2,6 @@
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;
@ -18,10 +16,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 +44,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 +111,7 @@
.list-edit-area { .list-edit-area {
grid-area: editor; grid-area: editor;
align-items: baseline;
} }
.list-select { .list-select {
@ -134,21 +132,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 +232,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"
@ -380,6 +381,7 @@
:label="$t('settings.style.themes3.editor.variables_tab')" :label="$t('settings.style.themes3.editor.variables_tab')"
:model-value="virtualDirectives" :model-value="virtualDirectives"
@update:model-value="updateVirtualDirectives" @update:model-value="updateVirtualDirectives"
:full-width="true"
/> />
</tab-switcher> </tab-switcher>
</div> </div>

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