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 {
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 {

10
src/styles/theme.scss
View File

@ -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 {

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

@ -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;
}

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

@ -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;

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('-', '')]"
/>
<text
class="node-text"
:x="n.x - (Math.min(n.name.length, 20) * 6) / 2 + 6"
:y="n.y + n.height + 8"
style="pointer-events: none"
@ -678,6 +679,12 @@ limitations under the License. -->
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 {

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) {
// 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), []);