diff options
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | locales/index.d.ts | 4 | ||||
| -rw-r--r-- | locales/ja-JP.yml | 1 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkAnnouncementDialog.vue | 62 |
4 files changed, 61 insertions, 7 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index a1fb4fe48c..42fbf8a17a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - アクセシビリティ設定からオフにすることもできます - Enhance: タイムラインのパフォーマンスを向上 - Fix: 一部のブラウザでアコーディオンメニューのアニメーションが動作しない問題を修正 +- Fix: ダイアログのお知らせが画面からはみ出ることがある問題を修正 ### Server - Enhance: 凍結されたユーザのノートが各種タイムラインで表示されないように `#15775` diff --git a/locales/index.d.ts b/locales/index.d.ts index 0ac96939aa..e564b47270 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5413,6 +5413,10 @@ export interface Locale extends ILocale { * フォルダを作って整理することもできます。 */ "driveAboutTip": string; + /** + * スクロールして閉じる + */ + "scrollToClose": string; "_chat": { /** * まだメッセージはありません diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index c189685464..7d2edf7194 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1348,6 +1348,7 @@ readonly: "読み取り専用" goToDeck: "デッキへ戻る" federationJobs: "連合ジョブ" driveAboutTip: "ドライブでは、過去にアップロードしたファイルの一覧が表示されます。<br>\nノートに添付する際に再利用したり、あとで投稿するファイルを予めアップロードしておくこともできます。<br>\n<b>ファイルを削除すると、今までそのファイルを使用した全ての場所(ノート、ページ、アバター、バナー等)からも見えなくなるので注意してください。</b><br>\nフォルダを作って整理することもできます。" +scrollToClose: "スクロールして閉じる" _chat: noMessagesYet: "まだメッセージはありません" diff --git a/packages/frontend/src/components/MkAnnouncementDialog.vue b/packages/frontend/src/components/MkAnnouncementDialog.vue index 6e5b29654b..81c92bfb5c 100644 --- a/packages/frontend/src/components/MkAnnouncementDialog.vue +++ b/packages/frontend/src/components/MkAnnouncementDialog.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkModal ref="modal" :zPriority="'middle'" @closed="$emit('closed')" @click="onBgClick"> +<MkModal ref="modal" :zPriority="'middle'" :preferType="'dialog'" @closed="$emit('closed')" @click="onBgClick"> <div ref="rootEl" :class="$style.root"> <div :class="$style.header"> <span :class="$style.icon"> @@ -16,13 +16,21 @@ SPDX-License-Identifier: AGPL-3.0-only <span :class="$style.title">{{ announcement.title }}</span> </div> <div :class="$style.text"><Mfm :text="announcement.text"/></div> - <MkButton primary full @click="ok">{{ i18n.ts.ok }}</MkButton> + <div ref="bottomEl"></div> + <div :class="$style.footer"> + <MkButton + primary + full + :disabled="!hasReachedBottom" + @click="ok" + >{{ hasReachedBottom ? i18n.ts.close : i18n.ts.scrollToClose }}</MkButton> + </div> </div> </MkModal> </template> <script lang="ts" setup> -import { onMounted, useTemplateRef } from 'vue'; +import { onMounted, ref, useTemplateRef } from 'vue'; import * as Misskey from 'misskey-js'; import * as os from '@/os.js'; import { misskeyApi } from '@/utility/misskey-api.js'; @@ -32,12 +40,12 @@ import { i18n } from '@/i18n.js'; import { $i } from '@/i.js'; import { updateCurrentAccountPartial } from '@/accounts.js'; -const props = withDefaults(defineProps<{ +const props = defineProps<{ announcement: Misskey.entities.Announcement; -}>(), { -}); +}>(); const rootEl = useTemplateRef('rootEl'); +const bottomEl = useTemplateRef('bottomEl'); const modal = useTemplateRef('modal'); async function ok() { @@ -72,7 +80,34 @@ function onBgClick() { }); } +const hasReachedBottom = ref(false); + onMounted(() => { + if (bottomEl.value && rootEl.value) { + const bottomElRect = bottomEl.value.getBoundingClientRect(); + const rootElRect = rootEl.value.getBoundingClientRect(); + if ( + bottomElRect.top >= rootElRect.top && + bottomElRect.top <= (rootElRect.bottom - 66) // 66 ≒ 75 * 0.9 (modalのアニメーション分) + ) { + hasReachedBottom.value = true; + return; + } + + const observer = new IntersectionObserver(entries => { + for (const entry of entries) { + if (entry.isIntersecting) { + hasReachedBottom.value = true; + observer.disconnect(); + } + } + }, { + root: rootEl.value, + rootMargin: '0px 0px -75px 0px', + }); + + observer.observe(bottomEl.value); + } }); </script> @@ -80,9 +115,12 @@ onMounted(() => { .root { margin: auto; position: relative; - padding: 32px; + padding: 32px 32px 0; min-width: 320px; max-width: 480px; + max-height: 100%; + overflow-y: auto; + overflow-x: hidden; box-sizing: border-box; background: var(--MI_THEME-panel); border-radius: var(--MI-radius); @@ -103,4 +141,14 @@ onMounted(() => { .text { margin: 1em 0; } + +.footer { + position: sticky; + bottom: 0; + left: -32px; + backdrop-filter: var(--MI-blur, blur(15px)); + background: color(from var(--MI_THEME-bg) srgb r g b / 0.5); + margin: 0 -32px; + padding: 24px 32px; +} </style> |