github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update topology theme

Browse Source
This commit is contained in:
Fine 2023-11-10 11:55:54 +08:00
parent ebbc71d3e9
commit f95015ad02
6 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/layout/components/NavBar.vue
View File

@ -52,7 +52,7 @@ limitations under the License. -->
<Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
</span>
<span class="ml-5">
<el-switch v-model="theme" active-text="D" inactive-text="L" size="small" inline-prompt @change="changeTheme" />
<el-switch v-model="theme" :active-icon="Moon" :inactive-icon="Sunny" inline-prompt @change="changeTheme" />
</span>
<span class="version ml-5 cp">
<el-popover trigger="hover" width="250" placement="bottom" :content="appStore.version">
@ -77,7 +77,7 @@ limitations under the License. -->
import { MetricCatalog } from "@/views/dashboard/data";
import type { DashboardItem } from "@/types/dashboard";
import router from "@/router";
import { ArrowRight } from "@element-plus/icons-vue";
import { ArrowRight, Moon, Sunny } from "@element-plus/icons-vue";
/*global Indexable */
const { t, te } = useI18n();

9
src/styles/theme.scss
View File

@ -27,7 +27,6 @@ html {
--border-color-primary: #eee;
--layout-background: #f7f9fa;
--box-shadow-color: #ccc;
--el-border: 1px solid #000000;
--sw-bg-color-overlay: #fff;
--sw-border-color-light: #e4e7ed;
--popper-hover-bg: #eee;
@ -40,6 +39,9 @@ html {
--sw-topology-operations-bg: #f7f9fa;
--vis-tooltip-bg: #fff;
--sw-topology-switch-icon: rgba(0, 0, 0, 0.3);
--sw-topology-box-shadow: #eee 1px 2px 10px;
--sw-topology-setting-bg: #fff;
--sw-topology-border: 1px solid #000000;
}
html.dark {
@ -64,7 +66,10 @@ html.dark {
--sw-topology-color: #ccc;
--sw-topology-operations-bg: #4b4b52;
--vis-tooltip-bg: #414243;
--sw-topology-switch-icon: rgba(0, 0, 0, 0.3);
--sw-topology-switch-icon: #aaa;
--sw-topology-box-shadow: 0 0 2px 0 #444;
--sw-topology-setting-bg: #333;
--sw-topology-border: 1px solid #999;
}
.el-table tr {

1
src/views/dashboard/panel/Tool.vue
View File

@ -120,7 +120,6 @@ limitations under the License. -->
v-model="dashboardStore.editMode"
active-text="E"
inactive-text="V"
size="small"
inline-prompt
@change="changeMode"
/>

2
src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
View File

@ -568,7 +568,7 @@ limitations under the License. -->
position: absolute;
visibility: hidden;
padding: 5px;
border: 1px solid #000;
border: var(--sw-topology-border);
border-radius: 3px;
background-color: $theme-background;
}

16
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -724,13 +724,9 @@ limitations under the License. -->
border-radius: 3px;
color: $disabled-color;
border: 1px solid $border-color-primary;
background-color: $theme-background;
box-shadow: #eee 1px 2px 10px;
background-color: var(--sw-topology-setting-bg);
box-shadow: var(--sw-topology-box-shadow);
transition: all 0.5ms linear;
&.dark {
background-color: #2b3037;
}
}
.label {
@ -746,8 +742,8 @@ limitations under the License. -->
background-color: var(--sw-topology-operations-bg);
border-radius: 5px;
padding: 10px 0;
border: 1px solid #999;
box-shadow: #ddd 1px 2px 10px;
border: 1px solid $border-color-primary;
box-shadow: --sw-topology-box-shadow;
span {
display: block;
@ -772,7 +768,7 @@ limitations under the License. -->
.switch-icon {
cursor: pointer;
transition: all 0.5ms linear;
background: rgb(0 0 0 / 30%);
background: var(--sw-topology-switch-icon);
color: $text-color;
display: inline-block;
padding: 2px 4px;
@ -810,7 +806,7 @@ limitations under the License. -->
position: absolute;
visibility: hidden;
padding: 5px;
border: 1px solid #000;
border: var(--sw-topology-border);
border-radius: 3px;
background-color: $theme-background;
}

4
src/views/dashboard/related/topology/components/Settings.vue
View File

@ -640,14 +640,14 @@ limitations under the License. -->
}
.title {
color: #666;
color: var(--sw-topology-color);
margin-bottom: 0;
}
.label {
font-size: $font-size-smaller;
margin-top: 10px;
color: #666;
color: var(--sw-topology-color);
}
.legend-btn {