Fix problem with pinch zoom and long-press (#4734)

open-chat-labs · Nov 8, 2023 · e68669a · e68669a
1 parent 40bee73
commit e68669a
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/frontend/app/src/actions/longpress.ts b/frontend/app/src/actions/longpress.ts
@@ -16,8 +16,8 @@ export function longpress(node: HTMLElement, onlongpress: () => void) {
 
     function onTouchStart(e: TouchEvent) {
         const t = e.changedTouches[0];
-        startX = t.clientX;
-        startY = t.clientY;
+        startX = t.screenX;
+        startY = t.screenY;
         clearLongPressTimer();
         longPressTimer = window.setTimeout(() => {
             const lastScroll = get(eventListLastScrolled);
@@ -29,8 +29,8 @@ export function longpress(node: HTMLElement, onlongpress: () => void) {
     }
 
     function onTouchMove({ changedTouches: [t] }: TouchEvent) {
-        const diffX = Math.abs(startX - t.clientX);
-        const diffY = Math.abs(startY - t.clientY);
+        const diffX = Math.abs(startX - t.screenX);
+        const diffY = Math.abs(startY - t.screenY);
         if (diffX >= 10 || diffY >= 10) {
             clearLongPressTimer();
         }

diff --git a/frontend/app/src/components/App.svelte b/frontend/app/src/components/App.svelte
@@ -12,7 +12,6 @@
     import SwitchDomain from "./SwitchDomain.svelte";
     import Upgrading from "./upgrading/Upgrading.svelte";
     import UpgradeBanner from "./UpgradeBanner.svelte";
-    import { mobileOperatingSystem } from "../utils/devices";
     import { currentTheme } from "../theme/themes";
     import "../stores/fontSize";
     import Profiler from "./Profiler.svelte";
@@ -80,9 +79,6 @@
         if (client.captureReferralCode()) {
             page.replace(removeQueryStringParam("ref"));
         }
-        if (mobileOperatingSystem === "iOS") {
-            viewPortContent += ", maximum-scale=1";
-        }
         calculateHeight();
 
         window.addEventListener("orientationchange", calculateHeight);

diff --git a/frontend/app/src/components/home/AccountInfo.svelte b/frontend/app/src/components/home/AccountInfo.svelte
@@ -16,6 +16,7 @@
     export let ledger: string;
     export let centered = false;
     export let border = true;
+    export let fullWidthOnMobile: boolean = false;
 
     $: cryptoLookup = client.cryptoLookup;
     $: tokenDetails = $cryptoLookup[ledger];
@@ -43,7 +44,7 @@
 </script>
 
 <div class="account-info">
-    <QRCode text={account} size={qrSize} logo={tokenDetails.logo} {border} />
+    <QRCode {fullWidthOnMobile} text={account} size={qrSize} logo={tokenDetails.logo} {border} />
     <p class="your-account" class:centered>
         {$_("tokenTransfer.yourAccount", { values: { token: symbol } })}
     </p>

diff --git a/frontend/app/src/components/home/upgrade/Payment.svelte b/frontend/app/src/components/home/upgrade/Payment.svelte
@@ -123,7 +123,12 @@
                 {/each}
             </div>
             <div class="right">
-                <AccountInfo border={false} centered {ledger} user={client.user} />
+                <AccountInfo
+                    fullWidthOnMobile
+                    border={false}
+                    centered
+                    {ledger}
+                    user={client.user} />
             </div>
         </div>