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 10:20:45 +08:00
parent 554214752d
commit ebbc71d3e9
6 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/styles/reset.scss
View File

@ -144,17 +144,17 @@ pre {
} }
} }
.el-switch__label--left { // .el-switch__label--left {
margin-right: 5px; // margin-right: 5px;
} // }
.el-switch__label--right { // .el-switch__label--right {
margin-left: 5px; // margin-left: 5px;
} // }
.el-switch__label * { // .el-switch__label * {
font-size: $font-size-smaller; // font-size: $font-size-smaller;
} // }
.el-drawer__header { .el-drawer__header {
margin-bottom: 0; margin-bottom: 0;
@ -173,7 +173,7 @@ pre {
div.vis-tooltip { div.vis-tooltip {
max-width: 600px; max-width: 600px;
overflow: hidden; overflow: hidden;
background-color: $theme-background !important; background-color: var(--vis-tooltip-bg) !important;
white-space: normal !important; white-space: normal !important;
font-size: $font-size-smaller !important; font-size: $font-size-smaller !important;
} }
@ -193,7 +193,7 @@ div.vis-tooltip {
.vis-item.Normal { .vis-item.Normal {
background-color: #fac858; background-color: #fac858;
border-color: #fac858; border-color: #fac858;
color: #666 !important; color: $text-color !important;
} }
.vis-item .vis-item-content { .vis-item .vis-item-content {

10
src/styles/theme.scss
View File

@ -35,6 +35,11 @@ html {
--sw-icon-btn-color: #666; --sw-icon-btn-color: #666;
--sw-icon-btn-border: #ccc; --sw-icon-btn-border: #ccc;
--sw-table-col: #fff; --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 { html.dark {
@ -55,6 +60,11 @@ html.dark {
--sw-icon-btn-color: #ccc; --sw-icon-btn-color: #ccc;
--sw-icon-btn-border: #999; --sw-icon-btn-border: #999;
--sw-table-col: none; --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 { .el-table tr {

2
src/views/dashboard/configuration/Widget.vue
View File

@ -209,7 +209,7 @@ limitations under the License. -->
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
background-color: aliceblue; background-color: var(--sw-config-header);
font-size: $font-size-smaller; font-size: $font-size-smaller;
position: relative; position: relative;
} }

1
src/views/dashboard/configuration/widget/metric/Index.vue
View File

@ -634,7 +634,6 @@ limitations under the License. -->
cursor: text; cursor: text;
padding: 0 5px; padding: 0 5px;
border-radius: 3px; border-radius: 3px;
color: #606266;
outline: none; outline: none;
margin-right: 5px; margin-right: 5px;
min-height: 26px; min-height: 26px;

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

@ -43,6 +43,7 @@ limitations under the License. -->
:href="!n.type || n.type === `N/A` ? icons.UNDEFINED : icons[n.type.toUpperCase().replace('-', '')]" :href="!n.type || n.type === `N/A` ? icons.UNDEFINED : icons[n.type.toUpperCase().replace('-', '')]"
/> />
<text <text
class="node-text"
:x="n.x - (Math.min(n.name.length, 20) * 6) / 2 + 6" :x="n.x - (Math.min(n.name.length, 20) * 6) / 2 + 6"
:y="n.y + n.height + 8" :y="n.y + n.height + 8"
style="pointer-events: none" style="pointer-events: none"
@ -678,6 +679,12 @@ limitations under the License. -->
overflow: auto; overflow: auto;
margin-top: 30px; margin-top: 30px;
.node-text {
fill: var(--sw-topology-color);
font-size: 12px;
opacity: 0.9;
}
.svg-topology { .svg-topology {
cursor: move; cursor: move;
background-color: $theme-background; background-color: $theme-background;
@ -687,7 +694,7 @@ limitations under the License. -->
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 25px; left: 25px;
color: #666; color: var(--sw-topology-color);
div { div {
margin-bottom: 8px; margin-bottom: 8px;
@ -727,7 +734,7 @@ limitations under the License. -->
} }
.label { .label {
color: #666; color: var(--sw-topology-color);
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} }
@ -736,7 +743,7 @@ limitations under the License. -->
position: absolute; position: absolute;
color: $font-color; color: $font-color;
cursor: pointer; cursor: pointer;
background-color: $theme-background; background-color: var(--sw-topology-operations-bg);
border-radius: 5px; border-radius: 5px;
padding: 10px 0; padding: 10px 0;
border: 1px solid #999; border: 1px solid #999;
@ -752,7 +759,7 @@ limitations under the License. -->
span:hover { span:hover {
color: $active-color; color: $active-color;
background-color: #eee; background-color: $popper-hover-bg-color;
} }
} }
@ -784,13 +791,6 @@ limitations under the License. -->
.topo-node { .topo-node {
cursor: pointer; 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 { @keyframes topo-dash {
from { from {

1
src/views/dashboard/related/topology/components/utils/layout.ts
View File

@ -19,7 +19,6 @@ import type { Node, Call } from "@/types/topology";
export function layout(levels: Node[][], calls: Call[], radius: number) { export function layout(levels: Node[][], calls: Call[], radius: number) {
// precompute level depth // precompute level depth
console.log(levels);
levels.forEach((l: Node[], i: number) => l.forEach((n: any) => n && (n.level = i))); levels.forEach((l: Node[], i: number) => l.forEach((n: any) => n && (n.level = i)));
const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []); const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []);