diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue index 3556c75a8..fa186e259 100644 --- a/packages/frontend/src/components/MkNoteHeader.vue +++ b/packages/frontend/src/components/MkNoteHeader.vue @@ -4,46 +4,46 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> - <header :class="$style.root"> - <div :class="$style.section"> - <div style="display: flex;"> - <div v-if="mock" :class="$style.name"> - <MkUserName :user="note.user"/> - </div> - <MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)"> - <MkUserName :user="note.user"/> - </MkA> - <div v-if="note.user.isBot" :class="$style.isBot">bot</div> - <div v-if="note.user.badgeRoles" :class="$style.badgeRoles"> - <img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/> - </div> +<header :class="$style.root"> + <div :class="$style.section"> + <div style="display: flex;"> + <div v-if="mock" :class="$style.name"> + <MkUserName :user="note.user"/> </div> - <div :class="$style.username"><MkAcct :user="note.user"/></div> - </div> - <div :class="$style.section"> - <div :class="$style.info"> - <span v-if="note.updatedAt" style="margin-right: 0.5em;" :title="i18n.ts.edited"><i class="ti ti-pencil"></i></span> - <div v-if="mock"> - <MkTime :time="note.createdAt" colored/> - </div> - <MkA v-else :to="notePage(note)" @mouseenter="setDetail(true)" @mouseleave="setDetail(false)" :style="{ textDecoration: 'none', userSelect: 'none' }"> - <MkTime - :time="note.createdAt" - :mode="(defaultStore.state.showDetailTimeWhenHover && isDetail) ? 'detail' : undefined" - colored - /> - </MkA> - <span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]"> - <i v-if="note.visibility === 'home'" class="ti ti-home"></i> - <i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i> - <i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i> - </span> - <span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span> - <span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span> + <MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)" @click.stop> + <MkUserName :user="note.user"/> + </MkA> + <div v-if="note.user.isBot" :class="$style.isBot">bot</div> + <div v-if="note.user.badgeRoles" :class="$style.badgeRoles"> + <img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/> </div> - <div :class="$style.info"><MkInstanceTicker v-if="showTicker" :style="{ cursor: defaultStore.state.clickToShowInstanceTickerWindow ? 'pointer' : 'default' }" :instance="note.user.instance" :host="note.user.host"/></div> - </div> - </header> + </div> + <div :class="$style.username"><MkAcct :user="note.user"/></div> + </div> + <div :class="$style.section"> + <div :class="$style.info"> + <span v-if="note.updatedAt" style="margin-right: 0.5em;" :title="i18n.ts.edited"><i class="ti ti-pencil"></i></span> + <div v-if="mock"> + <MkTime :time="note.createdAt" colored/> + </div> + <MkA v-else :to="notePage(note)" :style="{ textDecoration: 'none', userSelect: 'none' }" @mouseenter="setDetail(true)" @mouseleave="setDetail(false)"> + <MkTime + :time="note.createdAt" + :mode="(defaultStore.state.showDetailTimeWhenHover && isDetail) ? 'detail' : undefined" + colored + /> + </MkA> + <span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]"> + <i v-if="note.visibility === 'home'" class="ti ti-home"></i> + <i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i> + <i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i> + </span> + <span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span> + <span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span> + </div> + <div :class="$style.info"><MkInstanceTicker v-if="showTicker" :style="{ cursor: defaultStore.state.clickToShowInstanceTickerWindow ? 'pointer' : 'default' }" :host="note.user.host"/></div> + </div> +</header> </template> <script lang="ts" setup> @@ -57,7 +57,7 @@ import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; const isDetail = ref(false); const setDetail = (value) => { - isDetail.value = value; + isDetail.value = value; }; const props = defineProps<{ diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue index 7aed87558..9725dda43 100644 --- a/packages/frontend/src/components/MkNoteSimple.vue +++ b/packages/frontend/src/components/MkNoteSimple.vue @@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div> <p v-if="note.cw != null" :class="$style.cw"> <Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis" @click.stop/> - <MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll" @click.stop /> + <MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll" @click.stop/> </p> <div v-show="note.cw == null || showContent"> <MkSubNoteContent :class="$style.text" :note="note"/> diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue index e70ac7ff1..173460c57 100644 --- a/packages/frontend/src/components/MkPoll.vue +++ b/packages/frontend/src/components/MkPoll.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div :class="{ [$style.done]: closed || isVoted }"> <ul :class="$style.choices"> - <li v-for="(choice, i) in poll.choices" :key="i" :class="$style.choice" @click="vote(i)"> + <li v-for="(choice, i) in poll.choices" :key="i" :class="$style.choice" @click.stop="vote(i)"> <div :class="$style.bg" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div> <span :class="$style.fg"> <template v-if="choice.isVoted"><i class="ti ti-check" style="margin-right: 4px; color: var(--MI_THEME-accent);"></i></template> diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue index 3ce85a54a..fb08a3511 100644 --- a/packages/frontend/src/components/MkSubNoteContent.vue +++ b/packages/frontend/src/components/MkSubNoteContent.vue @@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <details v-if="note.files && note.files.length > 0"> <summary>({{ i18n.tsx.withNFiles({ n: note.files.length }) }})</summary> - <MkMediaList :mediaList="note.files"/> + <MkMediaList :mediaList="note.files" @click.stop/> </details> <details v-if="note.poll"> <summary>{{ i18n.ts.poll }}</summary> @@ -32,10 +32,10 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { ref } from 'vue'; import * as Misskey from 'misskey-js'; +import { shouldCollapsed } from '@@/js/collapsed.js'; import MkMediaList from '@/components/MkMediaList.vue'; import MkPoll from '@/components/MkPoll.vue'; import { i18n } from '@/i18n.js'; -import { shouldCollapsed } from '@@/js/collapsed.js'; import { defaultStore } from '@/store.js'; import { useRouter } from '@/router/supplier.js'; diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue index 1115f2c08..f62275bc6 100644 --- a/packages/frontend/src/components/MkUrlPreview.vue +++ b/packages/frontend/src/components/MkUrlPreview.vue @@ -98,11 +98,11 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue'; import * as Misskey from 'misskey-js'; -import MkNoteSimple from './MkNoteSimple.vue'; -import { misskeyApi } from '@/scripts/misskey-api.js'; import { url as local } from '@@/js/config.js'; import { versatileLang } from '@@/js/intl-const.js'; +import MkNoteSimple from './MkNoteSimple.vue'; import type { summaly } from '@misskey-dev/summaly'; +import { misskeyApi } from '@/scripts/misskey-api.js'; import { i18n } from '@/i18n.js'; import * as os from '@/os.js'; import { deviceKind } from '@/scripts/device-kind.js'; diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index 35c07bc80..28cd1771d 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick"> +<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click.stop="onClick"> <MkImgWithBlurhash :class="$style.inner" :src="url" :hash="user.avatarBlurhash" :cover="true" :onlyAvgColor="true"/> <MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/> <div v-if="user.isCat" :class="[$style.ears]">