From dca42fd6e67b4b7b4fe97428e792cc299d2afaa8 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 16 Mar 2025 13:59:08 +0900
Subject: [PATCH] enhance(frontend): improve ux for touch devices
---
.../frontend-embed/src/pages/not-found.vue | 4 +--
.../frontend/src/components/MkChannelList.vue | 4 +--
.../frontend/src/components/MkFormDialog.vue | 2 +-
.../src/components/MkImgWithBlurhash.vue | 30 +++++++++++++++++--
packages/frontend/src/components/MkNotes.vue | 4 +--
.../src/components/MkNotifications.vue | 2 +-
.../frontend/src/components/MkPagination.vue | 2 +-
.../components/MkReactionsViewer.reaction.vue | 2 +-
.../frontend/src/components/MkUserList.vue | 4 +--
.../src/components/global/MkAvatar.vue | 2 ++
.../src/components/global/MkCustomEmoji.vue | 4 +++
.../src/components/global/MkError.vue | 2 +-
packages/frontend/src/pages/_error_.vue | 2 +-
.../frontend/src/pages/admin/roles.role.vue | 2 +-
.../frontend/src/pages/drive.file.info.vue | 2 +-
packages/frontend/src/pages/favorites.vue | 2 +-
.../frontend/src/pages/follow-requests.vue | 2 +-
packages/frontend/src/pages/invite.vue | 4 +--
packages/frontend/src/pages/list.vue | 2 +-
.../frontend/src/pages/my-antennas/index.vue | 2 +-
.../frontend/src/pages/my-lists/index.vue | 2 +-
packages/frontend/src/pages/not-found.vue | 2 +-
packages/frontend/src/pages/role.vue | 8 ++---
packages/frontend/src/pages/settings/apps.vue | 2 +-
.../src/pages/settings/mute-block.vue | 6 ++--
packages/frontend/src/style.scss | 5 ----
packages/frontend/src/ui/classic.header.vue | 2 +-
packages/frontend/src/ui/classic.sidebar.vue | 2 +-
.../src/widgets/WidgetBirthdayFollowings.vue | 2 +-
packages/frontend/src/widgets/WidgetRss.vue | 6 ++--
30 files changed, 72 insertions(+), 45 deletions(-)
diff --git a/packages/frontend-embed/src/pages/not-found.vue b/packages/frontend-embed/src/pages/not-found.vue
index bbb03b4e64..061254a39a 100644
--- a/packages/frontend-embed/src/pages/not-found.vue
+++ b/packages/frontend-embed/src/pages/not-found.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div>
<div class="_fullinfo">
- <img :src="notFoundImageUrl" class="_ghost"/>
+ <img :src="notFoundImageUrl" draggable="false"/>
<div>{{ i18n.ts.notFoundDescription }}</div>
</div>
</div>
@@ -20,5 +20,5 @@ import { i18n } from '@/i18n.js';
const serverMetadata = inject(DI.serverMetadata)!;
-const notFoundImageUrl = computed(() => serverMetadata?.notFoundImageUrl ?? DEFAULT_NOT_FOUND_IMAGE_URL);
+const notFoundImageUrl = computed(() => serverMetadata.notFoundImageUrl ?? DEFAULT_NOT_FOUND_IMAGE_URL);
</script>
diff --git a/packages/frontend/src/components/MkChannelList.vue b/packages/frontend/src/components/MkChannelList.vue
index 23705f6ff8..fdb7d2a1c4 100644
--- a/packages/frontend/src/components/MkChannelList.vue
+++ b/packages/frontend/src/components/MkChannelList.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination :pagination="pagination">
<template #empty>
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.notFound }}</div>
</div>
</template>
@@ -19,9 +19,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
+import type { Paging } from '@/components/MkPagination.vue';
import MkChannelPreview from '@/components/MkChannelPreview.vue';
import MkPagination from '@/components/MkPagination.vue';
-import type { Paging } from '@/components/MkPagination.vue';
import { i18n } from '@/i18n.js';
import { infoImageUrl } from '@/instance.js';
diff --git a/packages/frontend/src/components/MkFormDialog.vue b/packages/frontend/src/components/MkFormDialog.vue
index 8fd16e13d4..df39f34816 100644
--- a/packages/frontend/src/components/MkFormDialog.vue
+++ b/packages/frontend/src/components/MkFormDialog.vue
@@ -63,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</div>
<div v-else class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</MkSpacer>
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index 37cbc5d06b..6585784e42 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -14,8 +14,34 @@ SPDX-License-Identifier: AGPL-3.0-only
:enterToClass="prefer.s.animation && props.transition?.enterToClass || undefined"
:leaveFromClass="prefer.s.animation && props.transition?.leaveFromClass || undefined"
>
- <canvas v-show="hide" key="canvas" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined" tabindex="-1"/>
- <img v-show="!hide" key="img" ref="img" :height="imgHeight ?? undefined" :width="imgWidth ?? undefined" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" decoding="async" tabindex="-1"/>
+ <canvas
+ v-show="hide"
+ key="canvas"
+ ref="canvas"
+ :class="$style.canvas"
+ :width="canvasWidth"
+ :height="canvasHeight"
+ :title="title ?? undefined"
+ draggable="false"
+ tabindex="-1"
+ style="-webkit-user-drag: none;"
+ />
+ <img
+ v-show="!hide"
+ key="img"
+ ref="img"
+ :height="imgHeight ?? undefined"
+ :width="imgWidth ?? undefined"
+ :class="$style.img"
+ :src="src ?? undefined"
+ :title="title ?? undefined"
+ :alt="alt ?? undefined"
+ loading="eager"
+ decoding="async"
+ draggable="false"
+ tabindex="-1"
+ style="-webkit-user-drag: none;"
+ />
</TransitionGroup>
</div>
</template>
diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue
index 344b7c4dd2..62d4350400 100644
--- a/packages/frontend/src/components/MkNotes.vue
+++ b/packages/frontend/src/components/MkNotes.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination ref="pagingComponent" :pagination="pagination" :disableAutoLoad="disableAutoLoad">
<template #empty>
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noNotes }}</div>
</div>
</template>
@@ -33,10 +33,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { shallowRef } from 'vue';
+import type { Paging } from '@/components/MkPagination.vue';
import MkNote from '@/components/MkNote.vue';
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
import MkPagination from '@/components/MkPagination.vue';
-import type { Paging } from '@/components/MkPagination.vue';
import { i18n } from '@/i18n.js';
import { infoImageUrl } from '@/instance.js';
diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue
index 4275262429..9f75a75fb6 100644
--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination ref="pagingComponent" :pagination="pagination">
<template #empty>
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noNotifications }}</div>
</div>
</template>
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 1253d7883f..071dbba5eb 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-else-if="empty" key="_empty_" class="empty">
<slot name="empty">
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</slot>
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index 736bf87508..062894314d 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@click="toggleReaction()"
@contextmenu.prevent.stop="menu"
>
- <MkReactionIcon :class="prefer.s.limitWidthOfReaction ? $style.limitWidth : ''" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
+ <MkReactionIcon style="pointer-events: none;" :class="prefer.s.limitWidthOfReaction ? $style.limitWidth : ''" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
<span :class="$style.count">{{ count }}</span>
</button>
</template>
diff --git a/packages/frontend/src/components/MkUserList.vue b/packages/frontend/src/components/MkUserList.vue
index d1881ec3fc..0d1ffd715f 100644
--- a/packages/frontend/src/components/MkUserList.vue
+++ b/packages/frontend/src/components/MkUserList.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination :pagination="pagination">
<template #empty>
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
@@ -21,9 +21,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
+import type { Paging } from '@/components/MkPagination.vue';
import MkUserInfo from '@/components/MkUserInfo.vue';
import MkPagination from '@/components/MkPagination.vue';
-import type { Paging } from '@/components/MkPagination.vue';
import { i18n } from '@/i18n.js';
import { infoImageUrl } from '@/instance.js';
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index dc129b4c30..97c2069a2f 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -34,6 +34,8 @@ SPDX-License-Identifier: AGPL-3.0-only
translate: getDecorationOffset(decoration),
}"
alt=""
+ draggable="false"
+ style="-webkit-user-drag: none;"
>
</template>
</component>
diff --git a/packages/frontend/src/components/global/MkCustomEmoji.vue b/packages/frontend/src/components/global/MkCustomEmoji.vue
index 20a07e9c28..65d6e9a3f6 100644
--- a/packages/frontend/src/components/global/MkCustomEmoji.vue
+++ b/packages/frontend/src/components/global/MkCustomEmoji.vue
@@ -9,6 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
:class="[$style.root, { [$style.normal]: normal, [$style.noStyle]: noStyle }]"
src="/client-assets/dummy.png"
:title="alt"
+ draggable="false"
+ style="-webkit-user-drag: none;"
/>
<span v-else-if="errored">:{{ customEmojiName }}:</span>
<img
@@ -18,6 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:alt="alt"
:title="alt"
decoding="async"
+ draggable="false"
@error="errored = true"
@load="errored = false"
@click="onClick"
@@ -157,6 +160,7 @@ async function edit(name: string) {
.root {
height: 2em;
vertical-align: middle;
+ -webkit-user-drag: none;
transition: transform 0.2s ease;
&:hover {
diff --git a/packages/frontend/src/components/global/MkError.vue b/packages/frontend/src/components/global/MkError.vue
index b07e0775a3..95ed255189 100644
--- a/packages/frontend/src/components/global/MkError.vue
+++ b/packages/frontend/src/components/global/MkError.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<Transition :name="prefer.s.animation ? '_transition_zoom' : ''" appear>
<div :class="$style.root">
- <img :class="$style.img" :src="serverErrorImageUrl" class="_ghost"/>
+ <img :class="$style.img" :src="serverErrorImageUrl" draggable="false"/>
<p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
<MkButton :class="$style.button" @click="() => emit('retry')">{{ i18n.ts.retry }}</MkButton>
</div>
diff --git a/packages/frontend/src/pages/_error_.vue b/packages/frontend/src/pages/_error_.vue
index 066980db1f..791267f5ca 100644
--- a/packages/frontend/src/pages/_error_.vue
+++ b/packages/frontend/src/pages/_error_.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkLoading v-if="!loaded"/>
<Transition :name="prefer.s.animation ? '_transition_zoom' : ''" appear>
<div v-show="loaded" :class="$style.root">
- <img :src="serverErrorImageUrl" class="_ghost" :class="$style.img"/>
+ <img :src="serverErrorImageUrl" draggable="false" :class="$style.img"/>
<div class="_gaps">
<div><b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.pageLoadError }}</b></div>
<div v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</div>
diff --git a/packages/frontend/src/pages/admin/roles.role.vue b/packages/frontend/src/pages/admin/roles.role.vue
index 43c3446b73..e7ebd30a3b 100644
--- a/packages/frontend/src/pages/admin/roles.role.vue
+++ b/packages/frontend/src/pages/admin/roles.role.vue
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination :pagination="usersPagination">
<template #empty>
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue
index 3f78935b0a..c2f57cb665 100644
--- a/packages/frontend/src/pages/drive.file.info.vue
+++ b/packages/frontend/src/pages/drive.file.info.vue
@@ -69,7 +69,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<div v-else class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</div>
diff --git a/packages/frontend/src/pages/favorites.vue b/packages/frontend/src/pages/favorites.vue
index 548ed828f1..364d988924 100644
--- a/packages/frontend/src/pages/favorites.vue
+++ b/packages/frontend/src/pages/favorites.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination :pagination="pagination">
<template #empty>
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noNotes }}</div>
</div>
</template>
diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue
index b4e65303c1..f44d2364af 100644
--- a/packages/frontend/src/pages/follow-requests.vue
+++ b/packages/frontend/src/pages/follow-requests.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination ref="paginationComponent" :pagination="pagination">
<template #empty>
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noFollowRequests }}</div>
</div>
</template>
diff --git a/packages/frontend/src/pages/invite.vue b/packages/frontend/src/pages/invite.vue
index 352e1d9386..a6f0dfcf4b 100644
--- a/packages/frontend/src/pages/invite.vue
+++ b/packages/frontend/src/pages/invite.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader/></template>
<MkSpacer v-if="!instance.disableRegistration || !($i && ($i.isAdmin || $i.policies.canInvite))" :contentMax="1200">
<div :class="$style.root">
- <img :class="$style.img" :src="serverErrorImageUrl" class="_ghost"/>
+ <img :class="$style.img" :src="serverErrorImageUrl" draggable="false"/>
<div :class="$style.text">
<i class="ti ti-alert-triangle"></i>
{{ i18n.ts.nothing }}
@@ -36,12 +36,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, ref, shallowRef } from 'vue';
import * as Misskey from 'misskey-js';
+import type { Paging } from '@/components/MkPagination.vue';
import { i18n } from '@/i18n.js';
import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import MkButton from '@/components/MkButton.vue';
import MkPagination from '@/components/MkPagination.vue';
-import type { Paging } from '@/components/MkPagination.vue';
import MkInviteCode from '@/components/MkInviteCode.vue';
import { definePage } from '@/page.js';
import { serverErrorImageUrl, instance } from '@/instance.js';
diff --git a/packages/frontend/src/pages/list.vue b/packages/frontend/src/pages/list.vue
index 524db0da0b..0505fa7e08 100644
--- a/packages/frontend/src/pages/list.vue
+++ b/packages/frontend/src/pages/list.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer v-if="error != null" :contentMax="1200">
<div :class="$style.root">
- <img :class="$style.img" :src="serverErrorImageUrl" class="_ghost"/>
+ <img :class="$style.img" :src="serverErrorImageUrl" draggable="false"/>
<p :class="$style.text">
<i class="ti ti-alert-triangle"></i>
{{ i18n.ts.nothing }}
diff --git a/packages/frontend/src/pages/my-antennas/index.vue b/packages/frontend/src/pages/my-antennas/index.vue
index 03f4940e09..7ddaa68b7c 100644
--- a/packages/frontend/src/pages/my-antennas/index.vue
+++ b/packages/frontend/src/pages/my-antennas/index.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div>
<div v-if="antennas.length === 0" class="empty">
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</div>
diff --git a/packages/frontend/src/pages/my-lists/index.vue b/packages/frontend/src/pages/my-lists/index.vue
index cc701cb16b..69f91ad972 100644
--- a/packages/frontend/src/pages/my-lists/index.vue
+++ b/packages/frontend/src/pages/my-lists/index.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps">
<div v-if="items.length === 0" class="empty">
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</div>
diff --git a/packages/frontend/src/pages/not-found.vue b/packages/frontend/src/pages/not-found.vue
index 3bba1159e9..684a3bb5bd 100644
--- a/packages/frontend/src/pages/not-found.vue
+++ b/packages/frontend/src/pages/not-found.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div>
<div class="_fullinfo">
- <img :src="notFoundImageUrl" class="_ghost"/>
+ <img :src="notFoundImageUrl" draggable="false"/>
<div>{{ i18n.ts.notFoundDescription }}</div>
</div>
</div>
diff --git a/packages/frontend/src/pages/role.vue b/packages/frontend/src/pages/role.vue
index 187b675346..38850c29f7 100644
--- a/packages/frontend/src/pages/role.vue
+++ b/packages/frontend/src/pages/role.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader v-model:tab="tab" :tabs="headerTabs"/></template>
<MkSpacer v-if="error != null" :contentMax="1200">
<div :class="$style.root">
- <img :class="$style.img" :src="serverErrorImageUrl" class="_ghost"/>
+ <img :class="$style.img" :src="serverErrorImageUrl" draggable="false"/>
<p :class="$style.text">
<i class="ti ti-alert-triangle"></i>
{{ error }}
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="role">{{ role.description }}</div>
<MkUserList v-if="visible" :pagination="users" :extractor="(item) => item.user"/>
<div v-else-if="!visible" class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</div>
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSpacer v-else-if="tab === 'timeline'" :contentMax="700">
<MkTimeline v-if="visible" ref="timeline" src="role" :role="props.roleId"/>
<div v-else-if="!visible" class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</MkSpacer>
@@ -38,12 +38,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, watch, ref } from 'vue';
import * as Misskey from 'misskey-js';
+import { instanceName } from '@@/js/config.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import MkUserList from '@/components/MkUserList.vue';
import { definePage } from '@/page.js';
import { i18n } from '@/i18n.js';
import MkTimeline from '@/components/MkTimeline.vue';
-import { instanceName } from '@@/js/config.js';
import { serverErrorImageUrl, infoImageUrl } from '@/instance.js';
const props = withDefaults(defineProps<{
diff --git a/packages/frontend/src/pages/settings/apps.vue b/packages/frontend/src/pages/settings/apps.vue
index 626e14b427..c72179b9a1 100644
--- a/packages/frontend/src/pages/settings/apps.vue
+++ b/packages/frontend/src/pages/settings/apps.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<FormPagination ref="list" :pagination="pagination">
<template #empty>
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</template>
diff --git a/packages/frontend/src/pages/settings/mute-block.vue b/packages/frontend/src/pages/settings/mute-block.vue
index ce762af071..f3d5e5090a 100644
--- a/packages/frontend/src/pages/settings/mute-block.vue
+++ b/packages/frontend/src/pages/settings/mute-block.vue
@@ -72,7 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination :pagination="renoteMutingPagination">
<template #empty>
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
@@ -108,7 +108,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination :pagination="mutingPagination">
<template #empty>
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
@@ -146,7 +146,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkPagination :pagination="blockingPagination">
<template #empty>
<div class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 43aff3012e..43a97d49eb 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -214,11 +214,6 @@ rt {
text-overflow: ellipsis;
}
-._ghost {
- @extend ._noSelect;
- pointer-events: none;
-}
-
._modalBg {
position: fixed;
top: 0;
diff --git a/packages/frontend/src/ui/classic.header.vue b/packages/frontend/src/ui/classic.header.vue
index 1e8a342977..7d4235bd4e 100644
--- a/packages/frontend/src/ui/classic.header.vue
+++ b/packages/frontend/src/ui/classic.header.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="body">
<div class="left">
<button v-click-anime class="item _button instance" @click="openInstanceMenu">
- <img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
+ <img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" draggable="false"/>
</button>
<MkA v-click-anime v-tooltip="i18n.ts.timeline" class="item index" activeClass="active" to="/" exact>
<i class="ti ti-home ti-fw"></i>
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index 096ea0d4cf..8200b6ad38 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="divider"></div>
<div class="about">
<button v-click-anime class="item _button" @click="openInstanceMenu">
- <img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" class="_ghost"/>
+ <img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" draggable="false"/>
</button>
</div>
<!--<MisskeyLogo class="misskey"/>-->
diff --git a/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue b/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue
index be11a26917..6fe743aed2 100644
--- a/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue
+++ b/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkAvatar v-for="user in users" :key="user.id" :user="user.followee" link preview></MkAvatar>
</div>
<div v-else :class="$style.bdayFFallback">
- <img :src="infoImageUrl" class="_ghost" :class="$style.bdayFFallbackImage"/>
+ <img :src="infoImageUrl" draggable="false" :class="$style.bdayFFallbackImage"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</div>
diff --git a/packages/frontend/src/widgets/WidgetRss.vue b/packages/frontend/src/widgets/WidgetRss.vue
index 82dfeacff1..a7213f4c21 100644
--- a/packages/frontend/src/widgets/WidgetRss.vue
+++ b/packages/frontend/src/widgets/WidgetRss.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="ekmkgxbj">
<MkLoading v-if="fetching"/>
<div v-else-if="(!items || items.length === 0) && widgetProps.showHeader" class="_fullinfo">
- <img :src="infoImageUrl" class="_ghost"/>
+ <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
<div v-else :class="$style.feed">
@@ -25,13 +25,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { ref, watch, computed } from 'vue';
import * as Misskey from 'misskey-js';
+import { url as base } from '@@/js/config.js';
+import { useInterval } from '@@/js/use-interval.js';
import { useWidgetPropsManager } from './widget.js';
import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
import type { GetFormResultType } from '@/utility/form.js';
import MkContainer from '@/components/MkContainer.vue';
-import { url as base } from '@@/js/config.js';
import { i18n } from '@/i18n.js';
-import { useInterval } from '@@/js/use-interval.js';
import { infoImageUrl } from '@/instance.js';
const name = 'rss';