No OneTemporary
Actions

Authored By

Unknown

Size

50 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index e80ee91de9..e9c79aff1d 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,483 +1,500 @@
	import merge from 'lodash/merge'
	+import isEqual from 'lodash/isEqual'
	import unescape from 'lodash/unescape'

	import ColorInput from 'src/components/color_input/color_input.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import RemoteFollow from '../remote_follow/remote_follow.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import FollowButton from '../follow_button/follow_button.vue'
	import ModerationTools from '../moderation_tools/moderation_tools.vue'
	import AccountActions from '../account_actions/account_actions.vue'
	import UserNote from '../user_note/user_note.vue'
	import Select from '../select/select.vue'
	import UserLink from '../user_link/user_link.vue'
	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 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'
	import suggestor from 'src/components/emoji_input/suggestor.js'

	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { mapGetters } from 'vuex'
	import { usePostStatusStore } from 'src/stores/post_status'
	import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faRss,
	faSearchPlus,
	faExternalLinkAlt,
	faEdit,
	faTimes,
	faExpandAlt,
	faBirthdayCake,
	faSave,
	faClockRotateLeft
	} from '@fortawesome/free-solid-svg-icons'

	import { useMediaViewerStore } from '../../stores/media_viewer'
	import { useInterfaceStore } from '../../stores/interface'

	library.add(
	faSave,
	faRss,
	faBell,
	faSearchPlus,
	faExternalLinkAlt,
	faEdit,
	faTimes,
	faExpandAlt,
	faBirthdayCake,
	faClockRotateLeft
	)

	export default {
	props: [
	'editable',
	'userId',
	'switcher',
	'selected',
	'hideBio',
	'rounded',
	'bordered',
	'avatarAction', // default - open profile, 'zoom' - zoom, function - call function
	'onClose',
	'hasNoteEditor'
	],
	components: {
	DialogModal,
	UserAvatar,
	Checkbox,
	RemoteFollow,
	ModerationTools,
	AccountActions,
	ProgressButton,
	FollowButton,
	Select,
	RichContent,
	UserLink,
	UserNote,
	UserTimedFilterModal,
	ColorInput,
	EmojiInput,
	ImageCropper
	},
	data () {
	const user = this.$store.getters.findUser(this.userId)

	return {
	followRequestInProgress: false,
	muteExpiryAmount: 0,
	muteExpiryUnit: 'minutes',

	// Editable stuff
	editImage: false,

	newName: user.name_unescaped,
	editingName: false,

	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,
	newShowRole: user.show_role,

	newFields: user.fields?.map(field => ({ name: field.name, value: field.value })),
	+
	editingFields: false,
	}
	},
	created () {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	+ somethingToSave () {
	+ if (this.newName !== this.user.name_unescaped) return true
	+ if (this.newBio !== unescape(this.user.description)) return true
	+ if (this.newAvatar !== null) return true
	+ if (this.newBanner !== null) return true
	+ if (this.newActorType !== this.user.actor_type) return true
	+ if (this.newBirthday !== this.user.birthday) return true
	+ if (this.newShowBirthday !== this.user.show_birthday) return true
	+ if (this.newShowRole !== this.user.show_role) return true
	+ if (!isEqual(
	+ this.newFields,
	+ this.user.fields?.map(field => ({ name: field.name, value: field.value }))
	+ )) return true
	+ return false
	+ },
	groupActorAvailable () {
	return this.$store.state.instance.groupActorAvailable
	},
	availableActorTypes () {
	return this.groupActorAvailable ? ['Person', 'Service', 'Group'] : ['Person', 'Service']
	},
	user () {
	return this.$store.getters.findUser(this.userId)
	},
	role () {
	return this.user.role
	},
	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: [
	'linear-gradient(to bottom, var(--profileTint), var(--profileTint))',
	`url(${this.bannerImgSrc})`
	].join(', ')
	}
	},
	isOtherUser () {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl () {
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn () {
	return this.$store.state.users.currentUser
	},
	dailyAvg () {
	const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
	return Math.round(this.user.statuses_count / days)
	},
	emoji () {
	return this.$store.state.instance.customEmoji.map(e => ({
	shortcode: e.displayText,
	static_url: e.imageUrl,
	url: e.imageUrl
	}))
	},
	userHighlightType: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return (data && data.type) \|\| 'disabled'
	},
	set (type) {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	if (type !== 'disabled') {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) \|\| '#FFFFFF', type })
	} else {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
	}
	},
	...mapGetters(['mergedConfig'])
	},
	userHighlightColor: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return data && data.color
	},
	set (color) {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
	}
	},
	visibleRole () {
	if (!this.newShowRole) { return }
	const rights = this.user.rights
	if (!rights) { return }
	const validRole = rights.admin \|\| rights.moderator
	const roleTitle = rights.admin ? 'admin' : 'moderator'
	return validRole && roleTitle
	},
	hideFollowsCount () {
	return this.isOtherUser && this.user.hide_follows_count
	},
	hideFollowersCount () {
	return this.isOtherUser && this.user.hide_followers_count
	},
	showModerationMenu () {
	const privileges = this.loggedIn.privileges
	return this.loggedIn.role === 'admin' \|\|
	privileges.includes('users_manage_activation_state') \|\|
	privileges.includes('users_delete') \|\|
	privileges.includes('users_manage_tags')
	},
	hasNote () {
	return this.relationship.note
	},
	supportsNote () {
	return 'note' in this.relationship
	},
	muteExpiryAvailable () {
	return this.user.mute_expires_at !== undefined
	},
	muteExpiry () {
	return this.user.mute_expires_at == null
	? this.$t('user_card.mute_expires_forever')
	: this.$t('user_card.mute_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
	},
	blockExpiryAvailable () {
	return this.user.block_expires_at !== undefined
	},
	blockExpiry () {
	return this.user.block_expires_at == null
	? this.$t('user_card.block_expires_forever')
	: this.$t('user_card.block_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
	},
	formattedBirthday () {
	const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
	return this.user.birthday && new Date(Date.parse(this.user.birthday)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
	},

	// Editable stuff
	avatarImgSrc () {
	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 currentUrl = this.user.cover_photo \|\| this.defaultBanner
	const newUrl = this.newBanner === '' ? this.defaultBanner : this.newBanner
	return (this.newBanner === null) ? currentUrl : newUrl
	},
	defaultAvatar () {
	return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
	},
	defaultBanner () {
	return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
	},
	isDefaultAvatar () {
	const baseAvatar = this.$store.state.instance.defaultAvatar
	return !(this.$store.state.users.currentUser.profile_image_url) \|\|
	this.$store.state.users.currentUser.profile_image_url.includes(baseAvatar)
	},
	isDefaultBanner () {
	const baseBanner = this.$store.state.instance.defaultBanner
	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
	},
	maxFields () {
	return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
	},
	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
	]
	})
	},
	...mapGetters(['mergedConfig'])
	},
	methods: {
	muteUser () {
	this.$refs.timedMuteDialog.optionallyPrompt()
	},
	unmuteUser () {
	this.$store.dispatch('unmuteUser', this.user.id)
	},
	subscribeUser () {
	return this.$store.dispatch('subscribeUser', this.user.id)
	},
	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
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	userProfileLink (user) {
	return generateProfileLink(
	user.id, user.screen_name,
	this.$store.state.instance.restrictedNicknames
	)
	},
	openProfileTab () {
	useInterfaceStore().openSettingsModalTab('profile')
	},
	zoomAvatar () {
	const attachment = {
	url: this.user.profile_image_url_original,
	mimetype: 'image'
	}
	useMediaViewerStore().setMedia([attachment])
	useMediaViewerStore().setCurrentMedia(attachment)
	},
	mentionUser () {
	usePostStatusStore().openPostStatusModal({ profileMention: true, repliedUser: this.user })
	},
	onAvatarClickHandler (e) {
	if (this.onAvatarClick) {
	e.preventDefault()
	this.onAvatarClick()
	}
	},

	// Editable stuff
	changeAvatar () {
	this.editImage = 'avatar'
	},
	changeBanner () {
	this.editImage = 'banner'
	},
	submitImage ({ canvas, file }) {
	if (canvas) {
	return canvas.toBlob((data) => this.submitImage({ canvas: null, file: data }))
	}

	const reader = new window.FileReader()
	reader.onload = (e) => {
	const dataUrl = e.target.result

	if (this.editImage === 'avatar') {
	this.newAvatar = dataUrl
	this.newAvatarFile = file
	} else {
	this.newBanner = dataUrl
	this.newBannerFile = file
	}

	this.editImage = false
	}

	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: '' })
	return true
	}
	return false
	},
	deleteField (index) {
	this.newFields.splice(index, 1)
	},
	propsToNative (props) {
	return propsToNative(props)
	},
	cancelImageText () {
	return
	},
	resetState () {
	const user = this.$store.state.users.currentUser

	this.newName = user.name_unescaped
	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.newShowRole = user.show_role

	this.newFields = user.fields.map(field => ({ name: field.name, value: field.value }))
	},
	updateProfile () {
	const params = {
	note: this.newBio,

	// Backend notation.
	display_name: this.newName,
	fields_attributes: this.newFields.filter(el => el != null),
	show_role: !!this.newShowRole,
	birthday: this.newBirthday \|\| '',
	show_birthday: !!this.showBirthday,
	}

	if (this.actorType) {
	params.actor_type = this.actorType
	}

	if (this.newAvatarFile !== null) {
	params.avatar = this.newAvatarFile
	}

	if (this.newBannerFile !== null) {
	params.header = this.newBannerFile
	}

	if (this.emailLanguage) {
	params.language = localeService.internalToBackendLocaleMulti(this.emailLanguage)
	}

	this.$store.state.api.backendInteractor
	.updateProfile({ params })
	.then((user) => {
	this.newFields.splice(this.newFields.length)
	merge(this.newFields, user.fields)
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	this.resetState()
	})
	.catch((error) => {
	this.displayUploadError(error)
	})
	},
	displayUploadError (error) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'upload.error.message',
	messageArgs: [error.message],
	level: 'error'
	})
	}
	}
	}
	diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
	index 8b224efb6f..c948480ba1 100644
	--- a/src/components/user_card/user_card.scss
	+++ b/src/components/user_card/user_card.scss
	@@ -1,572 +1,577 @@
	.user-card {
	position: relative;
	z-index: 1;
	overflow: hidden;

	// editing headers
	h4 {
	line-height: 2;
	display: flex;
	}

	h3 {
	padding-left: 0.6em;
	margin-bottom: 0;

	.button-default {
	font-size: 1rem;
	line-height: 2;
	padding: 0 0.6em;
	}
	}

	.input.bio {
	height: auto; // override settings default textarea size
	}

	.user-card-inner {
	padding-bottom: 0;
	}

	&-setting,
	&-bio {
	color: var(--lightText);
	display: block;
	line-height: 1.3;
	padding: 0 0.6em;

	img {
	object-fit: contain;
	vertical-align: middle;
	max-width: 100%;
	max-height: 400px;
	}
	}

	.user-card-setting {
	margin-left: 0.6em;
	margin-right: 0.6em;
	}

	.user-card-bio {
	text-align: center;
	margin: 0 0.6em;

	&.input {
	margin: 0 1em;

	textarea {
	text-align: inherit;
	}
	}

	&, * {
	line-height: 1.5;
	}

	&.-justify-left {
	text-align: start;
	}
	}

	&:hover {
	--_still-image-img-visibility: visible;
	--_still-image-canvas-visibility: hidden;
	--_still-image-label-visibility: hidden;
	}

	.personal-marks {
	margin: 0.6em;
	padding: 0.6em;

	&:not(:last-child) {
	border-bottom: 1px solid var(--border);
	}

	.highlighter {
	h4 {
	margin-top: 0.6em;
	}

	.userHighlightSel {
	vertical-align: bottom;
	margin-left: -0.1em;

	&.-none select {
	color: var(--textFaint);

	option {
	color: var(--text);
	background: var(--background);
	}
	}
	}

	.highlighter-color {
	vertical-align: bottom;
	margin-left: 0.6em;
	}
	}
	}

	.background-image {
	position: absolute;
	inset: 0;
	right: -1.2em;
	left: -1.2em;
	top: -1.4em;
	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);
	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;
	+ }
	}

	.user-info {
	position: relative;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 1em;

	.user-identity {
	position: relative;
	aspect-ratio: 3;
	min-height: 6em;
	display: flex;
	align-items: flex-end;
	container: user-card / inline-size;

	> * {
	min-width: 0;
	}

	> a {
	vertical-align: middle;
	display: flex;
	}

	.Avatar {
	--_avatarShadowBox: var(--avatarShadow);
	--_avatarShadowFilter: var(--avatarShadowFilter);
	--_avatarShadowInset: var(--avatarShadowInset);

	width: 7em;
	width: calc(min(7em, 20cqw));
	height: 7em;
	height: calc(min(7em, 20cqw));
	object-fit: cover;
	}
	}

	.other-actions {
	position: relative;
	display: inline-grid;
	grid-auto-flow: column;
	grid-gap: 0.6em;
	font-size: 1.25rem;
	z-index: 2;
	align-self: end;

	a, button, div {
	text-align: center;
	width: 2em;
	height: 2em;
	line-height: 2em;
	padding: 0.6em;
	margin: -0.6em;

	&.save-profile-button,
	&.reset-profile-button,
	&.edit-banner-button {
	width: auto;
	}

	&:hover .icon {
	color: var(--textFaint);
	}

	&:not(:hover) .icon {
	color: var(--lightText);
	}
	}
	}

	&-avatar {
	position: relative;
	cursor: pointer;
	margin-right: 0.6em;

	&.-overlay {
	position: absolute;
	inset: -0.6em;
	left: -0.6em;
	right: -1.2em;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--roundness);
	opacity: 0;
	transition: opacity 0.2s ease;

	svg {
	color: #fff;
	margin: 0.5em;
	}
	}

	&:hover &.-overlay {
	opacity: 1;
	background-color: rgb(0 0 0 / 30%);
	}
	}

	.user-info-avatar.-editable {
	.-overlay {
	opacity: 1;
	place-items: start end;
	justify-content: end;
	}
	}

	.user-summary {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	margin-left: 0.6em;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 0;
	// This is so that text doesn't get overlapped by avatar's shadow if it has
	// big one
	z-index: 1;
	line-height: 2em;

	--emoji-size: 1.7em;

	.RichContent {
	/* stylelint-disable-next-line declaration-no-important */
	--link: var(--text) !important;
	}

	.name-wrapper {
	display: flex;
	align-items: baseline;

	.edit-button {
	width: 3em;
	text-align: center;

	&:hover .icon {
	color: var(--textFaint);
	}

	&:not(:hover) .icon {
	color: var(--lightText);
	}
	}

	.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;
	justify-content: space-between;
	flex: 1;
	// these two normalize position and height when custom emoji are used
	line-height: 2;
	margin-bottom: -0.2em;
	font-size: calc(max(110%, 4cqw));
	}

	.bottom-line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	white-space: normal;
	font-weight: 500;
	font-size: 0.9em;
	font-size: calc(max(90%, 2.5cqw));
	line-height: 1.5;
	}

	.lock-icon {
	display: inline-block;
	vertical-align: baseline;
	overflow-x: hidden;
	margin: 0 0.35em 0 0.5em;
	}

	.user-screen-name {
	color: var(--text);
	text-overflow: ellipsis;
	overflow: hidden;
	display: inline-block;
	}

	.user-role {
	display: inline-block;
	vertical-align: baseline;
	}
	}

	.user-interactions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;

	> * {
	flex: 0 0 8em;
	}

	.popover-trigger-button, .moderation-tools-button {
	width: 100%;
	}

	> .btn-group, > button {
	white-space: nowrap;
	}
	}
	}

	.sidebar .edit-profile-button {
	display: none;
	}

	.user-extras {
	padding: 1.2em 0.6em;
	line-height: 1.5;

	.user-stats {
	display: block;
	text-align: center;
	word-wrap: break-word;
	width: 100%;

	dl {
	display: inline;
	margin-right: 1em;
	white-space: nowrap;
	}

	dd {
	font-weight: bolder;
	text-overflow: ellipsis;
	overflow: hidden;
	margin: 0;
	}

	dd, dt {
	display: inline
	}

	/* stylelint-disable-next-line no-descending-specificity */
	a {
	text-decoration: none;
	}
	}

	.birthday {
	width: 100%;
	text-align: center;
	white-space: nowrap;

	--icon: var(--text);
	}
	}

	.user-profile-fields {
	margin: 0 0.5em;
	padding: 0 0.5em;
	display: flex;
	flex-direction: column;

	--emoji-size: 1.8em;

	img {
	object-fit: contain;
	vertical-align: middle;
	}

	.user-profile-field-add,
	.user-profile-field {
	display: flex;
	align-items: center;
	margin: 0.25em;
	border: 1px solid var(--border);
	border-radius: var(--roundness);
	line-height: 2em;

	.label {
	margin-left: 0.5em;
	}
	}

	.user-profile-field-add {
	justify-content: center;
	margin: 0.25em;
	}

	.user-profile-field {

	/* stylelint-disable no-descending-specificity */
	// input is a generic class
	.input {
	text-align: inherit;
	flex: 1;
	}
	/* stylelint-enable no-descending-specificity */

	.delete-field {
	display: inline-block;
	text-align: center;
	width: 2em;
	}

	.user-profile-field-name,
	.user-profile-field-value,
	.user-profile-field-add {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
	display: inline-flex;

	&.-edit {
	padding: 0;

	input {
	font-weight: inherit;
	}
	}
	}

	.user-profile-field-name {
	flex: 0 1 50%;
	font-weight: 600;
	text-align: right;
	justify-content: end;
	color: var(--lightText);
	min-width: 9em;
	border-right: 1px solid var(--border);
	padding-left: 1.2em;
	padding-right: 0.6em;
	}

	.user-profile-field-value {
	flex: 1 1 55%;
	color: var(--text);
	padding-left: 0.6em;
	margin: 0;
	}
	}
	}

	.edit-image {
	.panel-body {
	text-align: center;
	}

	.current-avatar {
	object-fit: contain;
	}

	.image-container {
	display: flex;
	margin: 0 1em 0.5em;
	gap: 0.5em;

	.new-image {
	display: flex;
	flex-direction: column;
	}

	.cropper {
	flex: 1;
	}

	> * {
	flex: 1 0 10em;
	max-height: 100%;
	aspect-ratio: 1;
	}

	.separator {
	min-width: 1.1em;
	font-size: 500%;
	align-self: center;
	flex: 0 1 5em;
	aspect-ratio: unset;
	}
	}

	&.-banner {
	.images-container {
	grid-template-rows: 20em 5em 20em;
	grid-template-columns: 1fr;

	> * {
	flex: 1 0 10em;
	width: 100%;
	aspect-ratio: 3;
	}
	}

	.separator {
	min-height: 1.1em;
	font-size: 500%;
	justify-self: center;
	flex: 0 1 5em;
	aspect-ratio: unset;
	}
	}
	}
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index 5bb21c8388..9873c0aead 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,720 +1,722 @@
	<template>
	<div
	class="user-card"
	:class="classes"
	>
	<div class="user-card-inner">
	<div class="user-info">
	<div class="user-identity">
	<div
	:class="{ 'hide-bio': hideBio }"
	:style="style"
	class="background-image"
	/>
	<a
	v-if="avatarAction === 'zoom'"
	class="user-info-avatar -link"
	@click="zoomAvatar"
	>
	<UserAvatar :user="user" />
	<div class="user-info-avatar -link -overlay">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="search-plus"
	/>
	</div>
	</a>
	<button
	v-else-if="editable"
	class="user-info-avatar button-unstyled -link"
	:class="{ '-editable': editable }"
	@click="changeAvatar"
	>
	<UserAvatar
	:user="user"
	:url="avatarImgSrc"
	/>
	<div class="user-info-avatar -link -overlay">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="pencil"
	/>
	</div>
	</button>
	<UserAvatar
	v-else-if="typeof avatarAction === 'function'"
	class="user-info-avatar"
	:user="user"
	@click="avatarAction"
	/>
	<router-link
	v-else
	class="user-info-avatar"
	:to="userProfileLink(user)"
	>
	<UserAvatar :user="user" />
	</router-link>
	<div class="user-summary">
	<div class="top-line">
	<div
	class="other-actions"
	>
	<button
	v-if="editable"
	:disabled="newName && newName.length === 0"
	class="btn button-unstyled edit-banner-button"
	@click="changeBanner"
	>
	{{ $t('settings.change_banner') }}
	<FAIcon
	fixed-width
	class="icon"
	icon="pencil"
	:title="$t('user_card.change_banner')"
	/>
	</button>
	<button
	v-else-if="!editable && !isOtherUser && user.is_local"
	class="button-unstyled edit-profile-button"
	@click.stop="openProfileTab"
	>
	<FAIcon
	fixed-width
	class="icon"
	icon="edit"
	:title="$t('user_card.edit_profile')"
	/>
	</button>
	<a
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	class="button-unstyled external-link-button"
	>
	<FAIcon
	class="icon"
	icon="external-link-alt"
	/>
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	:user="user"
	:relationship="relationship"
	/>
	<router-link
	v-if="onClose"
	:to="userProfileLink(user)"
	class="button-unstyled external-link-button"
	@click="onClose"
	>
	<FAIcon
	class="icon"
	icon="expand-alt"
	/>
	</router-link>
	<button
	v-if="onClose"
	class="button-unstyled external-link-button"
	@click="onClose"
	>
	<FAIcon
	class="icon"
	icon="times"
	/>
	</button>
	</div>
	<div class="name-wrapper">
	<router-link
	v-if="!editable \|\| !editingName"
	:to="userProfileLink(user)"
	class="user-name"
	>
	<RichContent
	:title="editable ? newName : user.name_unescaped"
	:html="editable ? newName : user.name_unescaped"
	: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
	class="user-screen-name"
	:user="user"
	/>
	<span
	v-if="user.locked"
	class="lock-icon"
	>
	<FAIcon
	icon="lock"
	size="sm"
	/>
	</span>
	<span
	v-if="relationship.followed_by && loggedIn && isOtherUser"
	class="alert neutral user-role"
	>
	{{ $t('user_card.follows_you') }}
	</span>
	<template v-if="!hideBio">
	<span
	v-if="user.deactivated"
	class="alert neutral user-role"
	>
	{{ $t('user_card.deactivated') }}
	</span>
	<span
	v-if="!!visibleRole"
	class="alert neutral user-role"
	>
	{{ $t(`general.role.${visibleRole}`) }}
	</span>
	<span
	v-if="user.actor_type === 'Service'"
	class="alert neutral user-role"
	>
	{{ $t('user_card.bot') }}
	</span>
	<span
	v-if="user.actor_type === 'Group'"
	class="alert user-role"
	>
	{{ $t('user_card.group') }}
	</span>
	<span
	v-if="relationship.muting && muteExpiryAvailable"
	class="alert neutral user-role"
	>
	{{ muteExpiry }}
	</span>
	<span
	v-if="relationship.blocking && blockExpiryAvailable"
	class="alert neutral user-role"
	>
	{{ blockExpiry }}
	</span>
	</template>
	</div>
	</div>
	</div>
	<div
	v-if="loggedIn"
	class="user-interactions"
	>
	<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>
	- <button
	- v-if="editable"
	- :disabled="somethingToSave"
	- class="btn button-default reset-profile-button"
	- @click="resetState"
	- >
	- {{ $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-default save-profile-button"
	- @click="updateProfile"
	- >
	- {{ $t('settings.save') }}
	- <FAIcon
	- fixed-width
	- class="icon"
	- icon="save"
	- :title="$t('user_card.edit_profile')"
	- />
	- </button>
	</div>
	<div
	v-if="!loggedIn && user.is_local"
	class="user-interactions"
	>
	<RemoteFollow :user="user" />
	</div>
	</div>
	</div>
	<div
	v-if="!editable && loggedIn && isOtherUser && (hasNote \|\| !hideBio) && !mergedConfig.userCardHidePersonalMarks"
	class="personal-marks"
	>
	<UserNote
	v-if="hasNote \|\| (hasNoteEditor && supportsNote)"
	:user="user"
	:relationship="relationship"
	:editable="hasNoteEditor"
	/>
	<div
	v-if="!hideBio"
	class="highlighter"
	>
	<h4>{{ $t('user_card.highlight_header') }}</h4>
	<Select
	:id="'userHighlightSel'+user.id"
	v-model="userHighlightType"
	class="userHighlightSel unstyled"
	:class="{ '-none': userHighlightType === 'disabled' }"
	>
	<option value="disabled">
	{{ $t('user_card.highlight_new.disabled') }}
	</option>
	<option value="solid">
	{{ $t('user_card.highlight_new.solid') }}
	</option>
	<option value="striped">
	{{ $t('user_card.highlight_new.striped') }}
	</option>
	<option value="side">
	{{ $t('user_card.highlight_new.side') }}
	</option>
	</Select>
	<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
	<ColorInput
	v-if="userHighlightType !== 'disabled'"
	v-model="userHighlightColor"
	class="highlighter-color"
	:show-optional-checkbox="false"
	name="'userHighlightColorTx'+user.id"
	:unstyled="true"
	/>
	</div>
	</div>
	<h3 v-if="editable">
	<span>
	{{ $t('settings.bio') }}
	</span>
	{{ ' ' }}
	<button
	class="button-default"
	@click="editingBio = !editingBio"
	>
	{{ $t('settings.toggle_edit') }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="pencil"
	/>
	</button>
	</h3>
	<template v-if="!editable \|\| !editingBio">
	<RichContent
	v-if="!hideBio"
	class="user-card-bio"
	:class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
	:html="editable ? newBio.replace(/\n/g, '<br>') : user.description_html"
	:emoji="editable ? emoji : user.emoji"
	:handle-links="true"
	/>
	</template>
	<template v-else-if="editingBio">
	<EmojiInput
	v-model="newBio"
	enable-emoji-picker
	class="user-card-bio"
	:class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
	:suggest="emojiUserSuggestor"
	>
	<template #default="inputProps">
	<textarea
	v-model="newBio"
	class="input bio resize-height"
	v-bind="propsToNative(inputProps)"
	:rows="newBio.split(/\n/g).length"
	/>
	</template>
	</EmojiInput>
	</template>
	<h3 v-if="editable">
	<span>
	{{ $t('settings.profile_fields.label') }}
	</span>
	{{ ' ' }}
	<button
	class="button-default"
	@click="editingFields = !editingFields"
	>
	{{ $t('settings.toggle_edit') }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="pencil"
	/>
	</button>
	</h3>
	<template v-if="!editable \|\| !editingFields">
	<div
	v-if="!hideBio && user.fields_html && user.fields_html.length > 0"
	class="user-profile-fields"
	>
	<dl
	v-for="(field, index) in (editable ? newFields : user.fields_html)"
	:key="index"
	class="user-profile-field"
	>
	<dt
	:title="field.name"
	class="user-profile-field-name"
	>
	<RichContent
	:html="field.name"
	:emoji="editable ? emoji : user.emoji"
	/>
	</dt>
	<dd
	:title="field.value"
	class="user-profile-field-value"
	>
	<RichContent
	:html="field.value"
	:emoji="editable ? emoji : user.emoji"
	/>
	</dd>
	</dl>
	</div>
	</template>
	<template v-else-if="editingFields">
	<div
	v-if="maxFields > 0"
	class="user-profile-fields"
	>
	<dl
	v-for="(_, i) in newFields"
	:key="i"
	class="user-profile-field"
	>
	<dt
	class="user-profile-field-name -edit"
	>
	<EmojiInput
	v-model="newFields[i].name"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	>
	<template #default="inputProps">
	<input
	v-model="newFields[i].name"
	:placeholder="$t('settings.profile_fields.name')"
	v-bind="propsToNative(inputProps)"
	class="input"
	>
	</template>
	</EmojiInput>
	</dt>
	<dd
	class="user-profile-field-value -edit"
	>
	<EmojiInput
	v-model="newFields[i].value"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	>
	<template #default="inputProps">
	<input
	v-model="newFields[i].value"
	:placeholder="$t('settings.profile_fields.value')"
	v-bind="propsToNative(inputProps)"
	class="input input"
	>
	</template>
	</EmojiInput>
	<button
	class="delete-field button-default -hover-highlight"
	@click="deleteField(i)"
	>
	<!-- TODO something is wrong with v-show here -->
	<FAIcon
	v-if="newFields.length > 1"
	icon="times"
	/>
	</button>
	</dd>
	</dl>
	<button
	v-if="newFields.length < maxFields"
	class="user-profile-field-add add-field button-default -hover-highlight"
	@click="addField"
	>
	<FAIcon icon="plus" class="icon" />
	<span class="label">
	{{ $t("settings.profile_fields.add_field") }}
	</span>
	</button>
	</div>
	</template>
	<div
	class="user-extras"
	v-if="!hideBio"
	>
	<span
	v-if="!editable && !mergedConfig.hideUserStats"
	class="user-stats"
	>
	<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')"
	>
	<dd>{{ dailyAvg }}</dd>
	{{ ' ' }}
	<dt>{{ $t('user_card.statuses_per_day') }}</dt>
	</dl>
	<dl
	class="user-count"
	@click.prevent="setProfileView('friends')"
	>
	<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')"
	>
	<dd>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</dd>
	{{ ' ' }}
	<dt>{{ $t('user_card.followers') }}</dt>
	</dl>
	</span>
	<template v-if="!hideBio">
	<div
	v-if="user.birthday && !editable"
	class="birthday"
	>
	<FAIcon
	class="fa-old-padding"
	icon="birthday-cake"
	/>
	{{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
	</div>
	<div
	v-else-if="editable"
	class="birthday"
	>
	<div>
	<Checkbox v-model="showBirthday">
	{{ $t('settings.birthday.show_birthday') }}
	</Checkbox>
	</div>
	<FAIcon
	class="fa-old-padding"
	icon="birthday-cake"
	/>
	{{ $t('settings.birthday.label') }}
	<input
	id="birthday"
	v-model="newBirthday"
	type="date"
	class="input birthday-input"
	>
	</div>
	</template>
	</div>
	<template v-if="editable">
	<h3>{{ $t('settings.profile_other') }}</h3>
	<p
	v-if="role === 'admin' \|\| role === 'moderator'"
	class="user-card-setting"
	>
	<Checkbox v-model="newShowRole">
	<template v-if="role === 'admin'">
	{{ $t('settings.show_admin_badge') }}
	</template>
	<template v-if="role === 'moderator'">
	{{ $t('settings.show_moderator_badge') }}
	</template>
	</Checkbox>
	</p>
	<p class="user-card-setting">
	<label>
	{{ $t('settings.actor_type') }}
	<Select v-model="newActorType">
	<option
	v-for="option in availableActorTypes"
	:key="option"
	:value="option"
	>
	{{ $t('settings.actor_type_' + (option === 'Person' ? 'person_proper' : option)) }}
	</option>
	</Select>
	<div v-if="groupActorAvailable">
	<small>
	{{ $t('settings.actor_type_description') }}
	</small>
	</div>
	</label>
	</p>
	+ <div class="bottom-buttons">
	+ <button
	+ v-if="editable"
	+ :disabled="!somethingToSave"
	+ class="btn button-default reset-profile-button"
	+ @click="resetState"
	+ >
	+ {{ $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-default save-profile-button"
	+ @click="updateProfile"
	+ >
	+ {{ $t('settings.save') }}
	+ <FAIcon
	+ fixed-width
	+ class="icon"
	+ icon="save"
	+ :title="$t('user_card.edit_profile')"
	+ />
	+ </button>
	+ </div>
	</template>
	<teleport to="#modal">
	<UserTimedFilterModal
	ref="timedMuteDialog"
	:user="user"
	:is-mute="true"
	/>
	</teleport>
	<teleport to="#modal">
	<DialogModal
	v-if="editImage"
	class="edit-image"
	>
	<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>
	<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>

	<script src="./user_card.js"></script>

	<style lang="scss" src="./user_card.scss" />

File Metadata

Mime Type: text/x-diff
Expires: Mon, Nov 2, 1:14 AM (31 m, 59 s)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1803485
Default Alt Text: (50 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions