feat: お知らせの確認待機時間・優先順位機能

b7fd6bf33a835fd73c2a86eb007074d3680f6efd によるリワーク

This reverts commit eeef3965b7
This reverts commit 04fefb2056
This reverts commit 576251200f
This commit is contained in:
まっちゃとーにゅ 2023-08-19 04:48:28 +09:00
parent 3c2b83c3ae
commit 6893e5d60b
No known key found for this signature in database
GPG key ID: 6AFBBF529601C1DB
27 changed files with 832 additions and 264 deletions

View file

@ -13,16 +13,16 @@ SPDX-License-Identifier: AGPL-3.0-only
<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>
<Mfm :text="announcement.title"/>
</div>
<div :class="$style.text"><Mfm :text="announcement.text"/></div>
<MkButton primary full @click="ok">{{ i18n.ts.ok }}</MkButton>
<div :class="$style.content"><Mfm :text="announcement.text"/></div>
<MkButton :class="$style.gotIt" primary full :disabled="gotItDisabled" @click="gotIt">{{ i18n.ts.gotIt }}<span v-if="secVisible"> ({{ sec }})</span></MkButton>
</div>
</MkModal>
</template>
<script lang="ts" setup>
import { onMounted, shallowRef } from 'vue';
import { onMounted, ref, shallowRef } from 'vue';
import * as misskey from 'misskey-js';
import * as os from '@/os';
import MkModal from '@/components/MkModal.vue';
@ -37,8 +37,11 @@ const props = withDefaults(defineProps<{
const rootEl = shallowRef<HTMLDivElement>();
const modal = shallowRef<InstanceType<typeof MkModal>>();
const gotItDisabled = ref(true);
const secVisible = ref(true);
const sec = ref(props.announcement.closeDuration);
async function ok() {
async function gotIt(): Promise<void> {
if (props.announcement.needConfirmationToRead) {
const confirm = await os.confirm({
type: 'question',
@ -48,15 +51,19 @@ async function ok() {
if (confirm.canceled) return;
}
modal.value.close();
os.api('i/read-announcement', { announcementId: props.announcement.id });
updateAccount({
unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== props.announcement.id),
});
await os.api('i/read-announcement', { announcementId: props.announcement.id });
if ($i) {
updateAccount({
unreadAnnouncements: $i.unreadAnnouncements.filter((a: { id: string; }) => a.id !== props.announcement.id),
});
}
modal.value?.close();
}
function onBgClick() {
rootEl.value.animate([{
function onBgClick(): void {
if (sec.value > 0) return;
rootEl.value?.animate([{
offset: 0,
transform: 'scale(1)',
}, {
@ -71,6 +78,21 @@ function onBgClick() {
}
onMounted(() => {
if (sec.value > 0 ) {
const waitTimer = setInterval(() => {
if (sec.value === 0) {
clearInterval(waitTimer);
gotItDisabled.value = false;
secVisible.value = false;
} else {
gotItDisabled.value = true;
}
sec.value = sec.value - 1;
}, 1000);
} else {
gotItDisabled.value = false;
secVisible.value = false;
}
});
</script>
@ -94,11 +116,7 @@ onMounted(() => {
margin-right: 0.5em;
}
.title {
font-weight: bold;
}
.text {
.content {
margin: 1em 0;
}
</style>