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

8
frontend/src/AppContent.vue
View File

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

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

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

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

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

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

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

4
frontend/src/style.scss
View File

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