From 9849aab40283cbde2184e74d4795aec8ef8ccba3 Mon Sep 17 00:00:00 2001 From: zyoshoka <107108195+zyoshoka@users.noreply.github.com> Date: Sat, 8 Jun 2024 18:00:54 +0900 Subject: test(#10336): add `components/MkC.*` stories (#13830) * test(storybook): add `components/MkC.*` stories * test(storybook): add some tests * test: add sleep * test: comment-out flaky test * test(storybook): add test for `MkChannelFollowButton` * chore(storybook): tweak sleep duration in `MkChannelFollowButton` story test * fix(chromatic): add delay to `MkChannelList` * chore: replace `mswDecorator` with `mswLoader` * fix(storybook): tweak some parameters * chore: serve static files * fix(chromatic): add delay to `MkCwButton` * chore: delete logging for debug * fix: add right click in `MkContextMenu` play * refactor: remove unused imports --- packages/frontend/src/scripts/test-utils.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/test-utils.ts b/packages/frontend/src/scripts/test-utils.ts index 52bb2d94e0..a32315f4df 100644 --- a/packages/frontend/src/scripts/test-utils.ts +++ b/packages/frontend/src/scripts/test-utils.ts @@ -7,3 +7,13 @@ export async function tick(): Promise { // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition await new Promise((globalThis.requestIdleCallback ?? setTimeout) as never); } + +/** + * @see https://github.com/misskey-dev/misskey/issues/11267 + */ +export function semaphore(counter = 0, waiting: (() => void)[] = []) { + return { + acquire: () => ++counter > 1 && new Promise(resolve => waiting.push(resolve)), + release: () => --counter && waiting.pop()?.(), + }; +} -- cgit v1.2.3-freya From 9368eb3038d5f655b924d53800daaa7e54e08c47 Mon Sep 17 00:00:00 2001 From: Kisaragi <48310258+KisaragiEffective@users.noreply.github.com> Date: Sat, 22 Jun 2024 19:40:55 +0900 Subject: refactor: say bye to the weird groupBy friends (#13975) * refactor(frontend): say bye to the weird groupBy friends * refactor(backend): say bye to the weird groupBy friends --- packages/backend/src/misc/prelude/array.ts | 38 ------------------------------ packages/frontend/src/scripts/array.ts | 38 ------------------------------ 2 files changed, 76 deletions(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/backend/src/misc/prelude/array.ts b/packages/backend/src/misc/prelude/array.ts index dbfe1fff18..f741a0c913 100644 --- a/packages/backend/src/misc/prelude/array.ts +++ b/packages/backend/src/misc/prelude/array.ts @@ -65,44 +65,6 @@ export function maximum(xs: number[]): number { return Math.max(...xs); } -/** - * Splits an array based on the equivalence relation. - * The concatenation of the result is equal to the argument. - */ -export function groupBy(f: EndoRelation, xs: T[]): T[][] { - const groups = [] as T[][]; - for (const x of xs) { - const lastGroup = groups.at(-1); - if (lastGroup !== undefined && f(lastGroup[0], x)) { - lastGroup.push(x); - } else { - groups.push([x]); - } - } - return groups; -} - -/** - * Splits an array based on the equivalence relation induced by the function. - * The concatenation of the result is equal to the argument. - */ -export function groupOn(f: (x: T) => S, xs: T[]): T[][] { - return groupBy((a, b) => f(a) === f(b), xs); -} - -export function groupByX(collections: T[], keySelector: (x: T) => string) { - return collections.reduce((obj: Record, item: T) => { - const key = keySelector(item); - if (!Object.prototype.hasOwnProperty.call(obj, key)) { - obj[key] = []; - } - - obj[key].push(item); - - return obj; - }, {}); -} - /** * Compare two arrays by lexicographical order */ diff --git a/packages/frontend/src/scripts/array.ts b/packages/frontend/src/scripts/array.ts index b3d76e149f..f2feb29dfc 100644 --- a/packages/frontend/src/scripts/array.ts +++ b/packages/frontend/src/scripts/array.ts @@ -77,44 +77,6 @@ export function maximum(xs: number[]): number { return Math.max(...xs); } -/** - * Splits an array based on the equivalence relation. - * The concatenation of the result is equal to the argument. - */ -export function groupBy(f: EndoRelation, xs: T[]): T[][] { - const groups = [] as T[][]; - for (const x of xs) { - const lastGroup = groups.at(-1); - if (lastGroup !== undefined && f(lastGroup[0], x)) { - lastGroup.push(x); - } else { - groups.push([x]); - } - } - return groups; -} - -/** - * Splits an array based on the equivalence relation induced by the function. - * The concatenation of the result is equal to the argument. - */ -export function groupOn(f: (x: T) => S, xs: T[]): T[][] { - return groupBy((a, b) => f(a) === f(b), xs); -} - -export function groupByX(collections: T[], keySelector: (x: T) => string) { - return collections.reduce((obj: Record, item: T) => { - const key = keySelector(item); - if (typeof obj[key] === 'undefined') { - obj[key] = []; - } - - obj[key].push(item); - - return obj; - }, {}); -} - /** * Compare two arrays by lexicographical order */ -- cgit v1.2.3-freya From f1b1e2a7cca3d69eb6162d4c16746968d855ea40 Mon Sep 17 00:00:00 2001 From: zyoshoka <107108195+zyoshoka@users.noreply.github.com> Date: Tue, 2 Jul 2024 10:57:20 +0900 Subject: fix(storybook): prevent infinite remount of component (#14101) * fix(storybook): prevent infinite remount of component * fix: disable flaky `.toMatch()` test --- packages/frontend/.storybook/preview.ts | 6 +- .../MkChannelFollowButton.stories.impl.ts | 6 -- .../src/components/MkClickerGame.stories.impl.ts | 12 ++- .../src/components/MkCwButton.stories.impl.ts | 10 --- .../src/components/global/MkA.stories.impl.ts | 2 - .../src/components/global/MkAd.stories.impl.ts | 87 ++++++++-------------- packages/frontend/src/scripts/test-utils.ts | 10 --- 7 files changed, 41 insertions(+), 92 deletions(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/.storybook/preview.ts b/packages/frontend/.storybook/preview.ts index 73ee007fb8..d000a28232 100644 --- a/packages/frontend/.storybook/preview.ts +++ b/packages/frontend/.storybook/preview.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { FORCE_REMOUNT } from '@storybook/core-events'; +import { FORCE_RE_RENDER, FORCE_REMOUNT } from '@storybook/core-events'; import { addons } from '@storybook/preview-api'; import { type Preview, setup } from '@storybook/vue3'; import isChromatic from 'chromatic/isChromatic'; @@ -16,7 +16,7 @@ import '../src/style.scss'; const appInitialized = Symbol(); -let lastStory = null; +let lastStory: string | null = null; let moduleInitialized = false; let unobserve = () => {}; let misskeyOS = null; @@ -110,7 +110,7 @@ const preview = { }).catch(() => {}); Promise.all([resetIndexedDBPromise, resetDefaultStorePromise]).then(() => { initLocalStorage(); - channel.emit(FORCE_REMOUNT, { storyId: context.id }); + channel.emit(FORCE_RE_RENDER, { storyId: context.id }); }); } const story = Story(); diff --git a/packages/frontend/src/components/MkChannelFollowButton.stories.impl.ts b/packages/frontend/src/components/MkChannelFollowButton.stories.impl.ts index b99620da22..b9770670dc 100644 --- a/packages/frontend/src/components/MkChannelFollowButton.stories.impl.ts +++ b/packages/frontend/src/components/MkChannelFollowButton.stories.impl.ts @@ -12,14 +12,12 @@ import { expect, userEvent, within } from '@storybook/test'; import { channel } from '../../.storybook/fakes.js'; import { commonHandlers } from '../../.storybook/mocks.js'; import MkChannelFollowButton from './MkChannelFollowButton.vue'; -import { semaphore } from '@/scripts/test-utils.js'; import { i18n } from '@/i18n.js'; function sleep(ms: number) { return new Promise(resolve => setTimeout(resolve, ms)); } -const s = semaphore(); export const Default = { render(args) { return { @@ -46,17 +44,13 @@ export const Default = { full: true, }, async play({ canvasElement }) { - await s.acquire(); - await sleep(1000); const canvas = within(canvasElement); const buttonElement = canvas.getByRole('button'); await expect(buttonElement).toHaveTextContent(i18n.ts.follow); await userEvent.click(buttonElement); await sleep(1000); await expect(buttonElement).toHaveTextContent(i18n.ts.unfollow); - await sleep(100); await userEvent.click(buttonElement); - s.release(); }, parameters: { layout: 'centered', diff --git a/packages/frontend/src/components/MkClickerGame.stories.impl.ts b/packages/frontend/src/components/MkClickerGame.stories.impl.ts index 8378010f8b..36313f965d 100644 --- a/packages/frontend/src/components/MkClickerGame.stories.impl.ts +++ b/packages/frontend/src/components/MkClickerGame.stories.impl.ts @@ -8,7 +8,7 @@ import { StoryObj } from '@storybook/vue3'; import { HttpResponse, http } from 'msw'; import { action } from '@storybook/addon-actions'; -import { expect, within } from '@storybook/test'; +import { expect, userEvent, within } from '@storybook/test'; import { commonHandlers } from '../../.storybook/mocks.js'; import MkClickerGame from './MkClickerGame.vue'; @@ -41,12 +41,10 @@ export const Default = { await sleep(1000); const canvas = within(canvasElement); const count = canvas.getByTestId('count'); - // NOTE: flaky なので N/A も通しておく - await expect(count).toHaveTextContent(/^(0|N\/A)$/); - // FIXME: flaky - // const buttonElement = canvas.getByRole('button'); - // await userEvent.click(buttonElement); - // await expect(count).toHaveTextContent('1'); + await expect(count).toHaveTextContent('0'); + const buttonElement = canvas.getByRole('button'); + await userEvent.click(buttonElement); + await expect(count).toHaveTextContent('1'); }, parameters: { layout: 'centered', diff --git a/packages/frontend/src/components/MkCwButton.stories.impl.ts b/packages/frontend/src/components/MkCwButton.stories.impl.ts index 05c6001552..5d6ea56da9 100644 --- a/packages/frontend/src/components/MkCwButton.stories.impl.ts +++ b/packages/frontend/src/components/MkCwButton.stories.impl.ts @@ -11,13 +11,6 @@ import { expect, userEvent, within } from '@storybook/test'; import { file } from '../../.storybook/fakes.js'; import MkCwButton from './MkCwButton.vue'; import { i18n } from '@/i18n.js'; -import { semaphore } from '@/scripts/test-utils.js'; - -function sleep(ms: number) { - return new Promise(resolve => setTimeout(resolve, ms)); -} - -const s = semaphore(); export const Default = { render(args) { @@ -54,8 +47,6 @@ export const Default = { text: 'Some CW content', }, async play({ canvasElement }) { - await s.acquire(); - await sleep(1000); const canvas = within(canvasElement); const buttonElement = canvas.getByRole('button'); await expect(buttonElement).toHaveTextContent(i18n.ts._cw.show); @@ -63,7 +54,6 @@ export const Default = { await userEvent.click(buttonElement); await expect(buttonElement).toHaveTextContent(i18n.ts._cw.hide); await userEvent.click(buttonElement); - s.release(); }, parameters: { chromatic: { diff --git a/packages/frontend/src/components/global/MkA.stories.impl.ts b/packages/frontend/src/components/global/MkA.stories.impl.ts index c1d8cf0ca6..02e5a7f98c 100644 --- a/packages/frontend/src/components/global/MkA.stories.impl.ts +++ b/packages/frontend/src/components/global/MkA.stories.impl.ts @@ -35,12 +35,10 @@ export const Default = { // FIXME: 通るけどその後落ちるのでコメントアウト // await expect(a.href).toMatch(/^https?:\/\/.*#test$/); await userEvent.pointer({ keys: '[MouseRight]', target: a }); - await tick(); const menu = canvas.getByRole('menu'); await expect(menu).toBeInTheDocument(); await userEvent.click(a); a.blur(); - await tick(); await expect(menu).not.toBeInTheDocument(); }, args: { diff --git a/packages/frontend/src/components/global/MkAd.stories.impl.ts b/packages/frontend/src/components/global/MkAd.stories.impl.ts index aef26ab92d..8c0b7ef52f 100644 --- a/packages/frontend/src/components/global/MkAd.stories.impl.ts +++ b/packages/frontend/src/components/global/MkAd.stories.impl.ts @@ -9,12 +9,6 @@ import { StoryObj } from '@storybook/vue3'; import MkAd from './MkAd.vue'; import { i18n } from '@/i18n.js'; -let lock: Promise | undefined; - -function sleep(ms: number) { - return new Promise(resolve => setTimeout(resolve, ms)); -} - const common = { render(args) { return { @@ -37,56 +31,41 @@ const common = { }; }, async play({ canvasElement, args }) { - if (lock) { - console.warn('This test is unexpectedly running twice in parallel, fix it!'); - console.warn('See also: https://github.com/misskey-dev/misskey/issues/11267'); - await lock; + const canvas = within(canvasElement); + const a = canvas.getByRole('link'); + // FIXME: 通るけどその後落ちるのでコメントアウト + // await expect(a.href).toMatch(/^https?:\/\/.*#test$/); + const img = within(a).getByRole('img'); + await expect(img).toBeInTheDocument(); + let buttons = canvas.getAllByRole('button'); + await expect(buttons).toHaveLength(1); + const i = buttons[0]; + await expect(i).toBeInTheDocument(); + await userEvent.click(i); + await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back); + await expect(a).not.toBeInTheDocument(); + await expect(i).not.toBeInTheDocument(); + buttons = canvas.getAllByRole('button'); + const hasReduceFrequency = args.specify?.ratio !== 0; + await expect(buttons).toHaveLength(hasReduceFrequency ? 2 : 1); + const reduce = hasReduceFrequency ? buttons[0] : null; + const back = buttons[hasReduceFrequency ? 1 : 0]; + if (reduce) { + await expect(reduce).toBeInTheDocument(); + await expect(reduce).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd); } - - let resolve: (value?: any) => void; - lock = new Promise(r => resolve = r); - - try { - // NOTE: sleep しないと何故か落ちる - await sleep(100); - const canvas = within(canvasElement); - const a = canvas.getByRole('link'); - // await expect(a.href).toMatch(/^https?:\/\/.*#test$/); - const img = within(a).getByRole('img'); - await expect(img).toBeInTheDocument(); - let buttons = canvas.getAllByRole('button'); - await expect(buttons).toHaveLength(1); - const i = buttons[0]; - await expect(i).toBeInTheDocument(); - await userEvent.click(i); - await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back); - await expect(a).not.toBeInTheDocument(); - await expect(i).not.toBeInTheDocument(); - buttons = canvas.getAllByRole('button'); - const hasReduceFrequency = args.specify?.ratio !== 0; - await expect(buttons).toHaveLength(hasReduceFrequency ? 2 : 1); - const reduce = hasReduceFrequency ? buttons[0] : null; - const back = buttons[hasReduceFrequency ? 1 : 0]; - if (reduce) { - await expect(reduce).toBeInTheDocument(); - await expect(reduce).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd); - } - await expect(back).toBeInTheDocument(); - await expect(back).toHaveTextContent(i18n.ts._ad.back); - await userEvent.click(back); - await waitFor(() => expect(canvas.queryByRole('img')).toBeTruthy()); - if (reduce) { - await expect(reduce).not.toBeInTheDocument(); - } - await expect(back).not.toBeInTheDocument(); - const aAgain = canvas.getByRole('link'); - await expect(aAgain).toBeInTheDocument(); - const imgAgain = within(aAgain).getByRole('img'); - await expect(imgAgain).toBeInTheDocument(); - } finally { - resolve!(); - lock = undefined; + await expect(back).toBeInTheDocument(); + await expect(back).toHaveTextContent(i18n.ts._ad.back); + await userEvent.click(back); + await waitFor(() => expect(canvas.queryByRole('img')).toBeTruthy()); + if (reduce) { + await expect(reduce).not.toBeInTheDocument(); } + await expect(back).not.toBeInTheDocument(); + const aAgain = canvas.getByRole('link'); + await expect(aAgain).toBeInTheDocument(); + const imgAgain = within(aAgain).getByRole('img'); + await expect(imgAgain).toBeInTheDocument(); }, args: { prefer: [], diff --git a/packages/frontend/src/scripts/test-utils.ts b/packages/frontend/src/scripts/test-utils.ts index a32315f4df..52bb2d94e0 100644 --- a/packages/frontend/src/scripts/test-utils.ts +++ b/packages/frontend/src/scripts/test-utils.ts @@ -7,13 +7,3 @@ export async function tick(): Promise { // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition await new Promise((globalThis.requestIdleCallback ?? setTimeout) as never); } - -/** - * @see https://github.com/misskey-dev/misskey/issues/11267 - */ -export function semaphore(counter = 0, waiting: (() => void)[] = []) { - return { - acquire: () => ++counter > 1 && new Promise(resolve => waiting.push(resolve)), - release: () => --counter && waiting.pop()?.(), - }; -} -- cgit v1.2.3-freya From 6dd2e9fc0b1eeea6b5f04ccac93ccfab658f976d Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Thu, 4 Jul 2024 13:14:49 +0900 Subject: refactor(frontend): refactor popup api and make sure call dispose callback Close #14122 --- packages/frontend/src/account.ts | 16 ++- packages/frontend/src/boot/main-boot.ts | 30 +++-- packages/frontend/src/components/MkClickerGame.vue | 4 +- .../frontend/src/components/MkDrive.folder.vue | 5 +- packages/frontend/src/components/MkEmojiPicker.vue | 4 +- packages/frontend/src/components/MkLink.vue | 6 +- packages/frontend/src/components/MkNote.vue | 16 ++- .../frontend/src/components/MkNoteDetailed.vue | 16 ++- packages/frontend/src/components/MkPostForm.vue | 13 ++- .../frontend/src/components/MkPostFormAttaches.vue | 5 +- packages/frontend/src/components/MkRange.vue | 10 +- .../frontend/src/components/MkReactionIcon.vue | 6 +- .../src/components/MkReactionsViewer.reaction.vue | 14 ++- packages/frontend/src/components/MkSignin.vue | 5 +- .../src/components/MkSystemWebhookEditor.impl.ts | 6 +- packages/frontend/src/components/MkUrlPreview.vue | 8 +- .../frontend/src/components/MkUserSetupDialog.vue | 6 +- .../frontend/src/components/MkVisitorDashboard.vue | 12 +- .../src/components/global/MkCustomEmoji.vue | 4 +- packages/frontend/src/components/global/MkUrl.vue | 6 +- packages/frontend/src/directives/ripple.ts | 4 +- packages/frontend/src/directives/tooltip.ts | 6 +- packages/frontend/src/directives/user-preview.ts | 5 +- packages/frontend/src/os.ts | 125 +++++++++++---------- packages/frontend/src/pages/admin-user.vue | 12 +- .../admin/abuse-report/notification-recipient.vue | 6 +- .../frontend/src/pages/custom-emojis-manager.vue | 10 +- packages/frontend/src/pages/drive.file.info.vue | 5 +- .../frontend/src/pages/drop-and-fusion.game.vue | 14 ++- packages/frontend/src/pages/emojis.emoji.vue | 8 +- packages/frontend/src/pages/reset-password.vue | 4 +- packages/frontend/src/pages/settings/2fa.vue | 6 +- packages/frontend/src/pages/settings/accounts.vue | 10 +- packages/frontend/src/pages/settings/api.vue | 5 +- .../src/pages/settings/avatar-decoration.vue | 5 +- .../frontend/src/scripts/get-drive-file-menu.ts | 5 +- packages/frontend/src/scripts/get-note-menu.ts | 18 ++- packages/frontend/src/scripts/get-user-menu.ts | 6 +- packages/frontend/src/scripts/install-plugin.ts | 5 +- packages/frontend/src/scripts/please-login.ts | 5 +- packages/frontend/src/scripts/use-chart-tooltip.ts | 10 +- packages/frontend/src/ui/_common_/common.ts | 4 +- .../frontend/src/ui/_common_/navbar-for-mobile.vue | 5 +- packages/frontend/src/ui/_common_/navbar.vue | 5 +- packages/frontend/src/ui/classic.header.vue | 5 +- packages/frontend/src/ui/classic.sidebar.vue | 6 +- .../frontend/src/ui/deck/notifications-column.vue | 5 +- packages/frontend/src/ui/visitor.vue | 12 +- .../frontend/src/widgets/WidgetNotifications.vue | 5 +- 49 files changed, 317 insertions(+), 196 deletions(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/account.ts b/packages/frontend/src/account.ts index f99b550a83..4172016f89 100644 --- a/packages/frontend/src/account.ts +++ b/packages/frontend/src/account.ts @@ -184,10 +184,12 @@ export async function refreshAccount() { export async function login(token: Account['token'], redirect?: string) { const showing = ref(true); - popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), { success: false, showing: showing, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); if (_DEV_) console.log('logging as token ', token); const me = await fetchAccount(token, undefined, true) .catch(reason => { @@ -223,21 +225,23 @@ export async function openAccountMenu(opts: { if (!$i) return; function showSigninDialog() { - popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, { done: res => { addAccount(res.id, res.i); success(); }, - }, 'closed'); + closed: () => dispose(), + }); } function createAccount() { - popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, { done: res => { addAccount(res.id, res.i); switchAccountWithToken(res.i); }, - }, 'closed'); + closed: () => dispose(), + }); } async function switchAccount(account: Misskey.entities.UserDetailed) { diff --git a/packages/frontend/src/boot/main-boot.ts b/packages/frontend/src/boot/main-boot.ts index 5cb19f388a..faf230a1a2 100644 --- a/packages/frontend/src/boot/main-boot.ts +++ b/packages/frontend/src/boot/main-boot.ts @@ -35,7 +35,9 @@ export async function mainBoot() { emojiPicker.init(); if (isClientUpdated && $i) { - popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed'); + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, { + closed: () => dispose(), + }); } const stream = useStream(); @@ -96,7 +98,7 @@ export async function mainBoot() { }).render(); } } - } + } } catch (error) { // console.error(error); console.error('Failed to initialise the seasonal screen effect canvas context:', error); @@ -108,22 +110,28 @@ export async function mainBoot() { defaultStore.loaded.then(() => { if (defaultStore.state.accountSetupWizard !== -1) { - popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, {}, 'closed'); + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, { + closed: () => dispose(), + }); } }); for (const announcement of ($i.unreadAnnouncements ?? []).filter(x => x.display === 'dialog')) { - popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), { announcement, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } stream.on('announcementCreated', (ev) => { const announcement = ev.announcement; if (announcement.display === 'dialog') { - popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), { announcement, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } }); @@ -247,13 +255,17 @@ export async function mainBoot() { const neverShowDonationInfo = miLocalStorage.getItem('neverShowDonationInfo'); if (neverShowDonationInfo !== 'true' && (createdAt.getTime() < (Date.now() - (1000 * 60 * 60 * 24 * 3))) && !location.pathname.startsWith('/miauth')) { if (latestDonationInfoShownAt == null || (new Date(latestDonationInfoShownAt).getTime() < (Date.now() - (1000 * 60 * 60 * 24 * 30)))) { - popup(defineAsyncComponent(() => import('@/components/MkDonation.vue')), {}, {}, 'closed'); + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDonation.vue')), {}, { + closed: () => dispose(), + }); } } const modifiedVersionMustProminentlyOfferInAgplV3Section13Read = miLocalStorage.getItem('modifiedVersionMustProminentlyOfferInAgplV3Section13Read'); if (modifiedVersionMustProminentlyOfferInAgplV3Section13Read !== 'true' && instance.repositoryUrl !== 'https://github.com/misskey-dev/misskey') { - popup(defineAsyncComponent(() => import('@/components/MkSourceCodeAvailablePopup.vue')), {}, {}, 'closed'); + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSourceCodeAvailablePopup.vue')), {}, { + closed: () => dispose(), + }); } if ('Notification' in window) { diff --git a/packages/frontend/src/components/MkClickerGame.vue b/packages/frontend/src/components/MkClickerGame.vue index b592609e18..00506fb735 100644 --- a/packages/frontend/src/components/MkClickerGame.vue +++ b/packages/frontend/src/components/MkClickerGame.vue @@ -35,7 +35,9 @@ const prevCookies = ref(0); function onClick(ev: MouseEvent) { const x = ev.clientX; const y = ev.clientY; - os.popup(MkPlusOneEffect, { x, y }, {}, 'end'); + const { dispose } = os.popup(MkPlusOneEffect, { x, y }, { + end: () => dispose(), + }); saveData.value!.cookies++; saveData.value!.totalCookies++; diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue index 8da0d78f35..1cc8b15b73 100644 --- a/packages/frontend/src/components/MkDrive.folder.vue +++ b/packages/frontend/src/components/MkDrive.folder.vue @@ -257,10 +257,11 @@ function onContextmenu(ev: MouseEvent) { text: i18n.ts.openInWindow, icon: 'ti ti-app-window', action: () => { - os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), { initialFolder: props.folder, }, { - }, 'closed'); + closed: () => dispose(), + }); }, }, { type: 'divider' }, { text: i18n.ts.rename, diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue index 8a6bef54d8..4bd4bee1e5 100644 --- a/packages/frontend/src/components/MkEmojiPicker.vue +++ b/packages/frontend/src/components/MkEmojiPicker.vue @@ -402,7 +402,9 @@ function chosen(emoji: any, ev?: MouseEvent) { const rect = el.getBoundingClientRect(); const x = rect.left + (el.offsetWidth / 2); const y = rect.top + (el.offsetHeight / 2); - os.popup(MkRippleEffect, { x, y }, {}, 'end'); + const { dispose } = os.popup(MkRippleEffect, { x, y }, { + end: () => dispose(), + }); } const key = getKey(emoji); diff --git a/packages/frontend/src/components/MkLink.vue b/packages/frontend/src/components/MkLink.vue index 5d54a58e97..e842ec2d6e 100644 --- a/packages/frontend/src/components/MkLink.vue +++ b/packages/frontend/src/components/MkLink.vue @@ -37,11 +37,13 @@ const el = ref(); if (isEnabledUrlPreview.value) { useTooltip(el, (showing) => { - os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), { showing, url: props.url, source: el.value instanceof HTMLElement ? el.value : el.value?.$el, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }); } diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 22b1691a86..1313e4c58e 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -335,12 +335,14 @@ if (!props.mock) { if (users.length < 1) return; - os.popup(MkUsersTooltip, { + const { dispose } = os.popup(MkUsersTooltip, { showing, users, count: appearNote.value.renoteCount, targetElement: renoteButton.value, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }); if (appearNote.value.reactionAcceptance === 'likeOnly') { @@ -355,13 +357,15 @@ if (!props.mock) { if (users.length < 1) return; - os.popup(MkReactionsViewerDetails, { + const { dispose } = os.popup(MkReactionsViewerDetails, { showing, reaction: '❤️', users, count: appearNote.value.reactionCount, targetElement: reactButton.value!, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }); } } @@ -409,7 +413,9 @@ function react(viaKeyboard = false): void { const rect = el.getBoundingClientRect(); const x = rect.left + (el.offsetWidth / 2); const y = rect.top + (el.offsetHeight / 2); - os.popup(MkRippleEffect, { x, y }, {}, 'end'); + const { dispose } = os.popup(MkRippleEffect, { x, y }, { + end: () => dispose(), + }); } } else { blur(); diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index ed1c0a9e96..bc1f416373 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -346,12 +346,14 @@ useTooltip(renoteButton, async (showing) => { if (users.length < 1) return; - os.popup(MkUsersTooltip, { + const { dispose } = os.popup(MkUsersTooltip, { showing, users, count: appearNote.value.renoteCount, targetElement: renoteButton.value, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }); if (appearNote.value.reactionAcceptance === 'likeOnly') { @@ -366,13 +368,15 @@ if (appearNote.value.reactionAcceptance === 'likeOnly') { if (users.length < 1) return; - os.popup(MkReactionsViewerDetails, { + const { dispose } = os.popup(MkReactionsViewerDetails, { showing, reaction: '❤️', users, count: appearNote.value.reactionCount, targetElement: reactButton.value!, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }); } @@ -413,7 +417,9 @@ function react(viaKeyboard = false): void { const rect = el.getBoundingClientRect(); const x = rect.left + (el.offsetWidth / 2); const y = rect.top + (el.offsetHeight / 2); - os.popup(MkRippleEffect, { x, y }, {}, 'end'); + const { dispose } = os.popup(MkRippleEffect, { x, y }, { + end: () => dispose(), + }); } } else { blur(); diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index 1df9007681..0dc1aa0891 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/packages/frontend/src/components/MkPostForm.vue @@ -463,7 +463,7 @@ function setVisibility() { return; } - os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), { currentVisibility: visibility.value, isSilenced: $i.isSilenced, localOnly: localOnly.value, @@ -476,7 +476,8 @@ function setVisibility() { defaultStore.set('visibility', visibility.value); } }, - }, 'closed'); + closed: () => dispose(), + }); } async function toggleLocalOnly() { @@ -624,8 +625,8 @@ async function onPaste(ev: ClipboardEvent) { return; } - const fileName = formatTimeString(new Date(), defaultStore.state.pastedFileName).replace(/{{number}}/g, "0"); - const file = new File([paste], `${fileName}.txt`, { type: "text/plain" }); + const fileName = formatTimeString(new Date(), defaultStore.state.pastedFileName).replace(/{{number}}/g, '0'); + const file = new File([paste], `${fileName}.txt`, { type: 'text/plain' }); upload(file, `${fileName}.txt`); }); } @@ -731,7 +732,9 @@ async function post(ev?: MouseEvent) { const rect = el.getBoundingClientRect(); const x = rect.left + (el.offsetWidth / 2); const y = rect.top + (el.offsetHeight / 2); - os.popup(MkRippleEffect, { x, y }, {}, 'end'); + const { dispose } = os.popup(MkRippleEffect, { x, y }, { + end: () => dispose(), + }); } } diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue index 95eb367318..8854babb6b 100644 --- a/packages/frontend/src/components/MkPostFormAttaches.vue +++ b/packages/frontend/src/components/MkPostFormAttaches.vue @@ -108,7 +108,7 @@ async function rename(file) { async function describe(file) { if (mock) return; - os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), { default: file.comment !== null ? file.comment : '', file: file, }, { @@ -121,7 +121,8 @@ async function describe(file) { file.comment = comment; }); }, - }, 'closed'); + closed: () => dispose(), + }); } async function crop(file: Misskey.entities.DriveFile): Promise { diff --git a/packages/frontend/src/components/MkRange.vue b/packages/frontend/src/components/MkRange.vue index 15f8128e98..1eae642937 100644 --- a/packages/frontend/src/components/MkRange.vue +++ b/packages/frontend/src/components/MkRange.vue @@ -101,17 +101,19 @@ const steps = computed(() => { } }); -const onMousedown = (ev: MouseEvent | TouchEvent) => { +function onMousedown(ev: MouseEvent | TouchEvent) { ev.preventDefault(); const tooltipShowing = ref(true); - os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), { showing: tooltipShowing, text: computed(() => { return props.textConverter(finalValue.value); }), targetElement: thumbEl, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); const style = document.createElement('style'); style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }')); @@ -152,7 +154,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => { window.addEventListener('touchmove', onDrag); window.addEventListener('mouseup', onMouseup, { once: true }); window.addEventListener('touchend', onMouseup, { once: true }); -}; +} diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue index e73d032000..e2f04eb764 100644 --- a/packages/frontend/src/pages/page.vue +++ b/packages/frontend/src/pages/page.vue @@ -286,6 +286,7 @@ definePageMetadata(() => ({ background-color: var(--accentedBg); color: var(--accent); text-decoration: none; + outline: none; } } diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue index 60bf9b4d3d..a328933686 100644 --- a/packages/frontend/src/pages/settings/profile.vue +++ b/packages/frontend/src/pages/settings/profile.vue @@ -342,6 +342,7 @@ definePageMetadata(() => ({ &:hover, &:focus { opacity: .7; } + &:active { cursor: pointer; } diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue index 0a4bd4b826..7d192bcbea 100644 --- a/packages/frontend/src/pages/settings/theme.vue +++ b/packages/frontend/src/pages/settings/theme.vue @@ -213,12 +213,18 @@ definePageMetadata(() => ({ } } + .dn:focus-visible ~ .toggle { + outline: 2px solid var(--focus); + outline-offset: 2px; + } + .toggle { cursor: pointer; display: inline-block; position: relative; width: 90px; height: 50px; + margin: 4px; // focus用のアウトライン background-color: #83D8FF; border-radius: 90px - 6; transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important; diff --git a/packages/frontend/src/scripts/focus-trap.ts b/packages/frontend/src/scripts/focus-trap.ts new file mode 100644 index 0000000000..734c73652f --- /dev/null +++ b/packages/frontend/src/scripts/focus-trap.ts @@ -0,0 +1,65 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { getHTMLElementOrNull } from '@/scripts/get-dom-node-or-null.js'; + +const focusTrapElements = new Set(); +const ignoreElements = [ + 'script', + 'style', +]; + +function containsFocusTrappedElements(el: HTMLElement): boolean { + return Array.from(focusTrapElements).some((focusTrapElement) => { + return el.contains(focusTrapElement); + }); +} + +function releaseFocusTrap(el: HTMLElement): void { + focusTrapElements.delete(el); + if (el.parentElement != null && el !== document.body) { + el.parentElement.childNodes.forEach((siblingNode) => { + const siblingEl = getHTMLElementOrNull(siblingNode); + if (!siblingEl) return; + if (siblingEl !== el && (focusTrapElements.has(siblingEl) || containsFocusTrappedElements(siblingEl) || focusTrapElements.size === 0)) { + siblingEl.inert = false; + } else if ( + focusTrapElements.size > 0 && + !containsFocusTrappedElements(siblingEl) && + !focusTrapElements.has(siblingEl) && + !ignoreElements.includes(siblingEl.tagName.toLowerCase()) + ) { + siblingEl.inert = true; + } else { + siblingEl.inert = false; + } + }); + releaseFocusTrap(el.parentElement); + } +} + +export function focusTrap(el: HTMLElement, parent: true): void; +export function focusTrap(el: HTMLElement, parent?: false): { release: () => void; }; +export function focusTrap(el: HTMLElement, parent = false): { release: () => void; } | void { + if (el.parentElement != null && el !== document.body) { + el.parentElement.childNodes.forEach((siblingNode) => { + const siblingEl = getHTMLElementOrNull(siblingNode); + if (!siblingEl) return; + if (siblingEl !== el && !ignoreElements.includes(siblingEl.tagName.toLowerCase())) { + siblingEl.inert = true; + } + }); + focusTrap(el.parentElement, true); + } + + if (!parent) { + focusTrapElements.add(el); + + return { + release: () => { + releaseFocusTrap(el); + }, + }; + } +} diff --git a/packages/frontend/src/scripts/focus.ts b/packages/frontend/src/scripts/focus.ts index ea6ee61c88..eb2da5ad86 100644 --- a/packages/frontend/src/scripts/focus.ts +++ b/packages/frontend/src/scripts/focus.ts @@ -3,30 +3,78 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -export function focusPrev(el: Element | null, self = false, scroll = true) { - if (el == null) return; - if (!self) el = el.previousElementSibling; - if (el) { - if (el.hasAttribute('tabindex')) { - (el as HTMLElement).focus({ - preventScroll: !scroll, - }); - } else { - focusPrev(el.previousElementSibling, true); - } +import { getScrollPosition, getScrollContainer, getStickyBottom, getStickyTop } from '@/scripts/scroll.js'; +import { getElementOrNull, getNodeOrNull } from '@/scripts/get-dom-node-or-null.js'; + +type MaybeHTMLElement = EventTarget | Node | Element | HTMLElement; + +export const isFocusable = (input: MaybeHTMLElement | null | undefined): input is HTMLElement => { + if (input == null || !(input instanceof HTMLElement)) return false; + + if (input.tabIndex < 0) return false; + if ('disabled' in input && input.disabled === true) return false; + if ('readonly' in input && input.readonly === true) return false; + + if (!input.ownerDocument.contains(input)) return false; + + const style = window.getComputedStyle(input); + if (style.display === 'none') return false; + if (style.visibility === 'hidden') return false; + if (style.opacity === '0') return false; + if (style.pointerEvents === 'none') return false; + + return true; +}; + +export const focusPrev = (input: MaybeHTMLElement | null | undefined, self = false, scroll = true) => { + const element = self ? input : getElementOrNull(input)?.previousElementSibling; + if (element == null) return; + if (isFocusable(element)) { + focusOrScroll(element, scroll); + } else { + focusPrev(element, false, scroll); } -} - -export function focusNext(el: Element | null, self = false, scroll = true) { - if (el == null) return; - if (!self) el = el.nextElementSibling; - if (el) { - if (el.hasAttribute('tabindex')) { - (el as HTMLElement).focus({ - preventScroll: !scroll, - }); - } else { - focusPrev(el.nextElementSibling, true); +}; + +export const focusNext = (input: MaybeHTMLElement | null | undefined, self = false, scroll = true) => { + const element = self ? input : getElementOrNull(input)?.nextElementSibling; + if (element == null) return; + if (isFocusable(element)) { + focusOrScroll(element, scroll); + } else { + focusNext(element, false, scroll); + } +}; + +export const focusParent = (input: MaybeHTMLElement | null | undefined, self = false, scroll = true) => { + const element = self ? input : getNodeOrNull(input)?.parentElement; + if (element == null) return; + if (isFocusable(element)) { + focusOrScroll(element, scroll); + } else { + focusParent(element, false, scroll); + } +}; + +const focusOrScroll = (element: HTMLElement, scroll: boolean) => { + if (scroll) { + const scrollContainer = getScrollContainer(element) ?? document.documentElement; + const scrollContainerTop = getScrollPosition(scrollContainer); + const stickyTop = getStickyTop(element, scrollContainer); + const stickyBottom = getStickyBottom(element, scrollContainer); + const top = element.getBoundingClientRect().top; + const bottom = element.getBoundingClientRect().bottom; + + let scrollTo = scrollContainerTop; + if (top < stickyTop) { + scrollTo += top - stickyTop; + } else if (bottom > window.innerHeight - stickyBottom) { + scrollTo += bottom - window.innerHeight + stickyBottom; } + scrollContainer.scrollTo({ top: scrollTo, behavior: 'instant' }); + } + + if (document.activeElement !== element) { + element.focus({ preventScroll: true }); } -} +}; diff --git a/packages/frontend/src/scripts/get-dom-node-or-null.ts b/packages/frontend/src/scripts/get-dom-node-or-null.ts new file mode 100644 index 0000000000..fbf54675fd --- /dev/null +++ b/packages/frontend/src/scripts/get-dom-node-or-null.ts @@ -0,0 +1,19 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +export const getNodeOrNull = (input: unknown): Node | null => { + if (input instanceof Node) return input; + return null; +}; + +export const getElementOrNull = (input: unknown): Element | null => { + if (input instanceof Element) return input; + return null; +}; + +export const getHTMLElementOrNull = (input: unknown): HTMLElement | null => { + if (input instanceof HTMLElement) return input; + return null; +}; diff --git a/packages/frontend/src/scripts/hotkey.ts b/packages/frontend/src/scripts/hotkey.ts index fd79baa604..ff3cbe98ac 100644 --- a/packages/frontend/src/scripts/hotkey.ts +++ b/packages/frontend/src/scripts/hotkey.ts @@ -2,6 +2,7 @@ * SPDX-FileCopyrightText: syuilo and misskey-project * SPDX-License-Identifier: AGPL-3.0-only */ +import { getHTMLElementOrNull } from "@/scripts/get-dom-node-or-null.js"; //#region types export type Keymap = Record; @@ -30,8 +31,8 @@ type Action = { //#region consts const KEY_ALIASES = { 'esc': 'Escape', - 'enter': ['Enter', 'NumpadEnter'], - 'space': [' ', 'Spacebar'], + 'enter': 'Enter', + 'space': ' ', 'up': 'ArrowUp', 'down': 'ArrowDown', 'left': 'ArrowLeft', @@ -44,6 +45,10 @@ const MODIFIER_KEYS = ['ctrl', 'alt', 'shift']; const IGNORE_ELEMENTS = ['input', 'textarea']; //#endregion +//#region store +let latestHotkey: Pattern & { callback: CallbackFunction } | null = null; +//#endregion + //#region impl export const makeHotkey = (keymap: Keymap) => { const actions = parseKeymap(keymap); @@ -51,13 +56,14 @@ export const makeHotkey = (keymap: Keymap) => { if ('pswp' in window && window.pswp != null) return; if (document.activeElement != null) { if (IGNORE_ELEMENTS.includes(document.activeElement.tagName.toLowerCase())) return; - if ((document.activeElement as HTMLElement).isContentEditable) return; + if (getHTMLElementOrNull(document.activeElement)?.isContentEditable) return; } - for (const { patterns, callback, options } of actions) { - if (matchPatterns(ev, patterns, options)) { + for (const action of actions) { + if (matchPatterns(ev, action)) { ev.preventDefault(); ev.stopPropagation(); - callback(ev); + action.callback(ev); + storePattern(ev, action.callback); } } }; @@ -102,10 +108,21 @@ const parseOptions = (rawCallback: Keymap[keyof Keymap]) => { return { ...defaultOptions } as const satisfies Action['options']; }; -const matchPatterns = (ev: KeyboardEvent, patterns: Action['patterns'], options: Action['options']) => { +const matchPatterns = (ev: KeyboardEvent, action: Action) => { + const { patterns, options, callback } = action; if (ev.repeat && !options.allowRepeat) return false; const key = ev.key.toLowerCase(); return patterns.some(({ which, ctrl, shift, alt }) => { + if ( + latestHotkey != null && + latestHotkey.which.includes(key) && + latestHotkey.ctrl === ctrl && + latestHotkey.alt === alt && + latestHotkey.shift === shift && + latestHotkey.callback === callback + ) { + return false; + } if (!which.includes(key)) return false; if (ctrl !== (ev.ctrlKey || ev.metaKey)) return false; if (alt !== ev.altKey) return false; @@ -114,6 +131,26 @@ const matchPatterns = (ev: KeyboardEvent, patterns: Action['patterns'], options: }); }; +let lastHotKeyStoreTimer: number | null = null; + +const storePattern = (ev: KeyboardEvent, callback: CallbackFunction) => { + if (lastHotKeyStoreTimer != null) { + clearTimeout(lastHotKeyStoreTimer); + } + + latestHotkey = { + which: [ev.key.toLowerCase()], + ctrl: ev.ctrlKey || ev.metaKey, + alt: ev.altKey, + shift: ev.shiftKey, + callback, + }; + + lastHotKeyStoreTimer = window.setTimeout(() => { + latestHotkey = null; + }, 500); +}; + const parseKeyCode = (input?: string | null) => { if (input == null) return []; const raw = getValueByKey(KEY_ALIASES, input); diff --git a/packages/frontend/src/scripts/scroll.ts b/packages/frontend/src/scripts/scroll.ts index 8edb6fca05..f0274034b5 100644 --- a/packages/frontend/src/scripts/scroll.ts +++ b/packages/frontend/src/scripts/scroll.ts @@ -23,6 +23,14 @@ export function getStickyTop(el: HTMLElement, container: HTMLElement | null = nu return getStickyTop(el.parentElement, container, newTop); } +export function getStickyBottom(el: HTMLElement, container: HTMLElement | null = null, bottom = 0) { + if (!el.parentElement) return bottom; + const data = el.dataset.stickyContainerFooterHeight; + const newBottom = data ? Number(data) + bottom : bottom; + if (el === container) return newBottom; + return getStickyBottom(el.parentElement, container, newBottom); +} + export function getScrollPosition(el: HTMLElement | null): number { const container = getScrollContainer(el); return container == null ? window.scrollY : container.scrollTop; diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss index 250a2616a7..2feb79ef81 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -113,6 +113,10 @@ a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; + &:focus-visible { + outline-offset: 2px; + } + &:hover { text-decoration: underline; } @@ -143,12 +147,21 @@ rt { white-space: initial; } +:focus-visible { + outline: var(--focus) solid 2px; + outline-offset: -2px; + + &:hover { + text-decoration: none; + } +} + .ti { width: 1.28em; vertical-align: -12%; line-height: 1em; - &:before { + &::before { font-size: 128%; } } @@ -230,10 +243,6 @@ rt { line-height: inherit; max-width: 100%; - &:focus-visible { - outline: none; - } - &:disabled { opacity: 0.5; cursor: default; @@ -270,13 +279,17 @@ rt { ._help { color: var(--accent); - cursor: help + cursor: help; } ._textButton { @extend ._button; color: var(--accent); + &:focus-visible { + outline-offset: 2px; + } + &:not(:disabled):hover { text-decoration: underline; } diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue index 822b552837..d7df2d10f9 100644 --- a/packages/frontend/src/ui/_common_/common.vue +++ b/packages/frontend/src/ui/_common_/common.vue @@ -227,7 +227,7 @@ if ($i) { right: 15px; pointer-events: none; - &:before { + &::before { content: ""; display: block; width: 18px; diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue index 699aa1e1c8..87e9e45e63 100644 --- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue +++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue @@ -139,7 +139,7 @@ function more() { font-weight: bold; text-align: left; - &:before { + &::before { content: ""; display: block; width: calc(100% - 38px); @@ -155,7 +155,7 @@ function more() { } &:hover, &.active { - &:before { + &::before { background: var(--accentLighten); } } @@ -226,7 +226,7 @@ function more() { } &:hover, &.active { - &:before { + &::before { content: ""; display: block; width: calc(100% - 24px); diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue index b029533f28..8307da0d42 100644 --- a/packages/frontend/src/ui/_common_/navbar.vue +++ b/packages/frontend/src/ui/_common_/navbar.vue @@ -166,6 +166,15 @@ function more(ev: MouseEvent) { display: block; text-align: center; width: 100%; + + &:focus-visible { + outline: none; + + > .instanceIcon { + outline: 2px solid var(--focus); + outline-offset: 2px; + } + } } .instanceIcon { @@ -192,7 +201,7 @@ function more(ev: MouseEvent) { font-weight: bold; text-align: left; - &:before { + &::before { content: ""; display: block; width: calc(100% - 38px); @@ -207,8 +216,17 @@ function more(ev: MouseEvent) { background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); } + &:focus-visible { + outline: none; + + &::before { + outline: 2px solid var(--fgOnAccent); + outline-offset: -4px; + } + } + &:hover, &.active { - &:before { + &::before { background: var(--accentLighten); } } @@ -234,6 +252,14 @@ function more(ev: MouseEvent) { text-align: left; box-sizing: border-box; overflow: clip; + + &:focus-visible { + outline: none; + + > .avatar { + box-shadow: 0 0 0 4px var(--focus); + } + } } .avatar { @@ -282,10 +308,19 @@ function more(ev: MouseEvent) { color: var(--navActive); } - &:hover, &.active { + &:focus-visible { + outline: none; + + &::before { + outline: 2px solid var(--focus); + outline-offset: -2px; + } + } + + &:hover, &.active, &:focus { color: var(--accent); - &:before { + &::before { content: ""; display: block; width: calc(100% - 34px); @@ -352,6 +387,15 @@ function more(ev: MouseEvent) { display: block; text-align: center; width: 100%; + + &:focus-visible { + outline: none; + + > .instanceIcon { + outline: 2px solid var(--focus); + outline-offset: 2px; + } + } } .instanceIcon { @@ -376,7 +420,7 @@ function more(ev: MouseEvent) { height: 52px; text-align: center; - &:before { + &::before { content: ""; display: block; position: absolute; @@ -391,8 +435,17 @@ function more(ev: MouseEvent) { background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); } + &:focus-visible { + outline: none; + + &::before { + outline: 2px solid var(--fgOnAccent); + outline-offset: -4px; + } + } + &:hover, &.active { - &:before { + &::before { background: var(--accentLighten); } } @@ -413,6 +466,14 @@ function more(ev: MouseEvent) { padding: 20px 0; width: 100%; overflow: clip; + + &:focus-visible { + outline: none; + + > .avatar { + box-shadow: 0 0 0 4px var(--focus); + } + } } .avatar { @@ -442,11 +503,20 @@ function more(ev: MouseEvent) { width: 100%; text-align: center; - &:hover, &.active { + &:focus-visible { + outline: none; + + &::before { + outline: 2px solid var(--focus); + outline-offset: -2px; + } + } + + &:hover, &.active, &:focus { text-decoration: none; color: var(--accent); - &:before { + &::before { content: ""; display: block; height: 100%; diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue index 07845bacbb..e96402d13b 100644 --- a/packages/frontend/src/ui/deck/column.vue +++ b/packages/frontend/src/ui/deck/column.vue @@ -271,7 +271,7 @@ function onDrop(ev) { border-radius: 10px; &.draghover { - &:after { + &::after { content: ""; display: block; position: absolute; @@ -285,7 +285,7 @@ function onDrop(ev) { } &.dragging { - &:after { + &::after { content: ""; display: block; position: absolute; diff --git a/packages/frontend/src/widgets/WidgetCalendar.vue b/packages/frontend/src/widgets/WidgetCalendar.vue index c688e8a0b1..6ece33eff3 100644 --- a/packages/frontend/src/widgets/WidgetCalendar.vue +++ b/packages/frontend/src/widgets/WidgetCalendar.vue @@ -121,7 +121,7 @@ defineExpose({ .root { padding: 16px 0; - &:after { + &::after { content: ""; display: block; clear: both; -- cgit v1.2.3-freya From 1b175ea759ffdb0e70b66f1958ef114ecd00a50f Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sat, 13 Jul 2024 13:02:27 +0900 Subject: fix(frontend): すでにfocus trap対象の要素にinertがかかっている場合は解除するように (#14189) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(frontend): すでにfocus trap対象の要素にinertがかかっている場合は解除するように * 他のfocus-trapped要素とのインタラクションがある場合の動作を変更 * typo --- .../src/components/MkEmojiPickerDialog.vue | 1 + packages/frontend/src/components/MkModal.vue | 4 +++- packages/frontend/src/scripts/focus-trap.ts | 23 +++++++++++++++++----- 3 files changed, 22 insertions(+), 6 deletions(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue index a413b146ba..7e1ffbfa9e 100644 --- a/packages/frontend/src/components/MkEmojiPickerDialog.vue +++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue @@ -9,6 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only v-slot="{ type, maxHeight }" :zPriority="'middle'" :preferType="defaultStore.state.emojiPickerUseDrawerForMobile === false ? 'popup' : 'auto'" + :hasInteractionWithOtherFocusTrappedEls="true" :transparentBg="true" :manualShowing="manualShowing" :src="src" diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue index a5fbf8d365..f8032f9b43 100644 --- a/packages/frontend/src/components/MkModal.vue +++ b/packages/frontend/src/components/MkModal.vue @@ -71,6 +71,7 @@ const props = withDefaults(defineProps<{ zPriority?: 'low' | 'middle' | 'high'; noOverlap?: boolean; transparentBg?: boolean; + hasInteractionWithOtherFocusTrappedEls?: boolean; returnFocusTo?: HTMLElement | null; }>(), { manualShowing: null, @@ -80,6 +81,7 @@ const props = withDefaults(defineProps<{ zPriority: 'low', noOverlap: true, transparentBg: false, + hasInteractionWithOtherFocusTrappedEls: false, returnFocusTo: null, }); @@ -326,7 +328,7 @@ onMounted(() => { watch([showing, () => props.manualShowing], ([showing, manualShowing]) => { if (manualShowing === true || (manualShowing == null && showing === true)) { if (modalRootEl.value != null) { - const { release } = focusTrap(modalRootEl.value); + const { release } = focusTrap(modalRootEl.value, props.hasInteractionWithOtherFocusTrappedEls); releaseFocusTrap = release; modalRootEl.value.focus(); diff --git a/packages/frontend/src/scripts/focus-trap.ts b/packages/frontend/src/scripts/focus-trap.ts index 734c73652f..a5df36f520 100644 --- a/packages/frontend/src/scripts/focus-trap.ts +++ b/packages/frontend/src/scripts/focus-trap.ts @@ -18,6 +18,9 @@ function containsFocusTrappedElements(el: HTMLElement): boolean { function releaseFocusTrap(el: HTMLElement): void { focusTrapElements.delete(el); + if (el.inert === true) { + el.inert = false; + } if (el.parentElement != null && el !== document.body) { el.parentElement.childNodes.forEach((siblingNode) => { const siblingEl = getHTMLElementOrNull(siblingNode); @@ -39,18 +42,28 @@ function releaseFocusTrap(el: HTMLElement): void { } } -export function focusTrap(el: HTMLElement, parent: true): void; -export function focusTrap(el: HTMLElement, parent?: false): { release: () => void; }; -export function focusTrap(el: HTMLElement, parent = false): { release: () => void; } | void { +export function focusTrap(el: HTMLElement, hasInteractionWithOtherFocusTrappedEls: boolean, parent: true): void; +export function focusTrap(el: HTMLElement, hasInteractionWithOtherFocusTrappedEls?: boolean, parent?: false): { release: () => void; }; +export function focusTrap(el: HTMLElement, hasInteractionWithOtherFocusTrappedEls = false, parent = false): { release: () => void; } | void { + if (el.inert === true) { + el.inert = false; + } if (el.parentElement != null && el !== document.body) { el.parentElement.childNodes.forEach((siblingNode) => { const siblingEl = getHTMLElementOrNull(siblingNode); if (!siblingEl) return; - if (siblingEl !== el && !ignoreElements.includes(siblingEl.tagName.toLowerCase())) { + if ( + siblingEl !== el && + ( + hasInteractionWithOtherFocusTrappedEls === false || + (!focusTrapElements.has(siblingEl) && !containsFocusTrappedElements(siblingEl)) + ) && + !ignoreElements.includes(siblingEl.tagName.toLowerCase()) + ) { siblingEl.inert = true; } }); - focusTrap(el.parentElement, true); + focusTrap(el.parentElement, hasInteractionWithOtherFocusTrappedEls, true); } if (!parent) { -- cgit v1.2.3-freya From bcc92d546fde7a75a48074dc96096ae2083b5025 Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sat, 13 Jul 2024 16:15:25 +0900 Subject: fix(frontend): ホットキーのレートリミットがallowRepeatを考慮しない問題を修正 (#14192) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/scripts/hotkey.ts | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/hotkey.ts b/packages/frontend/src/scripts/hotkey.ts index ff3cbe98ac..04fb235694 100644 --- a/packages/frontend/src/scripts/hotkey.ts +++ b/packages/frontend/src/scripts/hotkey.ts @@ -114,6 +114,7 @@ const matchPatterns = (ev: KeyboardEvent, action: Action) => { const key = ev.key.toLowerCase(); return patterns.some(({ which, ctrl, shift, alt }) => { if ( + options.allowRepeat === false && latestHotkey != null && latestHotkey.which.includes(key) && latestHotkey.ctrl === ctrl && -- cgit v1.2.3-freya From 3c032dd5b917c97bf8fb1b87a69f36d56537f493 Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sun, 14 Jul 2024 15:27:52 +0900 Subject: enhance: 非ログイン時には別サーバーに遷移できるように (#13089) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * enhance: 非ログイン時にはMisskey Hub経由で別サーバーに遷移できるように * fix * サーバーサイド照会を削除 * クライアント側の照会動作 * hubを経由せずにリモートで続行できるように * fix と pleaseLogin誘導箇所の追加 * fix * fix * Update CHANGELOG.md --------- Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> --- CHANGELOG.md | 1 + locales/index.d.ts | 26 +++- locales/ja-JP.yml | 8 +- .../frontend/src/components/MkFollowButton.vue | 6 +- packages/frontend/src/components/MkNote.vue | 14 ++- .../frontend/src/components/MkNoteDetailed.vue | 14 ++- packages/frontend/src/components/MkPoll.vue | 8 +- packages/frontend/src/components/MkSignin.vue | 133 ++++++++++++++++++--- .../frontend/src/components/MkSigninDialog.vue | 9 +- packages/frontend/src/components/MkUserInfo.vue | 2 +- packages/frontend/src/os.ts | 10 ++ packages/frontend/src/pages/flash/flash.vue | 3 + packages/frontend/src/pages/follow.vue | 71 ----------- packages/frontend/src/pages/lookup.vue | 97 +++++++++++++++ packages/frontend/src/pages/user/home.vue | 4 +- packages/frontend/src/router/definition.ts | 12 +- packages/frontend/src/scripts/get-user-menu.ts | 4 +- packages/frontend/src/scripts/please-login.ts | 16 ++- packages/frontend/src/scripts/url.ts | 5 + 19 files changed, 330 insertions(+), 113 deletions(-) delete mode 100644 packages/frontend/src/pages/follow.vue create mode 100644 packages/frontend/src/pages/lookup.vue (limited to 'packages/frontend/src/scripts') diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e411e5329..2156c81474 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ ### Client - Enhance: 内蔵APIドキュメントのデザイン・パフォーマンスを改善 +- Enhance: 非ログイン時に他サーバーに遷移するアクションを追加 - Enhance: 非ログイン時のハイライトTLのデザインを改善 - Enhance: フロントエンドのアクセシビリティ改善 (Based on https://github.com/taiyme/misskey/pull/226) diff --git a/locales/index.d.ts b/locales/index.d.ts index c2f8e944dd..84a402b0de 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -736,6 +736,22 @@ export interface Locale extends ILocale { * リモートで表示 */ "showOnRemote": string; + /** + * リモートで続行 + */ + "continueOnRemote": string; + /** + * Misskey Hubからサーバーを選択 + */ + "chooseServerOnMisskeyHub": string; + /** + * サーバーのドメインを直接指定 + */ + "specifyServerHost": string; + /** + * ドメインを入力してください + */ + "inputHostName": string; /** * 全般 */ @@ -1921,9 +1937,13 @@ export interface Locale extends ILocale { */ "onlyOneFileCanBeAttached": string; /** - * 続行する前に、サインアップまたはサインインが必要です + * 続行する前に、登録またはログインが必要です */ "signinRequired": string; + /** + * 続行するには、お使いのサーバーに移動するか、このサーバーに登録・ログインする必要があります + */ + "signinOrContinueOnRemote": string; /** * 招待 */ @@ -4984,6 +5004,10 @@ export interface Locale extends ILocale { * お問い合わせ */ "inquiry": string; + /** + * もう一度お試しください。 + */ + "tryAgain": string; "_delivery": { /** * 配信状態 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 8d117e6dc8..bb3999f0e3 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -180,6 +180,10 @@ addAccount: "アカウントを追加" reloadAccountsList: "アカウントリストの情報を更新" loginFailed: "ログインに失敗しました" showOnRemote: "リモートで表示" +continueOnRemote: "リモートで続行" +chooseServerOnMisskeyHub: "Misskey Hubからサーバーを選択" +specifyServerHost: "サーバーのドメインを直接指定" +inputHostName: "ドメインを入力してください" general: "全般" wallpaper: "壁紙" setWallpaper: "壁紙を設定" @@ -476,7 +480,8 @@ attachAsFileQuestion: "クリップボードのテキストが長いです。テ noMessagesYet: "まだチャットはありません" newMessageExists: "新しいメッセージがあります" onlyOneFileCanBeAttached: "メッセージに添付できるファイルはひとつです" -signinRequired: "続行する前に、サインアップまたはサインインが必要です" +signinRequired: "続行する前に、登録またはログインが必要です" +signinOrContinueOnRemote: "続行するには、お使いのサーバーに移動するか、このサーバーに登録・ログインする必要があります" invitations: "招待" invitationCode: "招待コード" checking: "確認しています" @@ -1242,6 +1247,7 @@ keepOriginalFilenameDescription: "この設定をオフにすると、アップ noDescription: "説明文はありません" alwaysConfirmFollow: "フォローの際常に確認する" inquiry: "お問い合わせ" +tryAgain: "もう一度お試しください。" _delivery: status: "配信状態" diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue index ea76950c0d..d8ac8024b4 100644 --- a/packages/frontend/src/components/MkFollowButton.vue +++ b/packages/frontend/src/components/MkFollowButton.vue @@ -42,6 +42,8 @@ import { misskeyApi } from '@/scripts/misskey-api.js'; import { useStream } from '@/stream.js'; import { i18n } from '@/i18n.js'; import { claimAchievement } from '@/scripts/achievements.js'; +import { pleaseLogin } from '@/scripts/please-login.js'; +import { host } from '@/config.js'; import { $i } from '@/account.js'; import { defaultStore } from '@/store.js'; @@ -63,7 +65,7 @@ const hasPendingFollowRequestFromYou = ref(props.user.hasPendingFollowRequestFro const wait = ref(false); const connection = useStream().useChannel('main'); -if (props.user.isFollowing == null) { +if (props.user.isFollowing == null && $i) { misskeyApi('users/show', { userId: props.user.id, }) @@ -78,6 +80,8 @@ function onFollowChange(user: Misskey.entities.UserDetailed) { } async function onClick() { + pleaseLogin(undefined, { type: 'web', path: `/@${props.user.username}@${props.user.host ?? host}` }); + wait.value = true; try { diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 420ff2c651..c518c7dd41 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -196,6 +196,7 @@ import { MenuItem } from '@/types/menu.js'; import MkRippleEffect from '@/components/MkRippleEffect.vue'; import { showMovedDialog } from '@/scripts/show-moved-dialog.js'; import { shouldCollapsed } from '@/scripts/collapsed.js'; +import { host } from '@/config.js'; import { isEnabledUrlPreview } from '@/instance.js'; import { type Keymap } from '@/scripts/hotkey.js'; import { focusPrev, focusNext } from '@/scripts/focus.js'; @@ -278,6 +279,11 @@ const renoteCollapsed = ref( ), ); +const pleaseLoginContext = { + type: 'lookup', + path: `https://${host}/notes/${appearNote.value.id}`, +} as const; + /* Overload FunctionにLintが対応していないのでコメントアウト function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array | undefined | null, checkOnly: true): boolean; function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array | undefined | null, checkOnly: false): boolean | 'sensitiveMute'; @@ -411,7 +417,7 @@ if (!props.mock) { } function renote(viaKeyboard = false) { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext); showMovedDialog(); const { menu } = getRenoteMenu({ note: note.value, renoteButton, mock: props.mock }); @@ -421,7 +427,7 @@ function renote(viaKeyboard = false) { } function reply(): void { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext); if (props.mock) { return; } @@ -434,7 +440,7 @@ function reply(): void { } function react(): void { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext); showMovedDialog(); if (appearNote.value.reactionAcceptance === 'likeOnly') { sound.playMisskeySfx('reaction'); @@ -565,7 +571,7 @@ function showRenoteMenu(): void { } if (isMyRenote) { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext); os.popupMenu([ getCopyNoteLinkMenu(note.value, i18n.ts.copyLinkRenote), { type: 'divider' }, diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index a8fed56c39..737e9a853a 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -222,6 +222,7 @@ import { reactionPicker } from '@/scripts/reaction-picker.js'; import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js'; import { $i } from '@/account.js'; import { i18n } from '@/i18n.js'; +import { host } from '@/config.js'; import { getNoteClipMenu, getNoteMenu, getRenoteMenu } from '@/scripts/get-note-menu.js'; import { useNoteCapture } from '@/scripts/use-note-capture.js'; import { deepClone } from '@/scripts/clone.js'; @@ -296,6 +297,11 @@ const conversation = ref([]); const replies = ref([]); const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || appearNote.value.userId === $i?.id); +const pleaseLoginContext = { + type: 'lookup', + path: `https://${host}/notes/${appearNote.value.id}`, +} as const; + const keymap = { 'r': () => reply(), 'e|a|plus': () => react(), @@ -396,7 +402,7 @@ if (appearNote.value.reactionAcceptance === 'likeOnly') { } function renote() { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext); showMovedDialog(); const { menu } = getRenoteMenu({ note: note.value, renoteButton }); @@ -404,7 +410,7 @@ function renote() { } function reply(): void { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext); showMovedDialog(); os.post({ reply: appearNote.value, @@ -415,7 +421,7 @@ function reply(): void { } function react(): void { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext); showMovedDialog(); if (appearNote.value.reactionAcceptance === 'likeOnly') { sound.playMisskeySfx('reaction'); @@ -499,7 +505,7 @@ async function clip(): Promise { function showRenoteMenu(): void { if (!isMyRenote) return; - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext); os.popupMenu([{ text: i18n.ts.unrenote, icon: 'ti ti-trash', diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue index a98690f1c3..82e2a605f1 100644 --- a/packages/frontend/src/components/MkPoll.vue +++ b/packages/frontend/src/components/MkPoll.vue @@ -34,6 +34,7 @@ import { pleaseLogin } from '@/scripts/please-login.js'; import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { i18n } from '@/i18n.js'; +import { host } from '@/config.js'; import { useInterval } from '@/scripts/use-interval.js'; const props = defineProps<{ @@ -60,6 +61,11 @@ const timer = computed(() => i18n.tsx._poll[ const showResult = ref(props.readOnly || isVoted.value); +const pleaseLoginContext = { + type: 'lookup', + path: `https://${host}/notes/${props.note.id}`, +} as const; + // 期限付きアンケート if (props.poll.expiresAt) { const tick = () => { @@ -76,7 +82,7 @@ if (props.poll.expiresAt) { } const vote = async (id) => { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext); if (props.readOnly || closed.value || isVoted.value) return; diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue index db32cdd6a1..746ddd7154 100644 --- a/packages/frontend/src/components/MkSignin.vue +++ b/packages/frontend/src/components/MkSignin.vue @@ -6,10 +6,23 @@ SPDX-License-Identifier: AGPL-3.0-only