lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
tiny-craft 2023-09-05 14:43:43 +08:00
parent 8912971be0
commit 7e60eec701
7 changed files with 123 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/release-linux.yaml vendored
View File

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

2
.github/workflows/release-macos.yaml vendored
View File

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

2
.github/workflows/release-windows.yaml vendored
View File

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

22
frontend/src/App.vue
View File

@ -26,7 +26,7 @@ hljs.registerLanguage('plaintext', plaintext)
const prefStore = usePreferencesStore() const prefStore = usePreferencesStore()
const connectionStore = useConnectionStore() const connectionStore = useConnectionStore()
const i18n = useI18n() const i18n = useI18n()
const initializing = ref(false) const initializing = ref(true)
onMounted(async () => { onMounted(async () => {
try { try {
initializing.value = true initializing.value = true
@ -61,12 +61,8 @@ watch(
:theme-overrides="themeOverrides" :theme-overrides="themeOverrides"
:locale="prefStore.themeLocale" :locale="prefStore.themeLocale"
class="fill-height"> class="fill-height">
<n-global-style />
<n-dialog-provider> <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 --> <!-- top modal dialogs -->
<connection-dialog /> <connection-dialog />
@ -82,16 +78,4 @@ watch(
</n-config-provider> </n-config-provider>
</template> </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>

185
frontend/src/AppContent.vue
View File

@ -19,8 +19,11 @@ import iconUrl from '@/assets/images/icon.png'
const themeVars = useThemeVars() const themeVars = useThemeVars()
const props = defineProps({
loading: Boolean,
})
const data = reactive({ const data = reactive({
initializing: false,
navMenuWidth: 60, navMenuWidth: 60,
hoverResize: false, hoverResize: false,
resizing: false, resizing: false,
@ -75,103 +78,117 @@ watch(
<template> <template>
<!-- app content--> <!-- 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 <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 <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> </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> </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> </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> </div>
</div> </n-spin>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
#app-content-wrapper { #app-content-wrapper {
height: 100%; width: 100vw;
height: 100vh;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px;
#app-toolbar { #app-toolbar {
background-color: v-bind('themeVars.tabColor'); background-color: v-bind('themeVars.tabColor');

15
frontend/src/styles/style.scss
View File

@ -18,17 +18,10 @@ html {
body { body {
margin: 0; 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 { #app {

17
main.go
View File

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