Disable double tap and update mobile UI (#2312)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2024-12-22 19:11:33 +03:00 · 2022-10-20 05:43:05 +03:00 · 2022-10-20 05:43:05 +03:00 · 25a5c354bb
commit 25a5c354bb
parent 39b8454317
8 changed files with 74 additions and 15 deletions
--- a/dev/prod/src/index.ejs
+++ b/dev/prod/src/index.ejs
@ -3,7 +3,6 @@

 <head>
  <meta charset="utf8">
-  <meta name="viewport" content="width=device-width">

  <title>Platform</title>

--- a/dev/prod/webpack.config.js
+++ b/dev/prod/webpack.config.js
@ -168,7 +168,11 @@ module.exports = {
  },
  mode,
  plugins: [
-    new HtmlWebpackPlugin(), 
+    new HtmlWebpackPlugin({
+      meta: {
+        viewport: 'width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=1'
+      }
+    }),
    ...(prod ? [new CompressionPlugin()] : []),
    // new MiniCssExtractPlugin({
    //   filename: '[name].[id][contenthash].css'
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@ -61,6 +61,7 @@

 * {
  box-sizing: border-box;
+  touch-action: manipulation;
  scrollbar-color: var(--theme-menu-color) var(--theme-bg-color);
  scrollbar-width: thin;
  --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
@ -119,4 +120,5 @@ body {
  height: var(--app-height);
  width: 100%;
  overflow: hidden;
+  touch-action: none;
 }
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@ -193,9 +193,11 @@
    }}
    bind:this={tooltipHTML}
  >
-    {#if $tooltip.label}<div class="fs-title mb-4">
+    {#if $tooltip.label}
+      <div class="fs-title mb-4">
        <Label label={$tooltip.label} params={$tooltip.props ?? {}} />
-      </div>{/if}
+      </div>
+    {/if}
    {#if typeof $tooltip.component === 'string'}
      <Component
        is={$tooltip.component}
--- a/packages/ui/src/components/internal/Root.svelte
+++ b/packages/ui/src/components/internal/Root.svelte
@ -13,6 +13,8 @@
  import Clock from './Clock.svelte'
  // import Mute from './icons/Mute.svelte'
  import WiFi from './icons/WiFi.svelte'
+  import Computer from './icons/Computer.svelte'
+  import Phone from './icons/Phone.svelte'
  import ThemeSelector from './ThemeSelector.svelte'
  import FontSizeSelector from './FontSizeSelector.svelte'
  import LangSelector from './LangSelector.svelte'
@ -58,11 +60,11 @@
  let docHeight: number = window.innerHeight
  let maxLenght: number
  $: maxLenght = docWidth >= docHeight ? docWidth : docHeight
-  let isPortrait: boolean
-  $: isPortrait = docWidth <= docHeight
  let isMobile: boolean
  let alwaysMobile: boolean = false
  $: isMobile = alwaysMobile || checkMobile()
+  let isPortrait: boolean
+  $: isPortrait = docWidth <= docHeight

  $: $deviceInfo.docWidth = docWidth
  $: $deviceInfo.docHeight = docHeight
@ -70,6 +72,18 @@
  $: $deviceInfo.isMobile = isMobile

  $: document.documentElement.style.setProperty('--app-height', `${docHeight}px`)
+
+  let doubleTouchStartTimestamp = 0
+  document.addEventListener('touchstart', (event) => {
+    const now = +new Date()
+    if (doubleTouchStartTimestamp + 500 > now) {
+      event.preventDefault()
+    }
+    doubleTouchStartTimestamp = now
+  })
+  document.addEventListener('dblclick', (event) => {
+    event.preventDefault()
+  })
 </script>

 <svelte:window bind:innerWidth={docWidth} bind:innerHeight={docHeight} />
@ -99,13 +113,19 @@
          </div>
          <div
            class="flex-center widget mr-3"
-            class:on={isMobile}
-            class:always={alwaysMobile}
+            class:rotated={!isPortrait && isMobile}
            on:click={() => {
              alwaysMobile = !alwaysMobile
              document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`)
            }}
          >
+            <svelte:component
+              this={isMobile ? Phone : Computer}
+              fill={alwaysMobile ? 'var(--won-color)' : 'var(--content-color)'}
+              size={'small'}
+            />
+          </div>
+          <div class="flex-center widget cursor-pointer mr-3">
            <WiFi size={'small'} />
          </div>
        </div>
@ -158,13 +178,11 @@
        height: 16px;
        font-size: 14px;
        color: var(--content-color);
+        transition: transform 0.15s ease-in-out;

-        &.on {
-          color: var(--caption-color);
-
-          &.always {
-            color: var(--won-color);
-          }
+        &.rotated {
+          transform-origin: center center;
+          transform: rotate(90deg);
        }
      }
    }
--- a/packages/ui/src/components/internal/icons/Computer.svelte
+++ b/packages/ui/src/components/internal/icons/Computer.svelte
@ -0,0 +1,15 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      d="M20.5,3.2h-17C2.5,3.2,1.8,4,1.8,5v10c0,1,0.8,1.8,1.8,1.8h5.2v3H7c-0.4,0-0.8,0.3-0.8,0.8c0,0.4,0.3,0.8,0.8,0.8h2.5h5H17c0.4,0,0.8-0.3,0.8-0.8c0-0.4-0.3-0.8-0.8-0.8h-1.8v-3h5.2c1,0,1.8-0.8,1.8-1.8V5C22.2,4,21.5,3.2,20.5,3.2z M13.8,19.8h-3.5v-3h3.5V19.8z M20.8,15c0,0.1-0.1,0.2-0.2,0.2h-6h-5h-6c-0.1,0-0.2-0.1-0.2-0.2V5c0-0.1,0.1-0.2,0.2-0.2h17c0.1,0,0.2,0.1,0.2,0.2V15z"
+    />
+    <path
+      d="M13,12.8h-2c-0.4,0-0.8,0.3-0.8,0.8c0,0.4,0.3,0.8,0.8,0.8h2c0.4,0,0.8-0.3,0.8-0.8C13.8,13.1,13.4,12.8,13,12.8z"
+    />
+  </g>
+</svg>
--- a/packages/ui/src/components/internal/icons/Phone.svelte
+++ b/packages/ui/src/components/internal/icons/Phone.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      d="M17,1.2H7c-1.2,0-2.2,1-2.2,2.2v17c0,1.2,1,2.2,2.2,2.2h10c1.2,0,2.2-1,2.2-2.2v-17C19.2,2.3,18.2,1.2,17,1.2z M17.8,20.5c0,0.4-0.3,0.8-0.8,0.8H7c-0.4,0-0.8-0.3-0.8-0.8v-17c0-0.4,0.3-0.8,0.8-0.8h10c0.4,0,0.8,0.3,0.8,0.8V20.5z"
+    />
+    <path
+      d="M11,5.8h2c0.4,0,0.8-0.3,0.8-0.8c0-0.4-0.3-0.8-0.8-0.8h-2c-0.4,0-0.8,0.3-0.8,0.8C10.2,5.4,10.6,5.8,11,5.8z"
+    />
+    <path
+      d="M14,18.2h-4c-0.4,0-0.8,0.3-0.8,0.8c0,0.4,0.3,0.8,0.8,0.8h4c0.4,0,0.8-0.3,0.8-0.8 C14.8,18.6,14.4,18.2,14,18.2z"
+    />
+  </g>
+</svg>
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@ -593,6 +593,7 @@
    min-height: 0;
    width: 100%;
    height: 100%;
+    touch-action: none;
  }
  .hamburger-container {
    display: flex;
@ -605,7 +606,7 @@
      margin-top: 0.25rem;
    }
    &.mini {
-      position: fixed;
+      position: absolute;
      top: 4px;
      left: 4px;
    }