Merge pull request '[PR]: User card design' (#10486) from Freeplay/calckey:user-cards into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10486

packages/client/src/components/MkUserInfo.vue

@@ -1,151 +1,307 @@
 <template>
-	<div class="_panel vjnjpkug">
+	<article class="_panel user-card">
 		<div
 			class="banner"
 			:style="
 				user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''
 			"
+			:class="{ detailed }"
 		></div>
+		<h3 class="title">
 			<MkAvatar
 				class="avatar"
 				:user="user"
 				:disable-preview="true"
 				:show-indicator="true"
 			/>
-		<div class="title">
 			<MkA class="name" :to="userPage(user)"
-				><MkUserName :user="user" :nowrap="false"
+				><MkUserName :user="user" :nowrap="true"
 			/></MkA>
 			<p class="username"><MkAcct :user="user" /></p>
-		</div>
+		</h3>
-		<div class="description">
+		<div
-			<div v-if="user.description" class="mfm">
+			class="description"
+			:class="{ collapsed: isLong && collapsed, truncate: !detailed }"
+		>
 			<Mfm
+				v-if="user.description"
+				class="mfm"
 				:text="user.description"
 				:author="user"
 				:i="$i"
 				:custom-emojis="user.emojis"
 			/>
-			</div>
 			<span v-else style="opacity: 0.7">{{
 				i18n.ts.noAccountDescription
 			}}</span>
 		</div>
+		<XShowMoreButton v-if="isLong" v-model="collapsed"></XShowMoreButton>
+		<div v-if="user.fields.length > 0 && detailed" class="fields">
+			<dl v-for="(field, i) in user.fields" :key="i" class="field">
+				<dt class="name">
+					<Mfm
+						:text="field.name"
+						:plain="true"
+						:custom-emojis="user.emojis"
+						:colored="false"
+					/>
+				</dt>
+				<dd class="value">
+					<Mfm
+						:text="field.value"
+						:author="user"
+						:i="$i"
+						:custom-emojis="user.emojis"
+						:colored="false"
+					/>
+				</dd>
+			</dl>
+		</div>
 		<div class="status">
-			<div>
+			<p>
-				<p>{{ i18n.ts.notes }}</p>
 				<MkNumber :value="user.notesCount" />
-			</div>
+				{{ i18n.ts.notes }}
-			<div>
+			</p>
-				<p>{{ i18n.ts.following }}</p>
+			<p>
 				<MkNumber :value="user.followingCount" />
-			</div>
+				{{ i18n.ts.following }}
-			<div>
+			</p>
-				<p>{{ i18n.ts.followers }}</p>
+			<p>
 				<MkNumber :value="user.followersCount" />
+				{{ i18n.ts.followers }}
+			</p>
 		</div>
-		</div>
+		<div class="buttons">
-		<div class="koudoku-button">
+			<slot>
 				<MkFollowButton v-if="$i && user.id != $i.id" :user="user" />
+			</slot>
 		</div>
-	</div>
+	</article>
 </template>
 
 <script lang="ts" setup>
 import * as misskey from "calckey-js";
 import MkFollowButton from "@/components/MkFollowButton.vue";
+import XShowMoreButton from "@/components/MkShowMoreButton.vue";
 import MkNumber from "@/components/MkNumber.vue";
 import { userPage } from "@/filters/user";
 import { i18n } from "@/i18n";
 
-defineProps<{
+const props = defineProps<{
 	user: misskey.entities.UserDetailed;
+	detailed?: boolean;
 }>();
+
+let isLong = $ref(
+	props.detailed &&
+		(props.user.description.split("\n").length > 9 ||
+			props.user.description.length > 400),
+);
+let collapsed = $ref(isLong);
 </script>
 
 <style lang="scss" scoped>
-.vjnjpkug {
+.user-card {
 	position: relative;
+	display: flex;
+	flex-direction: column;
 
-	> .banner {
+	.banner {
-		height: 84px;
+		height: 94px;
 		background-color: rgba(0, 0, 0, 0.1);
 		background-size: cover;
 		background-position: center;
+		margin-bottom: calc(0px - var(--radius));
+		&::before {
+			content: "";
+			position: absolute;
+			inset: 0;
+			z-index: 2;
+			height: inherit;
+			background: linear-gradient(
+				-125deg,
+				rgba(0, 0, 0, 0.7),
+				transparent,
+				transparent
+			);
+		}
+		&.detailed::after {
+			content: "";
+			background-image: var(--blur, inherit);
+			position: fixed;
+			inset: 0;
+			background-size: cover;
+			background-position: center;
+			pointer-events: none;
+			opacity: 0.1;
+			filter: var(--blur, blur(10px));
+			z-index: 5;
+		}
 	}
 
-	> .avatar {
+	.title {
+		position: relative;
+		display: block;
+		padding: 10px 10px 10px 84px;
+		margin: 0;
+		font-size: 1em;
+		border-radius: var(--radius);
+		background: var(--panel);
+		line-height: 1;
+		z-index: 4;
+
+		.avatar {
 			display: block;
 			position: absolute;
-		top: 62px;
+			bottom: 6px;
-		left: 13px;
+			left: 10px;
 			z-index: 2;
 			width: 58px;
 			height: 58px;
+			background: var(--panel);
 			border: solid 4px var(--panel);
 		}
-
+		.name {
-	> .title {
-		display: block;
-		padding: 10px 0 10px 88px;
-
-		> .name {
 			display: inline-block;
 			margin: 0;
 			font-weight: bold;
 			line-height: 16px;
-			word-break: break-all;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			height: 1.5em;
+			margin-block: -0.5em;
+			padding-block: 0.5em 0.25em;
+			max-width: 100%;
 		}
 
-		> .username {
+		.username {
 			display: block;
 			margin: 0;
 			line-height: 16px;
 			font-size: 0.8em;
 			color: var(--fg);
+			font-weight: 500;
 			opacity: 0.7;
+			line-height: 1;
 		}
 	}
 
-	> .description {
+	.description {
-		padding: 16px;
-		font-size: 0.8em;
-		border-top: solid 0.5px var(--divider);
-
-		> .mfm {
-			display: -webkit-box;
-			-webkit-line-clamp: 3;
-			-webkit-box-orient: vertical;
 		overflow: hidden;
+		padding-inline: 16px;
+		margin-bottom: 10px;
+		font-size: 0.8em;
+		&.truncate {
+			display: -webkit-box;
+			-webkit-line-clamp: 6;
+			-webkit-box-orient: vertical;
+		}
+		&.collapsed {
+			position: relative;
+			max-height: calc(9em + 50px);
+			mask: linear-gradient(black calc(100% - 64px), transparent);
+			-webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
+		}
+		&.collapsed,
+		&.truncate {
+			:deep(br) {
+				display: block; // collapse white spaces
 			}
 		}
-
+	}
-	> .status {
+	:deep(.fade) {
-		padding: 10px 16px;
+		position: relative;
-		border-top: solid 0.5px var(--divider);
+		display: block;
-
+		width: 100%;
-		> div {
+		margin-top: -4.5em;
+		z-index: 2;
+		> span {
 			display: inline-block;
-			width: 33%;
+			background: var(--panel);
-
+			padding: 0.4em 1em;
-			> p {
+			font-size: 0.8em;
-				margin: 0;
+			border-radius: 999px;
-				font-size: 0.7em;
+			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-				color: var(--fg);
 		}
+		&:hover {
+			> span {
+				background: var(--panelHighlight);
+			}
+		}
+	}
+	:deep(.showLess) {
+		width: 100%;
+		position: sticky;
+		bottom: var(--stickyBottom);
 
 		> span {
-				font-size: 1em;
+			display: inline-block;
+			background: var(--panel);
+			padding: 6px 10px;
+			font-size: 0.8em;
+			border-radius: 999px;
+			box-shadow: 0 0 7px 7px var(--bg);
+		}
+	}
+	> .fields {
+		padding-inline: 16px;
+		font-size: 0.8em;
+		padding-block: 1em;
+		border-top: 1px solid var(--divider);
+
+		> .field {
+			display: flex;
+			padding: 0;
+			margin: 0;
+			align-items: center;
+
+			&:not(:last-child) {
+				margin-bottom: 8px;
+			}
+
+			:deep(span) {
+				white-space: nowrap !important;
+			}
+
+			> .name {
+				width: 30%;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				font-weight: bold;
+				text-align: center;
+				padding-right: 10px;
+			}
+
+			> .value {
+				width: 70%;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				margin: 0;
+			}
+		}
+	}
+	.status {
+		display: flex;
+		gap: 1em;
+		padding-inline: 16px;
+		font-size: 0.8em;
+		margin-top: auto;
+		border-top: 1px solid var(--divider);
+		> p > :deep(span) {
+			font-weight: 700;
 			color: var(--accent);
 		}
 	}
-	}
 
-	> .koudoku-button {
+	.buttons {
 		position: absolute;
 		top: 8px;
 		right: 8px;
 		margin-bottom: 1rem;
+		z-index: 3;
+		color: white;
 	}
 }
 </style>

packages/client/src/components/MkUserPreview.vue

@@ -19,96 +19,7 @@
 				}
 			"
 		>
-			<div v-if="user != null" class="info">
+			<MkUserInfo v-if="user != null" :user="user" :detailed="true" />
-				<div
-					class="banner"
-					:style="
-						user.bannerUrl
-							? `background-image: url(${user.bannerUrl})`
-							: ''
-					"
-				>
-					<span
-						v-if="$i && $i.id != user.id && user.isFollowed"
-						class="followed"
-						>{{ i18n.ts.followsYou }}</span
-					>
-				</div>
-				<MkAvatar
-					class="avatar"
-					:user="user"
-					:disable-preview="true"
-					:show-indicator="true"
-				/>
-				<div class="title">
-					<MkA class="name" :to="userPage(user)"
-						><MkUserName :user="user" :nowrap="true"
-					/></MkA>
-					<p class="username"><MkAcct :user="user" /></p>
-				</div>
-				<div
-					class="description"
-					:class="{ collapsed: isLong && collapsed }"
-				>
-					<Mfm
-						v-if="user.description"
-						:text="user.description"
-						:author="user"
-						:i="$i"
-						:custom-emojis="user.emojis"
-					/>
-				</div>
-				<XShowMoreButton
-					v-if="isLong"
-					v-model="collapsed"
-				></XShowMoreButton>
-				<div v-if="user.fields.length > 0" class="fields">
-					<dl
-						v-for="(field, i) in user.fields"
-						:key="i"
-						class="field"
-					>
-						<dt class="name">
-							<Mfm
-								:text="field.name"
-								:plain="true"
-								:custom-emojis="user.emojis"
-								:colored="false"
-							/>
-						</dt>
-						<dd class="value">
-							<Mfm
-								:text="field.value"
-								:author="user"
-								:i="$i"
-								:custom-emojis="user.emojis"
-								:colored="false"
-							/>
-						</dd>
-					</dl>
-				</div>
-				<div class="status">
-					<div>
-						<p>{{ i18n.ts.notes }}</p>
-						<span>{{ user.notesCount }}</span>
-					</div>
-					<div>
-						<p>{{ i18n.ts.following }}</p>
-						<span>{{ user.followingCount }}</span>
-					</div>
-					<div>
-						<p>{{ i18n.ts.followers }}</p>
-						<span>{{ user.followersCount }}</span>
-					</div>
-				</div>
-				<div class="follow-button-container">
-					<MkFollowButton
-						v-if="$i && user.id != $i.id"
-						:user="user"
-						mini
-					/>
-				</div>
-			</div>
 			<div v-else>
 				<MkLoading />
 			</div>
@@ -118,14 +29,10 @@
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
+import MkUserInfo from "@/components/MkUserInfo.vue";
 import * as Acct from "calckey-js/built/acct";
 import type * as misskey from "calckey-js";
-import MkFollowButton from "@/components/MkFollowButton.vue";
-import { userPage } from "@/filters/user";
-import XShowMoreButton from "@/components/MkShowMoreButton.vue";
 import * as os from "@/os";
-import { $i } from "@/account";
-import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	showing: boolean;
@@ -144,15 +51,9 @@ let user = $ref<misskey.entities.UserDetailed | null>(null);
 let top = $ref(0);
 let left = $ref(0);
 
-let isLong = $ref(false);
-let collapsed = $ref(!isLong);
-
 onMounted(() => {
 	if (typeof props.q === "object") {
 		user = props.q;
-		isLong =
-			user.description.split("\n").length > 9 ||
-			user.description.length > 400;
 	} else {
 		const query = props.q.startsWith("@")
 			? Acct.parse(props.q.slice(1))
@@ -161,9 +62,6 @@ onMounted(() => {
 		os.api("users/show", query).then((res) => {
 			if (!props.showing) return;
 			user = res;
-			isLong =
-				user.description.split("\n").length > 9 ||
-				user.description.length > 400;
 		});
 	}
 
@@ -195,203 +93,5 @@ onMounted(() => {
 	width: 300px;
 	overflow: hidden;
 	transform-origin: center top;
-
-	> .info {
-		> .banner {
-			height: 84px;
-			background-color: rgba(0, 0, 0, 0.1);
-			background-size: cover;
-			background-position: center;
-			> .followed {
-				position: absolute;
-				top: 12px;
-				left: 12px;
-				padding: 4px 8px;
-				color: #fff;
-				background: rgba(0, 0, 0, 0.7);
-				font-size: 0.7em;
-				border-radius: 6px;
-			}
-
-			&::before {
-				content: "";
-				position: absolute;
-				inset: 0;
-				z-index: 2;
-				height: 84px;
-				background: linear-gradient(
-					-125deg,
-					rgba(0, 0, 0, 0.7),
-					transparent,
-					transparent
-				);
-			}
-
-			&::after {
-				content: "";
-				background-image: var(--blur, inherit);
-				position: fixed;
-				inset: 0;
-				background-size: cover;
-				background-position: center;
-				pointer-events: none;
-				opacity: 0.1;
-				filter: var(--blur, blur(10px));
-			}
-		}
-
-		> .avatar {
-			display: block;
-			position: absolute;
-			top: 70px;
-			left: 13px;
-			z-index: 2;
-			width: 58px;
-			height: 58px;
-			border: solid 3px var(--face);
-			border-radius: 8px;
-		}
-
-		> .title {
-			display: block;
-			padding: 8px 0 8px 82px;
-
-			> .name {
-				display: inline-block;
-				margin: 0;
-				font-weight: bold;
-				line-height: 16px;
-				word-break: break-all;
-			}
-
-			> .username {
-				display: block;
-				margin: 0;
-				line-height: 16px;
-				font-size: 0.8em;
-				color: var(--fg);
-				opacity: 0.7;
-			}
-		}
-
-		> .description {
-			padding: 0 16px;
-			font-size: 0.8em;
-			color: var(--fg);
-			&.collapsed {
-				position: relative;
-				max-height: calc(9em + 50px);
-				mask: linear-gradient(black calc(100% - 64px), transparent);
-				-webkit-mask: linear-gradient(
-					black calc(100% - 64px),
-					transparent
-				);
-			}
-		}
-		:deep(.fade) {
-			position: relative;
-			display: block;
-			width: 100%;
-			margin-top: -2.5em;
-			z-index: 2;
-			> span {
-				display: inline-block;
-				background: var(--panel);
-				padding: 0.4em 1em;
-				font-size: 0.8em;
-				border-radius: 999px;
-				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-			}
-			&:hover {
-				> span {
-					background: var(--panelHighlight);
-				}
-			}
-		}
-		:deep(.showLess) {
-			width: 100%;
-			margin-top: 1em;
-			position: sticky;
-			bottom: var(--stickyBottom);
-
-			> span {
-				display: inline-block;
-				background: var(--panel);
-				padding: 6px 10px;
-				font-size: 0.8em;
-				border-radius: 999px;
-				box-shadow: 0 0 7px 7px var(--bg);
-			}
-		}
-
-		> .fields {
-			padding: 0 16px;
-			font-size: 0.8em;
-			margin-top: 1em;
-
-			> .field {
-				display: flex;
-				padding: 0;
-				margin: 0;
-				align-items: center;
-
-				&:not(:last-child) {
-					margin-bottom: 8px;
-				}
-
-				:deep(span) {
-					white-space: nowrap !important;
-				}
-
-				> .name {
-					width: 30%;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					font-weight: bold;
-					text-align: center;
-				}
-
-				> .value {
-					width: 70%;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					margin: 0;
-				}
-			}
-		}
-
-		> .status {
-			padding: 8px 16px;
-
-			> div {
-				display: inline-block;
-				width: 33%;
-
-				> p {
-					margin: 0;
-					font-size: 0.7em;
-					color: var(--fg);
-				}
-
-				> span {
-					font-size: 1em;
-					color: var(--accent);
-					:deep(span) {
-						white-space: nowrap;
-					}
-				}
-			}
-		}
-
-		> .follow-button-container {
-			position: absolute;
-			top: 8px;
-			right: 8px;
-			z-index: 3;
-			color: white;
-		}
-	}
 }
 </style>