This commit is contained in:
syuilo 2023-08-13 12:06:52 +09:00
parent 8d5a2ac0a1
commit 2cac0cfe1a
4 changed files with 34 additions and 25 deletions

1
locales/index.d.ts vendored
View File

@ -1103,6 +1103,7 @@ export interface Locale {
"forYou": string; "forYou": string;
"currentAnnouncements": string; "currentAnnouncements": string;
"pastAnnouncements": string; "pastAnnouncements": string;
"youHaveUnreadAnnouncements": string;
"_announcement": { "_announcement": {
"forExistingUsers": string; "forExistingUsers": string;
"forExistingUsersDescription": string; "forExistingUsersDescription": string;

View File

@ -1100,6 +1100,7 @@ icon: "アイコン"
forYou: "あなたへ" forYou: "あなたへ"
currentAnnouncements: "現在のお知らせ" currentAnnouncements: "現在のお知らせ"
pastAnnouncements: "過去のお知らせ" pastAnnouncements: "過去のお知らせ"
youHaveUnreadAnnouncements: "未読のお知らせがあります。"
_announcement: _announcement:
forExistingUsers: "既存ユーザーのみ" forExistingUsers: "既存ユーザーのみ"

View File

@ -7,31 +7,34 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="800"> <MkSpacer :contentMax="800">
<MkPagination ref="paginationEl" :key="tab" v-slot="{items}" :pagination="tab === 'current' ? paginationCurrent : paginationPast" class="_gaps_m"> <div class="_gaps">
<section v-for="announcement in items" :key="announcement.id" class="_panel" :class="$style.announcement"> <MkInfo v-if="$i && $i.hasUnreadAnnouncement && tab === 'current'" warn>{{ i18n.ts.youHaveUnreadAnnouncements }}</MkInfo>
<div v-if="announcement.forYou" :class="$style.forYou"><i class="ti ti-pin"></i> {{ i18n.ts.forYou }}</div> <MkPagination ref="paginationEl" :key="tab" v-slot="{items}" :pagination="tab === 'current' ? paginationCurrent : paginationPast" class="_gaps">
<div :class="$style.header"> <section v-for="announcement in items" :key="announcement.id" class="_panel" :class="$style.announcement">
<span v-if="$i && !announcement.isRead" style="margin-right: 0.5em;">🆕</span> <div v-if="announcement.forYou" :class="$style.forYou"><i class="ti ti-pin"></i> {{ i18n.ts.forYou }}</div>
<span style="margin-right: 0.5em;"> <div :class="$style.header">
<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i> <span v-if="$i && !announcement.isRead" style="margin-right: 0.5em;">🆕</span>
<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i> <span style="margin-right: 0.5em;">
<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i> <i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i> <i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
</span> <i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
<span>{{ announcement.title }}</span> <i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
</div> </span>
<div :class="$style.content"> <span>{{ announcement.title }}</span>
<Mfm :text="announcement.text"/>
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
<div style="opacity: 0.7; font-size: 85%;">
<MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
</div> </div>
</div> <div :class="$style.content">
<div v-if="tab !== 'past' && $i && !announcement.isRead" :class="$style.footer"> <Mfm :text="announcement.text"/>
<MkButton primary @click="read(announcement.id)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton> <img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
</div> <div style="opacity: 0.7; font-size: 85%;">
</section> <MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
</MkPagination> </div>
</div>
<div v-if="tab !== 'past' && $i && !announcement.isRead" :class="$style.footer">
<MkButton primary @click="read(announcement.id)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
</div>
</section>
</MkPagination>
</div>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
@ -40,6 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import { ref } from 'vue'; import { ref } from 'vue';
import MkPagination from '@/components/MkPagination.vue'; import MkPagination from '@/components/MkPagination.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkInfo from '@/components/MkInfo.vue';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';

View File

@ -6,7 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div :class="$style.root"> <div :class="$style.root">
<MkA <MkA
v-for="announcement in $i.unreadAnnouncements.filter(x => x.display === 'banner')" :key="announcement.id" :class="$style.item" to="/announcements" v-for="announcement in $i.unreadAnnouncements.filter(x => x.display === 'banner')"
:key="announcement.id"
:class="$style.item"
to="/announcements"
> >
<span :class="$style.icon"> <span :class="$style.icon">
<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i> <i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>