Use window-controls-overlay (#126)

kangasta · Jun 4, 2024 · 7acf812 · 7acf812
1 parent 0e2b52d
commit 7acf812
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 14 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+/dist/
diff --git a/public/manifest.json b/public/manifest.json
@@ -23,6 +23,9 @@
   ],
   "start_url": "./index.html",
   "display": "fullscreen",
+  "display_override": [
+    "window-controls-overlay"
+  ],
   "theme_color": "seagreen",
   "background_color": "seagreen"
 }
diff --git a/src/components/Menu/Menu.svelte b/src/components/Menu/Menu.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+
   import { actions } from "../../stores";
   import Modal from "../Modal.svelte";
 
@@ -12,19 +14,47 @@
       open = action === "open";
       e.stopPropagation();
     };
+
+  let menuEl: Element;
+  let belowTitlebar = "";
+  const handleResize = () => {
+    if (!(navigator as any).windowControlsOverlay?.visible) {
+      return;
+    }
+
+    const menuRect = menuEl.getBoundingClientRect();
+    const titlebarRect = (
+      navigator as any
+    ).windowControlsOverlay?.getTitlebarAreaRect();
+
+    if (
+      titlebarRect.left > menuRect.left ||
+      titlebarRect.right < menuRect.right
+    ) {
+      belowTitlebar = "below-titlebar";
+    } else {
+      belowTitlebar = "";
+    }
+  };
+  onMount(handleResize);
 </script>
 
-<div class="menu">
-  <IconButton icon={"Menu"} label={"Menu"} onClick={handleClick("open")} />
-  {#if $actions.help !== undefined}
-    <IconButton icon="Help" label="Help" onClick={$actions.help} />
-  {/if}
-  {#if $actions.shuffle !== undefined}
-    <IconButton icon="Shuffle" label="Shuffle" onClick={$actions.shuffle} />
-  {/if}
-  {#if $actions.undo !== undefined}
-    <IconButton icon="Undo" label="Undo" onClick={$actions.undo} />
-  {/if}
+<svelte:window on:resize={handleResize} />
+<div class="titlebar">
+  <div class="window-controls"></div>
+  <div bind:this={menuEl} class="menu {belowTitlebar}">
+    <IconButton icon={"Menu"} label={"Menu"} onClick={handleClick("open")} />
+    {#if $actions.help !== undefined}
+      <IconButton icon="Help" label="Help" onClick={$actions.help} />
+    {/if}
+    {#if $actions.shuffle !== undefined}
+      <IconButton icon="Shuffle" label="Shuffle" onClick={$actions.shuffle} />
+    {/if}
+    {#if $actions.undo !== undefined}
+      <IconButton icon="Undo" label="Undo" onClick={$actions.undo} />
+    {/if}
+  </div>
+  <div class="window-controls"></div>
 </div>
 
 {#if open}
@@ -71,9 +101,21 @@
 {/if}
 
 <style lang="sass">
-  .menu
+  .titlebar
+    app-region: drag
+    display: flex
     margin-bottom: 0.25em
-    text-align: center
+
+  .window-controls
+    flex: 1
+    height: env(titlebar-area-height, auto)
+
+  .menu
+    app-region: no-drag
+    transition: margin-top 125ms
+
+    &.below-titlebar
+      margin-top: env(titlebar-area-height)
 
   .drawer
     display: flex

diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
@@ -37,11 +37,17 @@
     open = false;
     setTimeout(() => dispatch("close"), 125);
   };
+
+  let windowControlsOnLeft =
+    (navigator as any).windowControlsOverlay?.visible &&
+    (navigator as any).windowControlsOverlay?.getTitlebarAreaRect().left > 0;
 </script>
 
 <div class="backdrop" class:open />
 <div
-  class="modal {position}"
+  class="modal {position} {windowControlsOnLeft
+    ? 'window-controls-on-left'
+    : ''}"
   class:open
   role="dialog"
   aria-labelledby={titleId}
@@ -124,6 +130,13 @@
         opacity: 1
         transform: translateX(0)
 
+      &.window-controls-on-left
+        @media (display-mode: window-controls-overlay)
+          border-radius: 0 0.25em 0 0
+          height: calc(102vh - env(titlebar-area-height) - 1rem)
+          padding: 0 1em 2vh
+          top: calc(env(titlebar-area-height) + 1rem)
+
     background: white
     z-index: 4