enhance: ダイアログのお知らせにも画像がある場合見せるように (MisskeyIO/misskey#157)

packages/frontend/src/components/MkAnnouncementDialog.vue

@@ -13,16 +13,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
 				<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
 			</span>
-			<span :class="$style.title">{{ announcement.title }}</span>
+			<Mfm :text="announcement.title"/>
 		</div>
-		<div :class="$style.text"><Mfm :text="announcement.text"/></div>
-		<MkButton primary full @click="ok">{{ i18n.ts.ok }}</MkButton>
+		<div :class="$style.content">
+			<Mfm :text="announcement.text"/>
+			<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
+		</div>
+		<MkButton :class="$style.gotIt" primary full :disabled="gotItDisabled" @click="gotIt">{{ i18n.ts.gotIt }}<span v-if="secVisible"> ({{ sec }})</span></MkButton>
 	</div>
 </MkModal>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, shallowRef } from 'vue';
+import { onMounted, ref, shallowRef } from 'vue';
 import * as misskey from 'cherrypick-js';
 import * as os from '@/os';
 import MkModal from '@/components/MkModal.vue';
@@ -37,8 +40,11 @@ const props = withDefaults(defineProps<{
 
 const rootEl = shallowRef<HTMLDivElement>();
 const modal = shallowRef<InstanceType<typeof MkModal>>();
+const gotItDisabled = ref(true);
+const secVisible = ref(true);
+const sec = ref(props.announcement.closeDuration);
 
-async function ok() {
+async function gotIt(): Promise<void> {
 	if (props.announcement.needConfirmationToRead) {
 		const confirm = await os.confirm({
 			type: 'question',
@@ -48,15 +54,19 @@ async function ok() {
 		if (confirm.canceled) return;
 	}
 
-	modal.value.close();
-	os.api('i/read-announcement', { announcementId: props.announcement.id });
-	updateAccount({
-		unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== props.announcement.id),
-	});
+	await os.api('i/read-announcement', { announcementId: props.announcement.id });
+	if ($i) {
+		updateAccount({
+			unreadAnnouncements: $i.unreadAnnouncements.filter((a: { id: string; }) => a.id !== props.announcement.id),
+		});
+	}
+	modal.value?.close();
 }
 
-function onBgClick() {
-	rootEl.value.animate([{
+function onBgClick(): void {
+	if (sec.value > 0) return;
+
+	rootEl.value?.animate([{
 		offset: 0,
 		transform: 'scale(1)',
 	}, {
@@ -71,6 +81,21 @@ function onBgClick() {
 }
 
 onMounted(() => {
+	if (sec.value > 0 ) {
+		const waitTimer = setInterval(() => {
+			if (sec.value === 0) {
+				clearInterval(waitTimer);
+				gotItDisabled.value = false;
+				secVisible.value = false;
+			} else {
+				gotItDisabled.value = true;
+			}
+			sec.value = sec.value - 1;
+		}, 1000);
+	} else {
+		gotItDisabled.value = false;
+		secVisible.value = false;
+	}
 });
 </script>
 
@@ -87,6 +112,7 @@ onMounted(() => {
 }
 
 .header {
+	font-weight: bold;
 	font-size: 120%;
 }
 
@@ -94,11 +120,12 @@ onMounted(() => {
 	margin-right: 0.5em;
 }
 
-.title {
-	font-weight: bold;
-}
-
-.text {
+.content {
 	margin: 1em 0;
+	> img {
+		display: block;
+		max-height: 300px;
+		max-width: 100%;
+	}
 }
 </style>

packages/frontend/src/pages/announcements.vue

@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div :class="$style.content">
 						<Mfm :text="announcement.text"/>
 						<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
-						<div style="opacity: 0.7; font-size: 85%;">
+						<div style="margin-top: 8px; opacity: 0.7; font-size: 85%;">
 							<MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
 						</div>
 					</div>
@@ -125,6 +125,7 @@ definePageMetadata({
 .header {
 	margin-bottom: 16px;
 	font-weight: bold;
+	font-size: 120%;
 }
 
 .content {