No OneTemporary
Actions

Size

34 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
	index 58eb66d5c0..4fdc73777b 100644
	--- a/src/components/user_card/user_card.scss
	+++ b/src/components/user_card/user_card.scss
	@@ -1,583 +1,589 @@
	.user-card {
	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 {
	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;
	}
	}
	}

	- .banner-overlay,
	- .banner-image {
	+ .header-overlay {
	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;
	+ }
	+
	+ .banner-overlay,
	+ .banner-image {
	+ position: absolute;
	+ inset: 0;
	+ padding: 0;
	border-top-left-radius: calc(var(--roundness) - 1px);
	border-top-right-radius: calc(var(--roundness) - 1px);
	}

	.banner-image {
	z-index: -2;

	img {
	object-fit: cover;
	height: 100%;
	width: 100%;
	}
	}

	.banner-overlay {
	background-color: var(--profileTint);
	+ opacity: 0.5;
	pointer-events: none; // let user copy bg url
	z-index: -1;
	}

	.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;

	.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;
	display: flex;
	flex-direction: column;
	}

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

	.image-container {
	display: flex;
	align-self: center;
	margin: 0 0 1em;
	max-height: 30em;
	max-width: 100%;
	flex: 1 0 20em;
	aspect-ratio: 1;
	gap: 0.5em;

	&.-banner {
	aspect-ratio: 3;
	max-width: 100%;
	}

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

	.cropper {
	flex: 1;
	overflow-x: auto;
	}

	> * {
	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;
	}
	}

	#modal.-mobile & {
	#pick-image {
	height: 3em;
	}

	.image-container {
	&.-banner {
	max-height: 10em;
	}
	}
	}
	}
	diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js
	new file mode 100644
	index 0000000000..2c84b27590
	--- /dev/null
	+++ b/src/components/user_card/user_card.style.js
	@@ -0,0 +1,37 @@
	+export default {
	+ name: 'UserCard',
	+ selector: '.user-card',
	+ notEditable: true,
	+ validInnerComponents: [
	+ 'Text',
	+ 'Link',
	+ 'Icon',
	+ ],
	+ defaultRules: [
	+ {
	+ directives: {
	+ background: '--bg',
	+ opacity: 0,
	+ roundness: 3,
	+ shadow: [{
	+ x: 1,
	+ y: 1,
	+ blur: 4,
	+ spread: 0,
	+ color: '#000000',
	+ alpha: 0.6
	+ }],
	+ '--profileTint': 'color \| $alpha(--background 1)'
	+ }
	+ },
	+ {
	+ parent: {
	+ component: 'UserCard'
	+ },
	+ component: 'RichContent',
	+ directives: {
	+ opacity: 0
	+ }
	+ }
	+ ]
	+}
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index 52dab50694..d6edc021f5 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,718 +1,720 @@
	<template>
	<div class="user-card">
	<div class="user-card-inner">
	<div class="user-info">
	<div class="user-identity">
	- <div class="banner-image">
	- <img
	- :src="bannerImgSrc"
	+ <div class="header-overlay">
	+ <div class="banner-image">
	+ <img
	+ :src="bannerImgSrc"
	+ :class="{ 'hide-bio': hideBio }"
	+ >
	+ </div>
	+ <div
	+ class="banner-overlay"
	:class="{ 'hide-bio': hideBio }"
	- >
	+ />
	</div>
	- <div
	- class="banner-overlay"
	- :class="{ 'hide-bio': hideBio }"
	- />
	<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('settings.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="showExpand"
	:to="userProfileLink(user)"
	class="button-unstyled external-link-button"
	@click="$emit('close')"
	>
	<FAIcon
	class="icon"
	icon="expand-alt"
	/>
	</router-link>
	<button
	v-if="showClose"
	class="button-unstyled external-link-button"
	@click="$emit('close')"
	>
	<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"
	:title="$t('settings.toggle_edit')"
	@click="editingName = !editingName"
	>
	<FAIcon
	class="icon"
	icon="pencil"
	/>
	</button>
	</div>
	</div>
	<div class="bottom-line">
	<UserLink
	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 && isOtherUser"
	class="user-interactions"
	>
	<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"
	/>
	</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
	v-if="!hideBio"
	class="user-extras"
	>
	<span
	v-if="!editable && !mergedConfig.hideUserStats"
	class="user-stats"
	>
	<dl
	v-if="!mergedConfig.hideUserStats && !hideBio"
	class="user-count"
	>
	<dd>{{ user.statuses_count }}</dd>
	{{ ' ' }}
	<dt>{{ $t('user_card.statuses') }}</dt>
	</dl>
	<dl class="user-count">
	<dd>{{ dailyAvg }}</dd>
	{{ ' ' }}
	<dt>{{ $t('user_card.statuses_per_day') }}</dt>
	</dl>
	<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">
	<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="newShowBirthday">
	{{ $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>
	<p>
	{{ editImage === 'avatar' ? $t('settings.avatar_size_instruction') : $t('settings.banner_size_instruction' ) }}
	</p>
	<div
	class="image-container"
	:class="{ '-banner': editImage === 'banner' }"
	>
	<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="() => $refs.cropper.pickImage()"
	>
	{{ $t('settings.select_picture') }}
	</button>
	<template #footer>
	<button
	class="button-default btn"
	type="button"
	@click="editImage = false"
	>
	{{ $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="$refs.cropper.submit(false)"
	>
	{{ $t('image_cropper.save_without_cropping') }}
	</button>
	<button
	class="button-default btn"
	type="button"
	@click="$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, Oct 12, 6:59 PM (1 d, 17 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1786419
Default Alt Text: (34 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions