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

style: update

Browse Source
This commit is contained in:
Fine 2024-01-12 11:52:38 +08:00
parent ccd993aaa7
commit 48956acc9e
4 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/SelectSingle.vue
View File

@ -85,7 +85,7 @@ limitations under the License. -->
.bar-select { .bar-select {
position: relative; position: relative;
justify-content: space-between; justify-content: space-between;
border: 1px solid #ddd; border: 1px solid var(--el-border-color);
background: $theme-background; background: $theme-background;
border-radius: 3px; border-radius: 3px;
color: $font-color; color: $font-color;
@ -97,8 +97,8 @@ limitations under the License. -->
border-radius: 3px; border-radius: 3px;
margin: 3px; margin: 3px;
color: $active-color; color: $active-color;
background-color: #fafafa; background-color: var(--theme-background);
border: 1px solid #e8e8e8; border: 1px solid var(--el-color-primary);
text-align: center; text-align: center;
} }
} }
@ -139,7 +139,7 @@ limitations under the License. -->
left: 0; left: 0;
background-color: $theme-background; background-color: $theme-background;
box-shadow: 0 1px 6px rgb(99 99 99 / 20%); box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
border: 1px solid #ddd; border: 1px solid var(--el-border-color);
width: 100%; width: 100%;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
border-right-width: 1px !important; border-right-width: 1px !important;
@ -169,7 +169,7 @@ limitations under the License. -->
} }
&:hover { &:hover {
background-color: #f5f5f5; background-color: var(--layout-background);
} }
} }
</style> </style>

2
src/styles/theme.scss
View File

@ -68,7 +68,7 @@ html {
--sw-time-axis-text: #4d4d4d; --sw-time-axis-text: #4d4d4d;
--sw-drawer-header: #72767b; --sw-drawer-header: #72767b;
--sw-marketplace-border: #dedfe0; --sw-marketplace-border: #dedfe0;
--sw-grid-item-active: #79bbff; --sw-grid-item-active: #d4d7de;
} }
html.dark { html.dark {

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

@ -42,11 +42,11 @@ limitations under the License. -->
:isRemote="['EndpointRelation', 'Endpoint'].includes(dashboardStore.entity)" :isRemote="['EndpointRelation', 'Endpoint'].includes(dashboardStore.entity)"
/> />
<span <span
class="ml-10 cp hierarchy-btn" class="ml-5 cp hierarchy-btn"
v-if="dashboardStore.entity === 'ServiceInstance'" v-if="dashboardStore.entity === 'ServiceInstance'"
@click="showHierarchy = true" @click="showHierarchy = true"
> >
<Icon size="middle" iconName="hierarchy_topology" /> <Icon size="small" iconName="hierarchy_topology" />
</span> </span>
</div> </div>
<div class="selectors-item" v-if="key === 5 || key === 6"> <div class="selectors-item" v-if="key === 5 || key === 6">
@ -722,10 +722,9 @@ limitations under the License. -->
.hierarchy-btn { .hierarchy-btn {
display: inline-block; display: inline-block;
width: 24px; padding: 0 2px 2px;
height: 24px;
border: 1px solid #666; border: 1px solid #666;
border-radius: 5px; border-radius: 4px;
text-align: center; text-align: center;
color: #aaa; color: #aaa;
} }

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

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<svg class="hierarchy-services-svg" :width="width" :height="height" @click="svgEvent"> <svg class="hierarchy-services-svg" :width="width" :height="height" @click="svgEvent" v-if="nodes.length">
<g class="hierarchy-services-graph" :transform="`translate(${diff[0]}, ${diff[1]})`"> <g class="hierarchy-services-graph" :transform="`translate(${diff[0]}, ${diff[1]})`">
<g <g
class="topo-node" class="topo-node"
@ -69,6 +69,7 @@ limitations under the License. -->
</g> </g>
</g> </g>
</svg> </svg>
<div v-else class="hierarchy-services"> No Data</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from "vue"; import type { PropType } from "vue";
@ -181,7 +182,8 @@ limitations under the License. -->
); );
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.hierarchy-services-topo { .hierarchy-services-topo,
hierarchy-services {
.node-text { .node-text {
fill: var(--sw-topology-color); fill: var(--sw-topology-color);
font-size: 12px; font-size: 12px;
@ -216,4 +218,11 @@ limitations under the License. -->
.el-loading-spinner { .el-loading-spinner {
top: 30%; top: 30%;
} }
.hierarchy-services {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
}
</style> </style>