fix: Renote通知にプロフィールアイコンが表示される問題
This commit is contained in:
NoriDev
parent
5003c20672
commit
c25ad5051b
|
|
@ -46,6 +46,7 @@
|
|||
- Fix: 위젯 추가 영역의 위치가 오른쪽으로 치우쳐 있음
|
||||
- Fix: 노트 작성 폼의 프로필 아이콘 여백 조정
|
||||
- Fix: 새 노트 알림이 프로필 아이콘을 밀어내는 문제
|
||||
- Fix: 리노트 알림에 프로필 아이콘이 뜨는 문제
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { computed, createApp, watch, markRaw, version as vueVersion, defineAsync
|
|||
import { common } from './common';
|
||||
import { version, ui, lang, updateLocale } from '@/config';
|
||||
import { i18n, updateI18n } from '@/i18n';
|
||||
import { confirm, alert, post, popup, toast } from '@/os';
|
||||
import {confirm, alert, post, popup, toast, welcomeToast} from '@/os';
|
||||
import { useStream } from '@/stream';
|
||||
import * as sound from '@/scripts/sound';
|
||||
import { $i, refreshAccount, login, updateAccount, signout } from '@/account';
|
||||
|
|
@ -175,7 +175,7 @@ export async function mainBoot() {
|
|||
const lastUsedDate = parseInt(lastUsed, 10);
|
||||
// 二時間以上前なら
|
||||
if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) {
|
||||
toast(i18n.t('welcomeBackWithName', {
|
||||
welcomeToast(i18n.t('welcomeBackWithName', {
|
||||
name: $i.name || $i.username,
|
||||
}));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
appear @afterLeave="emit('closed')"
|
||||
>
|
||||
<div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }">
|
||||
<CPAvatar :class="$style.avatar" :user="$i"/>
|
||||
<div style="padding: 16px 24px;">
|
||||
{{ message }}
|
||||
</div>
|
||||
|
|
@ -21,8 +20,6 @@
|
|||
import { onMounted } from 'vue';
|
||||
import * as os from '@/os';
|
||||
import { defaultStore } from '@/store';
|
||||
import { $i } from "@/account";
|
||||
import CPAvatar from '@/components/global/toast-avatar.vue';
|
||||
|
||||
defineProps<{
|
||||
message: string;
|
||||
|
|
@ -68,20 +65,5 @@ onMounted(() => {
|
|||
overflow: clip;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.5s, transform 0.5s;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
border-radius: 100%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
87
packages/frontend/src/components/MkWelcomeToast.vue
Normal file
87
packages/frontend/src/components/MkWelcomeToast.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div>
|
||||
<Transition
|
||||
:enterActiveClass="defaultStore.state.animation ? $style.transition_toast_enterActive : ''"
|
||||
:leaveActiveClass="defaultStore.state.animation ? $style.transition_toast_leaveActive : ''"
|
||||
:enterFromClass="defaultStore.state.animation ? $style.transition_toast_enterFrom : ''"
|
||||
:leaveToClass="defaultStore.state.animation ? $style.transition_toast_leaveTo : ''"
|
||||
appear @afterLeave="emit('closed')"
|
||||
>
|
||||
<div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }">
|
||||
<CPAvatar :class="$style.avatar" :user="$i"/>
|
||||
<div style="padding: 16px 24px;">
|
||||
{{ message }}
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue';
|
||||
import * as os from '@/os';
|
||||
import { defaultStore } from '@/store';
|
||||
import { $i } from '@/account';
|
||||
import CPAvatar from '@/components/global/toast-avatar.vue';
|
||||
|
||||
defineProps<{
|
||||
message: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
}>();
|
||||
|
||||
const zIndex = os.claimZIndex('high');
|
||||
let showing = $ref(true);
|
||||
|
||||
onMounted(() => {
|
||||
window.setTimeout(() => {
|
||||
showing = false;
|
||||
}, 4000);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.transition_toast_enterActive,
|
||||
.transition_toast_leaveActive {
|
||||
transition: opacity 0.3s, transform 0.3s !important;
|
||||
}
|
||||
.transition_toast_enterFrom,
|
||||
.transition_toast_leaveTo {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.root {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
margin: 0 auto;
|
||||
margin-top: 16px;
|
||||
min-width: 300px;
|
||||
max-width: calc(100% - 32px);
|
||||
width: min-content;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
overflow: clip;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.5s, transform 0.5s;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
border-radius: 100%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,6 +11,7 @@ import MkPostFormDialog from '@/components/MkPostFormDialog.vue';
|
|||
import MkWaitingDialog from '@/components/MkWaitingDialog.vue';
|
||||
import MkPageWindow from '@/components/MkPageWindow.vue';
|
||||
import MkToast from '@/components/MkToast.vue';
|
||||
import MkWelcomeToast from '@/components/MkWelcomeToast.vue';
|
||||
import MkDialog from '@/components/MkDialog.vue';
|
||||
import MkEmojiPickerDialog from '@/components/MkEmojiPickerDialog.vue';
|
||||
import MkEmojiPickerWindow from '@/components/MkEmojiPickerWindow.vue';
|
||||
|
|
@ -178,6 +179,12 @@ export function toast(message: string) {
|
|||
}, {}, 'closed');
|
||||
}
|
||||
|
||||
export function welcomeToast(message: string) {
|
||||
popup(MkWelcomeToast, {
|
||||
message,
|
||||
}, {}, 'closed');
|
||||
}
|
||||
|
||||
export function alert(props: {
|
||||
type?: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
|
||||
title?: string | null;
|
||||
|
|
|
|||
Loading…
Reference in a new issue