fix: windows title bar (#2947)

* fix: remove padding and backgrounds from TitleBar on Windows * feat: adjust windows titlebar * feat: enable devtools * feat: increase main content z-index * fix: back button styling * feat: disable webkit drag on topnav elements * feat: undo enable packaged devtools * feat: decrease mian content z-index * feat: undo force win32 platform Co-authored-by: Rajiv Shah <rajivshah1@icloud.com> Co-authored-by: Charlie Varley <charlievarley@macbook-pro-2.lan>
iotaledger · Apr 19, 2022 · b8c582f · b8c582f
1 parent 65bd482
commit b8c582f
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 55 deletions.
diff --git a/packages/shared/components/AccountSwitcher.svelte b/packages/shared/components/AccountSwitcher.svelte
@@ -17,14 +17,16 @@
 </script>
 
 <svelte:window on:click={() => (isModalOpened = modal?.isOpened())} />
-<button on:click={onClick} class="flex flex-row justify-center items-center space-x-2">
-    <div class="circle" style="--account-color: {getColor($activeProfile, $selectedAccount?.id)};" />
-    <Text type="h5">{$selectedAccount?.alias}</Text>
-    <div class="transform {isModalOpened ? 'rotate-180' : 'rotate-0'}">
-        <Icon height="18" width="18" icon="chevron-down" classes="text-gray-800 dark:text-white" />
-    </div>
-</button>
-<AccountSwitcherModal {onCreateAccount} {accounts} bind:modal />
+<div class="relative left-8" style="-webkit-app-region: none;">
+    <button on:click={onClick} class="flex flex-row justify-center items-center space-x-2">
+        <div class="circle" style="--account-color: {getColor($activeProfile, $selectedAccount?.id)};" />
+        <Text type="h5">{$selectedAccount?.alias}</Text>
+        <div class="transform {isModalOpened ? 'rotate-180' : 'rotate-0'}">
+            <Icon height="18" width="18" icon="chevron-down" classes="text-gray-800 dark:text-white" />
+        </div>
+    </button>
+    <AccountSwitcherModal {onCreateAccount} {accounts} bind:modal />
+</div>
 
 <style type="text/scss">
     button {

diff --git a/packages/shared/components/Sidebar.svelte b/packages/shared/components/Sidebar.svelte
@@ -191,8 +191,8 @@
 
 <style type="text/scss">
     :global(body.platform-win32) aside {
-        @apply -top-12;
-        @apply pt-12;
+        @apply -top-0;
+        @apply pt-10;
     }
     .menu-button {
         position: absolute;

diff --git a/packages/shared/components/TitleBar.svelte b/packages/shared/components/TitleBar.svelte
@@ -1,17 +1,16 @@
 <script lang="typescript">
-    import { onDestroy, onMount } from 'svelte'
+    import { appRoute, AppRoute, dashboardRoute, DashboardRoute } from '@core/router'
     import { appSettings } from 'shared/lib/appSettings'
     import { Platform } from 'shared/lib/platform'
     import { popupState } from 'shared/lib/popup'
     import { wallet } from 'shared/lib/wallet'
     import tailwindConfig from 'shared/tailwind.config.js'
+    import { onDestroy, onMount } from 'svelte'
     import resolveConfig from 'tailwindcss/resolveConfig'
-    import { dashboardRoute, DashboardRoute } from '@core/router'
 
     const { accountsLoaded } = $wallet
 
-    $: showingDashboard = $accountsLoaded && $popupState.type !== 'busy'
-    $: showingPopup = $popupState.active && $popupState.type !== 'busy'
+    $: showingDashboard = $appRoute === AppRoute.Dashboard && $accountsLoaded && $popupState.type !== 'busy'
     $: showingSettings = $dashboardRoute === DashboardRoute.Settings
 
     let os = ''
@@ -40,20 +39,16 @@
 </script>
 
 <div class="h-full w-full">
-    {#if os === 'win32'}
-        <nav
-            class={`fixed z-10 left-0 right-0 top-0 flex flex-row h-12 justify-between ${
-                showingDashboard && !showingSettings ? 'bg-gray-50' : 'bg-white'
-            } dark:bg-gray-900`}
-        >
-            <div class="absolute left-16 top-1 right-36 h-9" style="-webkit-app-region: drag" />
+    <nav
+        class="flex flex-row justify-between fixed z-10 top-0 left-0 right-0 w-full h-9 transition-none {showingDashboard
+            ? 'bg-gray-200 dark:bg-gray-1000 border-solid border-b border-gray-300 dark:border-gray-1000'
+            : 'bg-transparent'}"
+        style="-webkit-app-region: drag"
+    >
+        {#if os === 'win32'}
             <button
                 on:click={() => Platform.popupMenu()}
-                class={`flex justify-center p-4 stroke-current text-gray-500 dark:text-gray-100 w-20 ${
-                    showingDashboard
-                        ? 'bg-white dark:bg-gray-800 border-solid border-r border-gray-100 dark:border-gray-800'
-                        : ''
-                }`}
+                class="flex justify-center items-center p-3 stroke-current text-gray-500 dark:text-gray-100 w-20"
                 style="-webkit-app-region: none"
             >
                 <svg width="16" height="16" viewBox="0 0 16 16">
@@ -123,15 +118,9 @@
                     </svg>
                 </button>
             </div>
-            {#if showingPopup}
-                <div class="fixed z-10 left-0 right-0 h-12 bg-gray-800 opacity-40" />
-            {/if}
-        </nav>
-    {/if}
-    {#if os === 'darwin'}
-        <div style="-webkit-app-region: drag" class="w-full h-8 fixed left-20" />
-    {/if}
-    <div class={`fixed ${os === 'win32' ? 'top-12' : 'top-0'} left-0 right-0 bottom-0`}>
+        {/if}
+    </nav>
+    <div class="fixed {os === 'win32' || showingDashboard ? 'top-9' : 'top-0'} left-0 right-0 bottom-0 z-10">
         <slot />
     </div>
 </div>
diff --git a/packages/shared/components/modals/AccountSwitcher.svelte b/packages/shared/components/modals/AccountSwitcher.svelte
@@ -40,7 +40,7 @@
     }
 </script>
 
-<Modal bind:this={modal} classes="transform -translate-x-1/2" size="large" position={{ top: '32px', left: '50%' }}>
+<Modal bind:this={modal} classes="transform -translate-x-1/2" size="large" position={{ top: '24px', left: '50%' }}>
     <div class="p-4">
         <div class="accounts flex flex-col space-y-1 scrollable-y">
             {#each accounts as account}

diff --git a/packages/shared/components/popups/Index.svelte b/packages/shared/components/popups/Index.svelte
@@ -45,6 +45,7 @@
     import LegalUpdate from './LegalUpdate.svelte'
     import SingleAccountGuide from './SingleAccountGuide.svelte'
     import { mobile } from 'shared/lib/app'
+    import { Platform } from 'shared/lib/platform'
 
     export let locale: Locale
 
@@ -65,6 +66,7 @@
     }
 
     let size: PopupSize = PopupSize.Medium
+    let os = ''
 
     $: switch (type) {
         case 'ledgerNotConnected':
@@ -166,11 +168,12 @@
         e.preventDefault()
     }
 
-    onMount(() => {
+    onMount(async () => {
         const elems = focusableElements()
         if (elems && elems.length > 0) {
             elems[hideClose || elems.length === 1 || !autofocusContent ? 0 : 1].focus()
         }
+        os = await Platform.getOS()
     })
 </script>
 
@@ -184,7 +187,9 @@
 {:else}
     <popup
         in:fade={{ duration: transition ? 100 : 0 }}
-        class={`flex items-center justify-center fixed top-0 left-0 w-screen p-6 ${overflow ? '' : 'overflow-hidden'}
+        class={`flex items-center justify-center fixed ${os === 'win32' ? 'top-9' : 'top-0'} left-0 w-screen p-6 ${
+            overflow ? '' : 'overflow-hidden'
+        }
                 h-full z-20 ${fullScreen ? 'bg-white dark:bg-gray-900' : 'bg-gray-800 bg-opacity-40'} ${
             $mobile && 'z-40'
         }`}

diff --git a/packages/shared/routes/dashboard/Dashboard.svelte b/packages/shared/routes/dashboard/Dashboard.svelte
@@ -69,6 +69,7 @@
     let busy
     let fundsSoonNotificationId
     let developerProfileNotificationId
+    let showTopNav = false
 
     const LEDGER_STATUS_POLL_INTERVAL = 2000
 
@@ -249,6 +250,7 @@
                     closePopup()
                 }
                 Platform.DeepLinkManager.checkDeepLinkRequestExists()
+                showTopNav = true
             }
             if (minTimeElapsed < 0) {
                 cancelBusyState()
@@ -408,10 +410,12 @@
 
 <Idle />
 <div class="dashboard-wrapper flex flex-col w-full h-full">
-    <TopNavigation
-        {onCreateAccount}
-        classes={$popupState?.type === 'singleAccountGuide' && $popupState?.active ? 'z-50' : ''}
-    />
+    {#if showTopNav}
+        <TopNavigation
+            {onCreateAccount}
+            classes={$popupState?.type === 'singleAccountGuide' && $popupState?.active ? 'z-50' : ''}
+        />
+    {/if}
     <div class="flex flex-row flex-auto h-1">
         <Sidebar {locale} />
         <!-- Dashboard Pane -->

diff --git a/packages/shared/routes/dashboard/TopNavigation.svelte b/packages/shared/routes/dashboard/TopNavigation.svelte
@@ -1,17 +1,26 @@
 <script lang="typescript">
-    import { getContext } from 'svelte'
-    import { Readable } from 'svelte/store'
     import { localize } from '@core/i18n'
+    import { DashboardRoute, dashboardRoute, SettingsRoute, settingsRoute, settingsRouter } from '@core/router'
     import { AccountSwitcher, Icon, Text } from 'shared/components'
+    import { Platform } from 'shared/lib/platform'
+    import { popupState } from 'shared/lib/popup'
     import { WalletAccount } from 'shared/lib/typings/wallet'
-    import { DashboardRoute, dashboardRoute, SettingsRoute, settingsRoute, settingsRouter } from '@core/router'
+    import { getContext, onMount } from 'svelte'
+    import { Readable } from 'svelte/store'
 
     export let onCreateAccount = (..._: any[]): void => {}
     export let classes: string
 
     const viewableAccounts = getContext<Readable<WalletAccount[]>>('viewableAccounts')
 
+    let os = ''
+
     $: showBackButton = isCorrectRoute($settingsRoute)
+    $: showingPopup = $popupState.active && $popupState.type !== 'busy'
+
+    onMount(async () => {
+        os = await Platform.getOS()
+    })
 
     function isCorrectRoute(_: SettingsRoute): boolean {
         return $settingsRoute !== SettingsRoute.Init
@@ -29,15 +38,24 @@
 </script>
 
 <div
-    class="bg-gray-200 dark:bg-gray-1000 border-solid border-b border-gray-300 dark:border-gray-1000 flex flex-row justify-center py-2 w-full {classes}"
+    class="fixed top-0 left-20 flex flex-row justify-center items-center py-2 w-full z-10 {os === 'win32' &&
+    showingPopup
+        ? 'opacity-50 pointer-events-none'
+        : ''} {classes}"
 >
     {#if showBackButton}
-        <button on:click={handleBackClick} class="absolute left-24 cursor-pointer">
+        <button on:click={handleBackClick} class="absolute left-2 cursor-pointer" style="-webkit-app-region: none;">
             <div class="flex items-center space-x-2 ">
-                <Icon width="18" icon="arrow-left" classes="text-gray-500" />
-                <Text overrideColor classes="text-gray-500">{localize('actions.back')}</Text>
+                <Icon width="18" icon="arrow-left" classes="text-gray-800 dark:text-gray-500" />
+                <Text overrideColor classes="text-gray-800 dark:text-gray-500">{localize('actions.back')}</Text>
             </div>
         </button>
     {/if}
     <AccountSwitcher {onCreateAccount} accounts={$viewableAccounts} />
 </div>
+
+<style type="text/scss">
+    div {
+        width: calc(100% - 14rem);
+    }
+</style>
diff --git a/packages/shared/routes/dashboard/staking/Staking.svelte b/packages/shared/routes/dashboard/staking/Staking.svelte
@@ -160,9 +160,3 @@
         </DashboardPane>
     </div>
 </div>
-
-<style type="text/scss">
-    :global(body.platform-win32) .staking-wrapper {
-        @apply pt-0;
-    }
-</style>