root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 250 Packages Projects Releases Wiki Activity

Fixed the circle

This commit is contained in:
Hugo Häggmark 2019-01-14 16:57:54 +01:00
parent 7934116e5c
commit 39c672cb1f
2 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
View File

@ -162,8 +162,8 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
{thresholds.map((threshold, index) => { {thresholds.map((threshold, index) => {
return ( return (
<div className="thresholds-row" key={`${threshold.index}-${index}`}> <div className="thresholds-row" key={`${threshold.index}-${index}`}>
<div className="thresholds-row-add-button"> <div className="thresholds-row-add-button" onClick={() => this.onAddThreshold(threshold.index + 1)}>
<i className="fa fa-plus-circle fa-2x" onClick={() => this.onAddThreshold(threshold.index + 1)} /> <i className="fa fa-plus" />
</div> </div>
<div className="thresholds-row-color-indicator" style={{ backgroundColor: threshold.color }} /> <div className="thresholds-row-color-indicator" style={{ backgroundColor: threshold.color }} />
<div className="thresholds-row-input">{this.renderInput(threshold)}</div> <div className="thresholds-row-input">{this.renderInput(threshold)}</div>

18
packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
View File

@ -1,3 +1,7 @@
.thresholds {
margin-bottom: 10px;
}
.thresholds-row { .thresholds-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -14,10 +18,18 @@
align-self: center; align-self: center;
margin-right: 5px; margin-right: 5px;
color: $green; color: $green;
height: 24px;
width: 24px;
background-color: $green;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
} }
.thresholds-row-add-button > i { .thresholds-row-add-button > i {
cursor: pointer; color: $white;
} }
.thresholds-row-color-indicator { .thresholds-row-color-indicator {
@ -47,7 +59,7 @@
height: 0; height: 0;
border-top: 5px solid transparent; border-top: 5px solid transparent;
border-bottom: 5px solid transparent; border-bottom: 5px solid transparent;
border-right: 5px solid $gray-5; border-right: 5px solid $input-label-border-color;
} }
.thresholds-row-input-inner-value { .thresholds-row-input-inner-value {
@ -83,7 +95,7 @@
justify-content: center; justify-content: center;
height: 37px; height: 37px;
width: 37px; width: 37px;
background-color: $gray-5; background-color: $input-label-border-color;
border-top: 1px solid $input-label-border-color; border-top: 1px solid $input-label-border-color;
border-bottom: 1px solid $input-label-border-color; border-bottom: 1px solid $input-label-border-color;
border-right: 1px solid $input-label-border-color; border-right: 1px solid $input-label-border-color;