fix(client/friendly): フローティングメニューを長押ししたときにプロフィール画像をドラッグできる問題

CHANGELOG_CHERRYPICK.md

@@ -41,6 +41,7 @@
 - 노트 작성 폼의 디자인 개선
 - 헤더에 뒤로 가기 버튼 추가
 - Fix: (Friendly) 위젯 영역에 safe-area-inset-bottom이 적용되지 않음
+- Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: 위젯 편집 시 헤더 이외의 영역을 눌렀을 때 위젯 설정이 뜨는 문제
 - Fix: 위젯 편집 종료 버튼이 여러 개 있는 문제
 - Fix: 일부 옵션 변경 시 페이지를 새로 고치도록

packages/frontend/src/components/MkImgWithBlurhash.vue

@@ -10,7 +10,7 @@
 		:leaveFromClass="defaultStore.state.animation && props.transition?.leaveFromClass || undefined"
 	>
 		<canvas v-show="hide" key="canvas" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
-		<img v-show="!hide" key="img" ref="img" :height="imgHeight" :width="imgWidth" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" decoding="async"/>
+		<img v-show="!hide" key="img" ref="img" :height="imgHeight" :width="imgWidth" :class="[$style.img, { [$style.noDrag]: noDrag }]" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" decoding="async"/>
 	</TransitionGroup>
 </div>
 </template>
@@ -66,6 +66,7 @@ const props = withDefaults(defineProps<{
 	width?: number;
 	cover?: boolean;
 	forceBlurhash?: boolean;
+	noDrag?: boolean;
 }>(), {
 	transition: null,
 	src: null,
@@ -75,6 +76,7 @@ const props = withDefaults(defineProps<{
 	width: 64,
 	cover: true,
 	forceBlurhash: false,
+	noDrag: false,
 });
 
 const viewId = uuid();
@@ -238,5 +240,9 @@ onUnmounted(() => {
 
 .img {
 	object-fit: contain;
+
+	&.noDrag {
+		-webkit-user-drag: none;
+	}
 }
 </style>

packages/frontend/src/components/global/CPAvatar-Friendly.vue

@@ -1,6 +1,6 @@
 <template>
 <component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="$style.root" :style="{ color }" :title="acct(user)" @click="onClick">
-	<MkImgWithBlurhash :class="[$style.inner, {[$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect}]" :src="url" :hash="user?.avatarBlurhash" :cover="true"/>
+	<MkImgWithBlurhash :class="[$style.inner, {[$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect}]" :src="url" :hash="user?.avatarBlurhash" :cover="true" :noDrag="true"/>
 	<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
 </component>
 </template>