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

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

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

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

@ -2,8 +2,6 @@
min-width: var(--themeEditorMinWidth, fit-content);
.style-control {
display: flex;
flex-wrap: wrap;
align-items: baseline;
margin-bottom: 0.5em;
@ -18,10 +16,6 @@
margin-left: 1em;
}
.color-input {
flex: 0 0 0;
}
input,
select {
min-width: 3em;
@ -50,21 +44,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 +111,7 @@
.list-edit-area {
grid-area: editor;
align-items: baseline;
}
.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 {
.variable-selector {
display: grid;
@ -249,6 +232,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"
@ -380,6 +381,7 @@
:label="$t('settings.style.themes3.editor.variables_tab')"
:model-value="virtualDirectives"
@update:model-value="updateVirtualDirectives"
:full-width="true"
/>
</tab-switcher>
</div>

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