Skip to content

N
nexpie-grafana-theme
Commit 7934116e by Hugo Häggmark
Options

Fixed styling

parent a431efa0
Showing with 101 additions and 157 deletions
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
......@@ -19,7 +19,7 @@ describe('Initialization', () => {
it('should add a base threshold if missing', () => {
const instance = setup();
expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]);
expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#299c46' }]);
});
});
......@@ -31,13 +31,13 @@ describe('Add threshold', () => {
expect(instance.state.thresholds).toEqual([
{ index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#7EB26D' },
{ index: 0, value: -Infinity, color: '#299c46' },
]);
});
it('should add another threshold above a first', () => {
const instance = setup({
thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 50, color: '#EAB839' }],
thresholds: [{ index: 0, value: -Infinity, color: '#299c46' }, { index: 1, value: 50, color: '#EAB839' }],
});
instance.onAddThreshold(2);
......@@ -45,14 +45,14 @@ describe('Add threshold', () => {
expect(instance.state.thresholds).toEqual([
{ index: 2, value: 75, color: '#6ED0E0' },
{ index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#7EB26D' },
{ index: 0, value: -Infinity, color: '#299c46' },
]);
});
it('should add another threshold between first and second index', () => {
const instance = setup({
thresholds: [
{ index: 0, value: -Infinity, color: '#7EB26D' },
{ index: 0, value: -Infinity, color: '#299c46' },
{ index: 1, value: 50, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' },
],
......@@ -64,7 +64,7 @@ describe('Add threshold', () => {
{ index: 3, value: 75, color: '#EF843C' },
{ index: 2, value: 62.5, color: '#6ED0E0' },
{ index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#7EB26D' },
{ index: 0, value: -Infinity, color: '#299c46' },
]);
});
});
......@@ -73,7 +73,7 @@ describe('change threshold value', () => {
it('should update value and resort rows', () => {
const instance = setup();
const thresholds = [
{ index: 0, value: -Infinity, color: '#7EB26D' },
{ index: 0, value: -Infinity, color: '#299c46' },
{ index: 1, value: 50, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' },
];
......@@ -88,7 +88,7 @@ describe('change threshold value', () => {
instance.onChangeThresholdValue(mockEvent, thresholds[1]);
expect(instance.state.thresholds).toEqual([
{ index: 0, value: -Infinity, color: '#7EB26D' },
{ index: 0, value: -Infinity, color: '#299c46' },
{ index: 1, value: 78, color: '#EAB839' },
{ index: 2, value: 75, color: '#6ED0E0' },
]);
......
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
......@@ -21,7 +21,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
super(props);
const thresholds: Threshold[] =
props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: colors[0] }];
props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: '#299c46' }];
this.state = { thresholds, baseColor: BasicGaugeColor.Green };
}
......@@ -37,11 +37,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
const newThresholds = thresholds.map(threshold => {
if (threshold.index >= index) {
const index = threshold.index + 1;
threshold = {
...threshold,
index,
color: colors[index],
};
threshold = { ...threshold, index, color: colors[index] };
}
return threshold;
});
......@@ -128,92 +124,52 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
});
};
renderThresholds() {
const { thresholds } = this.state;
return thresholds.map((threshold, index) => {
return (
<div className="threshold-row" key={`${threshold.index}-${index}`}>
<div className="threshold-row-inner">
<div className="threshold-row-color">
{threshold.color && (
<div className="threshold-row-color-inner">
<ColorPicker
color={threshold.color}
onChange={color => this.onChangeThresholdColor(threshold, color)}
/>
</div>
)}
</div>
<input
className="threshold-row-input"
type="text"
onChange={event => this.onChangeThresholdValue(event, threshold)}
value={threshold.value}
onBlur={this.onBlur}
/>
<div onClick={() => this.onRemoveThreshold(threshold)} className="threshold-row-remove">
<i className="fa fa-times" />
</div>
</div>
</div>
);
});
}
renderIndicator() {
const { thresholds } = this.state;
return thresholds.map((t, i) => {
return (
<div key={`${t.value}-${i}`} className="indicator-section">
<div onClick={() => this.onAddThreshold(t.index + 1)} style={{ height: '50%', backgroundColor: t.color }} />
<div onClick={() => this.onAddThreshold(t.index)} style={{ height: '50%', backgroundColor: t.color }} />
</div>
);
});
}
renderBaseIndicator() {
renderInput = (threshold: Threshold) => {
const value = threshold.index === 0 ? 'Base' : threshold.value;
return (
<div className="indicator-section" style={{ height: '100%' }}>
<div
onClick={() => this.onAddThreshold(0)}
style={{ height: '100%', backgroundColor: BasicGaugeColor.Green }}
<div className="thresholds-row-input-inner">
<div className="thresholds-row-input-inner-arrow" />
<input
className="thresholds-row-input-inner-value"
type="text"
onChange={event => this.onChangeThresholdValue(event, threshold)}
value={value}
onBlur={this.onBlur}
readOnly={threshold.index === 0}
/>
</div>
);
}
renderBase() {
const baseColor = BasicGaugeColor.Green;
return (
<div className="threshold-row threshold-row-base">
<div className="threshold-row-inner threshold-row-inner--base">
<div className="threshold-row-color">
<div className="threshold-row-color-inner">
<ColorPicker color={baseColor} onChange={color => this.onChangeBaseColor(color)} />
<div className="thresholds-row-input-inner-color">
{threshold.color && (
<div className="thresholds-row-input-inner-color-colorpicker">
<ColorPicker color={threshold.color} onChange={color => this.onChangeThresholdColor(threshold, color)} />
</div>
</div>
<div className="threshold-row-label">Base</div>
)}
</div>
{threshold.index > 0 && (
<div className="thresholds-row-input-inner-remove" onClick={() => this.onRemoveThreshold(threshold)}>
<i className="fa fa-times" />
</div>
)}
</div>
);
}
};
render() {
const { thresholds } = this.state;
return (
<PanelOptionsGroup title="Thresholds">
<div className="thresholds">
<div className="color-indicators">
{this.renderIndicator()}
{this.renderBaseIndicator()}
</div>
<div className="threshold-rows">
{this.renderThresholds()}
{this.renderBase()}
</div>
{thresholds.map((threshold, index) => {
return (
<div className="thresholds-row" key={`${threshold.index}-${index}`}>
<div className="thresholds-row-add-button">
<i className="fa fa-plus-circle fa-2x" onClick={() => this.onAddThreshold(threshold.index + 1)} />
</div>
<div className="thresholds-row-color-indicator" style={{ backgroundColor: threshold.color }} />
<div className="thresholds-row-input">{this.renderInput(threshold)}</div>
</div>
);
})}
</div>
</PanelOptionsGroup>
);
......
packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
.thresholds {
.thresholds-row {
display: flex;
flex-direction: row;
height: 70px;
}
.threshold-rows {
margin-left: 5px;
.thresholds-row:last-child > .thresholds-row-color-indicator {
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
overflow: hidden;
}
.threshold-row {
display: flex;
align-items: center;
margin-top: 3px;
padding: 5px;
.thresholds-row-add-button {
align-self: center;
margin-right: 5px;
color: $green;
}
&::before {
font-family: 'FontAwesome';
content: '\f0d9';
color: $input-label-border-color;
}
.thresholds-row-add-button > i {
cursor: pointer;
}
.threshold-row-inner {
border: 1px solid $input-label-border-color;
border-radius: $border-radius;
display: flex;
overflow: hidden;
height: 37px;
.thresholds-row-color-indicator {
width: 20px;
}
&--base {
width: auto;
}
.thresholds-row-input {
margin-top: 51px;
margin-left: 2px;
}
.threshold-row-color {
width: 36px;
border-right: 1px solid $input-label-border-color;
.thresholds-row-input-inner {
display: flex;
align-items: center;
justify-content: center;
background-color: $input-bg;
flex-direction: row;
height: 37px;
}
.threshold-row-color-inner {
border-radius: 10px;
overflow: hidden;
display: flex;
align-items: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
.thresholds-row-input-inner > div:last-child {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
.thresholds-row-input-inner-arrow {
align-self: center;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid $gray-5;
}
.threshold-row-input {
.thresholds-row-input-inner-value {
border: 1px solid $input-label-border-color;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
padding: 8px 10px;
width: 150px;
}
.threshold-row-label {
background-color: $input-label-bg;
padding: 5px;
.thresholds-row-input-inner-color {
width: 37px;
border-top: 1px solid $input-label-border-color;
border-bottom: 1px solid $input-label-border-color;
border-right: 1px solid $input-label-border-color;
display: flex;
align-items: center;
justify-content: center;
background-color: $input-bg;
}
.threshold-row-add-label {
align-items: center;
.thresholds-row-input-inner-color-colorpicker {
border-radius: 10px;
overflow: hidden;
display: flex;
padding: 5px 8px;
align-items: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.threshold-row-remove {
.thresholds-row-input-inner-remove {
display: flex;
align-items: center;
justify-content: center;
height: 37px;
width: 37px;
background-color: $gray-5;
border-top: 1px solid $input-label-border-color;
border-bottom: 1px solid $input-label-border-color;
border-right: 1px solid $input-label-border-color;
cursor: pointer;
}
.threshold-row-add {
border-right: $border-width solid $input-label-border-color;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
background-color: $green;
}
.threshold-row-label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.indicator-section {
width: 100%;
height: 50px;
cursor: pointer;
}
.color-indicators {
width: 15px;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
overflow: hidden;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment