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: adjust styles of resize divider

This commit is contained in:
tiny-craft 2023-09-03 00:15:31 +08:00
parent 425d9a3eae
commit 2f95b803b9
2 changed files with 32 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/AppContent.vue
View File

@ -87,7 +87,7 @@ watch(
<div <div
id="app-toolbar-title" id="app-toolbar-title"
:style="{ :style="{
width: `${data.navMenuWidth + prefStore.general.asideWidth}px`, width: `${data.navMenuWidth + prefStore.general.asideWidth - 4}px`,
paddingLeft: isMacOS() ? '70px' : '10px', paddingLeft: isMacOS() ? '70px' : '10px',
}"> }">
<n-space align="center" :wrap-item="false" :wrap="false" :size="3"> <n-space align="center" :wrap-item="false" :wrap="false" :size="3">
@ -100,6 +100,15 @@ watch(
</transition> </transition>
</n-space> </n-space>
</div> </div>
<div
:class="{
'resize-divider-hover': data.hoverResize,
'resize-divider-drag': data.resizing,
}"
class="resize-divider resize-divider-hide"
@mousedown="startResize"
@mouseout="data.hoverResize = false"
@mouseover="data.hoverResize = true" />
<!-- browser tabs --> <!-- browser tabs -->
<div v-show="tabStore.nav === 'browser'" class="app-toolbar-tab flex-item-expand"> <div v-show="tabStore.nav === 'browser'" class="app-toolbar-tab flex-item-expand">
<content-value-tab /> <content-value-tab />
@ -180,6 +189,7 @@ watch(
.app-toolbar-tab { .app-toolbar-tab {
align-self: flex-end; align-self: flex-end;
margin-bottom: -1px; margin-bottom: -1px;
margin-left: 3px;
} }
#app-content { #app-content {
@ -190,26 +200,27 @@ watch(
//overflow: hidden; //overflow: hidden;
height: 100%; height: 100%;
background-color: v-bind('themeVars.tabColor'); background-color: v-bind('themeVars.tabColor');
.resize-divider {
//height: 100%;
width: 5px;
border-left-width: 5px;
background-color: v-bind('themeVars.tabColor');
} }
}
.resize-divider-hover { .resize-divider {
width: 5px; width: 3px;
border-right: 1px solid v-bind('themeVars.borderColor');
}
.resize-divider-hide {
background-color: #0000;
border-right-color: #0000;
}
.resize-divider-hover {
background-color: v-bind('themeVars.borderColor'); background-color: v-bind('themeVars.borderColor');
} border-right-color: v-bind('themeVars.borderColor');
}
.resize-divider-drag { .resize-divider-drag {
//background-color: rgb(0, 105, 218);
width: 5px;
//background-color: var(--el-color-primary);
background-color: v-bind('themeVars.primaryColor'); background-color: v-bind('themeVars.primaryColor');
} border-right-color: v-bind('themeVars.primaryColor');
}
} }
.dragging { .dragging {

1
frontend/src/components/content/ContentLogPane.vue
View File

@ -70,6 +70,7 @@ defineExpose({
<template> <template>
<n-card <n-card
:title="$t('launch_log')" :title="$t('launch_log')"
:bordered="false"
class="content-container flex-box-v" class="content-container flex-box-v"
content-style="display: flex;flex-direction: column; overflow: hidden;"> content-style="display: flex;flex-direction: column; overflow: hidden;">
<n-form :disabled="data.loading" class="flex-item" inline> <n-form :disabled="data.loading" class="flex-item" inline>