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

massive visual overhaul

Browse source
This commit is contained in:
Henry Jameson 2025-12-10 18:34:19 +02:00
commit 1642d62b82
63 changed files with 387 additions and 399 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,6 @@
.appearance-tab {
margin: 1em;
h3 {
border: none
}
@ -67,7 +69,7 @@
aspect-ratio: 16 / 9;
width: 16em;
}
img {
object-fit: cover;
}
@ -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>

13
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">
{{ $t('settings.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>

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

36
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>
<interface-language-switcher
v-model="language"
@update="val => language = val"
>
{{ $t('settings.interfaceLanguage') }}
</interface-language-switcher>
</li>
<li>
<interface-language-switcher
v-model="emailLanguage"
:profile="true"
@update:model-value="updateProfile()"
>
{{ $t('settings.email_language') }}
</interface-language-switcher>
</li>
<h4>{{ $t('settings.interfaceLanguage') }}</h4>
<interface-language-switcher
v-model="language"
class="lang-selector"
@update="val => language = val"
/>
<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()"
/>
<li>
<BooleanSetting path="useAbsoluteTimeFormat">
{{ $t('settings.absolute_time_format') }}

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>

8
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>
@ -28,7 +28,7 @@
</li>
</ul>
</div>
<div class="setting-item">
<div class="setting-section">
<h3>{{ $t('settings.notification_setting_filters') }}</h3>
<ul class="setting-list">
<li>
@ -241,7 +241,7 @@
<div
v-if="expertLevel > 0"
class="setting-item"
class="setting-section"
>
<h3>{{ $t('settings.notification_setting_privacy') }}</h3>
<ul class="setting-list">
@ -279,7 +279,7 @@
</li>
</ul>
</div>
<div class="setting-item">
<div class="setting-section">
<p>{{ $t('settings.notification_mutes') }}</p>
<p>{{ $t('settings.notification_blocks') }}</p>
</div>

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>

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

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

@ -1,17 +1,20 @@
<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">
<Checkbox
class="setting-item"
v-model="locked"
>
{{ $t('settings.lock_account_description') }}
</Checkbox>
<ProfileSettingIndicator :is-profile="true" />

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>