2023-07-27 05:31:52 +00:00
|
|
|
<!--
|
2024-02-13 15:59:27 +00:00
|
|
|
SPDX-FileCopyrightText: syuilo and misskey-project
|
2023-07-27 05:31:52 +00:00
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
-->
|
|
|
|
|
2020-01-29 19:37:25 +00:00
|
|
|
<template>
|
2022-06-20 08:38:49 +00:00
|
|
|
<MkStickyContainer>
|
2023-08-13 11:12:29 +00:00
|
|
|
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
|
2023-05-19 07:20:53 +00:00
|
|
|
<MkSpacer :contentMax="800">
|
2024-01-18 09:21:33 +00:00
|
|
|
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
|
|
|
|
<div :key="tab" class="_gaps">
|
|
|
|
<MkInfo v-if="$i && $i.hasUnreadAnnouncement && tab === 'current'" warn>{{ i18n.ts.youHaveUnreadAnnouncements }}</MkInfo>
|
|
|
|
<MkPagination ref="paginationEl" :key="tab" v-slot="{items}" :pagination="tab === 'current' ? paginationCurrent : paginationPast" class="_gaps">
|
|
|
|
<section v-for="announcement in items" :key="announcement.id" class="_panel" :class="$style.announcement">
|
2024-01-21 12:11:23 +00:00
|
|
|
<div v-if="announcement.forYou" :class="$style.forYou"><i class="ph-push-pin ph-bold ph-lg"></i> {{ i18n.ts.forYou }}</div>
|
2024-01-18 09:21:33 +00:00
|
|
|
<div :class="$style.header">
|
|
|
|
<span v-if="$i && !announcement.silence && !announcement.isRead" style="margin-right: 0.5em;">🆕</span>
|
|
|
|
<span style="margin-right: 0.5em;">
|
2024-01-21 12:11:23 +00:00
|
|
|
<i v-if="announcement.icon === 'info'" class="ph-info ph-bold ph-lg"></i>
|
|
|
|
<i v-else-if="announcement.icon === 'warning'" class="ph-warning ph-bold ph-lg" style="color: var(--warn);"></i>
|
|
|
|
<i v-else-if="announcement.icon === 'error'" class="ph-x-circle ph-bold ph-lg" style="color: var(--error);"></i>
|
|
|
|
<i v-else-if="announcement.icon === 'success'" class="ph-check ph-bold ph-lg" style="color: var(--success);"></i>
|
2024-01-18 09:21:33 +00:00
|
|
|
</span>
|
|
|
|
<span>{{ announcement.title }}</span>
|
2023-08-13 11:12:29 +00:00
|
|
|
</div>
|
2024-01-18 09:21:33 +00:00
|
|
|
<div :class="$style.content">
|
|
|
|
<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 v-if="tab !== 'past' && $i && !announcement.silence && !announcement.isRead" :class="$style.footer">
|
2024-01-21 12:11:23 +00:00
|
|
|
<MkButton primary @click="read(announcement)"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.gotIt }}</MkButton>
|
2024-01-18 09:21:33 +00:00
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</MkPagination>
|
|
|
|
</div>
|
|
|
|
</MkHorizontalSwipe>
|
2022-06-20 08:38:49 +00:00
|
|
|
</MkSpacer>
|
|
|
|
</MkStickyContainer>
|
2020-01-29 19:37:25 +00:00
|
|
|
</template>
|
|
|
|
|
2022-06-20 08:38:49 +00:00
|
|
|
<script lang="ts" setup>
|
2023-12-07 05:42:09 +00:00
|
|
|
import { ref, computed } from 'vue';
|
2023-12-27 06:55:09 +00:00
|
|
|
import MkPagination from '@/components/MkPagination.vue';
|
2022-09-06 09:21:49 +00:00
|
|
|
import MkButton from '@/components/MkButton.vue';
|
2023-08-13 11:12:29 +00:00
|
|
|
import MkInfo from '@/components/MkInfo.vue';
|
2024-01-18 09:21:33 +00:00
|
|
|
import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
|
2023-09-19 07:37:43 +00:00
|
|
|
import * as os from '@/os.js';
|
2024-01-04 09:32:46 +00:00
|
|
|
import { misskeyApi } from '@/scripts/misskey-api.js';
|
2023-09-19 07:37:43 +00:00
|
|
|
import { i18n } from '@/i18n.js';
|
|
|
|
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
|
|
|
import { $i, updateAccount } from '@/account.js';
|
2020-01-29 19:37:25 +00:00
|
|
|
|
2023-08-13 11:12:29 +00:00
|
|
|
const paginationCurrent = {
|
2022-06-20 08:38:49 +00:00
|
|
|
endpoint: 'announcements' as const,
|
|
|
|
limit: 10,
|
2023-08-13 11:12:29 +00:00
|
|
|
params: {
|
|
|
|
isActive: true,
|
|
|
|
},
|
2023-12-27 06:55:09 +00:00
|
|
|
};
|
2023-08-13 11:12:29 +00:00
|
|
|
|
|
|
|
const paginationPast = {
|
|
|
|
endpoint: 'announcements' as const,
|
|
|
|
limit: 10,
|
|
|
|
params: {
|
|
|
|
isActive: false,
|
|
|
|
},
|
2023-12-27 06:55:09 +00:00
|
|
|
};
|
2020-01-29 19:37:25 +00:00
|
|
|
|
2023-07-31 05:13:34 +00:00
|
|
|
const paginationEl = ref<InstanceType<typeof MkPagination>>();
|
|
|
|
|
2023-08-13 11:12:29 +00:00
|
|
|
const tab = ref('current');
|
|
|
|
|
|
|
|
async function read(announcement) {
|
|
|
|
if (announcement.needConfirmationToRead) {
|
|
|
|
const confirm = await os.confirm({
|
|
|
|
type: 'question',
|
|
|
|
title: i18n.ts._announcement.readConfirmTitle,
|
2024-01-19 23:11:59 +00:00
|
|
|
text: i18n.tsx._announcement.readConfirmText({ title: announcement.title }),
|
2023-08-13 11:12:29 +00:00
|
|
|
});
|
|
|
|
if (confirm.canceled) return;
|
|
|
|
}
|
|
|
|
|
2023-07-31 05:13:34 +00:00
|
|
|
if (!paginationEl.value) return;
|
2023-08-13 11:12:29 +00:00
|
|
|
paginationEl.value.updateItem(announcement.id, a => {
|
|
|
|
a.isRead = true;
|
|
|
|
return a;
|
|
|
|
});
|
2024-01-04 09:32:46 +00:00
|
|
|
misskeyApi('i/read-announcement', { announcementId: announcement.id });
|
2023-08-13 11:12:29 +00:00
|
|
|
updateAccount({
|
|
|
|
unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== announcement.id),
|
2023-07-31 05:13:34 +00:00
|
|
|
});
|
2022-06-20 08:38:49 +00:00
|
|
|
}
|
2020-01-29 19:37:25 +00:00
|
|
|
|
2023-12-07 05:42:09 +00:00
|
|
|
const headerActions = computed(() => []);
|
2022-06-20 08:38:49 +00:00
|
|
|
|
2023-12-07 05:42:09 +00:00
|
|
|
const headerTabs = computed(() => [{
|
2023-08-13 11:12:29 +00:00
|
|
|
key: 'current',
|
|
|
|
title: i18n.ts.currentAnnouncements,
|
2023-11-03 22:20:53 +00:00
|
|
|
icon: 'ph-fire ph-bold ph-lg',
|
2023-08-13 11:12:29 +00:00
|
|
|
}, {
|
|
|
|
key: 'past',
|
|
|
|
title: i18n.ts.pastAnnouncements,
|
2023-11-03 22:20:53 +00:00
|
|
|
icon: 'ph-circle ph-bold ph-lg',
|
2023-08-13 11:12:29 +00:00
|
|
|
}]);
|
2022-06-20 08:38:49 +00:00
|
|
|
|
2024-02-16 07:17:09 +00:00
|
|
|
definePageMetadata(() => ({
|
2022-06-20 08:38:49 +00:00
|
|
|
title: i18n.ts.announcements,
|
2023-09-30 19:53:52 +00:00
|
|
|
icon: 'ph-megaphone ph-bold ph-lg',
|
2024-02-16 07:17:09 +00:00
|
|
|
}));
|
2020-01-29 19:37:25 +00:00
|
|
|
</script>
|
|
|
|
|
2023-08-13 11:12:29 +00:00
|
|
|
<style lang="scss" module>
|
|
|
|
.announcement {
|
|
|
|
padding: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.forYou {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
line-height: 24px;
|
|
|
|
font-size: 90%;
|
|
|
|
white-space: pre;
|
|
|
|
color: #d28a3f;
|
|
|
|
}
|
|
|
|
|
|
|
|
.header {
|
|
|
|
margin-bottom: 16px;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
.content {
|
|
|
|
> img {
|
|
|
|
display: block;
|
|
|
|
max-height: 300px;
|
|
|
|
max-width: 100%;
|
2020-01-29 19:37:25 +00:00
|
|
|
}
|
|
|
|
}
|
2023-08-13 11:12:29 +00:00
|
|
|
|
|
|
|
.footer {
|
|
|
|
margin-top: 16px;
|
|
|
|
}
|
2020-01-29 19:37:25 +00:00
|
|
|
</style>
|