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

visual stuff again

Browse source
This commit is contained in:
Henry Jameson 2025-12-10 19:57:34 +02:00
commit 494f6b471e
10 changed files with 120 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -13,7 +13,7 @@
keypath="settings.style.fonts.override" keypath="settings.style.fonts.override"
tag="span" tag="span"
> >
<span class="label"> <span>
{{ label }} {{ label }}
</span> </span>
</i18n-t> </i18n-t>
@ -73,7 +73,7 @@
</span> </span>
<span <span
v-else v-else
class="btn-group" class="font-selector btn-group"
> >
<button <button
class="btn button-default" class="btn button-default"
@ -152,6 +152,14 @@
} }
.-mobile & { .-mobile & {
.font-input {
display: block;
}
.font-selector {
margin-top: 0.5em;
}
.label { .label {
text-align: left; text-align: left;
} }

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

@ -61,11 +61,26 @@
.add-button { .add-button {
display: block; display: block;
text-align: center; text-align: center;
padding-bottom: 1em;
.default-button { .default-button {
display: block; display: block;
width: auto; 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> </style>

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

@ -30,11 +30,13 @@
</span> </span>
</Checkbox> </Checkbox>
<p <p
v-if="backendDescriptionDescription" v-if="backendDescriptionDescription || showDescription"
class="setting-description" class="setting-description"
:class="{ 'faint': shouldBeDisabled }" :class="{ 'faint': shouldBeDisabled }"
> >
{{ backendDescriptionDescription + ' ' }} <slot name="description">
{{ backendDescriptionDescription + ' ' }}
</slot>
</p> </p>
<DraftButtons /> <DraftButtons />
</label> </label>

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

@ -83,8 +83,10 @@
<script src="./list_setting.js"></script> <script src="./list_setting.js"></script>
<style lang="scss"> <style lang="scss">
.ListSetting { .ListSetting {
.btn-group { .setting-list {
display: flex .checkbox {
padding: 0.5em 0;
}
} }
} }
</style> </style>

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

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

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

@ -107,6 +107,10 @@
flex-shrink: 1; flex-shrink: 1;
} }
} }
.tab-slot-wrapper {
grid-template-columns: 0 minmax(min-content, 45em) 0;
}
} }
@supports (container-type: inline-size) { @supports (container-type: inline-size) {

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

@ -6,6 +6,7 @@
font-weight: 500; font-weight: 500;
margin-top: 1em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
margin-right: 1em;
} }
h3 { h3 {
@ -13,6 +14,7 @@
font-weight: 500; font-weight: 500;
margin-top: 1em; margin-top: 1em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
margin-right: 1em;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
padding-bottom: 0.25em; padding-bottom: 0.25em;
box-sizing: border-box; box-sizing: border-box;
@ -22,26 +24,41 @@
h4 { h4 {
font-size: 1.1rem; font-size: 1.1rem;
margin-top: 1em; margin-top: 1em;
margin-right: 1em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
margin-left: 1em;
} }
h5 { h5 {
font-size: 1rem; font-size: 1rem;
margin-bottom: 0.5em; margin-right: 1em;
margin-top: 0; margin-bottom: 0.25em;
margin-top: 0.75em;
} }
p { p {
line-height: 1.5; line-height: 1.5;
} }
.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 { .setting-item {
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"label control" "label control"
". desc" ". desc"
". draft"; ". draft";
grid-template-columns: 1fr 1fr; grid-template-columns: 2fr 3fr;
column-gap: 0.5em; column-gap: 0.5em;
align-items: baseline; align-items: baseline;
padding: 0.5em 0; padding: 0.5em 0;
@ -97,6 +114,14 @@
&.two-column { &.two-column {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; 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 { > li {
margin: 0; margin: 0;
@ -105,12 +130,6 @@
} }
} }
.setting-description {
margin-top: 0.2em;
margin-bottom: 0;
font-size: 80%;
}
.settings-modal-panel { .settings-modal-panel {
overflow: hidden; overflow: hidden;
transition: transform; transition: transform;
@ -160,10 +179,9 @@
} }
.setting-item { .setting-item {
border-bottom: 1px solid var(--border);
grid-template-columns: 1fr min-content; grid-template-columns: 1fr min-content;
column-gap: 0.5em; column-gap: 0.5em;
padding: 1em 0; padding: 1em 1em;
align-items: center; align-items: center;
.setting-label { .setting-label {
@ -173,6 +191,12 @@
ul { ul {
padding: 0; padding: 0;
li:not(:first-child) {
.setting-item {
border-top: 1px solid var(--border);
}
}
} }
.setting-list:not(.suboptions), .setting-list:not(.suboptions),

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

@ -49,7 +49,6 @@
<AppearanceTab /> <AppearanceTab />
</div> </div>
<div <div
:full-width="$store.getters.mergedConfig.expertLevel > 0"
:label="$t('settings.layout')" :label="$t('settings.layout')"
icon="table-columns" icon="table-columns"
data-tab-name="layout" data-tab-name="layout"

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

@ -47,26 +47,24 @@
> >
{{ $t('settings.text_size') }} {{ $t('settings.text_size') }}
</UnitSetting> </UnitSetting>
<div> <p class="sidenote">
<small> <i18n-t
<i18n-t scope="global"
scope="global" keypath="settings.text_size_tip"
keypath="settings.text_size_tip" tag="span"
tag="span" >
> <code>px</code>
<code>px</code> <code>rem</code>
<code>rem</code> </i18n-t>
</i18n-t> <br>
<br> <i18n-t
<i18n-t scope="global"
scope="global" keypath="settings.text_size_tip2"
keypath="settings.text_size_tip2" tag="span"
tag="span" >
> <code>14px</code>
<code>14px</code> </i18n-t>
</i18n-t> </p>
</small>
</div>
</li> </li>
<li> <li>
<FontControl <FontControl
@ -144,7 +142,7 @@
class="setting-list" class="setting-list"
> >
<li class="select-multiple"> <li class="select-multiple">
<span class="label">{{ $t('settings.confirm_dialogs') }}</span> <h4 class="label">{{ $t('settings.confirm_dialogs') }}</h4>
<ul class="option-list"> <ul class="option-list">
<li> <li>
<BooleanSetting path="modalOnRepeat"> <BooleanSetting path="modalOnRepeat">
@ -156,9 +154,10 @@
{{ $t('settings.confirm_dialogs_unfollow') }} {{ $t('settings.confirm_dialogs_unfollow') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li> <li
v-if="!blockExpirationSupported"
>
<BooleanSetting <BooleanSetting
v-if="!blockExpirationSupported"
path="modalOnBlock" path="modalOnBlock"
> >
{{ $t('settings.confirm_dialogs_block') }} {{ $t('settings.confirm_dialogs_block') }}

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

@ -12,11 +12,9 @@
<BooleanSetting path="ignoreInactionableSeen"> <BooleanSetting path="ignoreInactionableSeen">
{{ $t('settings.notification_setting_ignore_inactionable_seen') }} {{ $t('settings.notification_setting_ignore_inactionable_seen') }}
</BooleanSetting> </BooleanSetting>
<div> <p class="sidenote">
<small> {{ $t('settings.notification_setting_ignore_inactionable_seen_tip') }}
{{ $t('settings.notification_setting_ignore_inactionable_seen_tip') }} </p>
</small>
</div>
</li> </li>
<li> <li>
<BooleanSetting <BooleanSetting
@ -41,7 +39,10 @@
</li> </li>
<li> <li>
<h4> {{ $t('settings.notification_visibility') }}</h4> <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') }} {{ $t('settings.notification_setting_filters_chrome_push') }}
</p> </p>
<ul class="setting-list two-column"> <ul class="setting-list two-column">
@ -260,11 +261,12 @@
> >
{{ $t('settings.enable_web_push_always_show') }} {{ $t('settings.enable_web_push_always_show') }}
</BooleanSetting> </BooleanSetting>
<div :class="{ faint: !mergedConfig.webPushNotifications }"> <p
<small> :class="{ faint: !mergedConfig.webPushNotifications }"
{{ $t('settings.enable_web_push_always_show_tip') }} class="sidenote"
</small> >
</div> {{ $t('settings.enable_web_push_always_show_tip') }}
</p>
</li> </li>
</ul> </ul>
</li> </li>
@ -279,10 +281,12 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="setting-section"> <p class="sidenote">
<p>{{ $t('settings.notification_mutes') }}</p> <ul>
<p>{{ $t('settings.notification_blocks') }}</p> <li>{{ $t('settings.notification_mutes') }}</li>
</div> <li>{{ $t('settings.notification_blocks') }}</li>
</ul>
</p>
</div> </div>
</template> </template>