gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat： tooltip 样式调整

Browse Source
This commit is contained in:
zhangyu
2022-01-07 14:05:18 +08:00
parent 750738e2ab
commit 0a5bb2597b
14 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
nezha-fronted/src/assets/css/common.scss
View File

@@ -364,8 +364,10 @@ td .nz-icon-gear:before{
} }
} }
} }
.chart-bar,.chart-gauge,.chart-time-series,.chart-treemap,.chart-pie,.chart-canvas-tooltip,.line-chart-block-Zindex { .chart-bar,.chart-gauge,.chart-time-series,.chart-treemap,.chart-pie,.chart-canvas-tooltip,.line-chart-block-Zindex,.alert-label,.alert-labelUp,.nz-tooltip-bac{
background-color: $--chart-background-color !important; background-color: $--tooltip-background-color !important;
border-color: $--chart-border-color !important; border: 3px solid $--tooltip-border-color !important;
border-color: $--tooltip-border-color !important;
color: $--color-text-regular !important; color: $--color-text-regular !important;
box-shadow: none !important;
} }

1
nezha-fronted/src/assets/css/common/index.scss
View File

@@ -2,3 +2,4 @@
@import './checkbox.scss'; @import './checkbox.scss';
@import './tableCommon.scss'; @import './tableCommon.scss';
@import './rightBoxCommon.scss'; @import './rightBoxCommon.scss';
@import './tooltip.scss';

7
nezha-fronted/src/assets/css/common/tooltip.scss Normal file
View File

@@ -0,0 +1,7 @@
.tooltip-title{
font-weight: 600;
color: $--color-text-primary !important;
}
.tooltip-text{
color: $--color-text-primary !important;
}

2
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -503,7 +503,7 @@
border-style: solid; border-style: solid;
white-space: nowrap; white-space: nowrap;
will-change: transform; will-change: transform;
box-shadow: rgba(0,0,0,0.2) 1px 2px 10px; //box-shadow: rgba(0,0,0,0.2) 1px 2px 10px;
transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
border-width: 1px; border-width: 1px;
border-radius: 4px; border-radius: 4px;

2
nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
View File

@@ -71,7 +71,7 @@
} }
.alert-rule-title{ .alert-rule-title{
text-align: left; text-align: left;
width: 110px; width: 124px;
color: $--color-text-regular; color: $--color-text-regular;
padding: 0 3px 0 13px; padding: 0 3px 0 13px;
} }

3
nezha-fronted/src/assets/css/themes/theme-dark.scss
View File

@@ -241,6 +241,9 @@ $--right-box-shadow: -3px 0 8px -3px rgba(17,17,17,0.77);
$--right-box-sub-title-background-color: #323238; $--right-box-sub-title-background-color: #323238;
$--right-box-sub-title-border-color: $--border-color-light; $--right-box-sub-title-border-color: $--border-color-light;
/* 16.tooltip */
$--tooltip-background-color: #222329;
$--tooltip-border-color: #454545;
/*** themes/common.scss是与主题切换无关的变量 ***/ /*** themes/common.scss是与主题切换无关的变量 ***/
@import './src/common/var.scss'; @import './src/common/var.scss';

4
nezha-fronted/src/assets/css/themes/theme-light.scss
View File

@@ -236,6 +236,10 @@ $--right-box-shadow: -3px 0 8px -3px #ccc;
$--right-box-sub-title-background-color: $--background-color-base; $--right-box-sub-title-background-color: $--background-color-base;
$--right-box-sub-title-border-color: $--right-box-sub-title-background-color; $--right-box-sub-title-border-color: $--right-box-sub-title-background-color;
/* 16.tooltip */
$--tooltip-background-color: #ffffff;
$--tooltip-border-color: #e7eaed;
/*** themes/common.scss是与主题切换无关的变量 ***/ /*** themes/common.scss是与主题切换无关的变量 ***/
@import './src/common/var.scss'; @import './src/common/var.scss';

2
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -163,7 +163,7 @@ export default {
return ` return `
<div> <div>
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;"> <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
<div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div> <div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;"> <div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div> <div>value</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div> <div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>

2
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -222,7 +222,7 @@ export default {
const self = this const self = this
return `<div> return `<div>
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;"> <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div> <div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;"> <div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div> <div>value</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div> <div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>

2
nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
View File

@@ -2,7 +2,7 @@
<div :ref="`chart-canvas-${chartId}`" style="height: 100%;width: 100%"> <div :ref="`chart-canvas-${chartId}`" style="height: 100%;width: 100%">
<div :id="`chart-canvas-${chartId}`" class="chart__canvas chart-svg"></div> <div :id="`chart-canvas-${chartId}`" class="chart__canvas chart-svg"></div>
<div :class="`chart-canvas-tooltip-${chartId}`" :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show"> <div :class="`chart-canvas-tooltip-${chartId}`" :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show">
<div class="chart-canvas-tooltip-title"> <div class="chart-canvas-tooltip-title tooltip-title">
{{tooltip.title}} {{tooltip.title}}
</div> </div>
<div class="chart-canvas-tooltip-content"> <div class="chart-canvas-tooltip-content">

2
nezha-fronted/src/components/chart/chart/chartPie.vue
View File

@@ -135,7 +135,7 @@ export default {
const self = this const self = this
return `<div> return `<div>
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;"> <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div> <div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;"> <div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div> <div>value</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div> <div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>

4
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -183,7 +183,7 @@ export default {
if (i === 0) { if (i === 0) {
const value = bus.computeTimezone(item.data[0] * 1000) const value = bus.computeTimezone(item.data[0] * 1000)
const tData = new Date(value) const tData = new Date(value)
str += '<div style="margin-bottom: 5px">' str += '<div class="tooltip-title" style="margin-bottom: 5px">'
str += bus.timeFormate(tData) str += bus.timeFormate(tData)
str += '</div>' str += '</div>'
} }
@@ -192,7 +192,7 @@ export default {
const value = bus.computeTimezone(item.data[0] * 1000 - self.minusTime) const value = bus.computeTimezone(item.data[0] * 1000 - self.minusTime)
const tData = new Date(value) const tData = new Date(value)
str += '<div style="border: 1px solid #EEEEEE"></div>' str += '<div style="border: 1px solid #EEEEEE"></div>'
str += '<div style="margin-top: 5px;margin-bottom: 5px">' str += '<div class="tooltip-title" style="margin-top: 5px;margin-bottom: 5px">'
str += bus.timeFormate(tData) str += bus.timeFormate(tData)
str += '</div>' str += '</div>'
} }

2
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -142,7 +142,7 @@ export default {
return ` return `
<div> <div>
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;"> <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
<div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div> <div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;"> <div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div> <div>value</div>
<div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'none' : 'inline-block'}">${params.data.showValue}</div> <div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'none' : 'inline-block'}">${params.data.showValue}</div>

2
nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
View File

@@ -66,7 +66,7 @@
trigger="hover" trigger="hover"
:open-delay="300" :open-delay="300"
:width="215" :width="215"
popper-class="schedEnableTitle" popper-class="schedEnableTitle nz-tooltip-bac"
> >
<div> <div>
<div class="margin-b-10"> <div class="margin-b-10">