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

perf: 调整panel中图表的按钮

Browse Source
This commit is contained in:
chenjinsong
2020-01-20 11:56:32 +08:00
parent 2f65946de9
commit e73e4ced3d
6 changed files with 48 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -130,7 +130,7 @@ li{
font-size: 12px;
}
.nz-btn-size-large {
padding: 7px 15px;
padding: 6px 15px;
}
.nz-btn.nz-btn-size-normal.nz-btn-size-alien { //弹框顶部异形按钮
height: 40px;
@@ -185,6 +185,10 @@ li{
border-color: #e5e5e5 ;
cursor: default;
}
.nz-btn-group {
border-radius: 4px;
display: inline-block;
}
.nz-btn-group .nz-btn:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
@@ -193,6 +197,19 @@ li{
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.nz-btn-group .nz-btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.nz-btn-group .nz-btn {
box-shadow: none;
vertical-align: top;
}
.nz-btn-group .nz-btn:not(:last-of-type) {
border-right: 1px solid rgba(162,162,162,0.50);
}
.nz-btn-group.nz-btn-group-light {
box-shadow: $btn-normal-shadow;
}
/* end--按钮组件*/
/*table提示样式*/

12
nezha-fronted/src/components/charts/chart-table.scss
View File

@@ -27,11 +27,11 @@
clear: both;
}
.edit {
// position: absolute;
// right: 40px;
// top: 5px;
// z-index: 10;
background: $btn-light-background-color;
position: absolute;
right: 20px;
top: 17px;
z-index: 10;
/*background: $btn-light-background-color;
border-radius: 6px;;
border: 1px solid #ccc;
.set-icon {
@@ -61,7 +61,7 @@
cursor: pointer;
float: right;
font-size: 14px;
}
}*/
}
.chart-select {
position: absolute;

13
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -4,12 +4,17 @@
<template>
<div class="chart-table">
<div class="clearfix">
<div class="float-left table-title">
<div class="table-title">
{{data.title}}
</div>
<div class="float-right">
<div class="nz-btn-group nz-btn-group-light edit">
<button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button><button
@click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="nz-icon nz-icon-edit"></i></button><button
@click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-delete"></i></button><button
@click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
</div>
<!--<div class="float-right">
<div class="edit">
<!-- v-if="firstShow" -->
<div class="list-icon">
<span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon">
<i class="el-icon-refresh-right"></i>
@@ -25,7 +30,7 @@
</span>
</div>
</div>
</div>
</div>-->
</div>
<div class="mt-10">
<!--

12
nezha-fronted/src/components/charts/line-chart-block.scss
View File

@@ -29,17 +29,17 @@
white-space: pre-wrap !important;
}
}
.edit:after{
/*.edit:after{
display: block;
content: "";
clear: both;
}
}*/
.edit {
position: absolute;
right: 40px;
top: 15px;
right: 20px;
top: 17px;
z-index: 10;
background: $btn-light-background-color;
/*background: $btn-light-background-color;
border-radius: 6px;;
border: 1px solid #ccc;
.set-icon {
@@ -71,7 +71,7 @@
cursor: pointer;
float: right;
font-size: 14px;
}
}*/
}
.chart-select {
position: absolute;

8
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -4,7 +4,7 @@
<template>
<div class="line-chart-block" >
<div class="edit">
<!--<div class="edit">
<div class="list-icon" v-if="firstShow">
<span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" v-if="showSetting">
<i class="el-icon-refresh-right"></i>
@@ -19,6 +19,12 @@
<i class="el-icon-full-screen"></i>
</span>
</div>
</div>-->
<div class="nz-btn-group nz-btn-group-light edit" v-if="firstShow">
<button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button><button
@click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="nz-icon nz-icon-edit"></i></button><button
@click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="el-icon-delete"></i></button><button
@click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
</div>
<div class="line-area" ref="lineChartArea" id="lineChartArea"></div>

4
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -44,8 +44,8 @@
<el-dropdown-item v-for="item in panelData" :key="item.id+1" :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">{{item.name}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="nz-btn-group float-right margin-r-20">
<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()"><i style="font-size: 13px" class="global-active-color nz-icon nz-icon-refresh"></i></button><el-popover v-model="visible" placement="bottom-start" width="200" trigger="click">
<div class="nz-btn-group nz-btn-group-light float-right margin-r-20">
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()"><i style="font-size: 13px" class="global-active-color nz-icon nz-icon-refresh"></i></button><el-popover v-model="visible" placement="bottom-start" width="200" trigger="click">
<ul class="popover_ul">
<li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i.value)">
{{i.name}}