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

feat: adjust color of tree view

This commit is contained in:
tiny-craft 2023-07-15 01:54:40 +08:00
parent d7e6485806
commit 15c80bc9f7
6 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/App.vue
View File

@ -89,7 +89,7 @@ const theme = computed(() => {
<n-spin v-show="initializing" :theme-overrides="{ opacitySpinning: 0 }"> <n-spin v-show="initializing" :theme-overrides="{ opacitySpinning: 0 }">
<div id="launch-container" /> <div id="launch-container" />
</n-spin> </n-spin>
<app-content v-if="!initializing" /> <app-content v-if="!initializing" class="flex-item-expand" />
<!-- top modal dialogs --> <!-- top modal dialogs -->
<connection-dialog /> <connection-dialog />
@ -110,4 +110,11 @@ const theme = computed(() => {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
#app-title {
text-align: center;
width: 100vw;
height: 30px;
line-height: 30px;
}
</style> </style>

8
frontend/src/AppContent.vue
View File

@ -58,7 +58,7 @@ const dragging = computed(() => {
<template> <template>
<!-- app content--> <!-- app content-->
<div id="app-container" :class="{ dragging }" class="flex-box-h" :style="prefStore.generalFont"> <div id="app-content-wrapper" :class="{ dragging }" class="flex-box-h" :style="prefStore.generalFont">
<nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" /> <nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
<!-- structure page--> <!-- structure page-->
<div v-show="tabStore.nav === 'structure'" class="flex-box-h flex-item-expand"> <div v-show="tabStore.nav === 'structure'" class="flex-box-h flex-item-expand">
@ -107,7 +107,7 @@ const dragging = computed(() => {
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
#app-container { #app-content-wrapper {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
border-top: v-bind('themeVars.borderColor') 1px solid; border-top: v-bind('themeVars.borderColor') 1px solid;
@ -121,16 +121,18 @@ const dragging = computed(() => {
#app-side { #app-side {
//overflow: hidden; //overflow: hidden;
height: 100%; height: 100%;
background-color: v-bind('themeVars.tabColor');
.resize-divider { .resize-divider {
//height: 100%; //height: 100%;
width: 2px; width: 2px;
border-left-width: 5px; border-left-width: 5px;
background-color: v-bind('themeVars.dividerColor'); background-color: v-bind('themeVars.tabColor');
} }
.resize-divider-hover { .resize-divider-hover {
width: 5px; width: 5px;
background-color: v-bind('themeVars.borderColor');
} }
.resize-divider-drag { .resize-divider-drag {

1
frontend/src/components/content/content.scss
View File

@ -1,7 +1,6 @@
.content-container { .content-container {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
//background-color: var(--bg-color);
padding-top: 2px; padding-top: 2px;
padding-bottom: 5px; padding-bottom: 5px;
box-sizing: border-box; box-sizing: border-box;

21
frontend/src/components/content_value/ContentServerStatus.vue
View File

@ -100,9 +100,24 @@ const onFilterInfo = (val) => {
<template #header> <template #header>
{{ props.server }} {{ props.server }}
<n-space inline size="small"> <n-space inline size="small">
<n-tag v-if="redisVersion" type="primary" size="small">v{{ redisVersion }}</n-tag> <n-tooltip v-if="redisVersion">
<n-tag v-if="redisMode" type="primary" size="small">{{ redisMode }}</n-tag> Redis Version
<n-tag v-if="role" type="primary" size="small">{{ role }}</n-tag> <template #trigger>
<n-tag type="primary" size="small">v{{ redisVersion }}</n-tag>
</template>
</n-tooltip>
<n-tooltip v-if="redisMode">
Mode
<template #trigger>
<n-tag type="primary" size="small">{{ redisMode }}</n-tag>
</template>
</n-tooltip>
<n-tooltip v-if="redisMode">
Role
<template #trigger>
<n-tag type="primary" size="small">{{ role }}</n-tag>
</template>
</n-tooltip>
</n-space> </n-space>
</template> </template>
<template #header-extra> <template #header-extra>

3
frontend/src/components/sidebar/NavMenu.vue
View File

@ -134,9 +134,8 @@ const openGithub = () => {
<style lang="scss"> <style lang="scss">
#app-nav-menu { #app-nav-menu {
//width: 60px;
height: 100vh; height: 100vh;
border-right: v-bind('themeVars.borderColor') solid 1px; //border-right: v-bind('themeVars.borderColor') solid 1px;
.nav-menu-item { .nav-menu-item {
align-items: center; align-items: center;

4
frontend/src/style.scss
View File

@ -1,5 +1,6 @@
:root { :root {
//--bg-color: #ffffff; //--bg-color: #f8f8f8;
//--bg-color-accent: #fff;
//--bg-color-page: #f2f3f5; //--bg-color-page: #f2f3f5;
//--text-color-regular: #606266; //--text-color-regular: #606266;
//--border-color: #dcdfe6; //--border-color: #dcdfe6;
@ -32,7 +33,6 @@ body {
#app { #app {
height: 100vh; height: 100vh;
//text-align: center;
} }
.flex-box { .flex-box {