Fixed styling

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

@@ -1,103 +1,91 @@
-.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;
-}