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

editable name

Browse source
This commit is contained in:
Henry Jameson 2025-08-04 00:14:34 +03:00
commit 60363e66fb
5 changed files with 70 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/emoji_input/emoji_input.vue
View file

@ -124,7 +124,7 @@
margin: 0.2em 0.25em;
font-size: 1.3em;
cursor: pointer;
line-height: 24px;
line-height: 1.2em;
&:hover i {
color: var(--text);
@ -134,7 +134,7 @@
.emoji-picker-panel {
position: absolute;
z-index: 20;
margin-top: 2px;
margin-top: 0.2em;
&.hide {
display: none;
@ -153,7 +153,7 @@
}
&.with-picker input {
padding-right: 30px;
padding-right: 2em;
}
.hidden-overlay {
@ -216,8 +216,8 @@
}
.detailText {
font-size: 9px;
line-height: 9px;
font-size: 0.6em;
line-height: 0.6em;
}
}
}

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

@ -7,21 +7,6 @@
:switcher="false"
rounded="top"
/>
<p>{{ $t('settings.name') }}</p>
<EmojiInput
v-model="newName"
enable-emoji-picker
:suggest="emojiSuggestor"
>
<template #default="inputProps">
<input
id="username"
v-model="newName"
class="input name-changer"
v-bind="propsToNative(inputProps)"
>
</template>
</EmojiInput>
<p v-if="role === 'admin' || role === 'moderator'">
<Checkbox v-model="showRole">
<template v-if="role === 'admin'">

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

@ -91,6 +91,7 @@ export default {
// Editable stuff
newName: user.name_unescaped,
editingName: true,
newActorType: user.actor_type,
newBio: unescape(user.description),
editingBio: false,

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

@ -263,6 +263,31 @@
--link: var(--text) !important;
}
.name-wrapper {
display: flex;
align-items: baseline;
.edit-button {
width: 3em;
text-align: center;
}
.input,
.user-name {
flex: 1;
font-weight: 600;
line-height: 2;
margin-right: 1em;
text-overflow: ellipsis;
overflow: hidden;
}
.input {
margin: 0 -0.5em;
padding: 0 0.5em;
}
}
.top-line {
display: flex;
flex-direction: column;
@ -271,8 +296,6 @@
// these two normalize position and height when custom emoji are used
line-height: 2;
margin-bottom: -0.2em;
font-weight: 600;
font-size: 110%;
font-size: calc(max(110%, 4cqw));
}
@ -306,13 +329,6 @@
}
}
.user-name {
text-overflow: ellipsis;
overflow: hidden;
margin-right: 1em;
font-size: 1.1em;
}
.highlighter {
margin: 5em;
align-items: baseline;

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

@ -122,16 +122,45 @@
/>
</button>
</div>
<router-link
:to="userProfileLink(user)"
class="user-name"
>
<RichContent
:title="user.name"
:html="user.name"
:emoji="editable ? emoji : user.emoji"
/>
</router-link>
<div class="name-wrapper">
<router-link
v-if="!editable || !editingName"
:to="userProfileLink(user)"
class="user-name"
>
<RichContent
:title="newName"
:html="newName"
:emoji="editable ? emoji : user.emoji"
/>
</router-link>
<EmojiInput
v-else-if="editingName"
v-model="newName"
enable-emoji-picker
:suggest="emojiSuggestor"
>
<template #default="inputProps">
<input
id="username"
v-model="newName"
class="input name-changer"
v-bind="propsToNative(inputProps)"
>
</template>
</EmojiInput>
<button
v-if="editable"
class="button-unstyled edit-button"
@click="editingName = !editingName"
:title="$t('settings.toggle_edit')"
>
<FAIcon
class="icon"
icon="pencil"
/>
</button>
</div>
</div>
<div class="bottom-line">
<user-link