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

Merge branch 'profile-edit' into shigusegubu-themes3

Browse source
This commit is contained in:
Henry Jameson 2025-08-05 18:38:13 +03:00
commit 2029852784
18 changed files with 188 additions and 254 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/image_cropper/image_cropper.js
View file

@ -10,19 +10,12 @@ library.add(
const ImageCropper = {
props: {
// Mime-types to accept, i.e. which filetypes to accept (.gif, .png, etc.)
mimes: {
type: String,
default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
},
saveButtonLabel: {
type: String
},
saveWithoutCroppingButtonlabel: {
type: String
},
cancelButtonLabel: {
type: String
},
// Fixed aspect-ratio for selection box
aspectRatio: {
type: Number
}
@ -30,11 +23,13 @@ const ImageCropper = {
data () {
return {
dataUrl: undefined,
filename: undefined,
submitting: false
filename: undefined
}
},
emits: ['submit'],
emits: [
'submit', // cropping complete or uncropped image returned
'close', // cropper is closed
],
methods: {
destroy () {
this.$refs.input.value = ''
@ -42,8 +37,6 @@ const ImageCropper = {
this.$emit('close')
},
submit (cropping = true) {
this.submitting = true
let cropperPromise
if (cropping) {
cropperPromise = this.$refs.cropperSelection.$toCanvas()
@ -53,7 +46,6 @@ const ImageCropper = {
cropperPromise.then(canvas => {
this.$emit('submit', { canvas, file: this.file })
this.submitting = false
})
},
pickImage () {

58
src/components/interface_language_switcher/interface_language_switcher.js Normal file
View file

@ -0,0 +1,58 @@
import localeService from '../../services/locale/locale.service.js'
import Select from '../select/select.vue'
import ProfileSettingIndicator from 'src/components/settings_modal/helpers/profile_setting_indicator.vue'
export default {
components: {
Select,
ProfileSettingIndicator
},
props: {
// List of languages (or just one language)
modelValue: {
type: [Array, String],
required: true
},
// Is this setting stored in user profile (true) or elsewhere (false)
// Doesn't affect storage, just shows an icon if true
profile: {
type: Boolean,
default: false
}
},
emits: ['update:modelValue'],
computed: {
languages () {
return localeService.languages
},
controlledLanguage: {
get: function () {
return Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue]
},
set: function (val) {
this.$emit('update:modelValue', val)
}
}
},
methods: {
getLanguageName (code) {
return localeService.getLanguageName(code)
},
addLanguage () {
this.controlledLanguage = [...this.controlledLanguage, '']
},
setLanguageAt (index, val) {
const lang = [...this.controlledLanguage]
lang[index] = val
this.controlledLanguage = lang
},
removeLanguageAt (index) {
const lang = [...this.controlledLanguage]
lang.splice(index, 1)
this.controlledLanguage = lang
}
}
}

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

@ -1,7 +1,7 @@
<template>
<div class="interface-language-switcher">
<label>
{{ promptText }}
<slot />
<ProfileSettingIndicator :is-profile="profile" />
</label>
<ul class="setting-list">
@ -45,68 +45,7 @@
</div>
</template>
<script>
import localeService from '../../services/locale/locale.service.js'
import Select from '../select/select.vue'
import ProfileSettingIndicator from 'src/components/settings_modal/helpers/profile_setting_indicator.vue'
export default {
components: {
// eslint-disable-next-line vue/no-reserved-component-names
Select,
ProfileSettingIndicator
},
props: {
promptText: {
type: String,
required: true
},
language: {
type: [Array, String],
required: true
},
profile: {
type: Boolean,
default: false
}
},
emits: ['update'],
computed: {
languages () {
return localeService.languages
},
controlledLanguage: {
get: function () {
return Array.isArray(this.language) ? this.language : [this.language]
},
set: function (val) {
this.$emit('update', val)
}
}
},
methods: {
getLanguageName (code) {
return localeService.getLanguageName(code)
},
addLanguage () {
this.controlledLanguage = [...this.controlledLanguage, '']
},
setLanguageAt (index, val) {
const lang = [...this.controlledLanguage]
lang[index] = val
this.controlledLanguage = lang
},
removeLanguageAt (index) {
const lang = [...this.controlledLanguage]
lang.splice(index, 1)
this.controlledLanguage = lang
}
}
}
</script>
<script src="./interface_language_switcher.js"></script>
<style lang="scss">
.interface-language-switcher {

3
src/components/settings_modal/tabs/appearance_tab.js
View file

@ -191,6 +191,9 @@ const AppearanceTab = {
}
},
computed: {
isDefaultBackground () {
return !(this.$store.state.users.currentUser.background_image)
},
switchInProgress () {
return useInterfaceStore().themeChangeInProgress
},

5
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'
@ -66,7 +67,8 @@ const GeneralTab = {
// Chrome-likes
Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
// Future spec, still not supported in Nightly 63 as of 08/2018
Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
emailLanguage: this.$store.state.users.currentUser.language || ['']
}
},
components: {
@ -76,6 +78,7 @@ const GeneralTab = {
FloatSetting,
UnitSetting,
InterfaceLanguageSwitcher,
ProfileSettingIndicator,
ScopeSelector,
Select
},

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

@ -5,18 +5,20 @@
<ul class="setting-list">
<li>
<interface-language-switcher
:prompt-text="$t('settings.interfaceLanguage')"
:language="language"
v-model="language"
@update="val => language = val"
/>
>
{{ $t('settings.interfaceLanguage') }}
</interface-language-switcher>
</li>
<li>
<interface-language-switcher
:prompt-text="$t('settings.email_language')"
:language="emailLanguage"
v-model="emailLanguage"
:profile="true"
@update="val => { emailLanguage = val; updateProfile() }"
/>
@update:model-value="updateProfile()"
>
{{ $t('settings.email_language') }}
</interface-language-switcher>
</li>
<li v-if="instanceSpecificPanelPresent">
<BooleanSetting path="hideISP">

50
src/components/settings_modal/tabs/profile_tab.js
View file

@ -1,18 +1,9 @@
import UserCard from 'src/components/user_card/user_card.vue'
import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
import ProgressButton from 'src/components/progress_button/progress_button.vue'
import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
import suggestor from 'src/components/emoji_input/suggestor.js'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
import Select from 'src/components/select/select.vue'
import BooleanSetting from '../helpers/boolean_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes,
@ -29,55 +20,23 @@ library.add(
const ProfileTab = {
data () {
return {
// Whether user is locked or not
locked: this.$store.state.users.currentUser.locked,
}
},
components: {
UserCard,
ScopeSelector,
ImageCropper,
EmojiInput,
ProgressButton,
Checkbox,
BooleanSetting,
InterfaceLanguageSwitcher,
ProfileSettingIndicator,
Select
ProfileSettingIndicator
},
computed: {
user () {
return this.$store.state.users.currentUser
},
...SharedComputedObject(),
emojiUserSuggestor () {
return suggestor({
emoji: [
...this.$store.getters.standardEmojiList,
...this.$store.state.instance.customEmoji
],
store: this.$store
})
},
emojiSuggestor () {
return suggestor({
emoji: [
...this.$store.getters.standardEmojiList,
...this.$store.state.instance.customEmoji
]
})
},
userSuggestor () {
return suggestor({ store: this.$store })
},
bannerImgSrc () {
const src = this.$store.state.users.currentUser.cover_photo
return (!src) ? this.defaultBanner : src
},
...SharedComputedObject()
},
methods: {
changeVis (visibility) {
this.newDefaultScope = visibility
},
updateProfile () {
const params = {
locked: this.locked
@ -92,9 +51,6 @@ const ProfileTab = {
.catch((error) => {
this.displayUploadError(error)
})
},
propsToNative (props) {
return propsToNative(props)
}
},
watch: {

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

@ -1,6 +1,6 @@
.profile-tab {
// overriding global for better look
div.profile-edit {
.setting-item.profile-edit {
margin: 0;
h2 {
@ -12,17 +12,4 @@
overflow: hidden;
}
}
.bio {
margin: 0;
}
.uploading {
font-size: 1.5em;
margin: 0.25em;
}
.setting-subitem {
margin-left: 1.75em;
}
}

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

@ -6,7 +6,6 @@
:user-id="user.id"
:editable="true"
:switcher="false"
rounded="top"
/>
</div>
<div class="setting-item">

31
src/components/user_avatar/user_avatar.js
View file

@ -14,12 +14,31 @@ library.add(
)
const UserAvatar = {
props: [
'user',
'compact',
'showActorTypeIndicator',
'url'
],
props: {
// User object to show avatar of
user: {
required: true,
type: Object
},
// Use less space and use alternative roundness
compact: {
required: false,
type: Boolean,
default: false
},
// Show small icon indicating if account is a bot or group
showActorTypeIndicator : {
required: false,
type: Boolean,
default: false
},
// Override avatar image URL, useful for profile editing
url: {
required: false,
type: String,
default: null
}
},
data () {
return {
showPlaceholder: false,

6
src/components/user_avatar/user_avatar.vue
View file

@ -40,12 +40,12 @@
display: inline-block;
position: relative;
width: 48px;
width: 3.5em;
height: 48px;
&.-compact {
width: 32px;
height: 32px;
width: 2.2em;
height: 2.2em;
border-radius: var(--roundness);
}

80
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: [
@ -291,9 +314,6 @@ export default {
return !(this.$store.state.users.currentUser.cover_photo) ||
this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
},
isDefaultBackground () {
return !(this.$store.state.users.currentUser.background_image)
},
fieldsLimits () {
return this.$store.state.instance.fieldsLimits
},
@ -332,12 +352,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
@ -416,9 +430,7 @@ export default {
addField () {
if (this.newFields.length < this.maxFields) {
this.newFields.push({ name: '', value: '' })
return true
}
return false
},
deleteField (index) {
this.newFields.splice(index, 1)
@ -457,7 +469,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) {
@ -472,10 +484,6 @@ export default {
params.header = this.newBannerFile
}
if (this.emailLanguage) {
params.language = localeService.internalToBackendLocaleMulti(this.emailLanguage)
}
this.$store.state.api.backendInteractor
.updateProfile({ params })
.then((user) => {

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

@ -2,6 +2,8 @@
position: relative;
z-index: 1;
overflow: hidden;
border-top-left-radius: calc(var(--roundness) - 1px);
border-top-right-radius: calc(var(--roundness) - 1px);
// editing headers
h4 {
@ -118,42 +120,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/modules/instance.js
View file

@ -139,7 +139,6 @@ const defaultState = {
// Nasty stuff
customEmoji: [],
rawCustomEmoji: [],
customEmojiFetched: false,
emoji: {},
emojiFetched: false,