usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor

This commit is contained in:
syuilo 2025-08-25 13:46:22 +09:00
parent 2b9706a68b
commit 7924daf7f8
17 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/components/MkLink.vue
View File

@ -42,7 +42,7 @@ if (isEnabledUrlPreview.value) {
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), { const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
showing, showing,
url: props.url, url: props.url,
anchorEl: el.value instanceof HTMLElement ? el.value : el.value?.$el, anchorElement: el.value instanceof HTMLElement ? el.value : el.value?.$el,
}, { }, {
closed: () => dispose(), closed: () => dispose(),
}); });

8
packages/frontend/src/components/MkMenu.child.vue
View File

@ -16,7 +16,7 @@ import type { MenuItem } from '@/types/menu.js';
const props = defineProps<{ const props = defineProps<{
items: MenuItem[]; items: MenuItem[];
targetElement: HTMLElement; anchorElement: HTMLElement;
rootElement: HTMLElement; rootElement: HTMLElement;
width?: number; width?: number;
}>(); }>();
@ -36,10 +36,10 @@ const SCROLLBAR_THICKNESS = 16;
function setPosition() { function setPosition() {
if (el.value == null) return; if (el.value == null) return;
const rootRect = props.rootElement.getBoundingClientRect(); const rootRect = props.rootElement.getBoundingClientRect();
const parentRect = props.targetElement.getBoundingClientRect(); const parentRect = props.anchorElement.getBoundingClientRect();
const myRect = el.value.getBoundingClientRect(); const myRect = el.value.getBoundingClientRect();
let left = props.targetElement.offsetWidth; let left = props.anchorElement.offsetWidth;
let top = (parentRect.top - rootRect.top) - 8; let top = (parentRect.top - rootRect.top) - 8;
if (rootRect.left + left + myRect.width >= (window.innerWidth - SCROLLBAR_THICKNESS)) { if (rootRect.left + left + myRect.width >= (window.innerWidth - SCROLLBAR_THICKNESS)) {
left = -myRect.width; left = -myRect.width;
@ -59,7 +59,7 @@ function onChildClosed(actioned?: boolean) {
} }
} }
watch(() => props.targetElement, () => { watch(() => props.anchorElement, () => {
setPosition(); setPosition();
}); });

2
packages/frontend/src/components/MkMenu.vue
View File

@ -208,7 +208,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</span> </span>
</div> </div>
<div v-if="childMenu"> <div v-if="childMenu">
<XChild ref="child" :items="childMenu" :targetElement="childTarget!" :rootElement="itemsEl!" @actioned="childActioned" @closed="closeChild"/> <XChild ref="child" :items="childMenu" :anchorElement="childTarget!" :rootElement="itemsEl!" @actioned="childActioned" @closed="closeChild"/>
</div> </div>
</div> </div>
</template> </template>

4
packages/frontend/src/components/MkNote.vue
View File

@ -429,7 +429,7 @@ if (!props.mock) {
showing, showing,
users, users,
count: appearNote.renoteCount, count: appearNote.renoteCount,
targetElement: renoteButton.value, anchorElement: renoteButton.value,
}, { }, {
closed: () => dispose(), closed: () => dispose(),
}); });
@ -452,7 +452,7 @@ if (!props.mock) {
reaction: '❤️', reaction: '❤️',
users, users,
count: $appearNote.reactionCount, count: $appearNote.reactionCount,
targetElement: reactButton.value!, anchorElement: reactButton.value!,
}, { }, {
closed: () => dispose(), closed: () => dispose(),
}); });

4
packages/frontend/src/components/MkNoteDetailed.vue
View File

@ -405,7 +405,7 @@ useTooltip(renoteButton, async (showing) => {
showing, showing,
users, users,
count: appearNote.renoteCount, count: appearNote.renoteCount,
targetElement: renoteButton.value, anchorElement: renoteButton.value,
}, { }, {
closed: () => dispose(), closed: () => dispose(),
}); });
@ -428,7 +428,7 @@ if (appearNote.reactionAcceptance === 'likeOnly') {
reaction: '❤️', reaction: '❤️',
users, users,
count: $appearNote.reactionCount, count: $appearNote.reactionCount,
targetElement: reactButton.value!, anchorElement: reactButton.value!,
}, { }, {
closed: () => dispose(), closed: () => dispose(),
}); });

4
packages/frontend/src/components/MkRange.vue
View File

@ -167,7 +167,7 @@ function onMouseenter() {
text: computed(() => { text: computed(() => {
return props.textConverter(finalValue.value); return props.textConverter(finalValue.value);
}), }),
targetElement: thumbEl.value ?? undefined, anchorElement: thumbEl.value ?? undefined,
}, { }, {
closed: () => dispose(), closed: () => dispose(),
}); });
@ -191,7 +191,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
text: computed(() => { text: computed(() => {
return props.textConverter(finalValue.value); return props.textConverter(finalValue.value);
}), }),
targetElement: thumbEl.value ?? undefined, anchorElement: thumbEl.value ?? undefined,
}, { }, {
closed: () => dispose(), closed: () => dispose(),
}); });

2
packages/frontend/src/components/MkReactionIcon.vue
View File

@ -28,7 +28,7 @@ if (props.withTooltip) {
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), { const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), {
showing, showing,
reaction: props.reaction.replace(/^:(\w+):$/, ':$1@.:'), reaction: props.reaction.replace(/^:(\w+):$/, ':$1@.:'),
targetElement: elRef.value.$el, anchorElement: elRef.value.$el,
}, { }, {
closed: () => dispose(), closed: () => dispose(),
}); });

4
packages/frontend/src/components/MkReactionTooltip.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkTooltip ref="tooltip" :showing="showing" :targetElement="targetElement" :maxWidth="340" @closed="emit('closed')"> <MkTooltip ref="tooltip" :showing="showing" :anchorElement="anchorElement" :maxWidth="340" @closed="emit('closed')">
<div :class="$style.root"> <div :class="$style.root">
<MkReactionIcon :reaction="reaction" :class="$style.icon" :noStyle="true"/> <MkReactionIcon :reaction="reaction" :class="$style.icon" :noStyle="true"/>
<div :class="$style.name">{{ reaction.replace('@.', '') }}</div> <div :class="$style.name">{{ reaction.replace('@.', '') }}</div>
@ -20,7 +20,7 @@ import MkReactionIcon from '@/components/MkReactionIcon.vue';
defineProps<{ defineProps<{
showing: boolean; showing: boolean;
reaction: string; reaction: string;
targetElement: HTMLElement; anchorElement: HTMLElement;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{

4
packages/frontend/src/components/MkReactionsViewer.details.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkTooltip ref="tooltip" :showing="showing" :targetElement="targetElement" :maxWidth="340" @closed="emit('closed')"> <MkTooltip ref="tooltip" :showing="showing" :anchorElement="anchorElement" :maxWidth="340" @closed="emit('closed')">
<div :class="$style.root"> <div :class="$style.root">
<div :class="$style.reaction"> <div :class="$style.reaction">
<MkReactionIcon :reaction="reaction" :class="$style.reactionIcon" :noStyle="true"/> <MkReactionIcon :reaction="reaction" :class="$style.reactionIcon" :noStyle="true"/>
@ -33,7 +33,7 @@ defineProps<{
reaction: string; reaction: string;
users: Misskey.entities.UserLite[]; users: Misskey.entities.UserLite[];
count: number; count: number;
targetElement: HTMLElement; anchorElement: HTMLElement;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{

2
packages/frontend/src/components/MkReactionsViewer.reaction.vue
View File

@ -231,7 +231,7 @@ if (!mock) {
reaction: props.reaction, reaction: props.reaction,
users, users,
count: props.count, count: props.count,
targetElement: buttonEl.value, anchorElement: buttonEl.value,
}, { }, {
closed: () => dispose(), closed: () => dispose(),
}); });

4
packages/frontend/src/components/MkTooltip.vue
View File

@ -31,7 +31,7 @@ import { prefer } from '@/preferences.js';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
showing: boolean; showing: boolean;
targetElement?: HTMLElement; anchorElement?: HTMLElement;
x?: number; x?: number;
y?: number; y?: number;
text?: string; text?: string;
@ -58,7 +58,7 @@ const zIndex = os.claimZIndex('high');
function setPosition() { function setPosition() {
if (el.value == null) return; if (el.value == null) return;
const data = calcPopupPosition(el.value, { const data = calcPopupPosition(el.value, {
anchorElement: props.targetElement, anchorElement: props.anchorElement,
direction: props.direction, direction: props.direction,
align: 'center', align: 'center',
innerMargin: props.innerMargin, innerMargin: props.innerMargin,

8
packages/frontend/src/components/MkUrlPreviewPopup.vue
View File

@ -20,7 +20,7 @@ import { prefer } from '@/preferences.js';
const props = defineProps<{ const props = defineProps<{
showing: boolean; showing: boolean;
url: string; url: string;
anchorEl: HTMLElement; anchorElement: HTMLElement;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
@ -32,9 +32,9 @@ const top = ref(0);
const left = ref(0); const left = ref(0);
onMounted(() => { onMounted(() => {
const rect = props.anchorEl.getBoundingClientRect(); const rect = props.anchorElement.getBoundingClientRect();
const x = Math.max((rect.left + (props.anchorEl.offsetWidth / 2)) - (300 / 2), 6) + window.scrollX; const x = Math.max((rect.left + (props.anchorElement.offsetWidth / 2)) - (300 / 2), 6) + window.scrollX;
const y = rect.top + props.anchorEl.offsetHeight + window.scrollY; const y = rect.top + props.anchorElement.offsetHeight + window.scrollY;
top.value = y; top.value = y;
left.value = x; left.value = x;

4
packages/frontend/src/components/MkUsersTooltip.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkTooltip ref="tooltip" :showing="showing" :targetElement="targetElement" :maxWidth="250" @closed="emit('closed')"> <MkTooltip ref="tooltip" :showing="showing" :anchorElement="anchorElement" :maxWidth="250" @closed="emit('closed')">
<div :class="$style.root"> <div :class="$style.root">
<div v-for="u in users" :key="u.id" :class="$style.user"> <div v-for="u in users" :key="u.id" :class="$style.user">
<MkAvatar :class="$style.avatar" :user="u"/> <MkAvatar :class="$style.avatar" :user="u"/>
@ -23,7 +23,7 @@ defineProps<{
showing: boolean; showing: boolean;
users: Misskey.entities.UserLite[]; users: Misskey.entities.UserLite[];
count: number; count: number;
targetElement: HTMLElement; anchorElement: HTMLElement;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{

2
packages/frontend/src/components/global/MkUrl.vue
View File

@ -62,7 +62,7 @@ if (props.showUrlPreview && isEnabledUrlPreview.value) {
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), { const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
showing, showing,
url: props.url, url: props.url,
anchorEl: el.value instanceof HTMLElement ? el.value : el.value?.$el, anchorElement: el.value instanceof HTMLElement ? el.value : el.value?.$el,
}, { }, {
closed: () => dispose(), closed: () => dispose(),
}); });

4
packages/frontend/src/components/grid/MkCellTooltip.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkTooltip ref="tooltip" :showing="showing" :targetElement="targetElement" :maxWidth="250" @closed="emit('closed')"> <MkTooltip ref="tooltip" :showing="showing" :anchorElement="anchorElement" :maxWidth="250" @closed="emit('closed')">
<div :class="$style.root"> <div :class="$style.root">
{{ content }} {{ content }}
</div> </div>
@ -18,7 +18,7 @@ import MkTooltip from '@/components/MkTooltip.vue';
defineProps<{ defineProps<{
showing: boolean; showing: boolean;
content: string; content: string;
targetElement: HTMLElement; anchorElement: HTMLElement;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{

2
packages/frontend/src/components/grid/MkDataCell.vue
View File

@ -300,7 +300,7 @@ useTooltip(rootEl, (showing) => {
const result = os.popup(defineAsyncComponent(() => import('@/components/grid/MkCellTooltip.vue')), { const result = os.popup(defineAsyncComponent(() => import('@/components/grid/MkCellTooltip.vue')), {
showing, showing,
content, content,
targetElement: rootEl.value!, anchorElement: rootEl.value!,
}, { }, {
closed: () => { closed: () => {
result.dispose(); result.dispose();

2
packages/frontend/src/directives/tooltip.ts
View File

@ -57,7 +57,7 @@ export default {
text: self.text, text: self.text,
asMfm: binding.modifiers.mfm, asMfm: binding.modifiers.mfm,
direction: binding.modifiers.left ? 'left' : binding.modifiers.right ? 'right' : binding.modifiers.top ? 'top' : binding.modifiers.bottom ? 'bottom' : 'top', direction: binding.modifiers.left ? 'left' : binding.modifiers.right ? 'right' : binding.modifiers.top ? 'top' : binding.modifiers.bottom ? 'bottom' : 'top',
targetElement: el, anchorElement: el,
}, { }, {
closed: () => dispose(), closed: () => dispose(),
}); });