proper fullscreen toggle, long station name doesn't break UI

dtcooper · Aug 15, 2023 · e490dfd · e490dfd
1 parent d1e81af
commit e490dfd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 13 deletions.
diff --git a/client/src/main.js b/client/src/main.js
@@ -253,9 +253,9 @@ if (squirrelCheck || !singleInstanceLock) {
       return window.isFullScreen()
     }
   })
-  ipcMain.handle("disable-fullscreen", () => {
+  ipcMain.handle("set-fullscreen", (event, value) => {
     if (window) {
-      window.setFullScreen(false)
+      window.setFullScreen(value)
     }
   })
 

diff --git a/client/src/main/Header.svelte b/client/src/main/Header.svelte
@@ -7,8 +7,9 @@
   import autorenew from "@iconify/icons-mdi/autorenew"
   import cogOutline from "@iconify/icons-mdi/cog-outline"
   import fullscreenExit from "@iconify/icons-mdi/fullscreen-exit"
+  import fullscreenIcon from '@iconify/icons-mdi/fullscreen'
   import { conn } from "../stores/connection"
-  import { config, userConfig, isFullscreen, disableFullscreen } from "../stores/config"
+  import { config, userConfig, isFullscreen, setFullscreen } from "../stores/config"
   import { syncProgress } from "../stores/db"
 
   export let showSyncModal = false
@@ -17,21 +18,19 @@
 
 <div class="col-span-3 flex flex-col gap-6">
   <div class="flex items-center justify-between bg-base-200 px-5 py-2">
-    <div class="flex items-center gap-3 font-mono text-2xl italic md:text-3xl">
+    <div class="flex flex-1 items-center gap-3 font-mono text-2xl italic md:text-3xl">
       <Icon icon={tomatoIcon} class="h-12 w-12" shape-rendering="crispEdges" viewBox="0 -.5 16 16" />
       {$config.STATION_NAME}
     </div>
     <div class="flex items-center gap-3">
       {#if $config.UI_MODES.includes(0) && $userConfig.uiMode >= 1}
         <button class="btn btn-accent" on:click={() => ($userConfig.uiMode = 0)}>← Back to simple view</button>
       {/if}
-      {#if $isFullscreen}
-        <div class="tooltip tooltip-bottom" data-tip="Exit fullscreen mode">
-          <button class="btn btn-circle btn-ghost" on:click={() => disableFullscreen()}>
-            <Icon icon={fullscreenExit} class="h-8 w-8" />
-          </button>
-        </div>
-      {/if}
+      <div class="tooltip tooltip-bottom" data-tip={`${$isFullscreen ? 'Exit' : 'Enter'} fullscreen mode`}>
+        <button class="btn btn-circle btn-ghost" on:click={() => setFullscreen(!$isFullscreen)}>
+          <Icon icon={$isFullscreen ? fullscreenExit : fullscreenIcon} class="h-8 w-8" />
+        </button>
+      </div>
       <div
         class="tooltip tooltip-bottom"
         data-tip={!$conn.connected ? "Disconnected" : $syncProgress.syncing ? "Synchronizing" : "Connected"}

diff --git a/client/src/stores/config.js b/client/src/stores/config.js
@@ -40,8 +40,8 @@ ipcRenderer.on("set-fullscreen", (event, value) => {
   isFullscreen.set(value)
 })
 
-export const disableFullscreen = () => {
-  ipcRenderer.invoke("disable-fullscreen")
+export const setFullscreen = (value) => {
+  ipcRenderer.invoke("set-fullscreen", value)
 }
 
 export { readonlyConfig as config }