v0.23.70

Fix (user): touch and hold interaction not firing unless touch end

css/main.css

@@ -750,7 +750,7 @@ sm-button.danger {
   margin-bottom: 0.5rem;
 }
 #contact_details_popup #contact_name {
-  margin: 0.6rem 0;
+  margin: 0.6rem 1.5rem;
 }
 #contact_details_popup #contact_name::part(text) {
   font-size: 1.2rem;
@@ -922,6 +922,7 @@ sm-button.danger {
   display: flex;
   align-items: center;
   padding: 0.8rem 1.5rem;
+  user-select: none;
 }
 .option .icon {
   height: 1.4rem;
@@ -1044,7 +1045,8 @@ sm-button.danger {
   overflow-y: auto;
 }
 #contacts .scrolling-wrapper .empty-state {
-  padding: 0 1.5rem;
+  padding: 1.5rem;
+  text-align: center;
 }
 #contacts #contacts_container {
   padding-bottom: 6rem;
@@ -1203,7 +1205,7 @@ sm-button.danger {
   top: 0;
   padding: 1rem;
   min-height: 4rem;
-  backdrop-filter: blur(1rem);
+  background-color: rgba(var(--foreground-color), 0.8);
   z-index: 1;
 }
 #chat_details_panel header .icon {
@@ -1966,7 +1968,8 @@ sm-panel {
 @media (hover: none) {
   .contact-preview,
 .contact,
-.icon {
+.icon,
+.option {
     -webkit-tap-highlight-color: transparent;
   }
 

css/main.scss

@@ -695,7 +695,7 @@ sm-button.danger{
         margin-bottom: 0.5rem;
     }
     #contact_name{
-        margin: 0.6rem 0;
+        margin: 0.6rem 1.5rem;
         &::part(text){
             font-size: 1.2rem;
             font-weight: 500;
@@ -857,6 +857,7 @@ sm-button.danger{
     display: flex;
     align-items: center;
     padding: 0.8rem 1.5rem;
+    user-select: none;
     .icon{
         height: 1.4rem;
         width: 1.4rem;
@@ -974,7 +975,8 @@ sm-button.danger{
         flex: 1;
         overflow-y: auto;
         .empty-state{
-            padding: 0 1.5rem;
+            padding: 1.5rem;
+            text-align: center;
         }
     }
     #contacts_container{
@@ -1132,7 +1134,7 @@ sm-button.danger{
         top: 0;
         padding: 1rem;
         min-height: 4rem;
-        backdrop-filter: blur(1rem);
+        background-color: rgba(var(--foreground-color), 0.8);
         z-index: 1;
         .icon{
             height: 2.3rem;
@@ -1860,7 +1862,8 @@ sm-panel{
 @media (hover: none){
     .contact-preview,
     .contact,
-    .icon{
+    .icon,
+    .option{
         -webkit-tap-highlight-color: transparent;
     }
     .contact .menu{

index.html

@@ -752,8 +752,8 @@
             }
         })
 
+        let isHapticOn
         if(hapticFeedbackSwitcher){
-            let isHapticOn
             if(localStorage.getItem('haptic') === null)
                 localStorage.setItem("haptic", "on");
         
@@ -1836,27 +1836,27 @@
             }
         })
 
-        let touchStartTime = 0
-        let touchEndTime = 0
+        let holdTimeout
         let holdThreshold = 500
 
         getRef('chat_page').addEventListener('touchstart', e => {
             if(e.target.closest('.contact')){
-                touchStartTime = e.timeStamp
-            }
-        })
-
-        getRef('chat_page').addEventListener('touchend', e => {
-            if(e.target.closest('.contact')){
-                touchEndTime = e.timeStamp
-                if(touchEndTime - touchStartTime > holdThreshold){
+                holdTimeout = setTimeout(() => {
+                    if(isHapticOn)
+                        navigator.vibrate(100)
                     let contact = e.target.closest(".contact")
                     clickedContact['chatCard'] = contact
                     clickedContact['floID'] = contact.getAttribute("flo-id")
                     clickedContact['name'] = contact.getAttribute("name")
                     clickedContact['isGroup'] = floGlobals.groups.hasOwnProperty(clickedContact['floID'])
                     showPopup('contact_details_popup')
-                }
+                }, 500)
+            }
+        })
+
+        getRef('chat_page').addEventListener('touchend', e => {
+            if(e.target.closest('.contact')){
+                clearTimeout(holdTimeout)
             }
         })