wip
This commit is contained in:
parent
8d5a2ac0a1
commit
2cac0cfe1a
|
@ -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;
|
||||||
|
|
|
@ -1100,6 +1100,7 @@ icon: "アイコン"
|
||||||
forYou: "あなたへ"
|
forYou: "あなたへ"
|
||||||
currentAnnouncements: "現在のお知らせ"
|
currentAnnouncements: "現在のお知らせ"
|
||||||
pastAnnouncements: "過去のお知らせ"
|
pastAnnouncements: "過去のお知らせ"
|
||||||
|
youHaveUnreadAnnouncements: "未読のお知らせがあります。"
|
||||||
|
|
||||||
_announcement:
|
_announcement:
|
||||||
forExistingUsers: "既存ユーザーのみ"
|
forExistingUsers: "既存ユーザーのみ"
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue