fix: Remove titlebar text on windows

ImpossibleReality · Jan 29, 2024 · c7ac73e · c7ac73e
1 parent 608c86f
commit c7ac73e
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 29 deletions.
diff --git a/desktop/src-tauri/Cargo.toml b/desktop/src-tauri/Cargo.toml
@@ -12,7 +12,7 @@ edition.workspace = true
 tauri-build = { version = "1.5", features = [] }
 
 [dependencies]
-tauri = { version = "1.5", features = [ "window-show", "updater", "window-set-always-on-top", "window-start-dragging", "shell-open"] }
+tauri = { version = "1.5", features = [ "os-all", "window-show", "updater", "window-set-always-on-top", "window-start-dragging", "shell-open"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 siffra = { path = "../../core" }

diff --git a/desktop/src-tauri/tauri.conf.json b/desktop/src-tauri/tauri.conf.json
@@ -20,6 +20,9 @@
         "show": true,
         "startDragging": true,
         "setAlwaysOnTop": true
+      },
+      "os": {
+        "all": true
       }
     },
     "bundle": {

diff --git a/desktop/src/App.svelte b/desktop/src/App.svelte
@@ -17,7 +17,6 @@
 
 <style>
   main {
-    padding-top: var(--nav-height);
     box-sizing: border-box;
     height: 100vh;
     overflow-y: scroll;

diff --git a/desktop/src/lib/Titlebar.svelte b/desktop/src/lib/Titlebar.svelte
@@ -1,44 +1,58 @@
 <script>
   import Toggle from "./Toggle.svelte";
   import { appWindow } from "@tauri-apps/api/window";
+  import { platform } from "@tauri-apps/api/os";
 
   let toggled = false;
+  let isMacos = false;
+
   $: {
     appWindow.setAlwaysOnTop(toggled);
   }
 </script>
 
-<div data-tauri-drag-region class="titlebar">
-  <span class="titlebar-text">Siffra</span>
-  <div class="titlebar-menu">
-    <Toggle bind:toggled>
-      <svg
-        width="14px"
-        height="14px"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        stroke-width="1.5"
-        ><path
-          d="M9.5 14.5L3 21"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        ></path><path
-          d="M5.00007 9.48528L14.1925 18.6777L15.8895 16.9806L15.4974 13.1944L21.0065 8.5211L15.1568 2.67141L10.4834 8.18034L6.69713 7.78823L5.00007 9.48528Z"
-          fill="currentColor"
-          stroke="currentColor"
+{#await platform() then platform}
+  <div
+    data-tauri-drag-region
+    class="titlebar"
+    class:macos={platform === "darwin"}
+  >
+    <span class="titlebar-text">Siffra</span>
+    <div class="titlebar-menu">
+      <Toggle bind:toggled>
+        <svg
+          width="14px"
+          height="14px"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
           stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        ></path></svg
-      >
-    </Toggle>
+          ><path
+            d="M9.5 14.5L3 21"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ></path><path
+            d="M5.00007 9.48528L14.1925 18.6777L15.8895 16.9806L15.4974 13.1944L21.0065 8.5211L15.1568 2.67141L10.4834 8.18034L6.69713 7.78823L5.00007 9.48528Z"
+            fill="currentColor"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ></path></svg
+        >
+      </Toggle>
+    </div>
   </div>
-</div>
+  <div class="titlebar-padding"></div>
+{/await}
 
 <style>
+  .titlebar-padding {
+    height: var(--nav-height);
+  }
+
   .titlebar {
     height: var(--nav-height);
     width: 100vw;
@@ -52,12 +66,17 @@
   }
 
   .titlebar-text {
+    visibility: hidden;
     user-select: none;
     pointer-events: none;
     font-weight: bold;
     font-size: 0.8rem;
   }
 
+  .titlebar.macos .titlebar-text {
+    visibility: visible;
+  }
+
   .titlebar-menu {
     position: fixed;
     top: 0;