From ebbc71d3e9468c9620440886580fd86c47846d89 Mon Sep 17 00:00:00 2001 From: Fine Date: Fri, 10 Nov 2023 10:20:45 +0800 Subject: [PATCH] feat: update topology theme --- src/styles/reset.scss | 22 +++++++++---------- src/styles/theme.scss | 10 +++++++++ src/views/dashboard/configuration/Widget.vue | 2 +- .../configuration/widget/metric/Index.vue | 1 - .../related/topology/components/Graph.vue | 22 +++++++++---------- .../topology/components/utils/layout.ts | 1 - 6 files changed, 33 insertions(+), 25 deletions(-) diff --git a/src/styles/reset.scss b/src/styles/reset.scss index 49262e50..10a87f46 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -144,17 +144,17 @@ pre { } } -.el-switch__label--left { - margin-right: 5px; -} +// .el-switch__label--left { +// margin-right: 5px; +// } -.el-switch__label--right { - margin-left: 5px; -} +// .el-switch__label--right { +// margin-left: 5px; +// } -.el-switch__label * { - font-size: $font-size-smaller; -} +// .el-switch__label * { +// font-size: $font-size-smaller; +// } .el-drawer__header { margin-bottom: 0; @@ -173,7 +173,7 @@ pre { div.vis-tooltip { max-width: 600px; overflow: hidden; - background-color: $theme-background !important; + background-color: var(--vis-tooltip-bg) !important; white-space: normal !important; font-size: $font-size-smaller !important; } @@ -193,7 +193,7 @@ div.vis-tooltip { .vis-item.Normal { background-color: #fac858; border-color: #fac858; - color: #666 !important; + color: $text-color !important; } .vis-item .vis-item-content { diff --git a/src/styles/theme.scss b/src/styles/theme.scss index e9a5d941..f4be5436 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -35,6 +35,11 @@ html { --sw-icon-btn-color: #666; --sw-icon-btn-border: #ccc; --sw-table-col: #fff; + --sw-config-header: aliceblue; + --sw-topology-color: #666; + --sw-topology-operations-bg: #f7f9fa; + --vis-tooltip-bg: #fff; + --sw-topology-switch-icon: rgba(0, 0, 0, 0.3); } html.dark { @@ -55,6 +60,11 @@ html.dark { --sw-icon-btn-color: #ccc; --sw-icon-btn-border: #999; --sw-table-col: none; + --sw-config-header: #333; + --sw-topology-color: #ccc; + --sw-topology-operations-bg: #4b4b52; + --vis-tooltip-bg: #414243; + --sw-topology-switch-icon: rgba(0, 0, 0, 0.3); } .el-table tr { diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue index bba26cbb..dd846a99 100644 --- a/src/views/dashboard/configuration/Widget.vue +++ b/src/views/dashboard/configuration/Widget.vue @@ -209,7 +209,7 @@ limitations under the License. --> height: 25px; line-height: 25px; text-align: center; - background-color: aliceblue; + background-color: var(--sw-config-header); font-size: $font-size-smaller; position: relative; } diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue index bb6ce642..a58d2d9a 100644 --- a/src/views/dashboard/configuration/widget/metric/Index.vue +++ b/src/views/dashboard/configuration/widget/metric/Index.vue @@ -634,7 +634,6 @@ limitations under the License. --> cursor: text; padding: 0 5px; border-radius: 3px; - color: #606266; outline: none; margin-right: 5px; min-height: 26px; diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index a85d70a4..f85249a7 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/src/views/dashboard/related/topology/components/Graph.vue @@ -43,6 +43,7 @@ limitations under the License. --> :href="!n.type || n.type === `N/A` ? icons.UNDEFINED : icons[n.type.toUpperCase().replace('-', '')]" /> overflow: auto; margin-top: 30px; + .node-text { + fill: var(--sw-topology-color); + font-size: 12px; + opacity: 0.9; + } + .svg-topology { cursor: move; background-color: $theme-background; @@ -687,7 +694,7 @@ limitations under the License. --> position: absolute; top: 10px; left: 25px; - color: #666; + color: var(--sw-topology-color); div { margin-bottom: 8px; @@ -727,7 +734,7 @@ limitations under the License. --> } .label { - color: #666; + color: var(--sw-topology-color); display: inline-block; margin-right: 5px; } @@ -736,7 +743,7 @@ limitations under the License. --> position: absolute; color: $font-color; cursor: pointer; - background-color: $theme-background; + background-color: var(--sw-topology-operations-bg); border-radius: 5px; padding: 10px 0; border: 1px solid #999; @@ -752,7 +759,7 @@ limitations under the License. --> span:hover { color: $active-color; - background-color: #eee; + background-color: $popper-hover-bg-color; } } @@ -784,13 +791,6 @@ limitations under the License. --> .topo-node { cursor: pointer; } - - .topo-text { - font-family: Lato, "Source Han Sans CN", "Microsoft YaHei", sans-serif; - fill: #ddd; - font-size: 11px; - opacity: 0.8; - } } @keyframes topo-dash { from { diff --git a/src/views/dashboard/related/topology/components/utils/layout.ts b/src/views/dashboard/related/topology/components/utils/layout.ts index 27b8073d..52b35e5b 100644 --- a/src/views/dashboard/related/topology/components/utils/layout.ts +++ b/src/views/dashboard/related/topology/components/utils/layout.ts @@ -19,7 +19,6 @@ import type { Node, Call } from "@/types/topology"; export function layout(levels: Node[][], calls: Call[], radius: number) { // precompute level depth - console.log(levels); levels.forEach((l: Node[], i: number) => l.forEach((n: any) => n && (n.level = i))); const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []);