From aa024a585fd2392ead9920d2c1c0cba4ec9c3295 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Tue, 13 Sep 2022 15:50:26 +0900
Subject: [PATCH] improve: Change how notification swipe thresholds are
 calculated

---
 packages/client/src/components/MkNotificationToast.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkNotificationToast.vue b/packages/client/src/components/MkNotificationToast.vue
index 5a1f2e3f84..574165f4bf 100644
--- a/packages/client/src/components/MkNotificationToast.vue
+++ b/packages/client/src/components/MkNotificationToast.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-notification-toast" :style="{ zIndex }">
 	<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"/>
 			<button class="_button x _shadow" @click="showing = false">
 				<i class="fas fa-times"></i>
@@ -25,10 +25,12 @@ const emit = defineEmits<{
 }>();
 
 const zIndex = os.claimZIndex('high');
+const noti = $ref<HTMLElement>();
 let showing = $ref(true);
 let isMoving = $ref(false);
 let x = $ref(0);
 let currentTimeout = $ref(0);
+let globalWidth = $ref(0);
 let previousTouchX = $ref(0);
 
 onMounted(() => {
@@ -83,6 +85,7 @@ function onTouchMove(ev: TouchEvent) {
 
 function startSwipe() {
 	isMoving = true;
+	globalWidth = noti.clientWidth;
 	clearTimeout();
 }
 
@@ -93,7 +96,7 @@ function processSwipe(movementX: number) {
 
 function endSwipe() {
 	isMoving = false;
-	if (x > 150) {
+	if (x > globalWidth / 5 * 2) {
 		x = 0;
 		nextTick(() => showing = false);
 	} else {