oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

feat: refine announcement (#11497)

Browse source 
* wip

* Update read-announcement.ts

* wip

* wip

* wip

* Update index.d.ts

* wip

* Create 1691649257651-refine-announcement.js

* wip

* wip

* wip

* wip

* wip

* wip

* Update announcements.vue

* wip

* wip

* Update announcements.vue

* wip

* Update announcements.vue

* wip

* Update misskey-js.api.md

* Update users.ts

* Create MkAnnouncementDialog.stories.impl.ts

* wip

* wip

* Create AnnouncementService.ts
This commit is contained in:
syuilo 2023-08-13 20:12:29 +09:00 • committed by GitHub
parent 2896fc6cb4
commit 9487856495
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 1226 additions and 223 deletions
Download patch file Download diff file Expand all files Collapse all files

135
packages/frontend/src/pages/announcements.vue
View file

@ -5,20 +5,36 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="800">
<MkPagination ref="paginationEl" v-slot="{items}" :pagination="pagination" class="ruryvtyk _gaps_m">
<section v-for="announcement in items" :key="announcement.id" class="announcement _panel">
<div class="header"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
<div class="content">
<Mfm :text="announcement.text"/>
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
</div>
<div v-if="$i && !announcement.isRead" class="footer">
<MkButton primary @click="read(announcement.id)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
</div>
</section>
</MkPagination>
<div 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">
<div v-if="announcement.forYou" :class="$style.forYou"><i class="ti ti-pin"></i> {{ i18n.ts.forYou }}</div>
<div :class="$style.header">
<span v-if="$i && !announcement.isRead" style="margin-right: 0.5em;">🆕</span>
<span style="margin-right: 0.5em;">
<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>{{ announcement.title }}</span>
</div>
<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.isRead" :class="$style.footer">
<MkButton primary @click="read(announcement)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
</div>
</section>
</MkPagination>
</div>
</MkSpacer>
</MkStickyContainer>
</template>
@ -27,30 +43,64 @@ SPDX-License-Identifier: AGPL-3.0-only
import { ref } from 'vue';
import MkPagination from '@/components/MkPagination.vue';
import MkButton from '@/components/MkButton.vue';
import MkInfo from '@/components/MkInfo.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import { $i } from '@/account';
import { $i, updateAccount } from '@/account';
const pagination = {
const paginationCurrent = {
endpoint: 'announcements' as const,
limit: 10,
params: {
isActive: true,
},
};
const paginationPast = {
endpoint: 'announcements' as const,
limit: 10,
params: {
isActive: false,
},
};
const paginationEl = ref<InstanceType<typeof MkPagination>>();
function read(id: string) {
const tab = ref('current');
async function read(announcement) {
if (announcement.needConfirmationToRead) {
const confirm = await os.confirm({
type: 'question',
title: i18n.ts._announcement.readConfirmTitle,
text: i18n.t('_announcement.readConfirmText', { title: announcement.title }),
});
if (confirm.canceled) return;
}
if (!paginationEl.value) return;
paginationEl.value.updateItem(id, announcement => {
announcement.isRead = true;
return announcement;
paginationEl.value.updateItem(announcement.id, a => {
a.isRead = true;
return a;
});
os.api('i/read-announcement', { announcementId: announcement.id });
updateAccount({
unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== announcement.id),
});
os.api('i/read-announcement', { announcementId: id });
}
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
const headerTabs = $computed(() => [{
key: 'current',
title: i18n.ts.currentAnnouncements,
icon: 'ti ti-flare',
}, {
key: 'past',
title: i18n.ts.pastAnnouncements,
icon: 'ti ti-point',
}]);
definePageMetadata({
title: i18n.ts.announcements,
@ -58,27 +108,34 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
.ruryvtyk {
> .announcement {
padding: 16px;
<style lang="scss" module>
.announcement {
padding: 16px;
}
> .header {
margin-bottom: 16px;
font-weight: bold;
}
.forYou {
display: flex;
align-items: center;
line-height: 24px;
font-size: 90%;
white-space: pre;
color: #d28a3f;
}
> .content {
> img {
display: block;
max-height: 300px;
max-width: 100%;
}
}
.header {
margin-bottom: 16px;
font-weight: bold;
}
> .footer {
margin-top: 16px;
}
.content {
> img {
display: block;
max-height: 300px;
max-width: 100%;
}
}
.footer {
margin-top: 16px;
}
</style>