diff options
Diffstat (limited to 'packages/frontend/src/components')
60 files changed, 1041 insertions, 319 deletions
diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue index 271b94feaa..a28e7c2559 100644 --- a/packages/frontend/src/components/MkAbuseReport.vue +++ b/packages/frontend/src/components/MkAbuseReport.vue @@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <div class="detail"> <div> - <Mfm :text="report.comment"/> + <Mfm :text="report.comment" :linkNavigationBehavior="'window'"/> </div> <hr/> <div>{{ i18n.ts.reporter }}: <MkA :to="`/admin/user/${report.reporter.id}`" class="_link" :behavior="'window'">@{{ report.reporter.username }}</MkA></div> diff --git a/packages/frontend/src/components/MkAccountMoved.stories.impl.ts b/packages/frontend/src/components/MkAccountMoved.stories.impl.ts index f1cfdc157a..cad26de6e2 100644 --- a/packages/frontend/src/components/MkAccountMoved.stories.impl.ts +++ b/packages/frontend/src/components/MkAccountMoved.stories.impl.ts @@ -4,7 +4,10 @@ */ /* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { action } from '@storybook/addon-actions'; import { StoryObj } from '@storybook/vue3'; +import { HttpResponse, http } from 'msw'; +import { commonHandlers } from '../../.storybook/mocks.js'; import { userDetailed } from '../../.storybook/fakes.js'; import MkAccountMoved from './MkAccountMoved.vue'; export const Default = { @@ -29,10 +32,18 @@ export const Default = { }; }, args: { - username: userDetailed().username, - host: userDetailed().host, + movedTo: userDetailed().id, }, parameters: { layout: 'centered', + msw: { + handlers: [ + ...commonHandlers, + http.post('/api/users/show', async ({ request }) => { + action('POST /api/users/show')(await request.json()); + return HttpResponse.json(userDetailed()); + }), + ], + }, }, } satisfies StoryObj<typeof MkAccountMoved>; diff --git a/packages/frontend/src/components/MkAnnouncementDialog.stories.impl.ts b/packages/frontend/src/components/MkAnnouncementDialog.stories.impl.ts index ffa4e56f5f..bf3ddb935b 100644 --- a/packages/frontend/src/components/MkAnnouncementDialog.stories.impl.ts +++ b/packages/frontend/src/components/MkAnnouncementDialog.stories.impl.ts @@ -4,7 +4,10 @@ */ /* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { action } from '@storybook/addon-actions'; import { StoryObj } from '@storybook/vue3'; +import { HttpResponse, http } from 'msw'; +import { commonHandlers } from '../../.storybook/mocks.js'; import MkAnnouncementDialog from './MkAnnouncementDialog.vue'; export const Default = { render(args) { @@ -23,8 +26,13 @@ export const Default = { ...this.args, }; }, + events() { + return { + closed: action('closed'), + }; + }, }, - template: '<MkAnnouncementDialog v-bind="props" />', + template: '<MkAnnouncementDialog v-bind="props" v-on="events" />', }; }, args: { @@ -38,10 +46,20 @@ export const Default = { imageUrl: null, display: 'dialog', needConfirmationToRead: false, + silence: false, forYou: true, }, }, parameters: { layout: 'centered', + msw: { + handlers: [ + ...commonHandlers, + http.post('/api/i/read-announcement', async ({ request }) => { + action('POST /api/i/read-announcement')(await request.json()); + return HttpResponse.json(); + }), + ], + }, }, } satisfies StoryObj<typeof MkAnnouncementDialog>; diff --git a/packages/frontend/src/components/MkAsUi.vue b/packages/frontend/src/components/MkAsUi.vue index 5eb77740be..18e8e7542e 100644 --- a/packages/frontend/src/components/MkAsUi.vue +++ b/packages/frontend/src/components/MkAsUi.vue @@ -44,6 +44,8 @@ SPDX-License-Identifier: AGPL-3.0-only :instant="true" :initialText="c.form?.text" :initialCw="c.form?.cw" + :initialVisibility="c.form?.visibility" + :initialLocalOnly="c.form?.localOnly" /> </div> <MkFolder v-else-if="c.type === 'folder'" :defaultOpen="c.opened"> @@ -111,6 +113,8 @@ function openPostForm() { os.post({ initialText: form.text, initialCw: form.cw, + initialVisibility: form.visibility, + initialLocalOnly: form.localOnly, instant: true, }); } diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue index 817f1aadf3..3489255b91 100644 --- a/packages/frontend/src/components/MkButton.vue +++ b/packages/frontend/src/components/MkButton.vue @@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only v-else class="_button" :class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]" :to="to ?? '#'" + :behavior="linkBehavior" @mousedown="onMousedown" > <div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div> @@ -43,6 +44,7 @@ const props = defineProps<{ inline?: boolean; link?: boolean; to?: string; + linkBehavior?: null | 'window' | 'browser'; autofocus?: boolean; wait?: boolean; danger?: boolean; diff --git a/packages/frontend/src/components/MkClipPreview.vue b/packages/frontend/src/components/MkClipPreview.vue index c51ad4356d..6299a28e9f 100644 --- a/packages/frontend/src/components/MkClipPreview.vue +++ b/packages/frontend/src/components/MkClipPreview.vue @@ -4,37 +4,59 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div :class="$style.root" class="_panel"> - <b>{{ clip.name }}</b> - <div v-if="clip.description" :class="$style.description">{{ clip.description }}</div> - <div v-if="clip.lastClippedAt">{{ i18n.ts.updatedAt }}: <MkTime :time="clip.lastClippedAt" mode="detail"/></div> - <div :class="$style.user"> - <MkAvatar :user="clip.user" :class="$style.userAvatar" indicator link preview/> <MkUserName :user="clip.user" :nowrap="false"/> +<MkA :to="`/clips/${clip.id}`" :class="$style.link"> + <div :class="$style.root" class="_panel _gaps_s"> + <b>{{ clip.name }}</b> + <div :class="$style.description"> + <div v-if="clip.description"><Mfm :text="clip.description" :plain="true" :nowrap="true"/></div> + <div v-if="clip.lastClippedAt">{{ i18n.ts.updatedAt }}: <MkTime :time="clip.lastClippedAt" mode="detail"/></div> + <div v-if="clip.notesCount != null">{{ i18n.ts.notesCount }}: {{ number(clip.notesCount) }} / {{ $i?.policies.noteEachClipsLimit }} ({{ i18n.tsx.remainingN({ n: remaining }) }})</div> + </div> + <div :class="$style.divider"></div> + <div> + <MkAvatar :user="clip.user" :class="$style.userAvatar" indicator link preview/> <MkUserName :user="clip.user" :nowrap="false"/> + </div> </div> -</div> +</MkA> </template> <script lang="ts" setup> +import * as Misskey from 'misskey-js'; +import { computed } from 'vue'; import { i18n } from '@/i18n.js'; +import { $i } from '@/account.js'; +import number from '@/filters/number.js'; -defineProps<{ - clip: any; +const props = defineProps<{ + clip: Misskey.entities.Clip; }>(); + +const remaining = computed(() => { + return ($i?.policies && props.clip.notesCount != null) ? ($i.policies.noteEachClipsLimit - props.clip.notesCount) : i18n.ts.unknown; +}); </script> <style lang="scss" module> -.root { +.link { display: block; + + &:hover { + text-decoration: none; + color: var(--accent); + } +} + +.root { padding: 16px; } -.description { - padding: 8px 0; +.divider { + height: 1px; + background: var(--divider); } -.user { - padding-top: 16px; - border-top: solid 0.5px var(--divider); +.description { + font-size: 90%; } .userAvatar { diff --git a/packages/frontend/src/components/MkCode.core.vue b/packages/frontend/src/components/MkCode.core.vue index 872517b6aa..c0e7df5dac 100644 --- a/packages/frontend/src/components/MkCode.core.vue +++ b/packages/frontend/src/components/MkCode.core.vue @@ -9,9 +9,9 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { ref, computed, watch } from 'vue'; -import { bundledLanguagesInfo } from 'shiki'; -import type { BuiltinLanguage } from 'shiki'; +import { computed, ref, watch } from 'vue'; +import { bundledLanguagesInfo } from 'shiki/langs'; +import type { BundledLanguage } from 'shiki/langs'; import { getHighlighter, getTheme } from '@/scripts/code-highlighter.js'; import { defaultStore } from '@/store.js'; @@ -23,7 +23,7 @@ const props = defineProps<{ const highlighter = await getHighlighter(); const darkMode = defaultStore.reactiveState.darkMode; -const codeLang = ref<BuiltinLanguage | 'aiscript'>('js'); +const codeLang = ref<BundledLanguage | 'aiscript'>('js'); const [lightThemeName, darkThemeName] = await Promise.all([ getTheme('light', true), @@ -42,7 +42,7 @@ const html = computed(() => highlighter.codeToHtml(props.code, { })); async function fetchLanguage(to: string): Promise<void> { - const language = to as BuiltinLanguage; + const language = to as BundledLanguage; // Check for the loaded languages, and load the language if it's not loaded yet. if (!highlighter.getLoadedLanguages().includes(language)) { diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue index ede068b20d..a3c80e743b 100644 --- a/packages/frontend/src/components/MkCode.vue +++ b/packages/frontend/src/components/MkCode.vue @@ -80,11 +80,9 @@ function copy() { .codePlaceholderRoot { display: block; width: 100%; - background: none; border: none; outline: none; font: inherit; - color: inherit; cursor: pointer; box-sizing: border-box; diff --git a/packages/frontend/src/components/MkContextMenu.vue b/packages/frontend/src/components/MkContextMenu.vue index 5ca3c77fb2..a807742bb9 100644 --- a/packages/frontend/src/components/MkContextMenu.vue +++ b/packages/frontend/src/components/MkContextMenu.vue @@ -47,12 +47,12 @@ onMounted(() => { const width = rootEl.value!.offsetWidth; const height = rootEl.value!.offsetHeight; - if (left + width - window.pageXOffset >= (window.innerWidth - SCROLLBAR_THICKNESS)) { - left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.pageXOffset; + if (left + width - window.scrollX >= (window.innerWidth - SCROLLBAR_THICKNESS)) { + left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.scrollX; } - if (top + height - window.pageYOffset >= (window.innerHeight - SCROLLBAR_THICKNESS)) { - top = (window.innerHeight - SCROLLBAR_THICKNESS) - height + window.pageYOffset; + if (top + height - window.scrollY >= (window.innerHeight - SCROLLBAR_THICKNESS)) { + top = (window.innerHeight - SCROLLBAR_THICKNESS) - height + window.scrollY; } if (top < 0) { diff --git a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue index 84b5375a41..c7f1288729 100644 --- a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue +++ b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue @@ -4,77 +4,81 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> - <MkModalWindow ref="dialogEl" @close="cancel()" @closed="$emit('closed')"> - <template #header>:{{ emoji.name }}:</template> - <template #default> - <MkSpacer> - <div style="display: flex; flex-direction: column; gap: 1em;"> - <div :class="$style.emojiImgWrapper"> - <MkCustomEmoji :name="emoji.name" :normal="true" :useOriginalSize="true" style="height: 100%;"></MkCustomEmoji> - </div> - <MkKeyValue :copy="`:${emoji.name}:`"> - <template #key>{{ i18n.ts.name }}</template> - <template #value>{{ emoji.name }}</template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.tags }}</template> - <template #value> - <div v-if="emoji.aliases.length === 0">{{ i18n.ts.none }}</div> - <div v-else :class="$style.aliases"> - <span v-for="alias in emoji.aliases" :key="alias" :class="$style.alias"> - {{ alias }} - </span> - </div> - </template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.category }}</template> - <template #value>{{ emoji.category ?? i18n.ts.none }}</template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.sensitive }}</template> - <template #value>{{ emoji.isSensitive ? i18n.ts.yes : i18n.ts.no }}</template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.localOnly }}</template> - <template #value>{{ emoji.localOnly ? i18n.ts.yes : i18n.ts.no }}</template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.license }}</template> - <template #value><Mfm :text="emoji.license ?? i18n.ts.none" /></template> - </MkKeyValue> - <MkKeyValue :copy="emoji.url"> - <template #key>{{ i18n.ts.emojiUrl }}</template> - <template #value> - <MkLink :url="emoji.url" target="_blank">{{ emoji.url }}</MkLink> - </template> - </MkKeyValue> - </div> - </MkSpacer> - </template> - </MkModalWindow> +<MkModalWindow ref="dialogEl" @close="cancel()" @closed="$emit('closed')"> + <template #header>:{{ emoji.name }}:</template> + <template #default> + <MkSpacer> + <div style="display: flex; flex-direction: column; gap: 1em;"> + <div :class="$style.emojiImgWrapper"> + <MkCustomEmoji :name="emoji.name" :normal="true" :useOriginalSize="true" style="height: 100%;"></MkCustomEmoji> + </div> + <MkKeyValue :copy="`:${emoji.name}:`"> + <template #key>{{ i18n.ts.name }}</template> + <template #value>{{ emoji.name }}</template> + </MkKeyValue> + <MkKeyValue> + <template #key>{{ i18n.ts.tags }}</template> + <template #value> + <div v-if="emoji.aliases.length === 0">{{ i18n.ts.none }}</div> + <div v-else :class="$style.aliases"> + <span v-for="alias in emoji.aliases" :key="alias" :class="$style.alias"> + {{ alias }} + </span> + </div> + </template> + </MkKeyValue> + <MkKeyValue> + <template #key>{{ i18n.ts.category }}</template> + <template #value>{{ emoji.category ?? i18n.ts.none }}</template> + </MkKeyValue> + <MkKeyValue> + <template #key>{{ i18n.ts.sensitive }}</template> + <template #value>{{ emoji.isSensitive ? i18n.ts.yes : i18n.ts.no }}</template> + </MkKeyValue> + <MkKeyValue> + <template #key>{{ i18n.ts.localOnly }}</template> + <template #value>{{ emoji.localOnly ? i18n.ts.yes : i18n.ts.no }}</template> + </MkKeyValue> + <MkKeyValue> + <template #key>{{ i18n.ts.license }}</template> + <template #value><Mfm :text="emoji.license ?? i18n.ts.none"/></template> + </MkKeyValue> + <MkKeyValue :copy="emoji.url"> + <template #key>{{ i18n.ts.emojiUrl }}</template> + <template #value> + <MkLink :url="emoji.url" target="_blank">{{ emoji.url }}</MkLink> + </template> + </MkKeyValue> + </div> + </MkSpacer> + </template> +</MkModalWindow> </template> <script lang="ts" setup> import * as Misskey from 'misskey-js'; import { defineProps, shallowRef } from 'vue'; +import MkLink from '@/components/MkLink.vue'; import { i18n } from '@/i18n.js'; import MkModalWindow from '@/components/MkModalWindow.vue'; import MkKeyValue from '@/components/MkKeyValue.vue'; -import MkLink from './MkLink.vue'; + const props = defineProps<{ emoji: Misskey.entities.EmojiDetailed, }>(); + const emit = defineEmits<{ (ev: 'ok', cropped: Misskey.entities.DriveFile): void; (ev: 'cancel'): void; (ev: 'closed'): void; }>(); + const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>(); -const cancel = () => { + +function cancel() { emit('cancel'); dialogEl.value!.close(); -}; +} </script> <style lang="scss" module> diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue index 4577d37c08..c52404a319 100644 --- a/packages/frontend/src/components/MkDialog.vue +++ b/packages/frontend/src/components/MkDialog.vue @@ -161,7 +161,7 @@ function onKeydown(evt: KeyboardEvent) { } function onInputKeydown(evt: KeyboardEvent) { - if (evt.key === 'Enter') { + if (evt.key === 'Enter' && okButtonDisabledReason.value === null) { evt.preventDefault(); evt.stopPropagation(); ok(); diff --git a/packages/frontend/src/components/MkFeaturedPhotos.vue b/packages/frontend/src/components/MkFeaturedPhotos.vue index 8d875790bc..c42c692db0 100644 --- a/packages/frontend/src/components/MkFeaturedPhotos.vue +++ b/packages/frontend/src/components/MkFeaturedPhotos.vue @@ -4,19 +4,11 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div v-if="meta" :class="$style.root" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div> +<div v-if="instance" :class="$style.root" :style="{ backgroundImage: `url(${ instance.backgroundImageUrl })` }"></div> </template> <script lang="ts" setup> -import { ref } from 'vue'; -import * as Misskey from 'misskey-js'; -import { misskeyApi } from '@/scripts/misskey-api.js'; - -const meta = ref<Misskey.entities.MetaResponse>(); - -misskeyApi('meta', { detail: true }).then(gotMeta => { - meta.value = gotMeta; -}); +import { instance } from '@/instance.js'; </script> <style lang="scss" module> diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue index 28450e11fc..636e61db8f 100644 --- a/packages/frontend/src/components/MkFollowButton.vue +++ b/packages/frontend/src/components/MkFollowButton.vue @@ -93,6 +93,18 @@ async function onClick() { userId: props.user.id, }); } else { + if (defaultStore.state.alwaysConfirmFollow) { + const { canceled } = await os.confirm({ + type: 'question', + text: i18n.tsx.followConfirm({ name: props.user.name || props.user.username }), + }); + + if (canceled) { + wait.value = false; + return; + } + } + if (hasPendingFollowRequestFromYou.value) { await misskeyApi('following/requests/cancel', { userId: props.user.id, diff --git a/packages/frontend/src/components/MkFormDialog.file.vue b/packages/frontend/src/components/MkFormDialog.file.vue new file mode 100644 index 0000000000..9360594236 --- /dev/null +++ b/packages/frontend/src/components/MkFormDialog.file.vue @@ -0,0 +1,71 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<div> + <MkButton inline rounded primary @click="selectButton($event)">{{ i18n.ts.selectFile }}</MkButton> + <div :class="['_nowrap', !fileName && $style.fileNotSelected]">{{ friendlyFileName }}</div> +</div> +</template> + +<script setup lang="ts"> +import * as Misskey from 'misskey-js'; +import { computed, ref } from 'vue'; +import { i18n } from '@/i18n.js'; +import MkButton from '@/components/MkButton.vue'; +import { selectFile } from '@/scripts/select-file.js'; +import { misskeyApi } from '@/scripts/misskey-api.js'; + +const props = defineProps<{ + fileId?: string | null; + validate?: (file: Misskey.entities.DriveFile) => Promise<boolean>; +}>(); + +const emit = defineEmits<{ + (ev: 'update', result: Misskey.entities.DriveFile): void; +}>(); + +const fileUrl = ref(''); +const fileName = ref<string>(''); + +const friendlyFileName = computed<string>(() => { + if (fileName.value) { + return fileName.value; + } + if (fileUrl.value) { + return fileUrl.value; + } + + return i18n.ts.fileNotSelected; +}); + +if (props.fileId) { + misskeyApi('drive/files/show', { + fileId: props.fileId, + }).then((apiRes) => { + fileName.value = apiRes.name; + fileUrl.value = apiRes.url; + }); +} + +function selectButton(ev: MouseEvent) { + selectFile(ev.currentTarget ?? ev.target).then(async (file) => { + if (!file) return; + if (props.validate && !await props.validate(file)) return; + + emit('update', file); + fileName.value = file.name; + fileUrl.value = file.url; + }); +} + +</script> + +<style module> +.fileNotSelected { + font-weight: 700; + color: var(--infoWarnFg); +} +</style> diff --git a/packages/frontend/src/components/MkFormDialog.vue b/packages/frontend/src/components/MkFormDialog.vue index deedc5badb..124f114111 100644 --- a/packages/frontend/src/components/MkFormDialog.vue +++ b/packages/frontend/src/components/MkFormDialog.vue @@ -21,8 +21,9 @@ SPDX-License-Identifier: AGPL-3.0-only <MkSpacer :marginMin="20" :marginMax="32"> <div v-if="Object.keys(form).filter(item => !form[item].hidden).length > 0" class="_gaps_m"> - <template v-for="(v, k) in Object.fromEntries(Object.entries(form).filter(([_, v]) => !('hidden' in v) || 'hidden' in v && !v.hidden))"> - <MkInput v-if="v.type === 'number'" v-model="values[k]" type="number" :step="v.step || 1"> + <template v-for="(v, k) in Object.fromEntries(Object.entries(form))"> + <template v-if="typeof v.hidden == 'function' ? v.hidden(values) : v.hidden"></template> + <MkInput v-else-if="v.type === 'number'" v-model="values[k]" type="number" :step="v.step || 1"> <template #label><span v-text="v.label || k"></span><span v-if="v.required === false"> ({{ i18n.ts.optional }})</span></template> <template v-if="v.description" #caption>{{ v.description }}</template> </MkInput> @@ -53,6 +54,12 @@ SPDX-License-Identifier: AGPL-3.0-only <MkButton v-else-if="v.type === 'button'" @click="v.action($event, values)"> <span v-text="v.content || k"></span> </MkButton> + <XFile + v-else-if="v.type === 'drive-file'" + :fileId="v.defaultFileId" + :validate="async f => !v.validate || await v.validate(f)" + @update="f => values[k] = f" + /> </template> </div> <div v-else class="_fullinfo"> @@ -72,6 +79,7 @@ import MkSelect from './MkSelect.vue'; import MkRange from './MkRange.vue'; import MkButton from './MkButton.vue'; import MkRadios from './MkRadios.vue'; +import XFile from './MkFormDialog.file.vue'; import type { Form } from '@/scripts/form.js'; import MkModalWindow from '@/components/MkModalWindow.vue'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/components/MkInput.vue b/packages/frontend/src/components/MkInput.vue index d3cddad15b..88ef4635e6 100644 --- a/packages/frontend/src/components/MkInput.vue +++ b/packages/frontend/src/components/MkInput.vue @@ -22,6 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only :autocomplete="autocomplete" :autocapitalize="autocapitalize" :spellcheck="spellcheck" + :inputmode="inputmode" :step="step" :list="id" :min="min" @@ -63,6 +64,7 @@ const props = defineProps<{ mfmAutocomplete?: boolean | SuggestionType[], autocapitalize?: string; spellcheck?: boolean; + inputmode?: 'none' | 'text' | 'search' | 'email' | 'url' | 'numeric' | 'tel' | 'decimal'; step?: any; datalist?: string[]; min?: number; diff --git a/packages/frontend/src/components/MkLink.vue b/packages/frontend/src/components/MkLink.vue index a5abbeceac..5d54a58e97 100644 --- a/packages/frontend/src/components/MkLink.vue +++ b/packages/frontend/src/components/MkLink.vue @@ -6,6 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <component :is="self ? 'MkA' : 'a'" ref="el" style="word-break: break-all;" class="_link" :[attr]="self ? url.substring(local.length) : url" :rel="rel ?? 'nofollow noopener'" :target="target" + :behavior="props.navigationBehavior" :title="url" > <slot></slot> @@ -18,10 +19,13 @@ import { defineAsyncComponent, ref } from 'vue'; import { url as local } from '@/config.js'; import { useTooltip } from '@/scripts/use-tooltip.js'; import * as os from '@/os.js'; +import { isEnabledUrlPreview } from '@/instance.js'; +import { MkABehavior } from '@/components/global/MkA.vue'; const props = withDefaults(defineProps<{ url: string; rel?: null | string; + navigationBehavior?: MkABehavior; }>(), { }); @@ -29,15 +33,17 @@ const self = props.url.startsWith(local); const attr = self ? 'to' : 'href'; const target = self ? null : '_blank'; -const el = ref<HTMLElement>(); +const el = ref<HTMLElement | { $el: HTMLElement }>(); -useTooltip(el, (showing) => { - os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), { - showing, - url: props.url, - source: el.value, - }, {}, 'closed'); -}); +if (isEnabledUrlPreview.value) { + useTooltip(el, (showing) => { + os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), { + showing, + url: props.url, + source: el.value instanceof HTMLElement ? el.value : el.value?.$el, + }, {}, 'closed'); + }); +} </script> <style lang="scss" module> diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue index d42146f941..5d2edf467e 100644 --- a/packages/frontend/src/components/MkMediaAudio.vue +++ b/packages/frontend/src/components/MkMediaAudio.vue @@ -5,11 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div + ref="playerEl" + v-hotkey="keymap" + tabindex="0" :class="[ $style.audioContainer, (audio.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitive, ]" @contextmenu.stop + @keydown.stop > <button v-if="hide" :class="$style.hidden" @click="hide = false"> <div :class="$style.hiddenTextWrapper"> @@ -18,6 +22,19 @@ SPDX-License-Identifier: AGPL-3.0-only <span style="display: block;">{{ i18n.ts.clickToShow }}</span> </div> </button> + + <div v-else-if="defaultStore.reactiveState.useNativeUIForVideoAudioPlayer.value" :class="$style.nativeAudioContainer"> + <audio + ref="audioEl" + preload="metadata" + controls + :class="$style.nativeAudio" + @keydown.prevent + > + <source :src="audio.url"> + </audio> + </div> + <div v-else :class="$style.audioControls"> <audio ref="audioEl" @@ -66,12 +83,47 @@ import * as os from '@/os.js'; import bytes from '@/filters/bytes.js'; import { hms } from '@/filters/hms.js'; import MkMediaRange from '@/components/MkMediaRange.vue'; -import { iAmModerator } from '@/account.js'; +import { $i, iAmModerator } from '@/account.js'; const props = defineProps<{ audio: Misskey.entities.DriveFile; }>(); +const keymap = { + 'up': () => { + if (hasFocus() && audioEl.value) { + volume.value = Math.min(volume.value + 0.1, 1); + } + }, + 'down': () => { + if (hasFocus() && audioEl.value) { + volume.value = Math.max(volume.value - 0.1, 0); + } + }, + 'left': () => { + if (hasFocus() && audioEl.value) { + audioEl.value.currentTime = Math.max(audioEl.value.currentTime - 5, 0); + } + }, + 'right': () => { + if (hasFocus() && audioEl.value) { + audioEl.value.currentTime = Math.min(audioEl.value.currentTime + 5, audioEl.value.duration); + } + }, + 'space': () => { + if (hasFocus()) { + togglePlayPause(); + } + }, +}; + +// PlayerElもしくはその子要素にフォーカスがあるかどうか +function hasFocus() { + if (!playerEl.value) return false; + return playerEl.value === document.activeElement || playerEl.value.contains(document.activeElement); +} + +const playerEl = shallowRef<HTMLDivElement>(); const audioEl = shallowRef<HTMLAudioElement>(); // eslint-disable-next-line vue/no-setup-props-destructure @@ -86,6 +138,30 @@ function showMenu(ev: MouseEvent) { menu = [ // TODO: 再生キューに追加 { + type: 'switch', + text: i18n.ts._mediaControls.loop, + icon: 'ti ti-repeat', + ref: loop, + }, + { + type: 'radio', + text: i18n.ts._mediaControls.playbackRate, + icon: 'ti ti-clock-play', + ref: speed, + options: { + '0.25x': 0.25, + '0.5x': 0.5, + '0.75x': 0.75, + '1.0x': 1, + '1.25x': 1.25, + '1.5x': 1.5, + '2.0x': 2, + }, + }, + { + type: 'divider', + }, + { text: i18n.ts.hide, icon: 'ti ti-eye-off', action: () => { @@ -96,8 +172,6 @@ function showMenu(ev: MouseEvent) { if (iAmModerator) { menu.push({ - type: 'divider', - }, { text: props.audio.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive, icon: props.audio.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation', danger: true, @@ -105,6 +179,17 @@ function showMenu(ev: MouseEvent) { }); } + if ($i?.id === props.audio.userId) { + menu.push({ + type: 'divider', + }, { + type: 'link' as const, + text: i18n.ts._fileViewer.title, + icon: 'ti ti-info-circle', + to: `/my/drive/file/${props.audio.id}`, + }); + } + menuShowing.value = true; os.popupMenu(menu, ev.currentTarget ?? ev.target, { align: 'right', @@ -138,6 +223,8 @@ const rangePercent = computed({ }, }); const volume = ref(.25); +const speed = ref(1); +const loop = ref(false); // TODO: ドライブファイルのフラグに置き換える const bufferedEnd = ref(0); const bufferedDataRatio = computed(() => { if (!audioEl.value) return 0; @@ -167,6 +254,7 @@ function toggleMute() { } let onceInit = false; +let mediaTickFrameId: number | null = null; let stopAudioElWatch: () => void; function init() { @@ -186,8 +274,12 @@ function init() { } elapsedTimeMs.value = audioEl.value.currentTime * 1000; + + if (audioEl.value.loop !== loop.value) { + loop.value = audioEl.value.loop; + } } - window.requestAnimationFrame(updateMediaTick); + mediaTickFrameId = window.requestAnimationFrame(updateMediaTick); } updateMediaTick(); @@ -225,6 +317,14 @@ watch(volume, (to) => { if (audioEl.value) audioEl.value.volume = to; }); +watch(speed, (to) => { + if (audioEl.value) audioEl.value.playbackRate = to; +}); + +watch(loop, (to) => { + if (audioEl.value) audioEl.value.loop = to; +}); + onMounted(() => { init(); }); @@ -243,6 +343,10 @@ onDeactivated(() => { hide.value = (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.audio.isSensitive && defaultStore.state.nsfw !== 'ignore'); stopAudioElWatch(); onceInit = false; + if (mediaTickFrameId) { + window.cancelAnimationFrame(mediaTickFrameId); + mediaTickFrameId = null; + } }); </script> @@ -253,6 +357,10 @@ onDeactivated(() => { border: .5px solid var(--divider); border-radius: var(--radius); overflow: clip; + + &:focus { + outline: none; + } } .sensitive { @@ -358,4 +466,15 @@ onDeactivated(() => { } } } + +.nativeAudioContainer { + display: flex; + align-items: center; + padding: 6px; +} + +.nativeAudio { + display: block; + width: 100%; +} </style> diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue index 4ba2c76133..82f36fe5c4 100644 --- a/packages/frontend/src/components/MkMediaImage.vue +++ b/packages/frontend/src/components/MkMediaImage.vue @@ -59,7 +59,7 @@ import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; import { defaultStore } from '@/store.js'; import { i18n } from '@/i18n.js'; import * as os from '@/os.js'; -import { iAmModerator } from '@/account.js'; +import { $i, iAmModerator } from '@/account.js'; const props = withDefaults(defineProps<{ image: Misskey.entities.DriveFile; @@ -114,6 +114,13 @@ function showMenu(ev: MouseEvent) { action: () => { os.apiWithDialog('drive/files/update', { fileId: props.image.id, isSensitive: true }); }, + }] : []), ...($i?.id === props.image.userId ? [{ + type: 'divider' as const, + }, { + type: 'link' as const, + text: i18n.ts._fileViewer.title, + icon: 'ti ti-info-circle', + to: `/my/drive/file/${props.image.id}`, }] : [])], ev.currentTarget ?? ev.target); } diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index eab4fdfd6b..1e3868bc36 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div ref="playerEl" + v-hotkey="keymap" + tabindex="0" :class="[ $style.videoContainer, controlsShowing && $style.active, @@ -14,15 +16,37 @@ SPDX-License-Identifier: AGPL-3.0-only @mouseover="onMouseOver" @mouseleave="onMouseLeave" @contextmenu.stop + @keydown.stop > <button v-if="hide" :class="$style.hidden" @click="hide = false"> <div :class="$style.hiddenTextWrapper"> <b v-if="video.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b> - <b v-else style="display: block;"><i class="ti ti-photo"></i> {{ defaultStore.state.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }}</b> + <b v-else style="display: block;"><i class="ti ti-movie"></i> {{ defaultStore.state.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }}</b> <span style="display: block;">{{ i18n.ts.clickToShow }}</span> </div> </button> - <div v-else :class="$style.videoRoot" @click.self="togglePlayPause"> + + <div v-else-if="defaultStore.reactiveState.useNativeUIForVideoAudioPlayer.value" :class="$style.videoRoot"> + <video + ref="videoEl" + :class="$style.video" + :poster="video.thumbnailUrl ?? undefined" + :title="video.comment ?? undefined" + :alt="video.comment" + preload="metadata" + controls + @keydown.prevent + > + <source :src="video.url"> + </video> + <i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i> + <div :class="$style.indicators"> + <div v-if="video.comment" :class="$style.indicator">ALT</div> + <div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div> + </div> + </div> + + <div v-else :class="$style.videoRoot"> <video ref="videoEl" :class="$style.video" @@ -31,6 +55,8 @@ SPDX-License-Identifier: AGPL-3.0-only :alt="video.comment" preload="metadata" playsinline + @keydown.prevent + @click.self="togglePlayPause" > <source :src="video.url"> </video> @@ -94,12 +120,46 @@ import * as os from '@/os.js'; import { isFullscreenNotSupported } from '@/scripts/device-kind.js'; import hasAudio from '@/scripts/media-has-audio.js'; import MkMediaRange from '@/components/MkMediaRange.vue'; -import { iAmModerator } from '@/account.js'; +import { $i, iAmModerator } from '@/account.js'; const props = defineProps<{ video: Misskey.entities.DriveFile; }>(); +const keymap = { + 'up': () => { + if (hasFocus() && videoEl.value) { + volume.value = Math.min(volume.value + 0.1, 1); + } + }, + 'down': () => { + if (hasFocus() && videoEl.value) { + volume.value = Math.max(volume.value - 0.1, 0); + } + }, + 'left': () => { + if (hasFocus() && videoEl.value) { + videoEl.value.currentTime = Math.max(videoEl.value.currentTime - 5, 0); + } + }, + 'right': () => { + if (hasFocus() && videoEl.value) { + videoEl.value.currentTime = Math.min(videoEl.value.currentTime + 5, videoEl.value.duration); + } + }, + 'space': () => { + if (hasFocus()) { + togglePlayPause(); + } + }, +}; + +// PlayerElもしくはその子要素にフォーカスがあるかどうか +function hasFocus() { + if (!playerEl.value) return false; + return playerEl.value === document.activeElement || playerEl.value.contains(document.activeElement); +} + // eslint-disable-next-line vue/no-setup-props-destructure const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore')); @@ -112,6 +172,35 @@ function showMenu(ev: MouseEvent) { menu = [ // TODO: 再生キューに追加 { + type: 'switch', + text: i18n.ts._mediaControls.loop, + icon: 'ti ti-repeat', + ref: loop, + }, + { + type: 'radio', + text: i18n.ts._mediaControls.playbackRate, + icon: 'ti ti-clock-play', + ref: speed, + options: { + '0.25x': 0.25, + '0.5x': 0.5, + '0.75x': 0.75, + '1.0x': 1, + '1.25x': 1.25, + '1.5x': 1.5, + '2.0x': 2, + }, + }, + ...(document.pictureInPictureEnabled ? [{ + text: i18n.ts._mediaControls.pip, + icon: 'ti ti-picture-in-picture', + action: togglePictureInPicture, + }] : []), + { + type: 'divider', + }, + { text: i18n.ts.hide, icon: 'ti ti-eye-off', action: () => { @@ -122,8 +211,6 @@ function showMenu(ev: MouseEvent) { if (iAmModerator) { menu.push({ - type: 'divider', - }, { text: props.video.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive, icon: props.video.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation', danger: true, @@ -131,6 +218,17 @@ function showMenu(ev: MouseEvent) { }); } + if ($i?.id === props.video.userId) { + menu.push({ + type: 'divider', + }, { + type: 'link' as const, + text: i18n.ts._fileViewer.title, + icon: 'ti ti-info-circle', + to: `/my/drive/file/${props.video.id}`, + }); + } + menuShowing.value = true; os.popupMenu(menu, ev.currentTarget ?? ev.target, { align: 'right', @@ -177,6 +275,8 @@ const rangePercent = computed({ }, }); const volume = ref(.25); +const speed = ref(1); +const loop = ref(false); // TODO: ドライブファイルのフラグに置き換える const bufferedEnd = ref(0); const bufferedDataRatio = computed(() => { if (!videoEl.value) return 0; @@ -234,6 +334,16 @@ function toggleFullscreen() { } } +function togglePictureInPicture() { + if (videoEl.value) { + if (document.pictureInPictureElement) { + document.exitPictureInPicture(); + } else { + videoEl.value.requestPictureInPicture(); + } + } +} + function toggleMute() { if (volume.value === 0) { volume.value = .25; @@ -243,6 +353,7 @@ function toggleMute() { } let onceInit = false; +let mediaTickFrameId: number | null = null; let stopVideoElWatch: () => void; function init() { @@ -262,8 +373,12 @@ function init() { } elapsedTimeMs.value = videoEl.value.currentTime * 1000; + + if (videoEl.value.loop !== loop.value) { + loop.value = videoEl.value.loop; + } } - window.requestAnimationFrame(updateMediaTick); + mediaTickFrameId = window.requestAnimationFrame(updateMediaTick); } updateMediaTick(); @@ -307,6 +422,14 @@ watch(volume, (to) => { if (videoEl.value) videoEl.value.volume = to; }); +watch(speed, (to) => { + if (videoEl.value) videoEl.value.playbackRate = to; +}); + +watch(loop, (to) => { + if (videoEl.value) videoEl.value.loop = to; +}); + watch(hide, (to) => { if (to && isFullscreen.value) { document.exitFullscreen(); @@ -332,6 +455,10 @@ onDeactivated(() => { hide.value = (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore'); stopVideoElWatch(); onceInit = false; + if (mediaTickFrameId) { + window.cancelAnimationFrame(mediaTickFrameId); + mediaTickFrameId = null; + } }); </script> @@ -340,6 +467,10 @@ onDeactivated(() => { container-type: inline-size; position: relative; overflow: clip; + + &:focus { + outline: none; + } } .sensitive { @@ -403,7 +534,7 @@ onDeactivated(() => { font: inherit; color: inherit; cursor: pointer; - padding: 120px 0; + padding: 60px 0; display: flex; align-items: center; justify-content: center; @@ -427,7 +558,6 @@ onDeactivated(() => { display: block; height: 100%; width: 100%; - pointer-events: none; } .videoOverlayPlayButton { diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue index e6e8711f67..bfb49a416e 100644 --- a/packages/frontend/src/components/MkMention.vue +++ b/packages/frontend/src/components/MkMention.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }"> +<MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }" :behavior="navigationBehavior"> <img :class="$style.icon" :src="avatarUrl" alt=""> <span> <span>@{{ username }}</span> @@ -21,10 +21,12 @@ import { host as localHost } from '@/config.js'; import { $i } from '@/account.js'; import { defaultStore } from '@/store.js'; import { getStaticImageUrl } from '@/scripts/media-proxy.js'; +import { MkABehavior } from '@/components/global/MkA.vue'; const props = defineProps<{ username: string; host: string; + navigationBehavior?: MkABehavior; }>(); const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`; diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue index faed6416d0..d91239b9e2 100644 --- a/packages/frontend/src/components/MkMenu.vue +++ b/packages/frontend/src/components/MkMenu.vue @@ -42,9 +42,26 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </button> <button v-else-if="item.type === 'switch'" role="menuitemcheckbox" :tabindex="i" class="_button" :class="[$style.item, $style.switch, { [$style.switchDisabled]: item.disabled } ]" @click="switchItem(item)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> - <MkSwitchButton :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/> + <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> + <MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/> + <div :class="$style.item_content"> + <span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span> + <MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/> + </div> + </button> + <button v-else-if="item.type === 'radio'" class="_button" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="preferClick ? null : showRadioOptions(item, $event)" @click="!preferClick ? null : showRadioOptions(item, $event)"> + <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i> + <div :class="$style.item_content"> + <span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span> + <span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span> + </div> + </button> + <button v-else-if="item.type === 'radioOption'" :tabindex="i" class="_button" role="menuitem" :class="[$style.item, { [$style.radioActive]: item.active }]" @click="clicked(item.action, $event, false)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> + <div :class="$style.icon"> + <span :class="[$style.radio, { [$style.radioChecked]: item.active }]"></span> + </div> <div :class="$style.item_content"> - <span :class="[$style.item_content_text, $style.switchText]">{{ item.text }}</span> + <span :class="$style.item_content_text">{{ item.text }}</span> </div> </button> <button v-else-if="item.type === 'parent'" class="_button" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="preferClick ? null : showChildren(item, $event)" @click="!preferClick ? null : showChildren(item, $event)"> @@ -77,7 +94,7 @@ SPDX-License-Identifier: AGPL-3.0-only import { ComputedRef, computed, defineAsyncComponent, isRef, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'; import { focusPrev, focusNext } from '@/scripts/focus.js'; import MkSwitchButton from '@/components/MkSwitch.button.vue'; -import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuParent } from '@/types/menu.js'; +import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuRadio, MenuRadioOption, MenuParent } from '@/types/menu.js'; import * as os from '@/os.js'; import { i18n } from '@/i18n.js'; import { isTouchUsing } from '@/scripts/touch.js'; @@ -168,6 +185,31 @@ function onItemMouseLeave(item) { if (childCloseTimer) window.clearTimeout(childCloseTimer); } +async function showRadioOptions(item: MenuRadio, ev: MouseEvent) { + const children: MenuItem[] = Object.keys(item.options).map<MenuRadioOption>(key => { + const value = item.options[key]; + return { + type: 'radioOption', + text: key, + action: () => { + item.ref = value; + }, + active: computed(() => item.ref === value), + }; + }); + + if (props.asDrawer) { + os.popupMenu(children, ev.currentTarget ?? ev.target).finally(() => { + emit('close'); + }); + emit('hide'); + } else { + childTarget.value = (ev.currentTarget ?? ev.target) as HTMLElement; + childMenu.value = children; + childShowingItem.value = item; + } +} + async function showChildren(item: MenuParent, ev: MouseEvent) { const children: MenuItem[] = await (async () => { if (childrenCache.has(item)) { @@ -196,8 +238,10 @@ async function showChildren(item: MenuParent, ev: MouseEvent) { } } -function clicked(fn: MenuAction, ev: MouseEvent) { +function clicked(fn: MenuAction, ev: MouseEvent, doClose = true) { fn(ev); + + if (!doClose) return; close(true); } @@ -350,6 +394,15 @@ onBeforeUnmount(() => { } } + &.radioActive { + color: var(--accent) !important; + opacity: 1; + + &:before { + background-color: var(--accentedBg) !important; + } + } + &:not(:active):focus-visible { box-shadow: 0 0 0 2px var(--focus) inset; } @@ -417,11 +470,11 @@ onBeforeUnmount(() => { .switchButton { margin-left: -2px; + --height: 1.35em; } .switchText { margin-left: 8px; - margin-top: 2px; overflow: hidden; text-overflow: ellipsis; } @@ -461,4 +514,32 @@ onBeforeUnmount(() => { margin: 8px 0; border-top: solid 0.5px var(--divider); } + +.radio { + display: inline-block; + position: relative; + width: 1em; + height: 1em; + vertical-align: -.125em; + border-radius: 50%; + border: solid 2px var(--divider); + background-color: var(--panel); + + &.radioChecked { + border-color: var(--accent); + + &::after { + content: ""; + display: block; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 50%; + height: 50%; + border-radius: 50%; + background-color: var(--accent); + } + } +} </style> diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue index 40e67fb4e0..9e69ab2207 100644 --- a/packages/frontend/src/components/MkModal.vue +++ b/packages/frontend/src/components/MkModal.vue @@ -175,8 +175,8 @@ const align = () => { let left; let top; - const x = srcRect.left + (fixed.value ? 0 : window.pageXOffset); - const y = srcRect.top + (fixed.value ? 0 : window.pageYOffset); + const x = srcRect.left + (fixed.value ? 0 : window.scrollX); + const y = srcRect.top + (fixed.value ? 0 : window.scrollY); if (props.anchor.x === 'center') { left = x + (props.src.offsetWidth / 2) - (width / 2); @@ -220,24 +220,24 @@ const align = () => { } } else { // 画面から横にはみ出る場合 - if (left + width - window.pageXOffset > (window.innerWidth - SCROLLBAR_THICKNESS)) { - left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.pageXOffset - 1; + if (left + width - window.scrollX > (window.innerWidth - SCROLLBAR_THICKNESS)) { + left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.scrollX - 1; } - const underSpace = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - (top - window.pageYOffset); + const underSpace = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - (top - window.scrollY); const upperSpace = (srcRect.top - MARGIN); // 画面から縦にはみ出る場合 - if (top + height - window.pageYOffset > ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN)) { + if (top + height - window.scrollY > ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN)) { if (props.noOverlap && props.anchor.x === 'center') { if (underSpace >= (upperSpace / 3)) { maxHeight.value = underSpace; } else { maxHeight.value = upperSpace; - top = window.pageYOffset + ((upperSpace + MARGIN) - height); + top = window.scrollY + ((upperSpace + MARGIN) - height); } } else { - top = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - height + window.pageYOffset - 1; + top = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - height + window.scrollY - 1; } } else { maxHeight.value = underSpace; @@ -255,15 +255,15 @@ const align = () => { let transformOriginX = 'center'; let transformOriginY = 'center'; - if (top >= srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.pageYOffset)) { + if (top >= srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.scrollY)) { transformOriginY = 'top'; - } else if ((top + height) <= srcRect.top + (fixed.value ? 0 : window.pageYOffset)) { + } else if ((top + height) <= srcRect.top + (fixed.value ? 0 : window.scrollY)) { transformOriginY = 'bottom'; } - if (left >= srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.pageXOffset)) { + if (left >= srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.scrollX)) { transformOriginX = 'left'; - } else if ((left + width) <= srcRect.left + (fixed.value ? 0 : window.pageXOffset)) { + } else if ((left + width) <= srcRect.left + (fixed.value ? 0 : window.scrollX)) { transformOriginX = 'right'; } @@ -276,8 +276,11 @@ const align = () => { const onOpened = () => { emit('opened'); + // NOTE: Chromatic テストの際に undefined になる場合がある + if (content.value == null) return; + // モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する - const el = content.value!.children[0]; + const el = content.value.children[0]; el.addEventListener('mousedown', ev => { contentClicking = true; window.addEventListener('mouseup', ev => { diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 03a283cab3..22b1691a86 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -82,7 +82,9 @@ SPDX-License-Identifier: AGPL-3.0-only <MkMediaList :mediaList="appearNote.files"/> </div> <MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :class="$style.poll"/> - <MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview"/> + <div v-if="isEnabledUrlPreview"> + <MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview"/> + </div> <div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div> <button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click="collapsed = false"> <span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span> @@ -93,15 +95,15 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA> </div> - <MkReactionsViewer :note="appearNote" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction"> + <MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" :note="appearNote" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction"> <template #more> - <div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div> + <MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA> </template> </MkReactionsViewer> <footer :class="$style.footer"> <button :class="$style.footerButton" class="_button" @click="reply()"> <i class="ti ti-arrow-back-up"></i> - <p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ appearNote.repliesCount }}</p> + <p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p> </button> <button v-if="canRenote" @@ -111,17 +113,17 @@ SPDX-License-Identifier: AGPL-3.0-only @mousedown="renote()" > <i class="ti ti-repeat"></i> - <p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ appearNote.renoteCount }}</p> + <p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.renoteCount) }}</p> </button> <button v-else :class="$style.footerButton" class="_button" disabled> <i class="ti ti-ban"></i> </button> - <button v-if="appearNote.myReaction == null" ref="reactButton" :class="$style.footerButton" class="_button" @mousedown="react()"> - <i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i> + <button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()"> + <i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--eventReactionHeart);"></i> + <i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i> + <i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i> <i v-else class="ti ti-plus"></i> - </button> - <button v-if="appearNote.myReaction != null" ref="reactButton" :class="$style.footerButton" class="_button" @click="undoReact(appearNote)"> - <i class="ti ti-minus"></i> + <p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.reactionCount) }}</p> </button> <button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown="clip()"> <i class="ti ti-paperclip"></i> @@ -165,6 +167,7 @@ import MkNoteSub from '@/components/MkNoteSub.vue'; import MkNoteHeader from '@/components/MkNoteHeader.vue'; import MkNoteSimple from '@/components/MkNoteSimple.vue'; import MkReactionsViewer from '@/components/MkReactionsViewer.vue'; +import MkReactionsViewerDetails from '@/components/MkReactionsViewer.details.vue'; import MkMediaList from '@/components/MkMediaList.vue'; import MkCwButton from '@/components/MkCwButton.vue'; import MkPoll from '@/components/MkPoll.vue'; @@ -175,9 +178,10 @@ import { pleaseLogin } from '@/scripts/please-login.js'; import { focusPrev, focusNext } from '@/scripts/focus.js'; import { checkWordMute } from '@/scripts/check-word-mute.js'; import { userPage } from '@/filters/user.js'; +import number from '@/filters/number.js'; import * as os from '@/os.js'; import * as sound from '@/scripts/sound.js'; -import { misskeyApi } from '@/scripts/misskey-api.js'; +import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js'; import { defaultStore, noteViewInterruptors } from '@/store.js'; import { reactionPicker } from '@/scripts/reaction-picker.js'; import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js'; @@ -193,6 +197,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 { isEnabledUrlPreview } from '@/instance.js'; const props = withDefaults(defineProps<{ note: Misskey.entities.Note; @@ -237,6 +242,7 @@ if (noteViewInterruptors.length > 0) { const isRenote = ( note.value.renote != null && + note.value.reply == null && note.value.text == null && note.value.cw == null && note.value.fileIds && note.value.fileIds.length === 0 && @@ -267,7 +273,7 @@ const renoteCollapsed = ref( defaultStore.state.collapseRenotes && isRenote && ( ($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131 (appearNote.value.myReaction != null) - ) + ), ); /* Overload FunctionにLintが対応していないのでコメントアウト @@ -336,6 +342,28 @@ if (!props.mock) { targetElement: renoteButton.value, }, {}, 'closed'); }); + + if (appearNote.value.reactionAcceptance === 'likeOnly') { + useTooltip(reactButton, async (showing) => { + const reactions = await misskeyApiGet('notes/reactions', { + noteId: appearNote.value.id, + limit: 10, + _cacheKey_: appearNote.value.reactionCount, + }); + + const users = reactions.map(x => x.user); + + if (users.length < 1) return; + + os.popup(MkReactionsViewerDetails, { + showing, + reaction: '❤️', + users, + count: appearNote.value.reactionCount, + targetElement: reactButton.value!, + }, {}, 'closed'); + }); + } } function renote(viaKeyboard = false) { @@ -420,6 +448,14 @@ function undoReact(targetNote: Misskey.entities.Note): void { }); } +function toggleReact() { + if (appearNote.value.myReaction == null) { + react(); + } else { + undoReact(appearNote.value); + } +} + function onContextmenu(ev: MouseEvent): void { if (props.mock) { return; @@ -985,9 +1021,8 @@ function emitUpdReaction(emoji: string, delta: number) { .reactionOmitted { display: inline-block; - height: 32px; - margin: 2px; - padding: 0 6px; + margin-left: 8px; opacity: .8; + font-size: 95%; } </style> diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index e3ef14120f..ed1c0a9e96 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -68,7 +68,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div :class="$style.noteContent"> <p v-if="appearNote.cw != null" :class="$style.cw"> <Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :nyaize="'respect'"/> - <MkCwButton v-model="showContent" :text="appearNote.text" :files="appearNote.files" :poll="appearNote.poll"/> + <MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll"/> </p> <div v-show="appearNote.cw == null || showContent"> <span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span> @@ -95,7 +95,9 @@ SPDX-License-Identifier: AGPL-3.0-only <MkMediaList :mediaList="appearNote.files"/> </div> <MkPoll v-if="appearNote.poll" ref="pollViewer" :noteId="appearNote.id" :poll="appearNote.poll" :class="$style.poll"/> - <MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" style="margin-top: 6px;"/> + <div v-if="isEnabledUrlPreview"> + <MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" style="margin-top: 6px;"/> + </div> <div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div> </div> <MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA> @@ -106,10 +108,10 @@ SPDX-License-Identifier: AGPL-3.0-only <MkTime :time="appearNote.createdAt" mode="detail" colored/> </MkA> </div> - <MkReactionsViewer ref="reactionsViewer" :note="appearNote"/> + <MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" ref="reactionsViewer" :note="appearNote"/> <button class="_button" :class="$style.noteFooterButton" @click="reply()"> <i class="ti ti-arrow-back-up"></i> - <p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ appearNote.repliesCount }}</p> + <p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.repliesCount) }}</p> </button> <button v-if="canRenote" @@ -119,17 +121,17 @@ SPDX-License-Identifier: AGPL-3.0-only @mousedown="renote()" > <i class="ti ti-repeat"></i> - <p v-if="appearNote.renoteCount > 0" :class="$style.noteFooterButtonCount">{{ appearNote.renoteCount }}</p> + <p v-if="appearNote.renoteCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.renoteCount) }}</p> </button> <button v-else class="_button" :class="$style.noteFooterButton" disabled> <i class="ti ti-ban"></i> </button> - <button v-if="appearNote.myReaction == null" ref="reactButton" :class="$style.noteFooterButton" class="_button" @mousedown="react()"> - <i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i> + <button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()"> + <i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--eventReactionHeart);"></i> + <i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i> + <i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i> <i v-else class="ti ti-plus"></i> - </button> - <button v-if="appearNote.myReaction != null" ref="reactButton" class="_button" :class="[$style.noteFooterButton, $style.reacted]" @click="undoReact(appearNote)"> - <i class="ti ti-minus"></i> + <p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.reactionCount) }}</p> </button> <button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" class="_button" :class="$style.noteFooterButton" @mousedown="clip()"> <i class="ti ti-paperclip"></i> @@ -199,6 +201,7 @@ import * as Misskey from 'misskey-js'; import MkNoteSub from '@/components/MkNoteSub.vue'; import MkNoteSimple from '@/components/MkNoteSimple.vue'; import MkReactionsViewer from '@/components/MkReactionsViewer.vue'; +import MkReactionsViewerDetails from '@/components/MkReactionsViewer.details.vue'; import MkMediaList from '@/components/MkMediaList.vue'; import MkCwButton from '@/components/MkCwButton.vue'; import MkPoll from '@/components/MkPoll.vue'; @@ -209,8 +212,9 @@ import { pleaseLogin } from '@/scripts/please-login.js'; import { checkWordMute } from '@/scripts/check-word-mute.js'; import { userPage } from '@/filters/user.js'; import { notePage } from '@/filters/note.js'; +import number from '@/filters/number.js'; import * as os from '@/os.js'; -import { misskeyApi } from '@/scripts/misskey-api.js'; +import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js'; import * as sound from '@/scripts/sound.js'; import { defaultStore, noteViewInterruptors } from '@/store.js'; import { reactionPicker } from '@/scripts/reaction-picker.js'; @@ -228,10 +232,14 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue'; import MkPagination, { type Paging } from '@/components/MkPagination.vue'; import MkReactionIcon from '@/components/MkReactionIcon.vue'; import MkButton from '@/components/MkButton.vue'; +import { isEnabledUrlPreview } from '@/instance.js'; -const props = defineProps<{ +const props = withDefaults(defineProps<{ note: Misskey.entities.Note; -}>(); + initialTab: string; +}>(), { + initialTab: 'replies', +}); const inChannel = inject('inChannel', null); @@ -258,7 +266,9 @@ if (noteViewInterruptors.length > 0) { const isRenote = ( note.value.renote != null && + note.value.reply == null && note.value.text == null && + note.value.cw == null && note.value.fileIds && note.value.fileIds.length === 0 && note.value.poll == null ); @@ -299,7 +309,7 @@ provide('react', (reaction: string) => { }); }); -const tab = ref('replies'); +const tab = ref(props.initialTab); const reactionTabType = ref<string | null>(null); const renotesPagination = computed<Paging>(() => ({ @@ -344,6 +354,28 @@ useTooltip(renoteButton, async (showing) => { }, {}, 'closed'); }); +if (appearNote.value.reactionAcceptance === 'likeOnly') { + useTooltip(reactButton, async (showing) => { + const reactions = await misskeyApiGet('notes/reactions', { + noteId: appearNote.value.id, + limit: 10, + _cacheKey_: appearNote.value.reactionCount, + }); + + const users = reactions.map(x => x.user); + + if (users.length < 1) return; + + os.popup(MkReactionsViewerDetails, { + showing, + reaction: '❤️', + users, + count: appearNote.value.reactionCount, + targetElement: reactButton.value!, + }, {}, 'closed'); + }); +} + function renote(viaKeyboard = false) { pleaseLogin(); showMovedDialog(); @@ -401,14 +433,22 @@ function react(viaKeyboard = false): void { } } -function undoReact(note): void { - const oldReaction = note.myReaction; +function undoReact(targetNote: Misskey.entities.Note): void { + const oldReaction = targetNote.myReaction; if (!oldReaction) return; misskeyApi('notes/reactions/delete', { - noteId: note.id, + noteId: targetNote.id, }); } +function toggleReact() { + if (appearNote.value.myReaction == null) { + react(); + } else { + undoReact(appearNote.value); + } +} + function onContextmenu(ev: MouseEvent): void { const isLink = (el: HTMLElement): boolean => { if (el.tagName === 'A') return true; diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue index 322b9400be..73cd7cd5b3 100644 --- a/packages/frontend/src/components/MkNotification.vue +++ b/packages/frontend/src/components/MkNotification.vue @@ -8,6 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div :class="$style.head"> <MkAvatar v-if="['pollEnded', 'note'].includes(notification.type) && notification.note" :class="$style.icon" :user="notification.note.user" link preview/> <MkAvatar v-else-if="['roleAssigned', 'achievementEarned'].includes(notification.type)" :class="$style.icon" :user="$i" link preview/> + <div v-else-if="notification.type === 'reaction:grouped' && notification.note.reactionAcceptance === 'likeOnly'" :class="[$style.icon, $style.icon_reactionGroupHeart]"><i class="ti ti-heart" style="line-height: 1;"></i></div> <div v-else-if="notification.type === 'reaction:grouped'" :class="[$style.icon, $style.icon_reactionGroup]"><i class="ti ti-plus" style="line-height: 1;"></i></div> <div v-else-if="notification.type === 'renote:grouped'" :class="[$style.icon, $style.icon_renoteGroup]"><i class="ti ti-repeat" style="line-height: 1;"></i></div> <img v-else-if="notification.type === 'test'" :class="$style.icon" :src="infoImageUrl"/> @@ -57,7 +58,8 @@ SPDX-License-Identifier: AGPL-3.0-only <span v-else-if="notification.type === 'achievementEarned'">{{ i18n.ts._notification.achievementEarned }}</span> <span v-else-if="notification.type === 'test'">{{ i18n.ts._notification.testNotification }}</span> <MkA v-else-if="notification.type === 'follow' || notification.type === 'mention' || notification.type === 'reply' || notification.type === 'renote' || notification.type === 'quote' || notification.type === 'reaction' || notification.type === 'receiveFollowRequest' || notification.type === 'followRequestAccepted'" v-user-preview="notification.user.id" :class="$style.headerName" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA> - <span v-else-if="notification.type === 'reaction:grouped'">{{ i18n.tsx._notification.reactedBySomeUsers({ n: notification.reactions.length }) }}</span> + <span v-else-if="notification.type === 'reaction:grouped' && notification.note.reactionAcceptance === 'likeOnly'">{{ i18n.tsx._notification.likedBySomeUsers({ n: getActualReactedUsersCount(notification) }) }}</span> + <span v-else-if="notification.type === 'reaction:grouped'">{{ i18n.tsx._notification.reactedBySomeUsers({ n: getActualReactedUsersCount(notification) }) }}</span> <span v-else-if="notification.type === 'renote:grouped'">{{ i18n.tsx._notification.renotedBySomeUsers({ n: notification.users.length }) }}</span> <span v-else-if="notification.type === 'app'">{{ notification.header }}</span> <MkTime v-if="withTime" :time="notification.createdAt" :class="$style.headerTime"/> @@ -70,7 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only </MkA> <MkA v-else-if="notification.type === 'renote' || notification.type === 'renote:grouped'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)"> <i class="ti ti-quote" :class="$style.quote"></i> - <Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="true" :author="notification.note.renote.user"/> + <Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="true" :author="notification.note.renote?.user"/> <i class="ti ti-quote" :class="$style.quote"></i> </MkA> <MkA v-else-if="notification.type === 'reply'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> @@ -172,6 +174,11 @@ const rejectFollowRequest = () => { followRequestDone.value = true; misskeyApi('following/requests/reject', { userId: props.notification.user.id }); }; + +function getActualReactedUsersCount(notification: Misskey.entities.Notification) { + if (notification.type !== 'reaction:grouped') return 0; + return new Set(notification.reactions.map((reaction) => reaction.user.id)).size; +} </script> <style lang="scss" module> @@ -201,6 +208,7 @@ const rejectFollowRequest = () => { } .icon_reactionGroup, +.icon_reactionGroupHeart, .icon_renoteGroup { display: grid; align-items: center; @@ -213,11 +221,15 @@ const rejectFollowRequest = () => { } .icon_reactionGroup { - background: #e99a0b; + background: var(--eventReaction); +} + +.icon_reactionGroupHeart { + background: var(--eventReactionHeart); } .icon_renoteGroup { - background: #36d298; + background: var(--eventRenote); } .icon_app { @@ -246,49 +258,49 @@ const rejectFollowRequest = () => { .t_follow, .t_followRequestAccepted, .t_receiveFollowRequest { padding: 3px; - background: #36aed2; + background: var(--eventFollow); pointer-events: none; } .t_renote { padding: 3px; - background: #36d298; + background: var(--eventRenote); pointer-events: none; } .t_quote { padding: 3px; - background: #36d298; + background: var(--eventRenote); pointer-events: none; } .t_reply { padding: 3px; - background: #007aff; + background: var(--eventReply); pointer-events: none; } .t_mention { padding: 3px; - background: #88a6b7; + background: var(--eventOther); pointer-events: none; } .t_pollEnded { padding: 3px; - background: #88a6b7; + background: var(--eventOther); pointer-events: none; } .t_achievementEarned { padding: 3px; - background: #cb9a11; + background: var(--eventAchievement); pointer-events: none; } .t_roleAssigned { padding: 3px; - background: #88a6b7; + background: var(--eventOther); pointer-events: none; } diff --git a/packages/frontend/src/components/MkPasswordDialog.vue b/packages/frontend/src/components/MkPasswordDialog.vue index c49526d8e2..e749725fea 100644 --- a/packages/frontend/src/components/MkPasswordDialog.vue +++ b/packages/frontend/src/components/MkPasswordDialog.vue @@ -19,18 +19,21 @@ SPDX-License-Identifier: AGPL-3.0-only <div style="margin-top: 16px;">{{ i18n.ts.authenticationRequiredToContinue }}</div> </div> - <div class="_gaps"> - <MkInput ref="passwordInput" v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password webauthn" :withPasswordToggle="true"> - <template #prefix><i class="ti ti-password"></i></template> - </MkInput> + <form @submit.prevent="done"> + <div class="_gaps"> + <MkInput ref="passwordInput" v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password webauthn" required :withPasswordToggle="true"> + <template #prefix><i class="ti ti-password"></i></template> + </MkInput> - <MkInput v-if="$i.twoFactorEnabled" v-model="token" type="text" pattern="^([0-9]{6}|[A-Z0-9]{32})$" autocomplete="one-time-code" :spellcheck="false"> - <template #label>{{ i18n.ts.token }} ({{ i18n.ts['2fa'] }})</template> - <template #prefix><i class="ti ti-123"></i></template> - </MkInput> + <MkInput v-if="$i.twoFactorEnabled" v-model="token" type="text" :pattern="isBackupCode ? '^[A-Z0-9]{32}$' :'^[0-9]{6}$'" autocomplete="one-time-code" required :spellcheck="false" :inputmode="isBackupCode ? undefined : 'numeric'"> + <template #label>{{ i18n.ts.token }} ({{ i18n.ts['2fa'] }})</template> + <template #prefix><i v-if="isBackupCode" class="ti ti-key"></i><i v-else class="ti ti-123"></i></template> + <template #caption><button class="_textButton" type="button" @click="isBackupCode = !isBackupCode">{{ isBackupCode ? i18n.ts.useTotp : i18n.ts.useBackupCode }}</button></template> + </MkInput> - <MkButton :disabled="(password ?? '') == '' || ($i.twoFactorEnabled && (token ?? '') == '')" primary rounded style="margin: 0 auto;" @click="done"><i class="ti ti-lock-open"></i> {{ i18n.ts.continue }}</MkButton> - </div> + <MkButton :disabled="(password ?? '') == '' || ($i.twoFactorEnabled && (token ?? '') == '')" type="submit" primary rounded style="margin: 0 auto;"><i class="ti ti-lock-open"></i> {{ i18n.ts.continue }}</MkButton> + </div> + </form> </MkSpacer> </MkModalWindow> </template> @@ -54,6 +57,7 @@ const emit = defineEmits<{ const dialog = shallowRef<InstanceType<typeof MkModalWindow>>(); const passwordInput = shallowRef<InstanceType<typeof MkInput>>(); const password = ref(''); +const isBackupCode = ref(false); const token = ref<string | null>(null); function onClose() { @@ -61,7 +65,7 @@ function onClose() { if (dialog.value) dialog.value.close(); } -function done(res) { +function done() { emit('done', { password: password.value, token: token.value }); if (dialog.value) dialog.value.close(); } diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index e03faeaf55..1df9007681 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/packages/frontend/src/components/MkPostForm.vue @@ -156,6 +156,7 @@ const props = withDefaults(defineProps<{ initialVisibleUsers: () => [], autofocus: true, mock: false, + initialLocalOnly: undefined, }); provide('mock', props.mock); @@ -185,11 +186,11 @@ watch(showPreview, () => defaultStore.set('showPreview', showPreview.value)); const showAddMfmFunction = ref(defaultStore.state.enableQuickAddMfmFunction); watch(showAddMfmFunction, () => defaultStore.set('enableQuickAddMfmFunction', showAddMfmFunction.value)); const cw = ref<string | null>(props.initialCw ?? null); -const localOnly = ref<boolean>(props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly); -const visibility = ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility) as typeof Misskey.noteVisibilities[number]); +const localOnly = ref(props.initialLocalOnly ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly)); +const visibility = ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility)); const visibleUsers = ref<Misskey.entities.UserDetailed[]>([]); if (props.initialVisibleUsers) { - props.initialVisibleUsers.forEach(pushVisibleUser); + props.initialVisibleUsers.forEach(u => pushVisibleUser(u)); } const reactionAcceptance = ref(defaultStore.state.reactionAcceptance); const autocomplete = ref(null); @@ -253,7 +254,13 @@ const maxTextLength = computed((): number => { const canPost = computed((): boolean => { return !props.mock && !posting.value && !posted.value && - (1 <= textLength.value || 1 <= files.value.length || !!poll.value || !!props.renote) && + ( + 1 <= textLength.value || + 1 <= files.value.length || + poll.value != null || + props.renote != null || + (props.reply != null && quoteId.value != null) + ) && (textLength.value <= maxTextLength.value) && (!poll.value || poll.value.choices.length >= 2); }); @@ -329,7 +336,7 @@ if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visib misskeyApi('users/show', { userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply?.userId), }).then(users => { - users.forEach(pushVisibleUser); + users.forEach(u => pushVisibleUser(u)); }); } @@ -382,7 +389,7 @@ function addMissingMention() { for (const x of extractMentions(ast)) { if (!visibleUsers.value.some(u => (u.username === x.username) && (u.host === x.host))) { misskeyApi('users/show', { username: x.username, host: x.host }).then(user => { - visibleUsers.value.push(user); + pushVisibleUser(user); }); } } @@ -512,6 +519,9 @@ async function toggleLocalOnly() { } localOnly.value = !localOnly.value; + if (defaultStore.state.rememberNoteVisibility) { + defaultStore.set('localOnly', localOnly.value); + } } async function toggleReactionAcceptance() { @@ -602,6 +612,23 @@ async function onPaste(ev: ClipboardEvent) { quoteId.value = paste.substring(url.length).match(/^\/notes\/(.+?)\/?$/)?.[1] ?? null; }); } + + if (paste.length > 1000) { + ev.preventDefault(); + os.confirm({ + type: 'info', + text: i18n.ts.attachAsFileQuestion, + }).then(({ canceled }) => { + if (canceled) { + insertTextAtCursor(textareaEl.value, paste); + return; + } + + 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`); + }); + } } function onDragover(ev) { @@ -673,6 +700,7 @@ function saveDraft() { localOnly: localOnly.value, files: files.value, poll: poll.value, + visibleUserIds: visibility.value === 'specified' ? visibleUsers.value.map(x => x.id) : undefined, }, }; @@ -954,6 +982,11 @@ onMounted(() => { if (draft.data.poll) { poll.value = draft.data.poll; } + if (draft.data.visibleUserIds) { + misskeyApi('users/show', { userIds: draft.data.visibleUserIds }).then(users => { + users.forEach(u => pushVisibleUser(u)); + }); + } } } diff --git a/packages/frontend/src/components/MkPostFormDialog.vue b/packages/frontend/src/components/MkPostFormDialog.vue index 6331dfed29..ac37cb31bc 100644 --- a/packages/frontend/src/components/MkPostFormDialog.vue +++ b/packages/frontend/src/components/MkPostFormDialog.vue @@ -15,7 +15,7 @@ import * as Misskey from 'misskey-js'; import MkModal from '@/components/MkModal.vue'; import MkPostForm from '@/components/MkPostForm.vue'; -const props = defineProps<{ +const props = withDefaults(defineProps<{ reply?: Misskey.entities.Note; renote?: Misskey.entities.Note; channel?: any; // TODO @@ -31,7 +31,9 @@ const props = defineProps<{ instant?: boolean; fixed?: boolean; autofocus?: boolean; -}>(); +}>(), { + initialLocalOnly: undefined, +}); const emit = defineEmits<{ (ev: 'closed'): void; diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue index 1bd37d842b..63b202f9f3 100644 --- a/packages/frontend/src/components/MkReactionsViewer.vue +++ b/packages/frontend/src/components/MkReactionsViewer.vue @@ -100,6 +100,9 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe } .root { + display: flex; + flex-wrap: wrap; + align-items: center; margin: 4px -2px 0 -2px; &:empty { diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue index 852af01b5a..970aff825d 100644 --- a/packages/frontend/src/components/MkSignin.vue +++ b/packages/frontend/src/components/MkSignin.vue @@ -31,15 +31,15 @@ SPDX-License-Identifier: AGPL-3.0-only <div v-if="user && user.securityKeys" class="or-hr"> <p class="or-msg">{{ i18n.ts.or }}</p> </div> - <div class="twofa-group totp-group"> - <p style="margin-bottom:0;">{{ i18n.ts['2fa'] }}</p> + <div class="twofa-group totp-group _gaps"> <MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" autocomplete="current-password" :withPasswordToggle="true" required> <template #label>{{ i18n.ts.password }}</template> <template #prefix><i class="ti ti-lock"></i></template> </MkInput> - <MkInput v-model="token" type="text" pattern="^([0-9]{6}|[A-Z0-9]{32})$" autocomplete="one-time-code" :spellcheck="false" required> - <template #label>{{ i18n.ts.token }}</template> - <template #prefix><i class="ti ti-123"></i></template> + <MkInput v-model="token" type="text" :pattern="isBackupCode ? '^[A-Z0-9]{32}$' :'^[0-9]{6}$'" autocomplete="one-time-code" required :spellcheck="false" :inputmode="isBackupCode ? undefined : 'numeric'"> + <template #label>{{ i18n.ts.token }} ({{ i18n.ts['2fa'] }})</template> + <template #prefix><i v-if="isBackupCode" class="ti ti-key"></i><i v-else class="ti ti-123"></i></template> + <template #caption><button class="_textButton" type="button" @click="isBackupCode = !isBackupCode">{{ isBackupCode ? i18n.ts.useTotp : i18n.ts.useBackupCode }}</button></template> </MkInput> <MkButton type="submit" :disabled="signing" large primary rounded style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton> </div> @@ -70,6 +70,7 @@ const password = ref(''); const token = ref(''); const host = ref(toUnicode(configHost)); const totpLogin = ref(false); +const isBackupCode = ref(false); const queryingKey = ref(false); const credentialRequest = ref<CredentialRequestOptions | null>(null); diff --git a/packages/frontend/src/components/MkSignupDialog.rules.stories.impl.ts b/packages/frontend/src/components/MkSignupDialog.rules.stories.impl.ts index fcd1ffde3e..9df3ec0c30 100644 --- a/packages/frontend/src/components/MkSignupDialog.rules.stories.impl.ts +++ b/packages/frontend/src/components/MkSignupDialog.rules.stories.impl.ts @@ -51,13 +51,16 @@ export const Empty = { expect(buttons.at(-1)).toBeEnabled(); }, args: { + // @ts-expect-error serverRules is for test serverRules: [], tosUrl: null, }, decorators: [ (_, context) => ({ setup() { + // @ts-expect-error serverRules is for test instance.serverRules = context.args.serverRules; + // @ts-expect-error tosUrl is for test instance.tosUrl = context.args.tosUrl; onBeforeUnmount(() => { // FIXME: 呼び出されない @@ -76,6 +79,7 @@ export const ServerRulesOnly = { ...Empty, args: { ...Empty.args, + // @ts-expect-error serverRules is for test serverRules: [ 'ルール', ], @@ -85,6 +89,7 @@ export const TOSOnly = { ...Empty, args: { ...Empty.args, + // @ts-expect-error tosUrl is for test tosUrl: 'https://example.com/tos', }, } satisfies StoryObj<typeof MkSignupServerRules>; @@ -92,6 +97,7 @@ export const ServerRulesAndTOS = { ...Empty, args: { ...Empty.args, + // @ts-expect-error serverRules is for test serverRules: ServerRulesOnly.args.serverRules, tosUrl: TOSOnly.args.tosUrl, }, diff --git a/packages/frontend/src/components/MkSwitch.button.vue b/packages/frontend/src/components/MkSwitch.button.vue index c95c933663..226908e221 100644 --- a/packages/frontend/src/components/MkSwitch.button.vue +++ b/packages/frontend/src/components/MkSwitch.button.vue @@ -41,13 +41,15 @@ const toggle = () => { <style lang="scss" module> .button { + --height: 21px; + position: relative; display: inline-flex; flex-shrink: 0; margin: 0; box-sizing: border-box; - width: 32px; - height: 23px; + width: calc(var(--height) * 1.6); + height: calc(var(--height) + 2px); // 枠線 outline: none; background: var(--switchOffBg); background-clip: content-box; @@ -69,9 +71,10 @@ const toggle = () => { .knob { position: absolute; + box-sizing: border-box; top: 3px; - width: 15px; - height: 15px; + width: calc(var(--height) - 6px); + height: calc(var(--height) - 6px); border-radius: 999px; transition: all 0.2s ease; @@ -82,7 +85,7 @@ const toggle = () => { } .knobChecked { - left: 12px; + left: calc(calc(100% - var(--height)) + 3px); background: var(--switchOnFg); } </style> diff --git a/packages/frontend/src/components/MkTutorialDialog.Note.vue b/packages/frontend/src/components/MkTutorialDialog.Note.vue index f03a83293b..2a26d22dc2 100644 --- a/packages/frontend/src/components/MkTutorialDialog.Note.vue +++ b/packages/frontend/src/components/MkTutorialDialog.Note.vue @@ -63,6 +63,7 @@ const exampleNote = reactive<Misskey.entities.Note>({ reactionAcceptance: null, renoteCount: 0, repliesCount: 1, + reactionCount: 0, reactions: {}, reactionEmojis: {}, fileIds: [], diff --git a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue index 2b8c586dac..e1d88b5e5c 100644 --- a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue +++ b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue @@ -68,6 +68,7 @@ const exampleCWNote = reactive<Misskey.entities.Note>({ reactionAcceptance: null, renoteCount: 0, repliesCount: 1, + reactionCount: 0, reactions: {}, reactionEmojis: {}, fileIds: [], diff --git a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue index b17ec66461..7ae48dcd15 100644 --- a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue +++ b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue @@ -58,6 +58,7 @@ const exampleNote = reactive<Misskey.entities.Note>({ reactionAcceptance: null, renoteCount: 0, repliesCount: 1, + reactionCount: 0, reactions: {}, reactionEmojis: {}, fileIds: ['0000000002'], diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue index efc58b7e29..6954f1f6ff 100644 --- a/packages/frontend/src/components/MkUrlPreview.vue +++ b/packages/frontend/src/components/MkUrlPreview.vue @@ -152,15 +152,16 @@ requestUrl.hash = ''; window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${versatileLang}`) .then(res => { if (!res.ok) { - fetching.value = false; - unknownUrl.value = true; - return; + if (_DEV_) { + console.warn(`[HTTP${res.status}] Failed to fetch url preview`); + } + return null; } return res.json(); }) - .then((info: SummalyResult) => { - if (info.url == null) { + .then((info: SummalyResult | null) => { + if (!info || info.url == null) { fetching.value = false; unknownUrl.value = true; return; diff --git a/packages/frontend/src/components/MkUrlPreviewPopup.vue b/packages/frontend/src/components/MkUrlPreviewPopup.vue index cf75064be7..e972973dba 100644 --- a/packages/frontend/src/components/MkUrlPreviewPopup.vue +++ b/packages/frontend/src/components/MkUrlPreviewPopup.vue @@ -33,8 +33,8 @@ const left = ref(0); onMounted(() => { const rect = props.source.getBoundingClientRect(); - const x = Math.max((rect.left + (props.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset; - const y = rect.top + props.source.offsetHeight + window.pageYOffset; + const x = Math.max((rect.left + (props.source.offsetWidth / 2)) - (300 / 2), 6) + window.scrollX; + const y = rect.top + props.source.offsetHeight + window.scrollY; top.value = y; left.value = x; diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue index fb1a8f4fdc..41b27a1afb 100644 --- a/packages/frontend/src/components/MkUserPopup.vue +++ b/packages/frontend/src/components/MkUserPopup.vue @@ -106,8 +106,8 @@ onMounted(() => { } const rect = props.source.getBoundingClientRect(); - const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.pageXOffset; - const y = rect.top + props.source.offsetHeight + window.pageYOffset; + const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.scrollX; + const y = rect.top + props.source.offsetHeight + window.scrollY; top.value = y; left.value = x; diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue index be80baa774..f7963f9938 100644 --- a/packages/frontend/src/components/MkVisitorDashboard.vue +++ b/packages/frontend/src/components/MkVisitorDashboard.vue @@ -4,19 +4,19 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div v-if="meta" :class="$style.root"> +<div v-if="instance" :class="$style.root"> <div :class="[$style.main, $style.panel]"> <img :src="instance.iconUrl || '/favicon.ico'" alt="" :class="$style.mainIcon"/> <button class="_button _acrylic" :class="$style.mainMenu" @click="showMenu"><i class="ti ti-dots"></i></button> <div :class="$style.mainFg"> <h1 :class="$style.mainTitle"> <!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に --> - <!-- <img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span> --> + <!-- <img class="logo" v-if="instance.logoImageUrl" :src="instance.logoImageUrl"><span v-else class="text">{{ instanceName }}</span> --> <span>{{ instanceName }}</span> </h1> <div :class="$style.mainAbout"> <!-- eslint-disable-next-line vue/no-v-html --> - <div v-html="meta.description || i18n.ts.headlineMisskey"></div> + <div v-html="instance.description || i18n.ts.headlineMisskey"></div> </div> <div v-if="instance.disableRegistration" :class="$style.mainWarn"> <MkInfo warn>{{ i18n.ts.invitationRequiredToRegister }}</MkInfo> @@ -65,14 +65,10 @@ import { i18n } from '@/i18n.js'; import { instance } from '@/instance.js'; import MkNumber from '@/components/MkNumber.vue'; import XActiveUsersChart from '@/components/MkVisitorDashboard.ActiveUsersChart.vue'; +import { openInstanceMenu } from '@/ui/_common_/common'; -const meta = ref<Misskey.entities.MetaResponse | null>(null); const stats = ref<Misskey.entities.StatsResponse | null>(null); -misskeyApi('meta', { detail: true }).then(_meta => { - meta.value = _meta; -}); - misskeyApi('stats', {}).then((res) => { stats.value = res; }); @@ -90,43 +86,7 @@ function signup() { } function showMenu(ev) { - os.popupMenu([{ - text: i18n.ts.instanceInfo, - icon: 'ti ti-info-circle', - action: () => { - os.pageWindow('/about'); - }, - }, { - text: i18n.ts.aboutMisskey, - icon: 'ti ti-info-circle', - action: () => { - os.pageWindow('/about-misskey'); - }, - }, { type: 'divider' }, (instance.impressumUrl) ? { - text: i18n.ts.impressum, - icon: 'ti ti-file-invoice', - action: () => { - window.open(instance.impressumUrl!, '_blank', 'noopener'); - }, - } : undefined, (instance.tosUrl) ? { - text: i18n.ts.termsOfService, - icon: 'ti ti-notebook', - action: () => { - window.open(instance.tosUrl!, '_blank', 'noopener'); - }, - } : undefined, (instance.privacyPolicyUrl) ? { - text: i18n.ts.privacyPolicy, - icon: 'ti ti-shield-lock', - action: () => { - window.open(instance.privacyPolicyUrl!, '_blank', 'noopener'); - }, - } : undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl) ? undefined : { type: 'divider' }, { - text: i18n.ts.help, - icon: 'ti ti-help-circle', - action: () => { - window.open('https://misskey-hub.net/docs/for-users/', '_blank', 'noopener'); - }, - }], ev.currentTarget ?? ev.target); + openInstanceMenu(ev); } function exploreOtherServers() { diff --git a/packages/frontend/src/components/global/I18n.vue b/packages/frontend/src/components/global/I18n.vue index 162aa2bcf8..6b7723e6ac 100644 --- a/packages/frontend/src/components/global/I18n.vue +++ b/packages/frontend/src/components/global/I18n.vue @@ -1,3 +1,8 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + <template> <render/> </template> diff --git a/packages/frontend/src/components/global/MkA.vue b/packages/frontend/src/components/global/MkA.vue index 61d7ac17d9..d1e9113c48 100644 --- a/packages/frontend/src/components/global/MkA.vue +++ b/packages/frontend/src/components/global/MkA.vue @@ -4,13 +4,17 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<a :href="to" :class="active ? activeClass : null" @click.prevent="nav" @contextmenu.prevent.stop="onContextmenu"> +<a ref="el" :href="to" :class="active ? activeClass : null" @click.prevent="nav" @contextmenu.prevent.stop="onContextmenu"> <slot></slot> </a> </template> +<script lang="ts"> +export type MkABehavior = 'window' | 'browser' | null; +</script> + <script lang="ts" setup> -import { computed } from 'vue'; +import { computed, inject, shallowRef } from 'vue'; import * as os from '@/os.js'; import copyToClipboard from '@/scripts/copy-to-clipboard.js'; import { url } from '@/config.js'; @@ -20,12 +24,18 @@ import { useRouter } from '@/router/supplier.js'; const props = withDefaults(defineProps<{ to: string; activeClass?: null | string; - behavior?: null | 'window' | 'browser'; + behavior?: MkABehavior; }>(), { activeClass: null, behavior: null, }); +const behavior = props.behavior ?? inject<MkABehavior>('linkNavigationBehavior', null); + +const el = shallowRef<HTMLElement>(); + +defineExpose({ $el: el }); + const router = useRouter(); const active = computed(() => { @@ -76,15 +86,13 @@ function openWindow() { } function nav(ev: MouseEvent) { - if (props.behavior === 'browser') { + if (behavior === 'browser') { location.href = props.to; return; } - if (props.behavior) { - if (props.behavior === 'window') { - return openWindow(); - } + if (behavior === 'window') { + return openWindow(); } if (ev.shiftKey) { diff --git a/packages/frontend/src/components/global/MkAd.stories.impl.ts b/packages/frontend/src/components/global/MkAd.stories.impl.ts index f6cdc2bf23..aef26ab92d 100644 --- a/packages/frontend/src/components/global/MkAd.stories.impl.ts +++ b/packages/frontend/src/components/global/MkAd.stories.impl.ts @@ -4,11 +4,17 @@ */ /* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { expect, userEvent, waitFor, within } from '@storybook/test'; import { StoryObj } from '@storybook/vue3'; import MkAd from './MkAd.vue'; +import { i18n } from '@/i18n.js'; let lock: Promise<undefined> | undefined; +function sleep(ms: number) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + const common = { render(args) { return { @@ -30,7 +36,6 @@ const common = { template: '<MkAd v-bind="props" />', }; }, - /* FIXME: disabled because it still didn’t pass after applying #11267 async play({ canvasElement, args }) { if (lock) { console.warn('This test is unexpectedly running twice in parallel, fix it!'); @@ -42,9 +47,11 @@ const common = { lock = new Promise(r => resolve = r); try { + // NOTE: sleep しないと何故か落ちる + await sleep(100); const canvas = within(canvasElement); const a = canvas.getByRole<HTMLAnchorElement>('link'); - await expect(a.href).toMatch(/^https?:\/\/.*#test$/); + // await expect(a.href).toMatch(/^https?:\/\/.*#test$/); const img = within(a).getByRole('img'); await expect(img).toBeInTheDocument(); let buttons = canvas.getAllByRole<HTMLButtonElement>('button'); @@ -52,13 +59,14 @@ const common = { const i = buttons[0]; await expect(i).toBeInTheDocument(); await userEvent.click(i); - await waitFor(() => expect(canvasElement).toHaveTextContent(i18n.ts._ad.back)); + await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back); await expect(a).not.toBeInTheDocument(); await expect(i).not.toBeInTheDocument(); buttons = canvas.getAllByRole<HTMLButtonElement>('button'); - await expect(buttons).toHaveLength(args.__hasReduce ? 2 : 1); - const reduce = args.__hasReduce ? buttons[0] : null; - const back = buttons[args.__hasReduce ? 1 : 0]; + 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); @@ -80,15 +88,16 @@ const common = { lock = undefined; } }, - */ args: { prefer: [], specify: { id: 'someadid', - radio: 1, + ratio: 1, url: '#test', + place: '', + imageUrl: '', + dayOfWeek: 7, }, - __hasReduce: true, }, parameters: { layout: 'centered', @@ -138,6 +147,5 @@ export const ZeroRatio = { ...Square.args.specify, ratio: 0, }, - __hasReduce: false, }, } satisfies StoryObj<typeof MkAd>; diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue index 8f5ed760d5..bdaa8a809f 100644 --- a/packages/frontend/src/components/global/MkAd.vue +++ b/packages/frontend/src/components/global/MkAd.vue @@ -14,10 +14,20 @@ SPDX-License-Identifier: AGPL-3.0-only [$style.form_vertical]: chosen.place === 'vertical', }]" > - <a :href="chosen.url" target="_blank" :class="$style.link"> + <component + :is="self ? 'MkA' : 'a'" + :class="$style.link" + v-bind="self ? { + to: chosen.url.substring(local.length), + } : { + href: chosen.url, + rel: 'nofollow noopener', + target: '_blank', + }" + > <img :src="chosen.imageUrl" :class="$style.img"> <button class="_button" :class="$style.i" @click.prevent.stop="toggleMenu"><i :class="$style.iIcon" class="ti ti-info-circle"></i></button> - </a> + </component> </div> <div v-else :class="$style.menu"> <div :class="$style.menuContainer"> @@ -32,10 +42,10 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { ref } from 'vue'; +import { ref, computed } from 'vue'; import { i18n } from '@/i18n.js'; import { instance } from '@/instance.js'; -import { host } from '@/config.js'; +import { url as local, host } from '@/config.js'; import MkButton from '@/components/MkButton.vue'; import { defaultStore } from '@/store.js'; import * as os from '@/os.js'; @@ -96,6 +106,9 @@ const choseAd = (): Ad | null => { }; const chosen = ref(choseAd()); + +const self = computed(() => chosen.value?.url.startsWith(local)); + const shouldHide = ref(!defaultStore.state.forceShowAds && $i && $i.policies.canHideAds && (props.specify == null)); function reduceFrequency(): void { diff --git a/packages/frontend/src/components/global/MkAvatar.stories.impl.ts b/packages/frontend/src/components/global/MkAvatar.stories.impl.ts index 933754ec4c..9d2de9f0be 100644 --- a/packages/frontend/src/components/global/MkAvatar.stories.impl.ts +++ b/packages/frontend/src/components/global/MkAvatar.stories.impl.ts @@ -33,7 +33,7 @@ const common = { }, decorators: [ (Story, context) => ({ - // eslint-disable-next-line quotes + // @ts-expect-error size is for test template: `<div :style="{ display: 'grid', width: '${context.args.size}px', height: '${context.args.size}px' }"><story/></div>`, }), ], @@ -45,6 +45,7 @@ export const ProfilePage = { ...common, args: { ...common.args, + // @ts-expect-error size is for test size: 120, indicator: true, }, diff --git a/packages/frontend/src/components/global/MkCondensedLine.stories.impl.ts b/packages/frontend/src/components/global/MkCondensedLine.stories.impl.ts index e4e90cddd5..e15dcba760 100644 --- a/packages/frontend/src/components/global/MkCondensedLine.stories.impl.ts +++ b/packages/frontend/src/components/global/MkCondensedLine.stories.impl.ts @@ -28,6 +28,7 @@ export const Default = { }; }, args: { + // @ts-expect-error text is for test text: 'This is a condensed line.', }, parameters: { @@ -41,4 +42,5 @@ export const ContainerIs100px = { template: '<div style="width: 100px;"><story/></div>', }), ], + // @ts-expect-error text is for test } satisfies StoryObj<typeof MkCondensedLine>; diff --git a/packages/frontend/src/components/global/MkError.stories.meta.ts b/packages/frontend/src/components/global/MkError.stories.meta.ts index 1abbc56f50..cd7fada189 100644 --- a/packages/frontend/src/components/global/MkError.stories.meta.ts +++ b/packages/frontend/src/components/global/MkError.stories.meta.ts @@ -3,8 +3,11 @@ * SPDX-License-Identifier: AGPL-3.0-only */ +import { Meta } from '@storybook/vue3'; +import MkError from './MkError.vue'; + export const argTypes = { - retry: { + onRetry: { action: 'retry', }, -}; +} satisfies Meta<typeof MkError>['argTypes']; diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts index 4ed76f6bc4..cab8d9c704 100644 --- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts +++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { VNode, h, SetupContext } from 'vue'; +import { VNode, h, SetupContext, provide } from 'vue'; import * as mfm from 'mfm-js'; import * as Misskey from 'misskey-js'; import MkUrl from '@/components/global/MkUrl.vue'; @@ -16,7 +16,7 @@ import MkCode from '@/components/MkCode.vue'; import MkCodeInline from '@/components/MkCodeInline.vue'; import MkGoogle from '@/components/MkGoogle.vue'; import MkSparkle from '@/components/MkSparkle.vue'; -import MkA from '@/components/global/MkA.vue'; +import MkA, { MkABehavior } from '@/components/global/MkA.vue'; import { host } from '@/config.js'; import { defaultStore } from '@/store.js'; import { nyaize as doNyaize } from '@/scripts/nyaize.js'; @@ -43,6 +43,7 @@ type MfmProps = { parsedNodes?: mfm.MfmNode[] | null; enableEmojiMenu?: boolean; enableEmojiMenuReaction?: boolean; + linkNavigationBehavior?: MkABehavior; }; type MfmEvents = { @@ -51,6 +52,8 @@ type MfmEvents = { // eslint-disable-next-line import/no-default-export export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEvents>['emit'] }) { + provide('linkNavigationBehavior', props.linkNavigationBehavior); + const isNote = props.isNote ?? true; const shouldNyaize = props.nyaize ? props.nyaize === 'respect' ? props.author?.isCat : false : false; diff --git a/packages/frontend/src/components/global/MkPageHeader.stories.impl.ts b/packages/frontend/src/components/global/MkPageHeader.stories.impl.ts index eb74e874dd..1d079edd2c 100644 --- a/packages/frontend/src/components/global/MkPageHeader.stories.impl.ts +++ b/packages/frontend/src/components/global/MkPageHeader.stories.impl.ts @@ -33,7 +33,6 @@ export const Empty = { await waitFor(async () => await wait); }, args: { - static: true, tabs: [], }, parameters: { @@ -71,8 +70,8 @@ export const IconOnly = { ...Icon.args, tabs: [ { - ...Icon.args.tabs[0], - title: undefined, + key: Icon.args.tabs[0].key, + icon: Icon.args.tabs[0].icon, iconOnly: true, }, ], diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.vue b/packages/frontend/src/components/global/MkPageHeader.tabs.vue index e93b09721a..fcc46cc345 100644 --- a/packages/frontend/src/components/global/MkPageHeader.tabs.vue +++ b/packages/frontend/src/components/global/MkPageHeader.tabs.vue @@ -38,7 +38,6 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts"> export type Tab = { key: string; - title: string; onClick?: (ev: MouseEvent) => void; } & ( | { diff --git a/packages/frontend/src/components/global/MkTime.stories.impl.ts b/packages/frontend/src/components/global/MkTime.stories.impl.ts index 355c839113..ffd4a849a2 100644 --- a/packages/frontend/src/components/global/MkTime.stories.impl.ts +++ b/packages/frontend/src/components/global/MkTime.stories.impl.ts @@ -60,7 +60,7 @@ export const RelativeFuture = { export const AbsoluteFuture = { ...Empty, async play({ canvasElement, args }) { - await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time)); + await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined)); }, args: { ...Empty.args, @@ -97,7 +97,7 @@ export const RelativeNow = { export const AbsoluteNow = { ...Empty, async play({ canvasElement, args }) { - await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time)); + await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined)); }, args: { ...Empty.args, @@ -136,7 +136,7 @@ export const RelativeOneHourAgo = { export const AbsoluteOneHourAgo = { ...Empty, async play({ canvasElement, args }) { - await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time)); + await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined)); }, args: { ...Empty.args, @@ -175,7 +175,7 @@ export const RelativeOneDayAgo = { export const AbsoluteOneDayAgo = { ...Empty, async play({ canvasElement, args }) { - await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time)); + await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined)); }, args: { ...Empty.args, @@ -214,7 +214,7 @@ export const RelativeOneWeekAgo = { export const AbsoluteOneWeekAgo = { ...Empty, async play({ canvasElement, args }) { - await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time)); + await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined)); }, args: { ...Empty.args, @@ -253,7 +253,7 @@ export const RelativeOneMonthAgo = { export const AbsoluteOneMonthAgo = { ...Empty, async play({ canvasElement, args }) { - await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time)); + await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined)); }, args: { ...Empty.args, @@ -292,7 +292,7 @@ export const RelativeOneYearAgo = { export const AbsoluteOneYearAgo = { ...Empty, async play({ canvasElement, args }) { - await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time)); + await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined)); }, args: { ...Empty.args, diff --git a/packages/frontend/src/components/global/MkTime.vue b/packages/frontend/src/components/global/MkTime.vue index 67532268d3..23fe99bd9c 100644 --- a/packages/frontend/src/components/global/MkTime.vue +++ b/packages/frontend/src/components/global/MkTime.vue @@ -47,7 +47,7 @@ const invalid = Number.isNaN(_time); const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid; // eslint-disable-next-line vue/no-setup-props-destructure -const now = ref((props.origin ?? new Date()).getTime()); +const now = ref(props.origin?.getTime() ?? Date.now()); const ago = computed(() => (now.value - _time) / 1000/*ms*/); const relative = computed<string>(() => { @@ -77,7 +77,7 @@ let tickId: number; let currentInterval: number; function tick() { - now.value = (new Date()).getTime(); + now.value = Date.now(); const nextInterval = ago.value < 60 ? 10000 : ago.value < 3600 ? 60000 : 180000; if (currentInterval !== nextInterval) { diff --git a/packages/frontend/src/components/global/MkUrl.vue b/packages/frontend/src/components/global/MkUrl.vue index 0c3eee63ff..9d4cd559d9 100644 --- a/packages/frontend/src/components/global/MkUrl.vue +++ b/packages/frontend/src/components/global/MkUrl.vue @@ -6,6 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <component :is="self ? 'MkA' : 'a'" ref="el" :class="$style.root" class="_link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel ?? 'nofollow noopener'" :target="target" + :behavior="props.navigationBehavior" @contextmenu.stop="() => {}" > <template v-if="!self"> @@ -30,11 +31,14 @@ import { url as local } from '@/config.js'; import * as os from '@/os.js'; import { useTooltip } from '@/scripts/use-tooltip.js'; import { safeURIDecode } from '@/scripts/safe-uri-decode.js'; +import { isEnabledUrlPreview } from '@/instance.js'; +import { MkABehavior } from '@/components/global/MkA.vue'; const props = withDefaults(defineProps<{ url: string; rel?: string; showUrlPreview?: boolean; + navigationBehavior?: MkABehavior; }>(), { showUrlPreview: true, }); @@ -44,12 +48,12 @@ const url = new URL(props.url); if (!['http:', 'https:'].includes(url.protocol)) throw new Error('invalid url'); const el = ref(); -if (props.showUrlPreview) { +if (props.showUrlPreview && isEnabledUrlPreview.value) { useTooltip(el, (showing) => { os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), { showing, url: props.url, - source: el.value, + source: el.value instanceof HTMLElement ? el.value : el.value?.$el, }, {}, 'closed'); }); } diff --git a/packages/frontend/src/components/global/MkUserName.stories.impl.ts b/packages/frontend/src/components/global/MkUserName.stories.impl.ts index 88bf4f4e6c..e39061c291 100644 --- a/packages/frontend/src/components/global/MkUserName.stories.impl.ts +++ b/packages/frontend/src/components/global/MkUserName.stories.impl.ts @@ -30,7 +30,7 @@ export const Default = { }; }, async play({ canvasElement }) { - await expect(canvasElement).toHaveTextContent(userDetailed().name); + await expect(canvasElement).toHaveTextContent(userDetailed().name as string); }, args: { user: userDetailed(), diff --git a/packages/frontend/src/components/page/page.block.vue b/packages/frontend/src/components/page/page.block.vue index 164720ac6b..c7f72dce8c 100644 --- a/packages/frontend/src/components/page/page.block.vue +++ b/packages/frontend/src/components/page/page.block.vue @@ -14,6 +14,7 @@ import XText from './page.text.vue'; import XSection from './page.section.vue'; import XImage from './page.image.vue'; import XNote from './page.note.vue'; +import XDynamic from './page.dynamic.vue'; function getComponent(type: string) { switch (type) { @@ -21,6 +22,20 @@ function getComponent(type: string) { case 'section': return XSection; case 'image': return XImage; case 'note': return XNote; + + // 動的ページの代替用ブロック + case 'button': + case 'if': + case 'textarea': + case 'post': + case 'canvas': + case 'numberInput': + case 'textInput': + case 'switch': + case 'radioButton': + case 'counter': + return XDynamic; + default: return null; } } diff --git a/packages/frontend/src/components/page/page.dynamic.vue b/packages/frontend/src/components/page/page.dynamic.vue new file mode 100644 index 0000000000..8c511a690d --- /dev/null +++ b/packages/frontend/src/components/page/page.dynamic.vue @@ -0,0 +1,43 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<!-- 動的ページのブロックの代替。利用できないということを表示する --> +<template> +<div :class="$style.root"> + <div :class="$style.heading"><i class="ti ti-dice-5"></i> {{ i18n.ts._pages.blocks.dynamic }}</div> + <I18n :src="i18n.ts._pages.blocks.dynamicDescription" tag="div" :class="$style.text"> + <template #play> + <MkA to="/play" class="_link">Play</MkA> + </template> + </I18n> +</div> +</template> + +<script lang="ts" setup> +import * as Misskey from 'misskey-js'; +import { i18n } from '@/i18n.js'; + +const props = defineProps<{ + block: Misskey.entities.PageBlock, + page: Misskey.entities.Page, +}>(); +</script> + +<style lang="scss" module> +.root { + border: 1px solid var(--divider); + border-radius: var(--radius); + padding: var(--margin); + text-align: center; +} + +.heading { + font-weight: 700; +} + +.text { + font-size: 90%; +} +</style> diff --git a/packages/frontend/src/components/page/page.image.vue b/packages/frontend/src/components/page/page.image.vue index ced02943db..fc1ce9fc7b 100644 --- a/packages/frontend/src/components/page/page.image.vue +++ b/packages/frontend/src/components/page/page.image.vue @@ -4,19 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div> - <MediaImage - v-if="image" - :image="image" - :disableImageLink="true" - /> +<div :class="$style.root"> + <MkMediaList v-if="image" :mediaList="[image]" :class="$style.mediaList"/> </div> </template> <script lang="ts" setup> import { onMounted, ref } from 'vue'; import * as Misskey from 'misskey-js'; -import MediaImage from '@/components/MkMediaImage.vue'; +import MkMediaList from '@/components/MkMediaList.vue'; const props = defineProps<{ block: Misskey.entities.PageBlock, @@ -28,5 +24,17 @@ const image = ref<Misskey.entities.DriveFile | null>(null); onMounted(() => { image.value = props.page.attachedFiles.find(x => x.id === props.block.fileId) ?? null; }); - </script> + +<style lang="scss" module> +.root { + border: 1px solid var(--divider); + border-radius: var(--radius); + overflow: hidden; +} +.mediaList { + // MkMediaList 内の上部マージン 4px + margin-top: -4px; + height: calc(100% + 4px); +} +</style> diff --git a/packages/frontend/src/components/page/page.note.vue b/packages/frontend/src/components/page/page.note.vue index 7b56494a6e..b5ba407806 100644 --- a/packages/frontend/src/components/page/page.note.vue +++ b/packages/frontend/src/components/page/page.note.vue @@ -4,9 +4,9 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div style="margin: 1em 0;"> - <MkNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/> - <MkNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/> +<div :class="$style.root"> + <MkNote v-if="note && !block.detailed" :key="note.id + ':normal'" :note="note"/> + <MkNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" :note="note"/> </div> </template> @@ -32,3 +32,10 @@ onMounted(() => { }); }); </script> + +<style lang="scss" module> +.root { + border: 1px solid var(--divider); + border-radius: var(--radius); +} +</style> diff --git a/packages/frontend/src/components/page/page.text.vue b/packages/frontend/src/components/page/page.text.vue index 81a4c4fa93..e0c7956f6e 100644 --- a/packages/frontend/src/components/page/page.text.vue +++ b/packages/frontend/src/components/page/page.text.vue @@ -4,9 +4,11 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div class="_gaps"> +<div class="_gaps" :class="$style.textRoot"> <Mfm :text="block.text ?? ''" :isNote="false"/> - <MkUrlPreview v-for="url in urls" :key="url" :url="url"/> + <div v-if="isEnabledUrlPreview" class="_gaps_s"> + <MkUrlPreview v-for="url in urls" :key="url" :url="url"/> + </div> </div> </template> @@ -15,6 +17,7 @@ import { defineAsyncComponent } from 'vue'; import * as mfm from 'mfm-js'; import * as Misskey from 'misskey-js'; import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js'; +import { isEnabledUrlPreview } from '@/instance.js'; const MkUrlPreview = defineAsyncComponent(() => import('@/components/MkUrlPreview.vue')); @@ -25,3 +28,9 @@ const props = defineProps<{ const urls = props.block.text ? extractUrlFromMfm(mfm.parse(props.block.text)) : []; </script> + +<style lang="scss" module> +.textRoot { + font-size: 1.1rem; +} +</style> diff --git a/packages/frontend/src/components/page/page.vue b/packages/frontend/src/components/page/page.vue index 53c70b01f4..a31c5eff28 100644 --- a/packages/frontend/src/components/page/page.vue +++ b/packages/frontend/src/components/page/page.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div :class="{ [$style.center]: page.alignCenter, [$style.serif]: page.font === 'serif' }" class="_gaps_s"> +<div :class="{ [$style.center]: page.alignCenter, [$style.serif]: page.font === 'serif' }" class="_gaps"> <XBlock v-for="child in page.content" :key="child.id" :page="page" :block="child" :h="2"/> </div> </template> |