enhance(client): Renote時に表示されるトーストポップアップにアイコンを追加
This commit is contained in:
parent
851d2a48a0
commit
803e077e60
|
@ -68,6 +68,7 @@
|
|||
- 네비게이션 메뉴 편집 페이지 UI 개선 ([shrimpia bf8c84d](https://github.com/shrimpia/misskey/commit/bf8c84d299bd06cb21e18a9fe68ff9abc11fd4a0))
|
||||
- 「노트 본문에 번역 버튼 표시」를 선택 사항으로 설정
|
||||
- 답글도 번역할 수 있도록 개선
|
||||
- 리노트 했을 때 뜨는 토스트 팝업에 아이콘 추가
|
||||
- Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
|
||||
- Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
|
||||
- Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제
|
||||
|
|
|
@ -306,7 +306,7 @@ function renote(viaKeyboard = false) {
|
|||
renoteId: appearNote.id,
|
||||
channelId: appearNote.channelId,
|
||||
}).then(() => {
|
||||
os.toast(i18n.ts.renoted);
|
||||
os.noteToast(i18n.ts.renoted);
|
||||
});
|
||||
},
|
||||
}, {
|
||||
|
@ -336,7 +336,7 @@ function renote(viaKeyboard = false) {
|
|||
os.api('notes/create', {
|
||||
renoteId: appearNote.id,
|
||||
}).then(() => {
|
||||
os.toast(i18n.ts.renoted);
|
||||
os.noteToast(i18n.ts.renoted);
|
||||
});
|
||||
},
|
||||
}, {
|
||||
|
|
|
@ -274,7 +274,7 @@ function renote(viaKeyboard = false) {
|
|||
renoteId: appearNote.id,
|
||||
channelId: appearNote.channelId,
|
||||
}).then(() => {
|
||||
os.toast(i18n.ts.renoted);
|
||||
os.noteToast(i18n.ts.renoted);
|
||||
});
|
||||
},
|
||||
}, {
|
||||
|
@ -304,7 +304,7 @@ function renote(viaKeyboard = false) {
|
|||
os.api('notes/create', {
|
||||
renoteId: appearNote.id,
|
||||
}).then(() => {
|
||||
os.toast(i18n.ts.renoted);
|
||||
os.noteToast(i18n.ts.renoted);
|
||||
});
|
||||
},
|
||||
}, {
|
||||
|
|
75
packages/frontend/src/components/MkNoteToast.vue
Normal file
75
packages/frontend/src/components/MkNoteToast.vue
Normal file
|
@ -0,0 +1,75 @@
|
|||
<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.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]" :style="{ zIndex }">
|
||||
<div style="padding: 16px 24px;">
|
||||
<i class="ti ti-check"></i>
|
||||
{{ message }}
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue';
|
||||
import * as os from '@/os';
|
||||
import { defaultStore } from '@/store';
|
||||
|
||||
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: 16px auto 0;
|
||||
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;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
&.reduceBlurEffect {
|
||||
background: var(--panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
</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 MkNoteToast from '@/components/MkNoteToast.vue';
|
||||
import MkWelcomeToast from '@/components/MkWelcomeToast.vue';
|
||||
import MkDialog from '@/components/MkDialog.vue';
|
||||
import MkEmojiPickerDialog from '@/components/MkEmojiPickerDialog.vue';
|
||||
|
@ -179,6 +180,12 @@ export function toast(message: string) {
|
|||
}, {}, 'closed');
|
||||
}
|
||||
|
||||
export function noteToast(message: string) {
|
||||
popup(MkNoteToast, {
|
||||
message,
|
||||
}, {}, 'closed');
|
||||
}
|
||||
|
||||
export function welcomeToast(message: string) {
|
||||
popup(MkWelcomeToast, {
|
||||
message,
|
||||
|
|
Loading…
Reference in a new issue