perf: support border radius on Linux, Windows 7 and below

.github/workflows/release-linux.yaml

@@ -53,7 +53,7 @@ jobs:
       - name: Build frontend assets
         shell: bash
         run: |
-          npm install -g npm@8
+          npm install -g npm@9
           jq '.info.productVersion = "${{ steps.normalise_version.outputs.version }}"' wails.json > tmp.json
           mv tmp.json wails.json
           cd frontend

.github/workflows/release-macos.yaml

@@ -59,7 +59,7 @@ jobs:
       - name: Build frontend assets
         shell: bash
         run: |
-          npm install -g npm@8
+          npm install -g npm@9
           jq '.info.productVersion = "${{ steps.normalise_version.outputs.version }}"' wails.json > tmp.json
           mv tmp.json wails.json
           cd frontend

.github/workflows/release-windows.yaml

@@ -52,7 +52,7 @@ jobs:
       - name: Build frontend assets
         shell: bash
         run: |
-          npm install -g npm@8
+          npm install -g npm@9
           jq '.info.productVersion = "${{ steps.normalise_version.outputs.version }}"' wails.json > tmp.json
           mv tmp.json wails.json
           cd frontend

frontend/src/App.vue

@@ -26,7 +26,7 @@ hljs.registerLanguage('plaintext', plaintext)
 const prefStore = usePreferencesStore()
 const connectionStore = useConnectionStore()
 const i18n = useI18n()
-const initializing = ref(false)
+const initializing = ref(true)
 onMounted(async () => {
     try {
         initializing.value = true
@@ -61,12 +61,8 @@ watch(
         :theme-overrides="themeOverrides"
         :locale="prefStore.themeLocale"
         class="fill-height">
-        <n-global-style />
         <n-dialog-provider>
-            <n-spin v-show="initializing" :theme-overrides="{ opacitySpinning: 0 }" style="--wails-draggable: drag">
+            <app-content :loading="initializing" />
-                <div id="launch-container" />
-            </n-spin>
-            <app-content v-if="!initializing" class="flex-item-expand" />
 
             <!-- top modal dialogs -->
             <connection-dialog />
@@ -82,16 +78,4 @@ watch(
     </n-config-provider>
 </template>
 
-<style lang="scss">
+<style lang="scss"></style>
-#launch-container {
-    width: 100vw;
-    height: 100vh;
-}
-
-#app-title {
-    text-align: center;
-    width: 100vw;
-    height: 30px;
-    line-height: 30px;
-}
-</style>

frontend/src/AppContent.vue

@@ -19,8 +19,11 @@ import iconUrl from '@/assets/images/icon.png'
 
 const themeVars = useThemeVars()
 
+const props = defineProps({
+    loading: Boolean,
+})
+
 const data = reactive({
-    initializing: false,
     navMenuWidth: 60,
     hoverResize: false,
     resizing: false,
@@ -75,103 +78,117 @@ watch(
 
 <template>
     <!-- app content-->
-    <div id="app-content-wrapper" class="flex-box-v">
+    <n-spin
-        <!-- title bar -->
+        :show="props.loading"
+        :theme-overrides="{ opacitySpinning: 0 }"
+        style="--wails-draggable: drag; border-radius: 10px"
+        :style="{ backgroundColor: themeVars.bodyColor }">
         <div
-            id="app-toolbar"
+            id="app-content-wrapper"
-            class="flex-box-h"
+            class="flex-box-v"
-            style="--wails-draggable: drag"
+            :style="{
-            :style="{ height: data.toolbarHeight + 'px' }"
+                backgroundColor: themeVars.bodyColor,
-            @dblclick="WindowToggleMaximise">
+                color: themeVars.textColorBase,
-            <!-- title -->
+            }">
+            <!-- title bar -->
             <div
-                id="app-toolbar-title"
+                id="app-toolbar"
-                :style="{
+                class="flex-box-h"
-                    width: `${data.navMenuWidth + prefStore.general.asideWidth - 4}px`,
+                style="--wails-draggable: drag"
-                    paddingLeft: isMacOS() ? '70px' : '10px',
+                :style="{ height: data.toolbarHeight + 'px' }"
-                }">
+                @dblclick="WindowToggleMaximise">
-                <n-space align="center" :wrap-item="false" :wrap="false" :size="3">
+                <!-- title -->
-                    <n-avatar :src="iconUrl" color="#0000" :size="35" style="min-width: 35px" />
+                <div
-                    <div style="min-width: 68px; font-weight: 800">Tiny RDM</div>
+                    id="app-toolbar-title"
-                    <transition name="fade">
+                    :style="{
-                        <n-text v-if="tabStore.nav === 'browser'" strong class="ellipsis" style="font-size: 13px">
+                        width: `${data.navMenuWidth + prefStore.general.asideWidth - 4}px`,
-                            - {{ get(tabStore.currentTab, 'name') }}
+                        paddingLeft: isMacOS() ? '70px' : '10px',
-                        </n-text>
+                    }">
-                    </transition>
+                    <n-space align="center" :wrap-item="false" :wrap="false" :size="3">
-                </n-space>
+                        <n-avatar :src="iconUrl" color="#0000" :size="35" style="min-width: 35px" />
-            </div>
+                        <div style="min-width: 68px; font-weight: 800">Tiny RDM</div>
-            <div
+                        <transition name="fade">
-                :class="{
+                            <n-text v-if="tabStore.nav === 'browser'" strong class="ellipsis" style="font-size: 13px">
-                    'resize-divider-hover': data.hoverResize,
+                                - {{ get(tabStore.currentTab, 'name') }}
-                    'resize-divider-drag': data.resizing,
+                            </n-text>
-                }"
+                        </transition>
-                class="resize-divider resize-divider-hide"
+                    </n-space>
-                @mousedown="startResize"
-                @mouseout="data.hoverResize = false"
-                @mouseover="data.hoverResize = true" />
-            <!-- browser tabs -->
-            <div v-show="tabStore.nav === 'browser'" class="app-toolbar-tab flex-item-expand">
-                <content-value-tab />
-            </div>
-            <div class="flex-item-expand"></div>
-            <!-- simulate window control buttons -->
-            <toolbar-control-widget v-if="!isMacOS()" :size="data.toolbarHeight" style="align-self: flex-start" />
-        </div>
-
-        <!-- content -->
-        <div id="app-content" :style="prefStore.generalFont" class="flex-box-h flex-item-expand">
-            <nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
-            <!-- browser page-->
-            <div v-show="tabStore.nav === 'browser'" :class="{ dragging }" class="flex-box-h flex-item-expand">
-                <div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
-                    <browser-pane
-                        v-for="t in tabStore.tabs"
-                        v-show="get(tabStore.currentTab, 'name') === t.name"
-                        :key="t.name"
-                        class="flex-item-expand" />
-                    <div
-                        :class="{
-                            'resize-divider-hover': data.hoverResize,
-                            'resize-divider-drag': data.resizing,
-                        }"
-                        class="resize-divider"
-                        @mousedown="startResize"
-                        @mouseout="data.hoverResize = false"
-                        @mouseover="data.hoverResize = true" />
                 </div>
-                <content-pane class="flex-item-expand" />
+                <div
-            </div>
+                    :class="{
-
+                        'resize-divider-hover': data.hoverResize,
-            <!-- server list page -->
+                        'resize-divider-drag': data.resizing,
-            <div v-show="tabStore.nav === 'server'" :class="{ dragging }" class="flex-box-h flex-item-expand">
+                    }"
-                <div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
+                    class="resize-divider resize-divider-hide"
-                    <connection-pane class="flex-item-expand" />
+                    @mousedown="startResize"
-                    <div
+                    @mouseout="data.hoverResize = false"
-                        :class="{
+                    @mouseover="data.hoverResize = true" />
-                            'resize-divider-hover': data.hoverResize,
+                <!-- browser tabs -->
-                            'resize-divider-drag': data.resizing,
+                <div v-show="tabStore.nav === 'browser'" class="app-toolbar-tab flex-item-expand">
-                        }"
+                    <content-value-tab />
-                        class="resize-divider"
-                        @mousedown="startResize"
-                        @mouseout="data.hoverResize = false"
-                        @mouseover="data.hoverResize = true" />
                 </div>
-                <content-server-pane class="flex-item-expand" />
+                <div class="flex-item-expand"></div>
+                <!-- simulate window control buttons -->
+                <toolbar-control-widget v-if="!isMacOS()" :size="data.toolbarHeight" style="align-self: flex-start" />
             </div>
 
-            <!-- log page -->
+            <!-- content -->
-            <div v-show="tabStore.nav === 'log'" class="flex-box-h flex-item-expand">
+            <div id="app-content" :style="prefStore.generalFont" class="flex-box-h flex-item-expand">
-                <content-log-pane ref="logPaneRef" class="flex-item-expand" />
+                <nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
+                <!-- browser page-->
+                <div v-show="tabStore.nav === 'browser'" :class="{ dragging }" class="flex-box-h flex-item-expand">
+                    <div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
+                        <browser-pane
+                            v-for="t in tabStore.tabs"
+                            v-show="get(tabStore.currentTab, 'name') === t.name"
+                            :key="t.name"
+                            class="flex-item-expand" />
+                        <div
+                            :class="{
+                                'resize-divider-hover': data.hoverResize,
+                                'resize-divider-drag': data.resizing,
+                            }"
+                            class="resize-divider"
+                            @mousedown="startResize"
+                            @mouseout="data.hoverResize = false"
+                            @mouseover="data.hoverResize = true" />
+                    </div>
+                    <content-pane class="flex-item-expand" />
+                </div>
+
+                <!-- server list page -->
+                <div v-show="tabStore.nav === 'server'" :class="{ dragging }" class="flex-box-h flex-item-expand">
+                    <div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
+                        <connection-pane class="flex-item-expand" />
+                        <div
+                            :class="{
+                                'resize-divider-hover': data.hoverResize,
+                                'resize-divider-drag': data.resizing,
+                            }"
+                            class="resize-divider"
+                            @mousedown="startResize"
+                            @mouseout="data.hoverResize = false"
+                            @mouseover="data.hoverResize = true" />
+                    </div>
+                    <content-server-pane class="flex-item-expand" />
+                </div>
+
+                <!-- log page -->
+                <div v-show="tabStore.nav === 'log'" class="flex-box-h flex-item-expand">
+                    <content-log-pane ref="logPaneRef" class="flex-item-expand" />
+                </div>
             </div>
         </div>
-    </div>
+    </n-spin>
 </template>
 
 <style lang="scss" scoped>
 #app-content-wrapper {
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     overflow: hidden;
     box-sizing: border-box;
+    border-radius: 10px;
 
     #app-toolbar {
         background-color: v-bind('themeVars.tabColor');

frontend/src/styles/style.scss

@@ -18,17 +18,10 @@ html {
 
 body {
   margin: 0;
-  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+  padding: 0;
-  "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  background-color: #0000;
-  sans-serif;
+  line-height: 1.5;
-}
+  font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
-
-@font-face {
-  font-family: "Nunito";
-  font-style: normal;
-  font-weight: 400;
-  src: local(""),
-  url("../assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
 }
 
 #app {

main.go

@@ -9,6 +9,7 @@ import (
 	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
 	"github.com/wailsapp/wails/v2/pkg/options/linux"
 	"github.com/wailsapp/wails/v2/pkg/options/mac"
+	"github.com/wailsapp/wails/v2/pkg/options/windows"
 	"runtime"
 	"tinyrdm/backend/services"
 )
@@ -46,7 +47,7 @@ func main() {
 		AssetServer: &assetserver.Options{
 			Assets: assets,
 		},
-		BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
+		BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 0},
 		OnStartup: func(ctx context.Context) {
 			app.startup(ctx)
 			connSvc.Start(ctx)
@@ -66,12 +67,18 @@ func main() {
 				Message: "A modern lightweight cross-platform Redis desktop client.\n\nCopyright © 2023",
 				Icon:    icon,
 			},
-			//WebviewIsTransparent: true,
+			WebviewIsTransparent: false,
-			//WindowIsTranslucent:  true,
+			WindowIsTranslucent:  false,
+		},
+		Windows: &windows.Options{
+			WebviewIsTransparent:              true,
+			WindowIsTranslucent:               true,
+			DisableFramelessWindowDecorations: true,
 		},
 		Linux: &linux.Options{
-			Icon:             icon,
+			Icon:                icon,
-			WebviewGpuPolicy: linux.WebviewGpuPolicyOnDemand,
+			WebviewGpuPolicy:    linux.WebviewGpuPolicyOnDemand,
+			WindowIsTranslucent: true,
 		},
 	})