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

Merge branch 'admin-tabs-2' into shigusegubu-themes3

Browse source
This commit is contained in:
Henry Jameson 2025-12-10 20:37:38 +02:00
commit c12a7fcf7b
65 changed files with 570 additions and 783 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/App.scss
View file

@ -704,6 +704,7 @@ option {
position: relative;
display: inline-flex;
vertical-align: middle;
min-height: 2em;
.Select select {
line-height: 1;

40
src/components/font_control/font_control.vue
View file

@ -1,9 +1,10 @@
<template>
<div class="font-control">
<div class="setting-item">
<Checkbox
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
class="font-checkbox"
class="font-checkbox setting-control setting-label"
:model-value="present"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
>
@ -12,13 +13,16 @@
keypath="settings.style.fonts.override"
tag="span"
>
<span>
{{ label }}
</span>
</i18n-t>
</Checkbox>
</div>
{{ ' ' }}
<div
v-if="modelValue?.family"
class="font-input"
class="font-input setting-item"
>
<label
v-if="manualEntry"
@ -69,7 +73,7 @@
</span>
<span
v-else
class="btn-group"
class="font-selector btn-group"
>
<button
class="btn button-default"
@ -132,16 +136,38 @@
<script src="./font_control.js"></script>
<style lang="scss">
// Copy-paste of BooleanSetting
.font-control {
.custom-font {
min-width: 20em;
max-width: 20em;
display: grid;
grid-template-columns: subgrid;
.checkbox {
display: grid;
grid-template-columns: subgrid;
}
.label {
grid-area: label;
text-align: right;
}
.-mobile & {
.font-input {
margin-left: 2em;
display: block;
}
.font-selector {
margin-top: 0.5em;
}
.label {
text-align: left;
}
}
.checkbox-indicator {
grid-area: control;
}
}
.invalid-tooltip {

6
src/components/interface_language_switcher/interface_language_switcher.js
View file

@ -3,6 +3,8 @@ import localeService from '../../services/locale/locale.service.js'
import Select from '../select/select.vue'
import ProfileSettingIndicator from 'src/components/settings_modal/helpers/profile_setting_indicator.vue'
import { v4 as uuidv4 } from 'uuid';
export default {
components: {
Select,
@ -26,7 +28,9 @@ export default {
languages () {
return localeService.languages
},
uniqueId () {
return uuidv4()
},
controlledLanguage: {
get: function () {
return Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue]

54
src/components/interface_language_switcher/interface_language_switcher.vue
View file

@ -1,17 +1,20 @@
<template>
<div class="interface-language-switcher">
<label>
<slot />
<ProfileSettingIndicator :is-profile="profile" />
</label>
<ul class="setting-list">
<ul class="interface-language-switcher setting-list">
<li
v-for="index of controlledLanguage.keys()"
:key="index"
class="setting-item"
>
<label
class="setting-label"
:for="uniqueId+index"
>
<label>
{{ index === 0 ? $t('settings.primary_language') : $t('settings.fallback_language', { index }, index) }}
</label>
<span class="setting-control btn-group">
<Select
:name="uniqueId+index"
:id="uniqueId+index"
class="language-select"
:model-value="controlledLanguage[index]"
@update:model-value="val => setLanguageAt(index, val)"
@ -24,7 +27,6 @@
{{ lang.name }}
</option>
</Select>
</label>
<button
v-if="controlledLanguage.length > 1 && index !== 0"
class="button-default btn"
@ -32,8 +34,9 @@
>
{{ $t('settings.remove_language') }}
</button>
</span>
</li>
<li>
<li class="add-button">
<button
class="button-default btn"
@click="addLanguage"
@ -42,15 +45,42 @@
</button>
</li>
</ul>
</div>
</template>
<script src="./interface_language_switcher.js"></script>
<style lang="scss">
.interface-language-switcher {
.language-select {
margin-right: 1em;
.setting-list {
.setting-item {
display: grid;
grid-template-columns: subgrid;
}
}
.add-button {
display: block;
text-align: center;
padding-bottom: 1em;
.default-button {
display: block;
width: auto;
}
}
.-mobile & {
li.setting-item {
display: flex;
flex-direction: column;
gap: 0.5em;
align-items: stretch;
border-bottom: none;
}
.add-button {
border-bottom: 1px solid var(--border);
}
}
}
</style>

2
src/components/settings_modal/admin_tabs/auth_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div :label="$t('admin_dash.tabs.job_queues')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.auth.MFA') }}</h3>
<ul class="setting-list">
<li>

2
src/components/settings_modal/admin_tabs/emoji_tab.vue
View file

@ -3,7 +3,7 @@
class="EmojiTab"
:label="$t('admin_dash.tabs.emoji')"
>
<div class="setting-item">
<div class="setting-section">
<h3 class="toolbar">
<span class="header-text">
{{ $t('admin_dash.emoji.emoji_packs') }}

2
src/components/settings_modal/admin_tabs/federation_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div :label="$t('admin_dash.tabs.federation')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.federation.global') }}</h3>
<ul class="setting-list">
<li>

2
src/components/settings_modal/admin_tabs/frontends_tab.vue
View file

@ -3,7 +3,7 @@
class="FrontendsTab"
:label="$t('admin_dash.tabs.frontends')"
>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.frontend.title') }}</h3>
<p>{{ $t('admin_dash.frontend.wip_notice') }}</p>
<ul

44
src/components/settings_modal/admin_tabs/http_tab.vue
View file

@ -3,7 +3,7 @@
class="LinksTab"
:label="$t('admin_dash.tabs.http')"
>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.http.outbound') }}</h3>
<ul class="setting-list">
<li>
@ -30,40 +30,9 @@
</li>
</ul>
</div>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.http.incoming') }}</h3>
<ul class="setting-list">
<h4>{{ $t('admin_dash.http.cors') }}</h4>
<li>
<IntegerSetting
:description-path-override="[':cors_plug', '<ROOT>', ':max_age']"
path=":cors_plug.:max_age"
/>
</li>
<li>
<BooleanSetting
:description-path-override="[':cors_plug', '<ROOT>', ':credentials']"
path=":cors_plug.:credentials"
/>
</li>
<li>
<ListSetting
path=":cors_plug.:methods"
:description-path-override="[':cors_plug', '<ROOT>', ':methods']"
/>
</li>
<li>
<ListSetting
:description-path-override="[':cors_plug', '<ROOT>', ':expose']"
path=":cors_plug.:expose"
/>
</li>
<li>
<ListSetting
:description-path-override="[':cors_plug', '<ROOT>', ':headers']"
path=":cors_plug.:headers"
/>
</li>
<h4>{{ $t('admin_dash.http.security') }}</h4>
<li>
<BooleanSetting path=":pleroma.:http_security.:enabled" />
@ -86,14 +55,6 @@
<li>
<StringSetting path=":pleroma.:http_security.:report_url" />
</li>
<h4>{{ $t('admin_dash.http.web_cache_ttl') }}</h4>
<p>{{ $t('admin_dash.http.web_cache_ttl_description') }}</p>
<li>
<StringSetting path=":pleroma.:web_cache_ttl.:activity_pub" />
</li>
<li>
<StringSetting path=":pleroma.:web_cache_ttl.:activity_pub_question" />
</li>
</ul>
<h3>{{ $t('admin_dash.http.web_push') }}</h3>
<p>{{ $t('admin_dash.http.web_push_description') }}</p>
@ -116,7 +77,6 @@
</ul>
<!-- CONFIRM admin_token should go there but something is wrong with both data and description. -->
<!-- given the nature of the setting it's probably better to not expose it and deprecate it on backend side -->
<!-- CONFIRM :pleroma.:streamer should also PROBABLY? go here but it's completely MIA from backend besides references to config description -->
</div>
</div>
</template>

4
src/components/settings_modal/admin_tabs/instance_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div :label="$t('admin_dash.tabs.instance')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.instance.instance') }}</h3>
<ul class="setting-list">
<li>
@ -73,7 +73,7 @@
</li>
</ul>
</div>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.instance.access') }}</h3>
<ul class="setting-list">
<li>

44
src/components/settings_modal/admin_tabs/job_queues_tab.vue
View file

@ -1,48 +1,6 @@
<template>
<div :label="$t('admin_dash.tabs.job_queues')">
<div class="setting-item">
<h3>{{ $t('admin_dash.job_queues.Oban') }}</h3>
<ul class="setting-list">
<li>
<ChoiceSetting path=":pleroma.Oban.:log" />
<h4>{{ $t('admin_dash.job_queues.queues') }}</h4>
<ul class="setting-list">
<li>
<IntegerSetting path=":pleroma.Oban.:queues.:federator_incoming" />
</li>
<li>
<IntegerSetting path=":pleroma.Oban.:queues.:federator_outgoing" />
</li>
<li>
<IntegerSetting path=":pleroma.Oban.:queues.:attachments_cleanup" />
</li>
<li>
<IntegerSetting path=":pleroma.Oban.:queues.:mailer" />
</li>
<li>
<IntegerSetting path=":pleroma.Oban.:queues.:activity_expiration" />
</li>
<li>
<IntegerSetting path=":pleroma.Oban.:queues.:scheduled_activities" />
</li>
<li>
<IntegerSetting path=":pleroma.Oban.:queues.:transmogrifier" />
</li>
<li>
<IntegerSetting path=":pleroma.Oban.:queues.:web_push" />
</li>
<!-- CONFIRM what is this queue -->
<li>
<IntegerSetting path=":pleroma.Oban.:queues.:slow" />
</li>
<!-- CONFIRM what is this queue -->
<li>
<IntegerSetting path=":pleroma.Oban.:queues.:background" />
</li>
</ul>
<GroupSetting path=":pleroma.Oban.:queues" />
</li>
</ul>
<div class="setting-section">
<h3>{{ $t('admin_dash.job_queues.Gun.title') }}</h3>
<ul class="setting-list">
<li>

2
src/components/settings_modal/admin_tabs/limits_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div :label="$t('admin_dash.tabs.limits')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.limits.arbitrary_limits') }}</h3>
<ul class="setting-list">
<li>

26
src/components/settings_modal/admin_tabs/links_tab.scss
View file

@ -1,26 +0,0 @@
.LinksTab {
// awkward "disable = false" backend options
.weird-options {
.checkbox {
margin: 0;
}
}
.setting-list.suboptions.weird-suboptions {
display: flex;
flex-direction: column;
gap: 0.5em;
margin: 0;
li {
margin: 0;
display: flex;
}
.GroupSetting {
display: inline-block;
margin: 0;
padding: 0;
}
}
}

103
src/components/settings_modal/admin_tabs/links_tab.vue
View file

@ -3,7 +3,7 @@
class="LinksTab"
:label="$t('admin_dash.tabs.media_proxy')"
>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.links.link_previews') }}</h3>
<ul class="setting-list">
<li>
@ -38,109 +38,8 @@
<ListSetting path=":pleroma.:rich_media.:ignore_hosts" />
</li>
</ul>
<h3>{{ $t('admin_dash.links.link_formatter') }}</h3>
<ul class="setting-list weird-options">
<li>
<Checkbox
:model-value="classIsPresent"
@update:model-value="checkClass"
>
<i18n-t
keypath="admin_dash.temp_overrides.:pleroma.Pleroma_DOT_Formatter.:attribute_toggle.label"
tag="span"
scope="global"
>
<template #attr>
<code>class</code>
</template>
</i18n-t>
</Checkbox>
<div class="setting-list suboptions weird-suboptions">
<StringSetting
v-if="classIsPresent"
:path="[':pleroma', 'Pleroma.Formatter', ':class']"
hide-label
hide-draft-buttons
/>
<GroupSetting :path="[':pleroma', 'Pleroma.Formatter', ':class']" />
</div>
</li>
<li>
<Checkbox
:model-value="relIsPresent"
@update:model-value="checkRel"
>
<i18n-t
keypath="admin_dash.temp_overrides.:pleroma.Pleroma_DOT_Formatter.:attribute_toggle.label"
tag="span"
scope="global"
>
<template #attr>
<code>rel</code>
</template>
</i18n-t>
</Checkbox>
<div class="setting-list suboptions weird-suboptions">
<StringSetting
v-if="relIsPresent"
:path="[':pleroma', 'Pleroma.Formatter', ':rel']"
hide-label
hide-draft-buttons
/>
<GroupSetting
:path="[':pleroma', 'Pleroma.Formatter', ':rel']"
/>
</div>
</li>
<li>
<BooleanSetting :path="[':pleroma', 'Pleroma.Formatter', ':new_window']" />
</li>
<li>
<BooleanSetting :path="[':pleroma', 'Pleroma.Formatter', ':strip_prefix']" />
</li>
<li>
<BooleanSetting :path="[':pleroma', 'Pleroma.Formatter', ':extra']" />
</li>
<li>
<ChoiceSetting
:path="[':pleroma', 'Pleroma.Formatter', ':validate_tld']"
:options="validateTLDOptions"
override-options
/>
</li>
<li>
<Checkbox
:model-value="truncateIsPresent"
@update:model-value="checkTruncate"
>
{{ truncateDescription.label }}
</Checkbox>
<div class="setting-list suboptions weird-suboptions">
<li>
<IntegerSetting
v-if="truncateIsPresent"
:path="[':pleroma', 'Pleroma.Formatter', ':truncate']"
hide-label
hide-draft-buttons
/>
</li>
<li>
<GroupSetting :path="[':pleroma', 'Pleroma.Formatter', ':truncate']" />
</li>
</div>
</li>
<li>
<!-- CONFIRM backend what's difference between here and :extra -->
<ListSetting
ignore-suggestions
path=":pleroma.:uri_schemes.:valid_schemes"
/>
</li>
</ul>
</div>
</div>
</template>
<script src="./links_tab.js"></script>
<style lang="scss" src="./links_tab.scss"></style>

2
src/components/settings_modal/admin_tabs/mailer_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div :label="$t('admin_dash.tabs.mailer')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.mailer.adapter') }}</h3>
<ul class="setting-list">
<li>

2
src/components/settings_modal/admin_tabs/media_proxy_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div :label="$t('admin_dash.tabs.media_proxy')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.media_proxy.basic') }}</h3>
<ul class="setting-list">
<li>

2
src/components/settings_modal/admin_tabs/monitoring_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div :label="$t('admin_dash.tabs.monitoring')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.monitoring.builtins') }}</h3>
<ul class="setting-list">
<li>

84
src/components/settings_modal/admin_tabs/other_tab.vue
View file

@ -1,20 +1,14 @@
<template>
<div :label="$t('admin_dash.tabs.other')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.other.uncategorized') }}</h3>
<ul class="setting-list">
<li>
<StringSetting path=":pleroma.:instance.:static_dir" />
</li>
<li>
<StringSetting path=":pleroma.:modules.:runtime_dir" />
</li>
<li>
<BooleanSetting path=":pleroma.:instance.:profile_directory" />
</li>
<li>
<BooleanSetting :path="[':pleroma','Pleroma.Web.ApiSpec.CastAndValidate',':strict']" />
</li>
</ul>
<h3>{{ $t('admin_dash.other.reports') }}</h3>
<ul class="setting-list">
@ -42,82 +36,6 @@
<IntegerSetting :path="[':pleroma','Pleroma.User.Backup',':timeout']" />
</li>
</ul>
<h3>{{ $t('admin_dash.other.feed') }}</h3>
<ul class="setting-list">
<h4>{{ $t('admin_dash.other.feed_title') }}</h4>
<li>
<IntegerSetting path=":pleroma.:feed.:post_title.:max_length" />
</li>
<li>
<StringSetting path=":pleroma.:feed.:post_title.:omission" />
</li>
<li>
<GroupSetting path=":pleroma.:feed.:post_title" />
</li>
</ul>
<h3>{{ $t('admin_dash.other.remote_ip') }}</h3>
<p>{{ $t('admin_dash.other.remote_ip_description') }}</p>
<ul class="setting-list">
<li>
<BooleanSetting :path="[':pleroma','Pleroma.Web.Plugs.RemoteIp',':enabled']" />
</li>
<li>
<ListSetting :path="[':pleroma','Pleroma.Web.Plugs.RemoteIp',':headers']" />
</li>
<li>
<ListSetting :path="[':pleroma','Pleroma.Web.Plugs.RemoteIp',':proxies']" />
</li>
<li>
<ListSetting :path="[':pleroma','Pleroma.Web.Plugs.RemoteIp',':reserved']" />
</li>
</ul>
<h3>{{ $t('admin_dash.other.mime') }}</h3>
<ul class="setting-list">
<li>
<ListSetting
override-backend-description-label="application/activity+json"
hide-description
:path="[':mime',':types', 'application/activity+json']"
/>
</li>
<li>
<ListSetting
override-backend-description-label="application/jrd+json"
hide-description
:path="[':mime',':types', 'application/jrd+json']"
/>
</li>
<li>
<ListSetting
override-backend-description-label="application/ld+json"
hide-description
:path="[':mime',':types', 'application/ld+json']"
/>
</li>
<li>
<ListSetting
override-backend-description-label="application/xml"
hide-description
:path="[':mime',':types', 'application/xml']"
/>
</li>
<li>
<ListSetting
override-backend-description-label="application/xrd+xml"
hide-description
:path="[':mime',':types', 'application/xrd+xml']"
/>
</li>
</ul>
<h3>{{ $t('admin_dash.other.streamer') }}</h3>
<ul class="setting-list">
<li>
<IntegerSetting path=":pleroma.:streamer.:workers" />
</li>
<li>
<IntegerSetting path=":pleroma.:streamer.:overflow_workers" />
</li>
</ul>
<h3>{{ $t('admin_dash.other.privileges') }}</h3>
<ul class="setting-list">
<li>

16
src/components/settings_modal/admin_tabs/posts_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div :label="$t('admin_dash.tabs.posts')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.posts.global') }}</h3>
<ul class="setting-list">
<li>
@ -12,20 +12,6 @@
<li>
<ListSetting path=":pleroma.:instance.:allowed_post_formats" />
</li>
<li>
<h4>{{ $t('admin_dash.posts.scheduled_activites') }}</h4>
<ul class="setting-list">
<li>
<BooleanSetting :path="[':pleroma', 'Pleroma.ScheduledActivity', ':enabled']" />
</li>
<li>
<IntegerSetting :path="[':pleroma', 'Pleroma.ScheduledActivity', ':daily_user_limit']" />
</li>
<li>
<IntegerSetting :path="[':pleroma', 'Pleroma.ScheduledActivity', ':total_user_limit']" />
</li>
</ul>
</li>
</ul>
<h3>{{ $t('admin_dash.posts.remote') }}</h3>
<ul class="setting-list">

2
src/components/settings_modal/admin_tabs/rates_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div :label="$t('admin_dash.tabs.instance')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.rate_limit.account_confirmation_resend') }}</h3>
<ul class="setting-list">
<li>

8
src/components/settings_modal/admin_tabs/registrations_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div :label="$t('admin_dash.tabs.instance')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.instance.registrations') }}</h3>
<ul class="setting-list">
<li>
@ -168,12 +168,6 @@
</ul>
<h3>{{ $t('admin_dash.registrations.restrictions') }}</h3>
<ul class="setting-list">
<li>
<ListSetting
ignore-suggestions
:path="[':pleroma', 'Pleroma.User', ':restricted_nicknames']"
/>
</li>
<li>
<ListSetting
ignore-suggestions

2
src/components/settings_modal/admin_tabs/uploads_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div :label="$t('admin_dash.tabs.uploads')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.uploads.upload') }}</h3>
<ul class="setting-list">
<li>

3
src/components/settings_modal/helpers/attachment_setting.vue
View file

@ -1,10 +1,11 @@
<template>
<span
v-if="matchesExpertLevel"
class="AttachmentSetting"
class="AttachmentSetting setting-item"
:class="{ '-compact': compact }"
>
<label
class="setting-label"
:for="path"
:class="{ 'faint': shouldBeDisabled }"
>

48
src/components/settings_modal/helpers/boolean_setting.vue
View file

@ -1,9 +1,10 @@
<template>
<label
v-if="matchesExpertLevel"
class="BooleanSetting"
class="BooleanSetting setting-item"
>
<Checkbox
class="setting-control setting-label"
:model-value="visibleState"
:disabled="shouldBeDisabled"
:indeterminate="isIndeterminate"
@ -13,6 +14,12 @@
class="label"
:class="{ 'faint': shouldBeDisabled }"
>
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
{{ ' ' }}
<template v-if="backendDescriptionLabel">
{{ backendDescriptionLabel }}
</template>
@ -22,21 +29,44 @@
<slot v-else />
</span>
</Checkbox>
{{ ' ' }}
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
<DraftButtons />
<p
v-if="backendDescriptionDescription"
v-if="backendDescriptionDescription || showDescription"
class="setting-description"
:class="{ 'faint': shouldBeDisabled }"
>
<slot name="description">
{{ backendDescriptionDescription + ' ' }}
</slot>
</p>
<DraftButtons />
</label>
</template>
<script src="./boolean_setting.js"></script>
<style lang="scss">
.BooleanSetting {
display: grid;
grid-template-columns: subgrid;
.checkbox {
display: grid;
grid-template-columns: subgrid;
}
.label {
grid-area: label;
text-align: right;
}
.-mobile & {
.label {
text-align: left;
}
}
.checkbox-indicator {
grid-area: control;
}
}
</style>

30
src/components/settings_modal/helpers/choice_setting.vue
View file

@ -1,17 +1,25 @@
<template>
<label
v-if="matchesExpertLevel"
class="ChoiceSetting"
class="ChoiceSetting setting-item"
:class="{ 'faint': shouldBeDisabled }"
>
<span class="setting-label">
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
{{ ' ' }}
<template v-if="backendDescriptionLabel">
{{ backendDescriptionLabel }}
</template>
<template v-else>
<slot />
</template>
{{ ' ' }}
</span>
<Select
class="setting-control"
:model-value="realDraftMode ? draft : state"
:disabled="shouldBeDisabled"
@update:model-value="update"
@ -25,11 +33,6 @@
{{ option.value === defaultState ? $t('settings.instance_default_simple') : '' }}
</option>
</Select>
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
<DraftButtons />
<p
v-if="backendDescriptionDescription"
@ -41,3 +44,16 @@
</template>
<script src="./choice_setting.js"></script>
<style lang="scss">
.ChoiceSetting.setting-item {
.-mobile & {
display: block;
.setting-label {
display: block;
margin-bottom: 0.5em
}
}
}
</style>

2
src/components/settings_modal/helpers/color_setting.vue
View file

@ -1,7 +1,7 @@
<template>
<label
v-if="matchesExpertLevel"
class="ColorSetting"
class="ColorSetting setting-item"
>
<label
v-if="!hideLabel"

2
src/components/settings_modal/helpers/group_setting.vue
View file

@ -1,7 +1,7 @@
<template>
<span
v-if="matchesExpertLevel"
class="GroupSetting"
class="GroupSetting setting-item"
>
<ModifiedIndicator
:changed="isChanged"

8
src/components/settings_modal/helpers/list_setting.vue
View file

@ -1,7 +1,7 @@
<template>
<div
v-if="matchesExpertLevel"
class="ListSetting"
class="ListSetting setting-item"
>
<label
class="setting-label"
@ -83,8 +83,10 @@
<script src="./list_setting.js"></script>
<style lang="scss">
.ListSetting {
.btn-group {
display: flex
.setting-list {
.checkbox {
padding: 0.5em 0;
}
}
}
</style>

2
src/components/settings_modal/helpers/map_setting.vue
View file

@ -1,7 +1,7 @@
<template>
<div
v-if="matchesExpertLevel"
class="MapSetting"
class="MapSetting setting-item"
>
<label
class="setting-label"

4
src/components/settings_modal/helpers/number_setting.vue
View file

@ -1,7 +1,7 @@
<template>
<span
v-if="matchesExpertLevel"
class="NumberSetting"
class="NumberSetting setting-item"
>
<label
v-if="!hideLabel"
@ -20,7 +20,7 @@
{{ ' ' }}
<input
:id="path"
class="input number-input"
class="input number-input setting-control"
type="number"
:step="step || 1"
:disabled="shouldBeDisabled"

2
src/components/settings_modal/helpers/proxy_setting.vue
View file

@ -1,7 +1,7 @@
<template>
<label
v-if="matchesExpertLevel"
class="ProxySetting"
class="ProxySetting setting-item"
>
<label
v-if="!hideLabel"

2
src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
View file

@ -1,7 +1,7 @@
<template>
<div
v-if="matchesExpertLevel"
class="PWAManifestIconsSetting"
class="PWAManifestIconsSetting setting-item"
>
<label
class="setting-label"

2
src/components/settings_modal/helpers/rate_setting.vue
View file

@ -1,7 +1,7 @@
<template>
<div
v-if="matchesExpertLevel"
class="RateSetting"
class="RateSetting setting-item"
>
<label
class="setting-label"

8
src/components/settings_modal/helpers/setting.js
View file

@ -18,6 +18,10 @@ export default {
type: [String, Array],
required: false
},
showDescription: {
type: Boolean,
required: false
},
descriptionPathOverride: {
type: [String, Array],
required: false
@ -69,7 +73,7 @@ export default {
type: Boolean
},
overrideBackendDescriptionLabel: {
type: Boolean
type: [Boolean, String]
},
draftMode: {
type: Boolean,
@ -157,6 +161,8 @@ export default {
}
},
backendDescriptionDescription () {
console.log('LOL', this.description)
if (this.description) return this.description
if (this.realSource !== 'admin') return ''
if (this.hideDescription) return null
if (!this.backendDescription || this.overrideBackendDescription) {

20
src/components/settings_modal/helpers/string_setting.vue
View file

@ -1,7 +1,7 @@
<template>
<label
<span
v-if="matchesExpertLevel"
class="StringSetting"
class="StringSetting setting-item"
>
<label
v-if="!hideLabel"
@ -9,6 +9,12 @@
class="setting-label"
:class="{ 'faint': shouldBeDisabled }"
>
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
{{ ' ' }}
<template v-if="backendDescriptionLabel">
{{ backendDescriptionLabel + ' ' }}
</template>
@ -17,10 +23,9 @@
</template>
<slot v-else />
</label>
{{ ' ' }}
<input
:id="path"
class="input string-input"
class="setting-control input string-input"
:class="{ disabled: shouldBeDisabled }"
:disabled="shouldBeDisabled"
:placeholder="backendDescriptionSuggestions"
@ -28,11 +33,6 @@
@change="update"
>
{{ ' ' }}
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
<DraftButtons v-if="!hideDraftButtons" />
<p
v-if="backendDescriptionDescription"
@ -41,7 +41,7 @@
>
{{ backendDescriptionDescription + ' ' }}
</p>
</label>
</span>
</template>
<script src="./string_setting.js"></script>

31
src/components/settings_modal/helpers/tuple_setting.vue
View file

@ -1,7 +1,7 @@
<template>
<label
<span
class="setting-item"
v-if="matchesExpertLevel"
class="TupleSetting"
>
<label
v-if="!hideLabel"
@ -9,6 +9,12 @@
class="setting-label"
:class="{ 'faint': shouldBeDisabled }"
>
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
{{ ' ' }}
<template v-if="backendDescriptionLabel">
{{ backendDescriptionLabel + ' ' }}
</template>
@ -17,7 +23,7 @@
</template>
<slot v-else />
</label>
{{ ' ' }}
<span class="setting-control">
<input
:id="path"
class="input string-input"
@ -37,22 +43,7 @@
:value="visibleState?.tuple?.[1]"
@change="e => update({ e, side: 1 })"
>
{{ ' ' }}
<input
:id="path"
class="input string-input"
:class="{ disabled: shouldBeDisabled }"
:disabled="shouldBeDisabled"
:placeholder="backendDescriptionSuggestions?.[0]?.[1]"
:value="visibleState?.tuple?.[2]"
@change="e => update({ e, side: 2 })"
>
{{ ' ' }}
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
</span>
<DraftButtons v-if="!hideDraftButtons" />
<p
v-if="backendDescriptionDescription"
@ -61,7 +52,7 @@
>
{{ backendDescriptionDescription + ' ' }}
</p>
</label>
</span>
</template>
<script src="./tuple_setting.js"></script>

18
src/components/settings_modal/helpers/unit_setting.vue
View file

@ -1,16 +1,20 @@
<template>
<span
v-if="matchesExpertLevel"
class="UnitSetting"
class="UnitSetting setting-item"
>
<label
:for="path"
class="size-label"
class="setting-label size-label"
>
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
{{ ' ' }}
<slot />
</label>
{{ ' ' }}
<span class="no-break">
<span class="no-break setting-control">
<input
:id="path"
class="input number-input"
@ -38,10 +42,6 @@
</Select>
</span>
{{ ' ' }}
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
</span>
</template>
@ -50,7 +50,7 @@
<style lang="scss">
.UnitSetting {
.no-break {
display: inline-block;
display: inline-flex;
}
.number-input {

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

@ -161,9 +161,11 @@ export default {
const contentClasses = ['tab-content']
if (props['full-width'] || props['full-width'] === '') {
contentClasses.push('-full-width')
wrapperClasses.push('-full-width')
}
if (props['full-height'] || props['full-width'] === '') {
contentClasses.push('-full-height')
wrapperClasses.push('-full-height')
}
return (
<div class={wrapperClasses} >

40
src/components/settings_modal/helpers/vertical_tab_switcher.scss
View file

@ -26,24 +26,6 @@
}
> .contents {
flex: 1 0 35em;
.tab-content {
align-self: center;
&:not(.-full-width) {
max-width: 40em;
}
&.-full-width {
align-self: stretch;
}
&.-full-height {
flex: 1;
}
}
.tab-content-label {
box-sizing: border-box;
margin: 0;
@ -60,8 +42,24 @@
flex: 1 1 auto;
height: 100%;
overflow-y: auto;
display: flex;
display: grid;
grid-template-columns: minmax(1em, 1fr) minmax(min-content, 45em) minmax(1em, 1fr);
grid-template-areas: ". content .";
flex-direction: column;
.tab-content {
grid-area: content;
&.-full-width {
grid-column: 1 / 4;
}
&.-full-height {
> * {
height: 100%;
}
}
}
}
.tab-content-wrapper {
@ -109,6 +107,10 @@
flex-shrink: 1;
}
}
.tab-slot-wrapper {
grid-template-columns: 0 minmax(min-content, 45em) 0;
}
}
@supports (container-type: inline-size) {

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

@ -6,6 +6,7 @@
font-weight: 500;
margin-top: 1em;
margin-bottom: 1em;
margin-right: 1em;
}
h3 {
@ -13,6 +14,7 @@
font-weight: 500;
margin-top: 1em;
margin-bottom: 0.5em;
margin-right: 1em;
border-bottom: 1px solid var(--border);
padding-bottom: 0.25em;
box-sizing: border-box;
@ -22,27 +24,85 @@
h4 {
font-size: 1.1rem;
margin-top: 1em;
margin-right: 1em;
margin-bottom: 0.5em;
margin-left: 1em;
}
h5 {
font-size: 1rem;
margin-bottom: 0.5em;
margin-top: 0;
margin-right: 1em;
margin-bottom: 0.25em;
margin-top: 0.75em;
}
p {
line-height: 1.5;
}
.setting-item > p {
.suboptions {
margin-left: 1em;
}
.sidenote {
margin-left: 5em;
padding: 0.25em 1em;
margin-top: 0.25em;
}
.setting-description {
margin-top: 0.2em;
margin-bottom: 0;
font-size: 80%;
}
.setting-item {
display: grid;
grid-template-areas:
"label control"
". desc"
". draft";
grid-template-columns: 4fr 5fr;
column-gap: 0.5em;
align-items: baseline;
padding: 0.5em 0;
.setting-label {
grid-area: label;
text-align: right;
}
.ModifiedIndicator,
.ProfileSettingIndicator {
grid-area: indicator;
}
.setting-control {
grid-area: control;
}
.setting-control.setting-label {
grid-column: 1 / 3;
text-align: left;
}
.setting-description {
grid-area: desc;
}
.DraftButtons {
grid-area: draft;
}
}
.vertical-tab-switcher {
height: 100%;
}
.setting-list,
.option-list {
list-style-type: none;
padding-left: 2em;
padding-left: 0;
margin: 0;
.btn:not(.dropdown-button) {
@ -55,24 +115,17 @@
}
}
li {
display: block;
margin: 0.75em 0;
> label {
display: block;
margin: 0.75em 0;
padding: 0.5em 0;
}
}
.suboptions {
margin-top: 0.3em;
}
&.two-column {
display: grid;
grid-template-columns: 1fr 1fr;
margin-left: 2em;
border-bottom: 1px solid var(--border);
padding-bottom: 0.5em;
margin-bottom: 1em;
.setting-item {
grid-template-columns: 3fr 1fr;
}
> li {
margin: 0;
@ -81,12 +134,6 @@
}
}
.setting-description {
margin-top: 0.2em;
margin-bottom: 0;
font-size: 80%;
}
.settings-modal-panel {
overflow: hidden;
transition: transform;
@ -135,20 +182,29 @@
}
}
.setting-item {
grid-template-columns: 1fr min-content;
column-gap: 0.5em;
padding: 1em 1em;
align-items: center;
.setting-label {
text-align: left;
}
}
ul {
padding: 0;
li:not(:first-child) {
.setting-item {
border-top: 1px solid var(--border);
}
}
}
.setting-list:not(.suboptions),
.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;
}

48
src/components/settings_modal/settings_modal_admin_content.scss
View file

@ -1,48 +0,0 @@
.settings_tab-switcher {
height: 100%;
.setting-item {
border-bottom: 2px solid var(--border);
margin: 1em 1em 1.4em;
padding-bottom: 1.4em;
> div,
> label {
display: block;
margin-bottom: 0.5em;
&:last-child {
margin-bottom: 0;
}
}
.select-multiple {
margin-top: 0.5em;
display: flex;
flex-direction: column;
.option-list {
margin: 0;
margin-top: 0.5em;
padding-left: 0.5em;
}
}
&:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 1em;
}
textarea {
width: 100%;
max-width: 100%;
height: 100px;
}
.unavailable,
.unavailable svg {
color: var(--cRed);
}
}
}

12
src/components/settings_modal/settings_modal_admin_content.vue
View file

@ -2,7 +2,7 @@
<vertical-tab-switcher
v-if="adminDescriptionsLoaded && (noDb || adminDbLoaded)"
ref="tabSwitcher"
class="settings_tab-switcher"
class="settings-admin-content settings_tab-switcher"
:side-tab-bar="true"
:scrollable-tabs="true"
:render-only-focused="true"
@ -15,7 +15,7 @@
data-tab-name="nodb-notice"
>
<div :label="$t('admin_dash.tabs.nodb')">
<div class="setting-item">
<div class="setting-section">
<h2>{{ $t('admin_dash.nodb.heading') }}</h2>
<i18n-t
scope="global"
@ -185,4 +185,10 @@
<script src="./settings_modal_admin_content.js"></script>
<style src="./settings_modal_admin_content.scss" lang="scss"></style>
<style lang="scss">
.settings-admin-content {
.setting-item {
grid-template-columns: 1fr 3fr;
}
}
</style>

50
src/components/settings_modal/settings_modal_user_content.scss
View file

@ -1,50 +0,0 @@
.settings_tab-switcher {
height: 100%;
[full-height="true"] {
height: 100%
}
.setting-item {
margin: 1em 1em 1.4em;
padding-bottom: 1.4em;
> div,
> label {
margin-bottom: 0.5em;
&:last-child {
margin-bottom: 0;
}
}
.select-multiple {
margin-top: 1em;
display: flex;
flex-direction: column;
.option-list {
margin: 0;
margin-top: 0.5em;
padding-left: 0.5em;
}
}
&:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 1em;
}
textarea {
width: 100%;
max-width: 100%;
height: 100px;
}
.unavailable,
.unavailable svg {
color: var(--cRed);
}
}
}

4
src/components/settings_modal/settings_modal_user_content.vue
View file

@ -49,7 +49,6 @@
<AppearanceTab />
</div>
<div
:full-width="true"
:label="$t('settings.layout')"
icon="table-columns"
data-tab-name="layout"
@ -68,7 +67,6 @@
</div>
<div
:label="$t('settings.filtering')"
:full-width="true"
icon="filter"
data-tab-name="filtering"
>
@ -139,5 +137,3 @@
</template>
<script src="./settings_modal_user_content.js"></script>
<style src="./settings_modal_user_content.scss" lang="scss"></style>

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

@ -1,4 +1,6 @@
.appearance-tab {
margin: 1em;
h3 {
border: none
}
@ -138,6 +140,7 @@
border: 1px solid var(--border);
margin-bottom: 0.5em;
margin-top: 0;
padding: 0.5em;
}
.palettes {

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

@ -5,7 +5,7 @@
icon="table-columns"
>
<div
class="setting-item"
class="setting-section"
:label="$t('settings.theme')"
icon="paintbrush"
>

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

@ -1,6 +1,6 @@
<template>
<div class="clutter-tab">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.interface') }}</h3>
<ul class="setting-list">
<li>

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

@ -1,14 +1,16 @@
<template>
<div :label="$t('settings.posts')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.general') }}</h3>
<ul class="setting-list">
<li>
<label for="default-vis">
<label class="setting-item " for="default-vis">
<span class="setting-label">
<ProfileSettingIndicator :is-profile="true" />
{{ $t('settings.default_vis') }}
{{ ' ' }}
</span>
<ScopeSelector
class="scope-selector"
class="scope-selector setting-control"
:show-all="true"
:user-default="$store.state.profileConfig.defaultScope"
:initial-scope="$store.state.profileConfig.defaultScope"
@ -16,7 +18,6 @@
:unstyled="false"
uns
/>
<ProfileSettingIndicator :is-profile="true" />
</label>
</li>
<li>

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

@ -3,7 +3,7 @@
class="data-import-export-tab"
:label="$t('settings.data_import_export_tab')"
>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.import_export.title') }}</h3>
<ul class="setting-list">
<li>

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

@ -3,7 +3,7 @@
:label="$t('settings.developer')"
class="developer-tab"
>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.version.title') }}</h3>
<dl class="setting-list">
<dt>{{ $t('settings.version.backend_version') }}</dt>

11
src/components/settings_modal/tabs/filtering_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="filtering-tab">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.filter.mute_filter') }}</h3>
<ul class="setting-list">
<li>
@ -14,7 +14,10 @@
</ChoiceSetting>
</li>
<li>
<span class="setting-item">
<span class="setting-label">
{{ $t('user_card.default_mute_expiration') }}
</span>
<Select
id="onMuteDefaultActionLv1"
v-model="onMuteDefaultActionLv1"
@ -27,6 +30,7 @@
{{ option.label }}
</option>
</Select>
</span>
<ul
v-if="onMuteDefaultActionLv1 === 'temporarily'"
class="setting-list suboptions"
@ -44,9 +48,13 @@
</ul>
</li>
<li v-if="blockExpirationSupported">
<span class="setting-item">
<span class="setting-label">
{{ $t('user_card.default_block_expiration') }}
</span>
<Select
id="onBlockDefaultActionLv1"
class="setting-control"
v-model="onBlockDefaultActionLv1"
>
<option
@ -57,6 +65,7 @@
{{ option.label }}
</option>
</Select>
</span>
<ul
v-if="onBlockDefaultActionLv1 === 'temporarily'"
class="setting-list suboptions"

35
src/components/settings_modal/tabs/general_tab.vue
View file

@ -1,25 +1,25 @@
<template>
<div>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.format_and_language') }}</h3>
<ul class="setting-list">
<li>
<h4>{{ $t('settings.interfaceLanguage') }}</h4>
<interface-language-switcher
v-model="language"
class="lang-selector"
@update="val => language = val"
>
{{ $t('settings.interfaceLanguage') }}
</interface-language-switcher>
</li>
<li>
/>
<h4>
{{ $t('settings.email_language') }}
{{ ' ' }}
<ProfileSettingIndicator :is-profile="true" />
</h4>
<interface-language-switcher
v-model="emailLanguage"
class="lang-selector"
:profile="true"
@update:model-value="updateProfile()"
>
{{ $t('settings.email_language') }}
</interface-language-switcher>
</li>
/>
<li>
<BooleanSetting path="useAbsoluteTimeFormat">
{{ $t('settings.absolute_time_format') }}
@ -47,8 +47,7 @@
>
{{ $t('settings.text_size') }}
</UnitSetting>
<div>
<small>
<p class="sidenote">
<i18n-t
scope="global"
keypath="settings.text_size_tip"
@ -65,8 +64,7 @@
>
<code>14px</code>
</i18n-t>
</small>
</div>
</p>
</li>
<li>
<FontControl
@ -144,7 +142,7 @@
class="setting-list"
>
<li class="select-multiple">
<span class="label">{{ $t('settings.confirm_dialogs') }}</span>
<h4 class="label">{{ $t('settings.confirm_dialogs') }}</h4>
<ul class="option-list">
<li>
<BooleanSetting path="modalOnRepeat">
@ -156,9 +154,10 @@
{{ $t('settings.confirm_dialogs_unfollow') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting
<li
v-if="!blockExpirationSupported"
>
<BooleanSetting
path="modalOnBlock"
>
{{ $t('settings.confirm_dialogs_block') }}

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

@ -1,6 +1,6 @@
<template>
<div :label="$t('settings.layout')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.general') }}</h3>
<ul class="setting-list">
<li>

36
src/components/settings_modal/tabs/notifications_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div :label="$t('settings.notifications')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.notification_setting_annoyance') }}</h3>
<ul class="setting-list">
<li>
@ -12,11 +12,9 @@
<BooleanSetting path="ignoreInactionableSeen">
{{ $t('settings.notification_setting_ignore_inactionable_seen') }}
</BooleanSetting>
<div>
<small>
<p class="sidenote">
{{ $t('settings.notification_setting_ignore_inactionable_seen_tip') }}
</small>
</div>
</p>
</li>
<li>
<BooleanSetting
@ -28,7 +26,7 @@
</li>
</ul>
</div>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.notification_setting_filters') }}</h3>
<ul class="setting-list">
<li>
@ -41,7 +39,10 @@
</li>
<li>
<h4> {{ $t('settings.notification_visibility') }}</h4>
<p v-if="expertLevel > 0">
<p
class="sidenote"
v-if="expertLevel > 0"
>
{{ $t('settings.notification_setting_filters_chrome_push') }}
</p>
<ul class="setting-list two-column">
@ -241,7 +242,7 @@
<div
v-if="expertLevel > 0"
class="setting-item"
class="setting-section"
>
<h3>{{ $t('settings.notification_setting_privacy') }}</h3>
<ul class="setting-list">
@ -260,11 +261,12 @@
>
{{ $t('settings.enable_web_push_always_show') }}
</BooleanSetting>
<div :class="{ faint: !mergedConfig.webPushNotifications }">
<small>
<p
:class="{ faint: !mergedConfig.webPushNotifications }"
class="sidenote"
>
{{ $t('settings.enable_web_push_always_show_tip') }}
</small>
</div>
</p>
</li>
</ul>
</li>
@ -279,10 +281,12 @@
</li>
</ul>
</div>
<div class="setting-item">
<p>{{ $t('settings.notification_mutes') }}</p>
<p>{{ $t('settings.notification_blocks') }}</p>
</div>
<p class="sidenote">
<ul>
<li>{{ $t('settings.notification_mutes') }}</li>
<li>{{ $t('settings.notification_blocks') }}</li>
</ul>
</p>
</div>
</template>

1
src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.scss
View file

@ -1,5 +1,6 @@
.old-theme-tab {
min-width: var(--themeEditorMinWidth, fit-content);
margin: 1em;
.deprecation-warning {
padding: 0.5em;

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

@ -1,6 +1,6 @@
<template>
<div class="posts-tab">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.posts_appearance') }}</h3>
<ul class="setting-list">
<li>

25
src/components/settings_modal/tabs/profile_tab.scss
View file

@ -1,6 +1,6 @@
.profile-tab {
// overriding global for better look
.setting-item.profile-edit {
.setting-section.profile-edit {
margin: 0;
h2 {
@ -11,5 +11,28 @@
padding: 1.2em;
overflow: hidden;
}
}
.setting-item {
.custom-boolean-setting {
display: grid;
grid-template-columns: subgrid;
.label {
grid-area: label;
text-align: right;
}
.-mobile & {
.label {
text-align: left;
}
}
.checkbox-indicator {
grid-area: control;
}
}
}
}

13
src/components/settings_modal/tabs/profile_tab.vue
View file

@ -1,20 +1,25 @@
<template>
<div class="profile-tab">
<div class="setting-item profile-edit">
<div class="setting-section profile-edit">
<UserCard
:user-id="user.id"
:editable="true"
:switcher="false"
/>
</div>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.account_privacy') }}</h3>
<ul class="setting-list">
<li>
<Checkbox v-model="locked">
<div class="setting-item">
<Checkbox
class="setting-label setting-control custom-boolean-setting"
v-model="locked"
>
<ProfileSettingIndicator :is-profile="true" />
{{ $t('settings.lock_account_description') }}
</Checkbox>
<ProfileSettingIndicator :is-profile="true" />
</div>
</li>
<li>
<BooleanSetting

4
src/components/settings_modal/tabs/security_tab/mfa.vue
View file

@ -1,7 +1,7 @@
<template>
<div
v-if="readyInit && settings.available"
class="setting-item mfa-settings"
class="setting-section mfa-settings"
>
<div class="mfa-heading">
<h2>{{ $t('settings.mfa.title') }}</h2>
@ -10,7 +10,7 @@
<div>
<div
v-if="!setupInProgress"
class="setting-item"
class="setting-section"
>
<!-- Enabled methods -->
<h3>{{ $t('settings.mfa.authentication_methods') }}</h3>

12
src/components/settings_modal/tabs/security_tab/security_tab.vue
View file

@ -1,6 +1,6 @@
<template>
<div :label="$t('settings.security_tab')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.change_email') }}</h3>
<ul class="setting-list">
<li>
@ -41,7 +41,7 @@
</ul>
</div>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.change_password') }}</h3>
<ul class="setting-list">
<li>
@ -90,7 +90,7 @@
</ul>
</div>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.account_alias') }}</h3>
<table>
<thead>
@ -160,7 +160,7 @@
</div>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.oauth_tokens') }}</h3>
<table class="oauth-tokens">
<thead>
@ -191,7 +191,7 @@
</div>
<mfa />
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.move_account') }}</h3>
<p>{{ $t('settings.move_account_notes') }}</p>
<div>
@ -234,7 +234,7 @@
</template>
</div>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.delete_account') }}</h3>
<p v-if="!deletingAccount">
{{ $t('settings.delete_account_description') }}

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

@ -1,5 +1,6 @@
.StyleTab {
min-width: var(--themeEditorMinWidth, fit-content);
margin: 1em;
.style-control {
align-items: baseline;
@ -45,7 +46,7 @@
}
}
.setting-item.heading {
.setting-section.heading {
padding: 0;
}
@ -84,7 +85,7 @@
}
}
.setting-item {
.setting-section {
padding-bottom: 0;
.btn {

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

@ -3,7 +3,7 @@
<template>
<div class="StyleTab">
<div class="setting-item heading">
<div class="setting-section heading">
<div class="meta-preview">
<Preview id="edited-style-preview" />
<teleport
@ -82,7 +82,7 @@
<tab-switcher>
<div
key="component"
class="setting-item component-editor"
class="setting-section component-editor"
:label="$t('settings.style.themes3.editor.component_tab')"
:full-width="true"
>
@ -331,7 +331,7 @@
<div
key="palette"
:label="$t('settings.style.themes3.editor.palette_tab')"
class="setting-item list-editor palette-editor"
class="setting-section list-editor palette-editor"
:full-width="true"
>
<label

2
src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
View file

@ -1,7 +1,7 @@
<script src="./virtual_directives_tab.js"></script>
<template>
<div class="setting-item list-editor variables-editor">
<div class="setting-section list-editor variables-editor">
<label
class="list-select-label"
for="variables-selector"

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

@ -1,6 +1,6 @@
<template>
<div :label="$t('admin_dash.tabs.uploads')">
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('admin_dash.uploads.general') }}</h3>
<ul class="setting-list">
<li>

19
src/i18n/en.json
View file

@ -1179,10 +1179,6 @@
"reports": "Reports",
"feed": "RSS Feed",
"feed_title": "Article Title",
"mime": "MIME Types",
"remote_ip": "Reverse Proxy / Remote IP",
"remote_ip_description": "This should be disabled only if your instance is NOT behind a reverse proxy",
"streamer": "Notifications Streamer",
"privileges": "Privileges"
},
"monitoring": {
@ -1250,9 +1246,6 @@
"outbound": "Outgoing connections",
"incoming": "Incoming connections",
"security": "HTTP Security",
"cors": "Cross-origin Resource Sharing (CORS)",
"web_cache_ttl": "Web Cache TTL",
"web_cache_ttl_description": "Amount of milliseconds until web response cache is cleared. Use `nil` to disable expiration entirely.",
"web_push": "Web Push",
"web_push_description": "Web Push VAPID settings. You can use the mix task web_push.gen.keypair to generate it."
},
@ -1402,18 +1395,6 @@
},
"temp_overrides": {
":pleroma": {
"Oban": {
":queues": {
":scheduled_activites": {
"label": "Scheduled activities",
"description": "Scheduled activites queue"
},
":slow": {
"label": "Slow",
"description": "idk"
}
}
},
":connections_pool": {
":max_idle_time": {
"label": "Maximum idle time",