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-11 15:45:37 +02:00
commit 39856570a8
18 changed files with 360 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/App.scss
View file

@ -381,6 +381,7 @@ nav {
font-size: 1em;
font-family: sans-serif;
font-family: var(--font);
height: 2em;
&.-transparent {
backdrop-filter: blur(0.125em) contrast(60%);
@ -705,9 +706,10 @@ option {
display: inline-flex;
vertical-align: middle;
min-height: 2em;
align-items: end;
.Select select {
line-height: 1;
.input {
height: 2em;
}
> *,

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

@ -136,40 +136,6 @@
<script src="./font_control.js"></script>
<style lang="scss">
// Copy-paste of BooleanSetting
.font-control {
display: grid;
grid-template-columns: subgrid;
.checkbox {
display: grid;
grid-template-columns: subgrid;
}
.label {
grid-area: label;
text-align: right;
}
.-mobile & {
.font-input {
display: block;
}
.font-selector {
margin-top: 0.5em;
}
.label {
text-align: left;
}
}
.checkbox-indicator {
grid-area: control;
}
}
.invalid-tooltip {
margin: 0.5em 1em;
min-width: 10em;

20
src/components/settings_modal/admin_tabs/emoji_tab.scss
View file

@ -1,6 +1,6 @@
.EmojiTab {
.setting-list {
padding-left: 0.75em;
margin: 0.5em 2em;
}
.toolbar {
@ -12,6 +12,7 @@
display: flex;
flex: 1 0 auto;
justify-content: end;
align-items: end;
&:not(.btn-group) {
gap: 0.5em;
@ -27,6 +28,10 @@
padding: 0.5em;
font-size: 1rem;
}
.popover-wrapper {
display: flex;
}
}
.selector-buttons,
@ -34,6 +39,7 @@
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin-left: 1em;
}
h5 {
@ -69,13 +75,21 @@
flex-wrap: wrap;
gap: 1em;
.button-unstyled {
display: flex;
}
.emoji-item,
.placeholder {
background: var(--textFaint);
border-radius: 0.5em;
width: 2em;
height: 2em;
opacity: 0.5;
}
.placeholder {
background: var(--textFaint);
border-radius: 0.5em;
}
}
}

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

@ -43,7 +43,7 @@
:placeholder="$t('admin_dash.emoji.remote_pack_instance')"
>
<button
class="button button-default btn emoji-tab-popover-button"
class="button button-default emoji-tab-popover-button"
type="button"
@click="listRemotePacks"
>
@ -112,11 +112,11 @@
</Popover>
</span>
</h3>
<div class="setting-list">
<div class="setting-section">
<h4 class="toolbar">
{{ $t('admin_dash.emoji.edit_pack') }}
</h4>
<div class="selector-buttons setting-list">
<div class="setting-item selector-buttons">
<button
:disabled="!pack || pack.remote !== undefined"
class="button button-default btn"
@ -254,73 +254,97 @@
</h5>
<ul class="setting-list">
<li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
{{ $t('admin_dash.emoji.description') }}
<ModifiedIndicator
:changed="metaEdited('description')"
message-key="admin_dash.emoji.metadata_changed"
/>
<label
class="setting-item"
:class="{ ['-disabled']: !pack || pack.remote !== undefined }"
>
<span class="setting-label">
<ModifiedIndicator
:changed="metaEdited('description')"
message-key="admin_dash.emoji.metadata_changed"
/>
{{ $t('admin_dash.emoji.description') }}
</span>
<textarea
v-model="packMeta.description"
:disabled="!pack || pack.remote !== undefined"
class="bio resize-height input"
height="4"
class="bio resize-height input textarea setting-control"
/>
</label>
</li>
<li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
{{ $t('admin_dash.emoji.homepage') }}
<ModifiedIndicator
:changed="metaEdited('homepage')"
message-key="admin_dash.emoji.metadata_changed"
/>
<label
class="setting-item"
:class="{ ['-disabled']: !pack || pack.remote !== undefined }"
>
<span class="setting-label">
<ModifiedIndicator
:changed="metaEdited('homepage')"
message-key="admin_dash.emoji.metadata_changed"
/>
{{ $t('admin_dash.emoji.homepage') }}
</span>
<input
v-model="packMeta.homepage"
class="emoji-info-input input"
class="emoji-info-input input setting-control"
:disabled="!pack || pack.remote !== undefined"
>
</label>
</li>
<li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
{{ $t('admin_dash.emoji.fallback_src') }}
<ModifiedIndicator
:changed="metaEdited('fallback-src')"
message-key="admin_dash.emoji.metadata_changed"
/>
<label
class="setting-item"
:class="{ ['-disabled']: !pack || pack.remote !== undefined }"
>
<span class="setting-label">
<ModifiedIndicator
:changed="metaEdited('fallback-src')"
message-key="admin_dash.emoji.metadata_changed"
/>
{{ $t('admin_dash.emoji.fallback_src') }}
</span>
<input
v-model="packMeta['fallback-src']"
class="emoji-info-input input"
class="emoji-info-input input setting-control"
:disabled="!pack || pack.remote !== undefined"
>
</label>
</li>
<li>
<label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
{{ $t('admin_dash.emoji.fallback_sha256') }}
<label
class="setting-item"
:class="{ ['-disabled']: !pack || pack.remote !== undefined }"
>
<span class="setting-label">
{{ $t('admin_dash.emoji.fallback_sha256') }}
</span>
<input
v-model="packMeta['fallback-src-sha256']"
:disabled="!pack || pack.remote !== undefined"
class="emoji-info-input input"
class="emoji-info-input input setting-control"
>
</label>
</li>
<li>
<Checkbox
v-model="packMeta['share-files']"
:disabled="!pack || pack.remote !== undefined"
>
{{ $t('admin_dash.emoji.share') }}
</Checkbox>
<ModifiedIndicator
:changed="metaEdited('share-files')"
message-key="admin_dash.emoji.metadata_changed"
/>
<div class="setting-item">
<Checkbox
v-model="packMeta['share-files']"
:disabled="!pack || pack.remote !== undefined"
class="setting-label setting-control"
>
<ModifiedIndicator
:changed="metaEdited('share-files')"
message-key="admin_dash.emoji.metadata_changed"
/>
{{ $t('admin_dash.emoji.share') }}
</Checkbox>
</div>
</li>
<li>
<div class="meta-buttons">
<button
v-if="pack && pack.remote === undefined"
@ -355,6 +379,7 @@
>
<EmojiEditingPopover
v-if="pack && pack.remote === undefined"
class="emoji-item"
placement="bottom"
new-upload
:title="$t('admin_dash.emoji.adding_new')"

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

@ -3,6 +3,7 @@ import ChoiceSetting from '../helpers/choice_setting.vue'
import IntegerSetting from '../helpers/integer_setting.vue'
import StringSetting from '../helpers/string_setting.vue'
import GroupSetting from '../helpers/group_setting.vue'
import ColorSetting from '../helpers/color_setting.vue'
import AttachmentSetting from '../helpers/attachment_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
@ -20,6 +21,7 @@ const MailerTab = {
IntegerSetting,
StringSetting,
AttachmentSetting,
ColorSetting,
GroupSetting
},
computed: {

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

@ -1,6 +1,35 @@
<template>
<div :label="$t('admin_dash.tabs.mailer')">
<div class="setting-section">
<h3>{{ $t('admin_dash.mailer.styling') }}</h3>
<ul class="setting-list">
<h4>{{ $t('admin_dash.mailer.assets') }}</h4>
<li>
<StringSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':logo']" />
</li>
<h4>{{ $t('admin_dash.mailer.colors') }}</h4>
<li>
<ColorSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling', ':background_color']" />
</li>
<li>
<ColorSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling', ':content_background_color']" />
</li>
<li>
<ColorSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling', ':header_color']" />
</li>
<li>
<ColorSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling', ':text_color']" />
</li>
<li>
<ColorSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling', ':link_color']" />
</li>
<li>
<ColorSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling', ':text_muted_color']" />
</li>
<li>
<GroupSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling']" />
</li>
</ul>
<h3>{{ $t('admin_dash.mailer.adapter') }}</h3>
<ul class="setting-list">
<li>

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

@ -43,30 +43,3 @@
</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>

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

@ -20,7 +20,7 @@
{{ ' ' }}
<ColorInput
:id="path"
class="color-setting-input"
class="setting-control color-setting-input"
:class="{ disabled: shouldBeDisabled }"
:disabled="shouldBeDisabled"
:placeholder="backendDescriptionSuggestions"
@ -47,8 +47,25 @@
<script src="./color_setting.js"></script>
<style lang="scss">
.ColorSetting {
&.setting-item {
display: grid;
grid-template-areas:
"label control"
". desc"
". draft";
.setting-label {
text-align: right;
align-self: center;
}
.setting-control {
align-self: end;
}
}
.color-setting-input {
vertical-align: middle;
align-self: baseline;
}
}
</style>

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

@ -84,7 +84,7 @@
<script src="./map_setting.js"></script>
<style lang="scss">
.ListSetting {
.MapSetting {
.btn-group {
display: flex
}

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

@ -18,25 +18,27 @@
<slot v-else />
</label>
{{ ' ' }}
<input
:id="path"
class="input string-input"
:class="{ disabled: shouldBeDisabled }"
:disabled="shouldBeDisabled"
:placeholder="backendDescriptionSuggestions[0]"
:value="displayState"
@change="event => update({ event })"
>
{{ ' ' }}
<Checkbox
:model-value="socksState"
:disabled="shouldBeDisabled"
:indeterminate="isIndeterminate"
@update:model-value="event => update({ event, isProxy: true})"
>
{{ $t('admin_dash.http.socks5') }}
<div class="setting-control">
<input
:id="path"
class="input string-input"
:class="{ disabled: shouldBeDisabled }"
:disabled="shouldBeDisabled"
:placeholder="backendDescriptionSuggestions[0]"
:value="displayState"
@change="event => update({ event })"
>
{{ ' ' }}
</Checkbox>
<Checkbox
:model-value="socksState"
:disabled="shouldBeDisabled"
:indeterminate="isIndeterminate"
@update:model-value="event => update({ event, isProxy: true})"
>
SOCKS5
{{ ' ' }}
</Checkbox>
</div>
{{ ' ' }}
<ModifiedIndicator
:changed="isChanged"

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

@ -4,7 +4,7 @@
class="PWAManifestIconsSetting setting-item"
>
<label
class="setting-label"
class="pwa-label setting-label"
:class="{ 'faint': shouldBeDisabled }"
>
<template v-if="backendDescriptionLabel">
@ -22,12 +22,12 @@
>
{{ backendDescriptionDescription + ' ' }}
</p>
<ul class="setting-list">
<ul class="setting-list setting-control">
<li
v-for="(item, index) in visibleState"
:key="index"
>
<div>
<div class="setting-item">
<dl>
<dt><code>purpose</code></dt>
<dd>
@ -96,13 +96,34 @@
<script src="./pwa_manifest_icons_setting.js"></script>
<style lang="scss">
.PWAManifestIconsSetting {
display: inline-block;
&.setting-item {
display: grid;
grid-template-areas:
"label control"
"desc control"
". draft";
grid-template-rows: 2em auto 1fr;
}
.pwa-label.setting-label {
align-self: end;
}
.setting-description {
text-align: right;
align-self: start;
}
.setting-list {
display: grid;
gap: 0.5em;
}
.setting-item {
display: inline-block;
}
.buttons {
display: flex;
gap: 0.5em;

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

@ -7,6 +7,12 @@
class="setting-label"
:class="{ 'faint': shouldBeDisabled }"
>
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
{{ ' ' }}
<template v-if="backendDescriptionLabel">
{{ backendDescriptionLabel + ' ' }}
</template>
@ -22,82 +28,98 @@
>
{{ backendDescriptionDescription + ' ' }}
</p>
<table>
<tr>
<th>&nbsp;</th>
<th>
{{ $t('admin_dash.rate_limit.period') }}
</th>
<th>
{{ $t('admin_dash.rate_limit.amount') }}
</th>
</tr>
<tr>
<td v-if="isSeparate">
{{ $t('admin_dash.rate_limit.unauthenticated') }}
</td>
<td v-else>
{{ $t('admin_dash.rate_limit.rate_limit') }}
</td>
<td>
<input
class="input string-input"
type="number"
:value="normalizedState[0][0]"
@change="e => update({ event: e, index: 0, side: 0, eventType: 'edit' })"
>
</td>
<td>
<input
class="input string-input"
type="number"
:value="normalizedState[0][1]"
@change="e => update({ event: e, index: 1, side: 0, eventType: 'edit' })"
>
</td>
</tr>
<tr v-if="isSeparate">
<td>
{{ $t('admin_dash.rate_limit.authenticated') }}
</td>
<td>
<input
class="input string-input"
type="number"
:value="normalizedState[1][0]"
@change="e => update({ event: e, index: 0, side: 1, eventType: 'edit' })"
>
</td>
<td>
<input
class="input string-input"
type="number"
:value="normalizedState[1][1]"
@change="e => update({ event: e, index: 1, side: 1, eventType: 'edit' })"
>
</td>
</tr>
</table>
<Checkbox
:model-value="isSeparate"
@update:model-value="event => update({ event: event ? 'join' : 'split', eventType: 'toggleMode' })"
>
{{ $t('admin_dash.rate_limit.separate') }}
</Checkbox>
<div>
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
<DraftButtons />
<div class="setting-control">
<table>
<tr>
<th>&nbsp;</th>
<th>
{{ $t('admin_dash.rate_limit.period') }}
</th>
<th>
{{ $t('admin_dash.rate_limit.amount') }}
</th>
</tr>
<tr>
<td v-if="isSeparate">
{{ $t('admin_dash.rate_limit.unauthenticated') }}
</td>
<td v-else>
{{ $t('admin_dash.rate_limit.rate_limit') }}
</td>
<td>
<input
class="input string-input"
type="number"
:value="normalizedState[0][0]"
@change="e => update({ event: e, index: 0, side: 0, eventType: 'edit' })"
>
</td>
<td>
<input
class="input string-input"
type="number"
:value="normalizedState[0][1]"
@change="e => update({ event: e, index: 1, side: 0, eventType: 'edit' })"
>
</td>
</tr>
<tr v-if="isSeparate">
<td>
{{ $t('admin_dash.rate_limit.authenticated') }}
</td>
<td>
<input
class="input string-input"
type="number"
:value="normalizedState[1][0]"
@change="e => update({ event: e, index: 0, side: 1, eventType: 'edit' })"
>
</td>
<td>
<input
class="input string-input"
type="number"
:value="normalizedState[1][1]"
@change="e => update({ event: e, index: 1, side: 1, eventType: 'edit' })"
>
</td>
</tr>
</table>
<Checkbox
:model-value="isSeparate"
@update:model-value="event => update({ event: event ? 'join' : 'split', eventType: 'toggleMode' })"
>
{{ $t('admin_dash.rate_limit.separate') }}
</Checkbox>
</div>
</div>
<DraftButtons />
</div>
</template>
<script src="./rate_setting.js"></script>
<style lang="scss">
.RateSetting {
&.setting-item {
display: grid;
grid-template-areas:
"label control"
"desc control"
". draft";
.setting-label {
text-align: right;
align-self: center;
}
.setting-description {
text-align: right;
}
.setting-control {
align-self: end;
}
}
table {
margin-top: 0.5em;
}

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

@ -31,7 +31,7 @@
h5 {
font-size: 1rem;
margin-right: 1em;
margin-left: 1em;
margin-bottom: 0.25em;
margin-top: 0.75em;
}
@ -60,8 +60,8 @@
display: grid;
grid-template-areas:
"label control"
". desc"
". draft";
"label desc"
". draft";
grid-template-columns: 4fr 5fr;
column-gap: 0.5em;
align-items: baseline;
@ -70,6 +70,7 @@
.setting-label {
grid-area: label;
text-align: right;
align-self: baseline;
}
.ModifiedIndicator,
@ -79,6 +80,31 @@
.setting-control {
grid-area: control;
&.textarea {
align-self: baseline;
overflow: auto;
}
&.checkbox {
display: grid;
grid-template-columns: subgrid;
.label {
grid-area: label;
text-align: right;
}
.checkbox-indicator {
grid-area: control;
}
.-mobile & {
.label {
text-align: left;
}
}
}
}
.setting-control.setting-label {

20
src/components/settings_modal/tabs/developer_tab.scss
View file

@ -1,4 +1,24 @@
.developer-tab {
.setting-list {
margin-left: 2em;
}
.cache-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column: 1 / 3;
column-gap: 0.5em;
margin: 0 5em;
.-mobile & {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 0.5em;
margin: 0;
}
}
dt {
font-weight: 900;
}

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

@ -32,22 +32,6 @@
{{ $t('settings.virtual_scrolling') }}
</BooleanSetting>
</li>
<li>
<button
class="btn button-default"
@click="clearAssetCache"
>
{{ $t('settings.clear_asset_cache') }}
</button>
</li>
<li>
<button
class="btn button-default"
@click="clearEmojiCache"
>
{{ $t('settings.clear_emoji_cache') }}
</button>
</li>
<li>
<BooleanSetting
path="themeDebug"
@ -64,6 +48,25 @@
{{ $t('settings.force_theme_recompilation_debug') }}
</BooleanSetting>
</li>
<h4>{{ $t('settings.cache') }}</h4>
<li>
<div class="setting-item">
<div class="cache-buttons">
<button
class="btn button-default"
@click="clearAssetCache"
>
{{ $t('settings.clear_asset_cache') }}
</button>
<button
class="btn button-default"
@click="clearEmojiCache"
>
{{ $t('settings.clear_emoji_cache') }}
</button>
</div>
</div>
</li>
</ul>
</div>
</div>

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

@ -87,6 +87,7 @@
.setting-section {
padding-bottom: 0;
margin-top: 1em;
.btn {
padding: 0 0.5em;

4
src/components/user_card/user_card.scss
View file

@ -26,6 +26,10 @@
height: auto; // override settings default textarea size
}
.follow-button {
flex: 1 0 auto;
}
.user-card-inner {
padding-bottom: 0;
}

22
src/i18n/en.json
View file

@ -1170,15 +1170,12 @@
"posts": {
"global": "Global settings",
"local": "Local posts",
"scheduled_activites": "Scheduled posts",
"remote": "Remote posts"
},
"other": {
"uncategorized": "Uncategorized",
"user_backup": "User Backup",
"reports": "Reports",
"feed": "RSS Feed",
"feed_title": "Article Title",
"privileges": "Privileges"
},
"monitoring": {
@ -1191,8 +1188,7 @@
"activitypub": "ActivityPub"
},
"http": {
"outbound": "Outbound HTTP requests",
"socks5": "SOCKS5"
"outbound": "Outbound HTTP requests"
},
"auth": {
"MFA": "Multi-factor Authentication",
@ -1202,7 +1198,6 @@
"backup_codes": "Backup codes"
},
"job_queues": {
"Oban": "Oban queues",
"Gun": {
"title": "Gun queues",
"connections_pools": "Gun connections pool",
@ -1298,6 +1293,9 @@
"invalidation_settings": "Cache Invalidation"
},
"mailer": {
"styling": "Styling",
"assets": "Assets",
"colors": "Color palette",
"adapter": "Mailing Adapter",
"auth": "Authentication"
},
@ -1398,11 +1396,11 @@
":connections_pool": {
":max_idle_time": {
"label": "Maximum idle time",
"description": "idk"
"description": "Maximum idle time before CONFIRM"
},
":retry": {
"label": "Retry",
"description": "idk"
"description": "Number of retries for making a connection CONFIRM"
}
},
":pools": {
@ -1415,6 +1413,14 @@
":oauth_app_creation": {
"label": "OAuth app creation",
"description": "For registering new OAuth App ID"
},
":ap_routes": {
"label": "ActivityPub",
"description": "Federation endpoints"
},
":account_confirmation_resend": {
"label": "Account confirmation resend",
"description": "How often user can resend confirmation mail"
}
},
"Pleroma_DOT_Formatter": {