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

perf: 调整dashboard、project-query顶部工具栏样式

Browse Source
This commit is contained in:
陈劲松
2020-02-17 16:32:40 +08:00
parent 0655239941
commit d874854599
5 changed files with 50 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -359,6 +359,7 @@ li{
height: calc(90vh - 55px);
width: 100%;
padding-top: 24px;
font-size: 14px;
}
.content-left .sidebar-info-item {
line-height: 20px;
@@ -436,7 +437,7 @@ li{
display: flex;
height: 50px;
align-items : center;
justify-content: space-between
justify-content: space-between;
}
.top-tools>div {
margin-top: 2px;
@@ -1097,3 +1098,20 @@ li{
.green {
background-color:lightGreen;
}
/* panel-tool-tip列表搜索框 样式重写*/
.relative-position{
position: relative;
}
.query-input-inactive{
left:213px;
width: 18%;
margin-top: 1px;
}
.query-input-active {
margin-top: 1px;
}
.query-input-active .el-input__inner, .query-input-inactive .el-input__inner {
height: 25px;
line-height: 25px !important;
}

2
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -95,7 +95,7 @@
</div>
</el-form-item>
<el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
<el-input size="mini" maxlength="64" show-word-limit v-model="chart.title"></el-input>
<el-input size="small" maxlength="64" show-word-limit v-model="chart.title"></el-input>
</el-form-item>
<el-row :gutter="10">

2
nezha-fronted/src/components/page/dashboard/metricPreview.scss
View File

@@ -44,7 +44,7 @@
input, textarea {
background-color: $content-right-background-color;
}
.el-input__inner, .el-textarea__inner, .el-input__count {
.el-input__inner, .el-textarea__inner {
background-color: $content-right-background-color;
}
.el-textarea {

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

@@ -533,7 +533,7 @@
},
focusInput:function(){
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
classVal=classVal.replace('query-input-inactive','');
classVal=classVal.replace('query-input-inactive','query-input-active');
document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
this.$refs.queryPanel.focus();
this.queryFocus=true;
@@ -542,7 +542,7 @@
if(!this.filter.searchName || this.filter.searchName == ''){
setTimeout(function(){
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
classVal='query-input-inactive '+classVal;
classVal=classVal.replace('query-input-active','query-input-inactive');
document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
this.queryFocus=true;
},100)
@@ -775,18 +775,6 @@
padding-right: 0;
vertical-align: top;
}
/* 列表搜索框 样式重写*/
.relative-position{
position: relative;
}
.query-input-inactive{
left:213px;
width: 18%;
margin-top: 1px;
}
.query-input-inactive .el-input__inner{
height: 25px;
line-height: 25px;
}
</style>

47
nezha-fronted/src/components/page/project/project.vue
View File

@@ -1,12 +1,30 @@
<style lang="scss">
@import '../../charts/line-chart-block';
.project-calendar .el-input__inner {
height: 26px !important;
/* .project-calendar .el-input__inner {
height: 25px !important;
border-color: #d8d8d8;
}*/
.top-tools .el-input__inner {
height: 25px !important;
border-color: #d8d8d8;
}
.project .nz-table .el-table__row td:first-of-type {
padding-left: 0;
}
.change-time-height {
height: 23px;
}
.date-pick-group {
display: flex;
align-items: center;
justify-content: space-between;
}
.date-pick-group button:first-of-type {
margin-right: 4px;
}
.date-pick-group button:last-of-type {
margin-left: 4px;
}
</style>
<style scope>
.chart-bottom {
@@ -164,8 +182,8 @@
<i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput"></i>
</el-input>
</div>
<div class="margin-r-20 margin-t-m1">
<button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i class="el-icon-d-arrow-left"></i></button>
<div class="margin-r-20 date-pick-group">
<button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height"><i class="el-icon-d-arrow-left"></i></button>
<el-date-picker
v-model="formatTime"
type="datetime"
@@ -178,7 +196,7 @@
@change="pickTime"
>
</el-date-picker>
<button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i class="el-icon-d-arrow-right"></i></button>
<button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height"><i class="el-icon-d-arrow-right"></i></button>
</div>
<button @click="viewGraph" slot="reference" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-120">
@@ -1189,7 +1207,7 @@
},
focusInput:function(){
let classVal=document.getElementById('elementQuery').parentElement.getAttribute("class");
classVal=classVal.replace('query-input-inactive','');
classVal=classVal.replace('query-input-inactive','query-input-active');
document.getElementById('elementQuery').parentElement.setAttribute("class",classVal );
this.$refs.elementQuery.focus();
},
@@ -1197,7 +1215,7 @@
if(!this.queryExpression || this.queryExpression == ''){
setTimeout(function(){
let classVal=document.getElementById('elementQuery').parentElement.getAttribute("class");
classVal='query-input-inactive '+classVal;
classVal=classVal.replace('query-input-active','query-input-inactive');
document.getElementById('elementQuery').parentElement.setAttribute("class",classVal );
},100)
}
@@ -1501,7 +1519,6 @@
.el-table .disabledCheck .cell .el-checkbox__inner{
display: none !important;
}
.el-table .disabledCheck .cell::before{
content: '';
text-align: center;
@@ -1509,18 +1526,4 @@
}
/* end--覆盖分页组件样式*/
/* 列表搜索框 样式重写*/
.relative-position{
position: relative;
}
.query-input-inactive{
left:213px;
width: 18%;
}
.query-input-inactive .el-input__inner{
height: 26px;
line-height: 26px;
}
</style>