RanchiMall/messenger
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.23.70

Browse Source 
Fix (user): touch and hold interaction not firing unless touch end
This commit is contained in:
sairaj mote 2021-02-01 18:32:46 +05:30
parent b003dda997
commit 974f70400f
4 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/main.css
View File

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

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

11
css/main.scss
View File

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

24
index.html
View File

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