mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-16 07:38:18 +09:00
Code

improve: Change how notification swipe thresholds are calculated

Browse Source
This commit is contained in:
NoriDev 2022-09-13 15:50:26 +09:00
parent 3effca085c
commit aa024a585f
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/client/src/components/MkNotificationToast.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-notification-toast" :style="{ zIndex }"> <div class="mk-notification-toast" :style="{ zIndex }">
<transition :name="$store.state.animation ? 'notification-toast' : ''" appear @after-leave="$emit('closed')"> <transition :name="$store.state.animation ? 'notification-toast' : ''" appear @after-leave="$emit('closed')">
<div v-if="showing" class="notification _acrylic" :style="isMoving ? `transition: none; transform: translateX(${x}px)` : ''" @mousedown="startSwipe" @touchstart="startSwipe"> <div ref="noti" v-if="showing" class="notification _acrylic" :style="isMoving ? `transition: none; transform: translateX(${x}px)` : ''" @mousedown="startSwipe" @touchstart="startSwipe">
<XNotification class="inner" :notification="notification"/> <XNotification class="inner" :notification="notification"/>
<button class="_button x _shadow" @click="showing = false"> <button class="_button x _shadow" @click="showing = false">
<i class="fas fa-times"></i> <i class="fas fa-times"></i>
@ -25,10 +25,12 @@ const emit = defineEmits<{
}>(); }>();
const zIndex = os.claimZIndex('high'); const zIndex = os.claimZIndex('high');
const noti = $ref<HTMLElement>();
let showing = $ref(true); let showing = $ref(true);
let isMoving = $ref(false); let isMoving = $ref(false);
let x = $ref(0); let x = $ref(0);
let currentTimeout = $ref(0); let currentTimeout = $ref(0);
let globalWidth = $ref(0);
let previousTouchX = $ref(0); let previousTouchX = $ref(0);
onMounted(() => { onMounted(() => {
@ -83,6 +85,7 @@ function onTouchMove(ev: TouchEvent) {
function startSwipe() { function startSwipe() {
isMoving = true; isMoving = true;
globalWidth = noti.clientWidth;
clearTimeout(); clearTimeout();
} }
@ -93,7 +96,7 @@ function processSwipe(movementX: number) {
function endSwipe() { function endSwipe() {
isMoving = false; isMoving = false;
if (x > 150) { if (x > globalWidth / 5 * 2) {
x = 0; x = 0;
nextTick(() => showing = false); nextTick(() => showing = false);
} else { } else {