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

proper resets, better upload dialog

Browse source
This commit is contained in:
Henry Jameson 2025-08-04 23:15:26 +03:00
commit d89f564b5e
4 changed files with 199 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,7 +15,7 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
import Modal from 'src/components/modal/modal.vue'
import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
import localeService from 'src/services/locale/locale.service.js'
@ -37,8 +37,6 @@ import {
faExpandAlt,
faBirthdayCake,
faSave,
faChevronRight,
faChevronDown,
faClockRotateLeft
} from '@fortawesome/free-solid-svg-icons'
@ -55,8 +53,6 @@ library.add(
faTimes,
faExpandAlt,
faBirthdayCake,
faChevronRight,
faChevronDown,
faClockRotateLeft
)
@ -74,7 +70,7 @@ export default {
'hasNoteEditor'
],
components: {
Modal,
DialogModal,
UserAvatar,
Checkbox,
RemoteFollow,
@ -100,22 +96,27 @@ export default {
muteExpiryUnit: 'minutes',
// Editable stuff
editImage: false,
newName: user.name_unescaped,
editingName: false,
editImage: false,
newAvatar: '',
newAvatarFile: null,
newBanner: '',
newBannerFile: null,
newActorType: user.actor_type,
newBio: unescape(user.description),
editingBio: false,
newAvatar: null,
newAvatarFile: null,
newBanner: null,
newBannerFile: null,
newActorType: user.actor_type,
newBirthday: user.birthday,
newShowBirthday: user.show_birthday,
newCoverPhoto: user.cover_photo,
newShowRole: user.show_role,
newFields: user.fields?.map(field => ({ name: field.name, value: field.value })),
editingFields: false,
newShowRole: user.show_role,
}
},
created () {
@ -248,24 +249,20 @@ export default {
// Editable stuff
avatarImgSrc () {
const src = this.newAvatar
return (!src) ? (this.user.profile_image_url_original || this.defaultAvatar) : src
const currentUrl = this.user.profile_image_url_original || this.defaultAvatar
const newUrl = this.newAvatar === '' ? this.defaultAvatar : this.newAvatar
return (this.newAvatar === null) ? currentUrl : newUrl
},
bannerImgSrc () {
const src = this.newBanner
return (!src) ? (this.user.cover_photo || this.defaultBanner) : src
const currentUrl = this.user.cover_photo || this.defaultBanner
const newUrl = this.newBanner === '' ? this.defaultBanner : this.newBanner
return (this.newBanner === null) ? currentUrl : newUrl
},
defaultAvatar () {
if (this.isDefaultAvatar) {
return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
}
return this.user.profile_image_url
return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
},
defaultBanner () {
if (this.isDefaultBanner) {
return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
}
return this.user.cover_photo
return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
},
isDefaultAvatar () {
const baseAvatar = this.$store.state.instance.defaultAvatar
@ -366,24 +363,6 @@ export default {
changeBanner () {
this.editImage = 'banner'
},
resetAvatar () {
const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm'))
if (confirmed) {
this.submitAvatar(undefined, '')
}
},
resetBanner () {
const confirmed = window.confirm(this.$t('settings.reset_banner_confirm'))
if (confirmed) {
this.submitBanner('')
}
},
resetBackground () {
const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
if (confirmed) {
this.submitBackground('')
}
},
submitImage ({ canvas, file }) {
if (canvas) {
return canvas.toBlob((data) => this.submitImage({ canvas: null, file: data }))
@ -407,6 +386,16 @@ export default {
reader.readAsDataURL(file)
},
resetImage () {
if (this.editImage === 'avatar') {
this.newAvatar = ''
this.newAvatarFile = ''
} else {
this.newBanner = ''
this.newBannerFile = ''
}
this.editImage = false
},
addField () {
if (this.newFields.length < this.maxFields) {
this.newFields.push({ name: '', value: '' })
@ -423,21 +412,24 @@ export default {
cancelImageText () {
return
},
resetNews () {
resetState () {
const user = this.$store.state.users.currentUser
this.newName = user.name_unescaped
this.newAvatar = ''
this.newAvatarFile = null
this.newBanner = ''
this.newBannerFile = null
this.newActorType = user.actor_type
this.newBio = unescape(user.description)
this.newAvatar = null
this.newAvatarFile = null
this.newBanner = null
this.newBannerFile = null
this.newActorType = user.actor_type
this.newBirthday = user.birthday
this.newShowBirthday = user.show_birthday
this.newCoverPhoto = user.cover_photo
this.newFields = user.fields.map(field => ({ name: field.name, value: field.value }))
this.newShowRole = user.show_role
this.newFields = user.fields.map(field => ({ name: field.name, value: field.value }))
},
updateProfile () {
const params = {
@ -455,11 +447,11 @@ export default {
params.actor_type = this.actorType
}
if (this.newAvatar) {
if (this.newAvatarFile !== null) {
params.avatar = this.newAvatarFile
}
if (this.newBanner) {
if (this.newBannerFile !== null) {
params.header = this.newBannerFile
}
@ -474,7 +466,7 @@ export default {
merge(this.newFields, user.fields)
this.$store.commit('addNewUsers', [user])
this.$store.commit('setCurrentUser', user)
this.resetNews()
this.resetState()
})
.catch((error) => {
this.displayUploadError(error)

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

@ -410,7 +410,7 @@
.user-interactions {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7.5em, 20%));
grid-template-columns: repeat(auto-fit, minmax(5em, 40%));
grid-gap: 0.6em;
max-width: 98vw;
margin-bottom: 0.6em;
@ -568,11 +568,9 @@
object-fit: contain;
}
.images-container {
display: grid;
margin: 1em;
grid-template-columns: 1fr 5em 1fr;
grid-template-rows: 20em;
.image-container {
display: flex;
margin: 0 1em 0.5em;
gap: 0.5em;
.new-image {

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

@ -19,10 +19,7 @@
class="user-info-avatar -link"
@click="zoomAvatar"
>
<UserAvatar
:user="user"
:url="avatarImgSrc"
/>
<UserAvatar :user="user" />
<div class="user-info-avatar -link -overlay">
<FAIcon
class="fa-scale-110 fa-old-padding"
@ -36,7 +33,10 @@
:class="{ '-editable': editable }"
@click="changeAvatar"
>
<UserAvatar :user="user" />
<UserAvatar
:user="user"
:url="avatarImgSrc"
/>
<div class="user-info-avatar -link -overlay">
<FAIcon
class="fa-scale-110 fa-old-padding"
@ -76,34 +76,6 @@
:title="$t('user_card.change_banner')"
/>
</button>
<button
v-if="editable"
:disabled="somethingToSave"
class="btn button-unstyled reset-profile-button"
@click="resetNews"
>
{{ $t('settings.reset') }}
<FAIcon
fixed-width
class="icon"
icon="clock-rotate-left"
:title="$t('user_card.edit_profile')"
/>
</button>
<button
v-if="editable"
:disabled="somethingToSave"
class="btn button-unstyled save-profile-button"
@click="updateProfile"
>
{{ $t('settings.save') }}
<FAIcon
fixed-width
class="icon"
icon="save"
:title="$t('user_card.edit_profile')"
/>
</button>
<button
v-else-if="!editable && !isOtherUser && user.is_local"
class="button-unstyled edit-profile-button"
@ -256,72 +228,102 @@
</div>
</div>
<div
v-if="!editable && loggedIn && isOtherUser"
v-if="loggedIn"
class="user-interactions"
>
<div class="btn-group">
<FollowButton
:relationship="relationship"
<template v-if="isOtherUser">
<div class="btn-group">
<FollowButton
:relationship="relationship"
:user="user"
/>
<template v-if="relationship.following">
<ProgressButton
v-if="!relationship.notifying"
class="btn button-default"
:click="subscribeUser"
:title="$t('user_card.subscribe')"
>
<FAIcon icon="bell" />
</ProgressButton>
<ProgressButton
v-else
class="btn button-default toggled"
:click="unsubscribeUser"
:title="$t('user_card.unsubscribe')"
>
<FALayers>
<FAIcon
icon="rss"
transform="left-5 shrink-6 up-3 rotate-20"
flip="horizontal"
/>
<FAIcon
icon="rss"
transform="right-5 shrink-6 up-3 rotate-20"
/>
<FAIcon icon="bell" />
</FALayers>
</ProgressButton>
</template>
</div>
<button
v-if="relationship.muting"
class="btn button-default btn-mute toggled"
:disabled="user.deactivated"
@click="unmuteUser"
>
{{ $t('user_card.muted') }}
</button>
<button
v-else
class="btn button-default btn-mute"
:disabled="user.deactivated"
@click="muteUser"
>
{{ $t('user_card.mute') }}
</button>
<button
class="btn button-default btn-mention"
:disabled="user.deactivated"
@click="mentionUser"
>
{{ $t('user_card.mention') }}
</button>
<ModerationTools
v-if="showModerationMenu"
class="moderation-menu"
:user="user"
/>
<template v-if="relationship.following">
<ProgressButton
v-if="!relationship.notifying"
class="btn button-default"
:click="subscribeUser"
:title="$t('user_card.subscribe')"
>
<FAIcon icon="bell" />
</ProgressButton>
<ProgressButton
v-else
class="btn button-default toggled"
:click="unsubscribeUser"
:title="$t('user_card.unsubscribe')"
>
<FALayers>
<FAIcon
icon="rss"
transform="left-5 shrink-6 up-3 rotate-20"
flip="horizontal"
/>
<FAIcon
icon="rss"
transform="right-5 shrink-6 up-3 rotate-20"
/>
<FAIcon icon="bell" />
</FALayers>
</ProgressButton>
</template>
</div>
</template>
<button
v-if="relationship.muting"
class="btn button-default btn-mute toggled"
:disabled="user.deactivated"
@click="unmuteUser"
v-if="editable"
:disabled="somethingToSave"
class="btn button-default reset-profile-button"
@click="resetState"
>
{{ $t('user_card.muted') }}
{{ $t('settings.reset') }}
<FAIcon
fixed-width
class="icon"
icon="clock-rotate-left"
:title="$t('user_card.edit_profile')"
/>
</button>
<button
v-else
class="btn button-default btn-mute"
:disabled="user.deactivated"
@click="muteUser"
v-if="editable"
:disabled="somethingToSave"
class="btn button-default save-profile-button"
@click="updateProfile"
>
{{ $t('user_card.mute') }}
{{ $t('settings.save') }}
<FAIcon
fixed-width
class="icon"
icon="save"
:title="$t('user_card.edit_profile')"
/>
</button>
<button
class="btn button-default btn-mention"
:disabled="user.deactivated"
@click="mentionUser"
>
{{ $t('user_card.mention') }}
</button>
<ModerationTools
v-if="showModerationMenu"
class="moderation-menu"
:user="user"
/>
</div>
<div
v-if="!loggedIn && user.is_local"
@ -355,7 +357,7 @@
:key="option"
:value="option"
>
{{ $t('settings.actor_type_' + option) }}
{{ $t('settings.actor_type_' + (option === 'Person' ? 'person_proper' : option)) }}
</option>
</Select>
<div v-if="groupActorAvailable">
@ -653,85 +655,63 @@
/>
</teleport>
<teleport to="#modal">
<Modal
<DialogModal
v-if="editImage"
:is-mute="true"
class="edit-image"
:class="{ '-banner': editImage === 'banner' }"
@backdrop-clicked="editImage = false"
>
<div class="panel">
<div class="panel-heading">
<h1 class="title">
{{ editImage === 'avatar' ? $t('settings.change_avatar') : $t('settings.change_banner') }}
</h1>
</div>
<div class="panel-body">
<div class="images-container">
<img
:src="editImage === 'avatar' ? avatarImgSrc : bannerImgSrc"
class="current-avatar"
/>
<FAIcon
class="separator"
:icon="editImage === 'avatar' ? 'chevron-right' : 'chevron-down'"
/>
<image-cropper
ref="cropper"
class="cropper"
:aspect-ratio="editImage === 'avatar' ? 1 : 3"
@submit="submitImage"
/>
</div>
<button
id="pick-image"
class="button-default btn"
type="button"
@click="() => this.$refs.cropper.pickImage()"
>
{{ $t('settings.upload_picture') }}
</button>
<p class="visibility-notice">
{{ $t('settings.avatar_size_instruction') }}
</p>
<button
:title="editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner')"
class="button-unstyled reset-button"
@click="resetImage"
>
</button>
<div class="panel-footer">
<div/>
<button
class="button-default btn"
type="button"
@click="editImage = false"
>
{{ this.$t('image_cropper.cancel') }}
</button>
<button
class="button-default btn"
type="button"
@click="this.$refs.cropper.submit(true)"
>
{{ $t('image_cropper.save') }}
</button>
<button
class="button-default btn"
type="button"
@click="this.$refs.cropper.submit(false)"
>
{{ $t('image_cropper.save_without_cropping') }}
</button>
<FAIcon
v-if="submitting"
spin
icon="circle-notch"
/>
</div>
</div>
<template #header>
{{ editImage === 'avatar' ? $t('settings.change_avatar') : $t('settings.change_banner') }}
</template>
<div class="image-container">
<image-cropper
ref="cropper"
class="cropper"
:aspect-ratio="editImage === 'avatar' ? 1 : 3"
@submit="submitImage"
/>
</div>
</Modal>
<button
id="pick-image"
class="button-default btn"
type="button"
@click="() => this.$refs.cropper.pickImage()"
>
{{ $t('settings.upload_picture') }}
</button>
<p class="visibility-notice">
{{ editImage === 'avatar' ? $t('settings.avatar_size_instruction') : $t('settings.banner_size_instruction' )}}
</p>
<template #footer>
<button
class="button-default btn"
type="button"
@click="editImage = false"
>
{{ this.$t('image_cropper.cancel') }}
</button>
<button
:title="editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner')"
class="button-default btn reset-button"
@click="resetImage"
>
{{ editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner' )}}
</button>
<button
class="button-default btn"
type="button"
@click="this.$refs.cropper.submit(false)"
>
{{ $t('image_cropper.save_without_cropping') }}
</button>
<button
class="button-default btn"
type="button"
@click="this.$refs.cropper.submit(true)"
>
{{ $t('image_cropper.save') }}
</button>
</template>
</DialogModal>
</teleport>
</div>
</template>

4
src/i18n/en.json
View file

@ -387,6 +387,7 @@
"actor_type": "This account is:",
"actor_type_description": "Marking your account as a group will make it automatically repeat statuses that mention it.",
"actor_type_Person": "a normal user",
"actor_type_person_proper": "a person",
"actor_type_Service": "a bot",
"actor_type_Group": "a group",
"mobile_center_dialog": "Vertically center dialogs on mobile",
@ -568,7 +569,8 @@
"move_account_error": "Error moving account: {error}",
"discoverable": "Allow discovery of this account in search results and other services",
"domain_mutes": "Domains",
"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels. Recommended aspect ratio is 1:1",
"banner_size_instruction": "The recommended minimum size for banner images is 450x150 pixels. Recommended aspect ratio is 3:1",
"pad_emoji": "Pad emoji with spaces when adding from picker",
"autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
"unsaved_post_action": "When you try to close an unsaved posting form",