wip

CHANGELOG.md

@@ -16,6 +16,10 @@
 
 ### General
 - OAuth 2.0のサポート
+- お知らせ機能の強化
+	- ユーザー個別のお知らせを作成可能に
+	- お知らせのバナー表示やダイアログ表示が可能に
+	- お知らせのアイコンを設定可能に
 - チャンネルをセンシティブ指定できるようになりました
 
 ### Client

packages/frontend/src/components/MkAnnouncementDialog.vue

@@ -6,8 +6,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkModal ref="modal" :zPriority="'middle'" @closed="$emit('closed')">
 	<div :class="$style.root">
-		<div :class="$style.title">{{ announcement.title }}</div>
+		<div :class="$style.header">
-		<div :class="$style.text">{{ announcement.text }}</div>
+			<span :class="$style.icon">
+				<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
+				<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
+				<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>
+		</div>
+		<div :class="$style.text"><Mfm :text="announcement.text"/></div>
 		<MkButton primary full @click="ok">{{ i18n.ts.ok }}</MkButton>
 	</div>
 </MkModal>
@@ -45,11 +53,18 @@ onMounted(() => {
 	min-width: 320px;
 	max-width: 480px;
 	box-sizing: border-box;
-	text-align: center;
 	background: var(--panel);
 	border-radius: var(--radius);
 }
 
+.header {
+	font-size: 120%;
+}
+
+.icon {
+	margin-right: 0.5em;
+}
+
 .title {
 	font-weight: bold;
 }

packages/frontend/src/pages/admin/announcements.vue

@@ -19,7 +19,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkInput v-model="announcement.imageUrl">
 						<template #label>{{ i18n.ts.imageUrl }}</template>
 					</MkInput>
+					<MkRadios v-model="announcement.icon">
+						<template #label>{{ i18n.ts.icon }}</template>
+						<option value="info"><i class="ti ti-info-circle"></i></option>
+						<option value="warning"><i class="ti ti-alert-triangle" style="color: var(--warn);"></i></option>
+						<option value="error"><i class="ti ti-circle-x" style="color: var(--error);"></i></option>
+						<option value="success"><i class="ti ti-check" style="color: var(--success);"></i></option>
+					</MkRadios>
 					<MkRadios v-model="announcement.display">
+						<template #label>{{ i18n.ts.display }}</template>
 						<option value="normal">{{ i18n.ts.normal }}</option>
 						<option value="banner">{{ i18n.ts.banner }}</option>
 						<option value="dialog">{{ i18n.ts.dialog }}</option>
@@ -35,8 +43,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<p v-if="announcement.reads">{{ i18n.t('nUsersRead', { n: announcement.reads }) }}</p>
 					<div class="buttons _buttons">
 						<MkButton class="button" inline primary @click="save(announcement)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-						<MkButton class="button" inline @click="deactivate(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts._announcement.deactivate }}</MkButton>
+						<MkButton v-if="announcement.id != null" class="button" inline @click="deactivate(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts._announcement.deactivate }}</MkButton>
-						<MkButton class="button" inline danger @click="remove(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
+						<MkButton v-if="announcement.id != null" class="button" inline danger @click="remove(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
 					</div>
 				</div>
 			</section>