Merge branch 'settings-shuffle' into shigusegubu-themes3
This commit is contained in:
Henry Jameson
commit
f77c2bef5f
22 changed files with 215 additions and 135 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
|
|
|
|||
|
|
@ -104,6 +104,7 @@
|
|||
v-model="colorOverride"
|
||||
class="input-color-input"
|
||||
fallback="#606060"
|
||||
:compact="true"
|
||||
:label="$t('settings.style.shadows.color_override')"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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'"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<template>
|
||||
<div
|
||||
class="PaletteEditor"
|
||||
:class="{ '-compact': compact, '-apply': apply }"
|
||||
:class="{ '-compact': compact, '-apply': apply, '-mobile': mobile }"
|
||||
>
|
||||
<div class="palette">
|
||||
<ColorInput
|
||||
v-for="key in paletteKeys"
|
||||
:key="key"
|
||||
|
|
@ -12,6 +13,8 @@
|
|||
: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"
|
||||
|
|
@ -26,6 +29,8 @@
|
|||
<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"
|
||||
|
|
@ -36,9 +41,12 @@
|
|||
{{ $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,24 +200,22 @@ 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;
|
||||
}
|
||||
|
||||
.palette-export-button {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
&.-mobile {
|
||||
&.-apply {
|
||||
.palette-apply-button {
|
||||
grid-column: 1;
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.color-input {
|
||||
display: grid;
|
||||
gap: 0.5em;
|
||||
|
||||
label {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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'"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@
|
|||
id="unsavedPostAction"
|
||||
path="unsavedPostAction"
|
||||
:options="unsavedPostActionOptions"
|
||||
expert="1"
|
||||
>
|
||||
{{ $t('settings.unsaved_post_action') }}
|
||||
</ChoiceSetting>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,8 +56,22 @@
|
|||
</li>
|
||||
</ul>
|
||||
<h3>{{ $t('settings.account_backup') }}</h3>
|
||||
<div class="setting-list">
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -33,10 +33,7 @@
|
|||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting
|
||||
path="userCardLeftJustify"
|
||||
expert="1"
|
||||
>
|
||||
<BooleanSetting path="userCardLeftJustify">
|
||||
{{ $t('settings.user_card_left_justify') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)"
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue