Skip to content

Commit

Permalink
feat: add custom title bar
Browse files Browse the repository at this point in the history
  • Loading branch information
tiny-craft committed Sep 2, 2023
1 parent b580fed commit 1a4622c
Show file tree
Hide file tree
Showing 24 changed files with 368 additions and 213 deletions.
2 changes: 1 addition & 1 deletion frontend/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ watch(
class="fill-height">
<n-global-style />
<n-dialog-provider>
<n-spin v-show="initializing" :theme-overrides="{ opacitySpinning: 0 }">
<n-spin v-show="initializing" :theme-overrides="{ opacitySpinning: 0 }" style="--wails-draggable: drag">
<div id="launch-container" />
</n-spin>
<app-content v-if="!initializing" class="flex-item-expand" />
Expand Down
150 changes: 109 additions & 41 deletions frontend/src/AppContent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ import useTabStore from './stores/tab.js'
import usePreferencesStore from './stores/preferences.js'
import useConnectionStore from './stores/connections.js'
import ContentLogPane from './components/content/ContentLogPane.vue'
import ContentValueTab from '@/components/content/ContentValueTab.vue'
import ToolbarControlWidget from '@/components/common/ToolbarControlWidget.vue'
import { WindowToggleMaximise } from 'wailsjs/runtime/runtime.js'
import { isMacOS } from '@/utils/platform.js'
import iconUrl from '@/assets/images/icon.png'
const themeVars = useThemeVars()
Expand All @@ -19,6 +24,7 @@ const data = reactive({
navMenuWidth: 60,
hoverResize: false,
resizing: false,
toolbarHeight: 45,
})
const tabStore = useTabStore()
Expand Down Expand Up @@ -69,49 +75,85 @@ watch(
<template>
<!-- app content-->
<div id="app-content-wrapper" :class="{ dragging }" :style="prefStore.generalFont" class="flex-box-h">
<nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
<!-- browser page-->
<div v-show="tabStore.nav === 'browser'" 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 id="app-content-wrapper" class="flex-box-v">
<!-- title bar -->
<div
id="app-toolbar"
class="flex-box-h"
style="--wails-draggable: drag"
:style="{ height: data.toolbarHeight + 'px' }"
@dblclick="WindowToggleMaximise">
<!-- title -->
<div
id="app-toolbar-title"
:style="{
width: `${data.navMenuWidth + prefStore.general.asideWidth}px`,
paddingLeft: isMacOS() ? '70px' : '10px',
}">
<n-space align="center" :wrap-item="false" :wrap="false" :size="3">
<n-avatar :src="iconUrl" color="#0000" :size="35" style="min-width: 35px" />
<div style="min-width: 68px; font-weight: 800">Tiny RDM</div>
<transition name="fade">
<n-text v-if="tabStore.nav === 'browser'" strong class="ellipsis" style="font-size: 13px">
- {{ get(tabStore.currentTab, 'name') }}
</n-text>
</transition>
</n-space>
</div>
<content-pane class="flex-item-expand" />
<!-- 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>
<!-- server list page -->
<div v-show="tabStore.nav === 'server'" 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" />
<!-- 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>
<!-- 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>
<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" />
<!-- 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>
</template>
Expand All @@ -120,12 +162,28 @@ watch(
#app-content-wrapper {
height: 100%;
overflow: hidden;
border-top: v-bind('themeVars.borderColor') 1px solid;
box-sizing: border-box;
#app-toolbar {
height: 40px;
border-bottom: v-bind('themeVars.borderColor') 1px solid;
background-color: v-bind('themeVars.tabColor');
border-bottom: 1px solid v-bind('themeVars.borderColor');
&-title {
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
align-self: center;
align-items: baseline;
}
}
.app-toolbar-tab {
align-self: flex-end;
margin-bottom: -1px;
}
#app-content {
height: calc(100% - 60px);
}
#app-side {
Expand Down Expand Up @@ -157,4 +215,14 @@ watch(
.dragging {
cursor: col-resize !important;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
</style>
Binary file added frontend/src/assets/images/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 82 additions & 0 deletions frontend/src/components/common/ToolbarControlWidget.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<script setup>
import WindowMin from '@/components/icons/WindowMin.vue'
import WindowMax from '@/components/icons/WindowMax.vue'
import WindowClose from '@/components/icons/WindowClose.vue'
import { computed } from 'vue'
import { useThemeVars } from 'naive-ui'
import { Quit, WindowMinimise, WindowToggleMaximise } from 'wailsjs/runtime/runtime.js'
const themeVars = useThemeVars()
const props = defineProps({
size: {
type: Number,
default: 35,
},
})
const buttonSize = computed(() => {
return props.size + 'px'
})
const handleMinimise = async () => {
WindowMinimise()
}
const handleMaximise = () => {
WindowToggleMaximise()
}
const handleClose = () => {
Quit()
}
</script>

<template>
<n-space :wrap-item="false" align="center" justify="center" :size="0">
<div class="btn-wrapper" @click="handleMinimise">
<window-min />
</div>
<div class="btn-wrapper" @click="handleMaximise">
<window-max />
</div>
<div class="btn-wrapper" @click="handleClose">
<window-close />
</div>
</n-space>
</template>

<style scoped lang="scss">
.btn-wrapper {
width: v-bind('buttonSize');
height: v-bind('buttonSize');
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
--wails-draggable: none;
&:hover {
cursor: pointer;
}
&:not(:last-child) {
&:hover {
background-color: v-bind('themeVars.closeColorHover');
}
&:active {
background-color: v-bind('themeVars.closeColorPressed');
}
}
&:last-child {
&:hover {
background-color: v-bind('themeVars.primaryColorHover');
}
&:active {
background-color: v-bind('themeVars.primaryColorPressed');
}
}
}
</style>
2 changes: 1 addition & 1 deletion frontend/src/components/content/ContentLogPane.vue
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ defineExpose({
<icon-button :icon="Delete" border t-tooltip="clean_log" @click="cleanHistory" />
</n-form-item>
</n-form>
<div class="fill-height flex-box-h" style="user-select: text">
<div class="content-value fill-height flex-box-h">
<n-data-table
ref="tableRef"
:columns="[
Expand Down
24 changes: 0 additions & 24 deletions frontend/src/components/content/ContentPane.vue
Original file line number Diff line number Diff line change
Expand Up @@ -121,34 +121,10 @@ const onReloadKey = async () => {
}
await connectionStore.loadKeyValue(tab.name, tab.db, tab.key)
}
const i18n = useI18n()
const onCloseTab = (tabIndex) => {
$dialog.warning(i18n.t('close_confirm'), () => {
const tab = get(tabStore.tabs, tabIndex)
if (tab != null) {
connectionStore.closeConnection(tab.name)
}
})
}
</script>

<template>
<div class="content-container flex-box-v">
<!-- <content-value-tab :tabs="tab" />-->
<n-tabs
v-model:value="tabStore.activatedIndex"
:closable="true"
size="small"
type="card"
@close="onCloseTab"
@update:value="onUpdateValue">
<n-tab v-for="(t, i) in tab" :key="i" :name="i">
<n-ellipsis style="max-width: 150px">{{ t.label }}</n-ellipsis>
</n-tab>
</n-tabs>
<!-- TODO: add loading status -->

<div v-if="showServerStatus" class="content-container flex-item-expand flex-box-v">
<!-- select nothing or select server node, display server status -->
<content-server-status
Expand Down
Loading

0 comments on commit 1a4622c

Please sign in to comment.