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

user-card cleanup

Browse source
This commit is contained in:
Henry Jameson 2025-08-05 17:52:30 +03:00
commit ebe727b378
8 changed files with 77 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/settings_modal/tabs/general_tab.js
View file

@ -8,6 +8,7 @@ import FloatSetting from '../helpers/float_setting.vue'
import UnitSetting from '../helpers/unit_setting.vue'
import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
import Select from 'src/components/select/select.vue'
import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
@ -77,6 +78,7 @@ const GeneralTab = {
FloatSetting,
UnitSetting,
InterfaceLanguageSwitcher,
ProfileSettingIndicator,
ScopeSelector,
Select
},

71
src/components/user_card/user_card.js
View file

@ -58,18 +58,49 @@ library.add(
)
export default {
props: [
'editable',
'userId',
'switcher',
'selected',
'hideBio',
'rounded',
'bordered',
'avatarAction', // default - open profile, 'zoom' - zoom, function - call function
'onClose',
'hasNoteEditor'
],
props: {
// Enables all the options for profile editing, used in settings -> profile tab
editable: {
required: false,
default: false,
type: Boolean
},
// ID of user to show data of
userId: {
required: true,
type: String
},
// Use a compact layout that hides bio, stats etc.
hideBio: {
required: false,
default: false,
type: Boolean
},
// default - open profile, 'zoom' - zoom, function - call function
avatarAction: {
required: false,
type: String,
default: 'default'
},
// Show note editor if supported
hasNoteEditor: {
required: false,
type: Boolean,
default: false
},
// Show close icon (for popovers)
showClose: {
required: false,
type: Boolean,
default: false
},
// Show close icon (for popovers)
showExpand: {
required: false,
type: Boolean,
default: false
}
},
components: {
DialogModal,
UserAvatar,
@ -155,14 +186,6 @@ export default {
relationship () {
return this.$store.getters.relationship(this.userId)
},
classes () {
return [{
'-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
'-rounded': this.rounded === true, // set border-radius for all sides
'-bordered': this.bordered === true, // set border for all sides
'-popover': !!this.onClose // set popover rounding
}]
},
style () {
return {
backgroundImage: [
@ -332,12 +355,6 @@ export default {
unsubscribeUser () {
return this.$store.dispatch('unsubscribeUser', this.user.id)
},
setProfileView (v) {
if (this.switcher) {
const store = this.$store
store.commit('setProfileView', { v })
}
},
linkClicked ({ target }) {
if (target.tagName === 'SPAN') {
target = target.parentNode
@ -457,7 +474,7 @@ export default {
fields_attributes: this.newFields.filter(el => el != null),
show_role: !!this.newShowRole,
birthday: this.newBirthday || '',
show_birthday: !!this.showBirthday,
show_birthday: !!this.newShowBirthday,
}
if (this.actorType) {

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

@ -3,6 +3,9 @@
z-index: 1;
overflow: hidden;
border-top-left-radius: calc(var(--roundness) - 1px);
border-top-right-radius: calc(var(--roundness) - 1px);
// editing headers
h4 {
line-height: 2;
@ -118,42 +121,12 @@
padding: 0;
mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat;
background-size: cover;
border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
background-color: var(--profileBg);
border-top-left-radius: calc(var(--roundness) - 1px);
border-top-right-radius: calc(var(--roundness) - 1px);
z-index: -2;
}
&.-rounded-t {
border-top-left-radius: var(--roundness);
border-top-right-radius: var(--roundness);
--__roundnessTop: var(--roundness);
--__roundnessBottom: 0;
}
&.-rounded {
border-radius: var(--roundness);
--__roundnessTop: var(--roundness);
--__roundnessBottom: var(--roundness);
}
&.-popover {
border-radius: var(--roundness);
--__roundnessTop: var(--roundness);
--__roundnessBottom: var(--roundness);
}
&.-bordered {
border-width: 1px;
border-style: solid;
border-color: var(--border);
}
.bottom-buttons {
display: flex;
gap: 0.5em;

35
src/components/user_card/user_card.vue
View file

@ -1,8 +1,5 @@
<template>
<div
class="user-card"
:class="classes"
>
<div class="user-card">
<div class="user-card-inner">
<div class="user-info">
<div class="user-identity">
@ -70,7 +67,7 @@
fixed-width
class="icon"
icon="pencil"
:title="$t('user_card.change_banner')"
:title="$t('settings.change_banner')"
/>
</button>
<button
@ -102,10 +99,10 @@
:relationship="relationship"
/>
<router-link
v-if="onClose"
v-if="showExpand"
:to="userProfileLink(user)"
class="button-unstyled external-link-button"
@click="onClose"
@click="$emit('close')"
>
<FAIcon
class="icon"
@ -113,9 +110,9 @@
/>
</router-link>
<button
v-if="onClose"
v-if="showClose"
class="button-unstyled external-link-button"
@click="onClose"
@click="$emit('close')"
>
<FAIcon
class="icon"
@ -164,7 +161,7 @@
</div>
</div>
<div class="bottom-line">
<user-link
<UserLink
class="user-screen-name"
:user="user"
/>
@ -521,32 +518,22 @@
<dl
v-if="!mergedConfig.hideUserStats && !hideBio"
class="user-count"
@click.prevent="setProfileView('statuses')"
>
<dd>{{ user.statuses_count }}</dd>
{{ ' ' }}
<dt>{{ $t('user_card.statuses') }}</dt>
</dl>
<dl
class="user-count"
@click.prevent="setProfileView('statuses')"
>
<dl class="user-count">
<dd>{{ dailyAvg }}</dd>
{{ ' ' }}
<dt>{{ $t('user_card.statuses_per_day') }}</dt>
</dl>
<dl
class="user-count"
@click.prevent="setProfileView('friends')"
>
<dl class="user-count">
<dd>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</dd>
{{ ' ' }}
<dt>{{ $t('user_card.followees') }}</dt>
</dl>
<dl
class="user-count"
@click.prevent="setProfileView('followers')"
>
<dl class="user-count">
<dd>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</dd>
{{ ' ' }}
<dt>{{ $t('user_card.followers') }}</dt>
@ -568,7 +555,7 @@
class="birthday"
>
<div>
<Checkbox v-model="showBirthday">
<Checkbox v-model="newShowBirthday">
{{ $t('settings.birthday.show_birthday') }}
</Checkbox>
</div>

1
src/components/user_panel/user_panel.vue
View file

@ -8,7 +8,6 @@
<UserCard
:user-id="user.id"
:hide-bio="true"
rounded="top"
/>
<PostStatusForm />
</div>

4
src/components/user_popover/user_popover.vue
View file

@ -12,10 +12,12 @@
<template #content="{close}">
<UserCard
class="user-popover"
:show-close="true"
:show-expand="true"
:user-id="userId"
:hide-bio="true"
:avatar-action="userPopoverAvatarAction == 'close' ? close : userPopoverAvatarAction"
:on-close="close"
@close="close"
/>
</template>
</Popover>

13
src/components/user_profile/user_profile.vue
View file

@ -4,13 +4,12 @@
v-if="user"
class="user-profile panel panel-default"
>
<div class="panel-body">
<div class="panel-body card-wrapper">
<UserCard
:user-id="userId"
:switcher="true"
:selected="timeline.viewing"
avatar-action="zoom"
rounded="top"
:has-note-editor="true"
/>
</div>
@ -130,6 +129,16 @@
.user-profile {
flex: 2;
.card-wrapper {
border-top-left-radius: var(--roundness);
border-top-right-radius: var(--roundness);
}
.panel-footer {
border-bottom-left-radius: var(--roundness);
border-bottom-right-radius: var(--roundness);
}
// No sticky header on user profile
--currentPanelStack: 0;

1
src/panel.scss
View file

@ -4,6 +4,7 @@
--__panel-backdrop-filter: var(--backdrop-filter);
--_shadow: var(--shadow);
.tab-switcher .tabs {
background: var(--__panel-background);
backdrop-filter: var(--__panel-backdrop-filter);