feat: お知らせの確認待機時間・優先順位機能
b7fd6bf33a835fd73c2a86eb007074d3680f6efd によるリワーク This reverts commiteeef3965b7
This reverts commit04fefb2056
This reverts commit576251200f
This commit is contained in:
parent
3c2b83c3ae
commit
6893e5d60b
27 changed files with 832 additions and 264 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue