fixed styling

public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -5,9 +5,14 @@ interface ToggleButtonGroupProps {
   value?: any;
   label?: string;
   render: (props) => void;
+  stackedButtons?: boolean;
 }
 
 export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
+  static defaultProps = {
+    stackedButtons: false,
+  };
+
   getValues() {
     const { children } = this.props;
     return React.Children.toArray(children).map((c: ReactElement<any>) => c.props.value);
@@ -27,14 +32,14 @@ export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupPr
   }
 
   render() {
-    const { value, label } = this.props;
+    const { value, label, stackedButtons } = this.props;
     const values = this.getValues();
     const selectedValue = value || values[0];
     const labelClassName = `gf-form-label ${this.smallChildren() ? 'small' : ''}`;
 
     return (
       <div className="gf-form">
-        <div className="toggle-button-group">
+        <div className={`toggle-button-group ${stackedButtons ? 'stacked' : ''}`}>
           {label && <label className={labelClassName}>{label}</label>}
           {this.props.render({ selectedValue, onChange: this.handleToggle.bind(this) })}
         </div>

public/app/plugins/panel/gauge/MappingRow.tsx

@@ -68,18 +68,24 @@ export default class MappingRow extends PureComponent<Props, State> {
       const rangeMap = mapping as RangeMap;
 
       return (
-        <div className="gf-form-inline">
-          <div className="gf-form-group">
-            <Label>From</Label>
-            <input value={rangeMap.from} onChange={this.onMappingFromChange} />
+        <div className="gf-form">
+          <div className="gf-form-inline">
+            <Label width={4}>From</Label>
+            <div>
+              <input className="gf-form-input" value={rangeMap.from} onChange={this.onMappingFromChange} />
+            </div>
           </div>
-          <div className="gf-form-group">
-            <Label>To</Label>
-            <input value={rangeMap.to} onChange={this.onMappingToChange} />
+          <div className="gf-form-inline">
+            <Label width={4}>To</Label>
+            <div>
+              <input className="gf-form-input" value={rangeMap.to} onChange={this.onMappingToChange} />
+            </div>
           </div>
-          <div className="gf-form-group">
-            <Label>Text</Label>
-            <input value={rangeMap.text} onChange={this.onMappingTextChange} />
+          <div className="gf-form-inline">
+            <Label width={4}>Text</Label>
+            <div>
+              <input className="gf-form-input" value={rangeMap.text} onChange={this.onMappingTextChange} />
+            </div>
           </div>
         </div>
       );
@@ -91,11 +97,15 @@ export default class MappingRow extends PureComponent<Props, State> {
       <div className="gf-form">
         <div className="gf-form-inline">
           <Label width={4}>Value</Label>
-          <input className="gf-form-input" onChange={this.onMappingValueChange} value={valueMap.value} />
+          <div>
+            <input className="gf-form-input" onChange={this.onMappingValueChange} value={valueMap.value} />
+          </div>
         </div>
         <div className="gf-form-inline">
           <Label width={4}>Text</Label>
-          <input className="gf-form-input" value={valueMap.text} onChange={this.onMappingTextChange} />
+          <div>
+            <input className="gf-form-input" value={valueMap.text} onChange={this.onMappingTextChange} />
+          </div>
         </div>
       </div>
     );
@@ -105,33 +115,36 @@ export default class MappingRow extends PureComponent<Props, State> {
     const { mappingType } = this.state;
 
     return (
-      <div className="gf-form-inline">
-        <ToggleButtonGroup
-          onChange={mappingType => this.onMappingTypeChange(mappingType)}
-          value={mappingType}
-          render={({ selectedValue, onChange }) => {
-            return [
-              <ToggleButton
-                className="btn-small"
-                key="value"
-                onChange={onChange}
-                selected={selectedValue === MappingType.ValueToText}
-                value={MappingType.ValueToText}
-              >
-                Value
-              </ToggleButton>,
-              <ToggleButton
-                className="btn-small"
-                key="range"
-                onChange={onChange}
-                selected={selectedValue === MappingType.RangeToText}
-                value={MappingType.RangeToText}
-              >
-                Range
-              </ToggleButton>,
-            ];
-          }}
-        />
+      <div className="mapping-row">
+        <div className="mapping-row-type">
+          <ToggleButtonGroup
+            onChange={mappingType => this.onMappingTypeChange(mappingType)}
+            value={mappingType}
+            stackedButtons={true}
+            render={({ selectedValue, onChange }) => {
+              return [
+                <ToggleButton
+                  className="btn-small"
+                  key="value"
+                  onChange={onChange}
+                  selected={selectedValue === MappingType.ValueToText}
+                  value={MappingType.ValueToText}
+                >
+                  Value
+                </ToggleButton>,
+                <ToggleButton
+                  className="btn-small"
+                  key="range"
+                  onChange={onChange}
+                  selected={selectedValue === MappingType.RangeToText}
+                  value={MappingType.RangeToText}
+                >
+                  Range
+                </ToggleButton>,
+              ];
+            }}
+          />
+        </div>
         <div>{this.renderRow()}</div>
       </div>
     );

public/app/plugins/panel/gauge/ValueMappings.tsx

@@ -42,14 +42,18 @@ export default class ValueMappings extends PureComponent<OptionModuleProps, Stat
 
     return (
       <div className="section gf-form-group">
-        <div className="gf-form">
-          <div className="mappings">
-            {combinedMappings.length > 0 &&
-              combinedMappings.map((mapping, index) => {
-                return <MappingRow key={index} mapping={mapping} updateMapping={this.updateGauge} />;
-              })}
+        <h5 className="page-heading">Value mappings</h5>
+        <div>
+          {combinedMappings.length > 0 &&
+            combinedMappings.map((mapping, index) => {
+              return <MappingRow key={index} mapping={mapping} updateMapping={this.updateGauge} />;
+            })}
+        </div>
+        <div className="add-mapping-row" onClick={this.addMapping}>
+          <div className="add-mapping-row-icon">
+            <i className="fa fa-plus" />
           </div>
-          <div onClick={this.addMapping}>Add mapping</div>
+          <div className="add-mapping-row-label">Add mapping</div>
         </div>
       </div>
     );

public/app/plugins/panel/gauge/module.tsx

@@ -62,13 +62,11 @@ class Options extends PureComponent<PanelOptionsProps<OptionsProps>> {
     return (
       <div>
         <div className="form-section">
-          <div className="form-section__header">Options</div>
           <ValueOptions onChange={onChange} options={options} />
           <GaugeOptions onChange={onChange} options={options} />
           <Thresholds onChange={onChange} options={options} />
         </div>
         <div className="form-section">
-          <div className="form-section__header">Value mappings</div>
           <ValueMappings onChange={onChange} options={options} />
         </div>
       </div>

public/sass/_grafana.scss

@@ -106,6 +106,7 @@
 @import 'components/unit-picker';
 @import 'components/thresholds';
 @import 'components/toggle_button_group';
+@import 'components/value-mappings';
 
 // PAGES
 @import 'pages/login';

public/sass/components/_toggle_button_group.scss

@@ -13,6 +13,10 @@
     }
   }
 
+  &.stacked {
+    flex-direction: column;
+  }
+
   .btn {
     background-color: $typeahead-selected-bg;
     border-radius: 0;

public/sass/components/_value-mappings.scss

+.mapping-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.mapping-row-type {
+  margin-right: 5px;
+}
+
+.add-mapping-row {
+  display: flex;
+  overflow: hidden;
+  height: 37px;
+  cursor: pointer;
+}
+
+.add-mapping-row-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  background-color: $green;
+}
+
+.add-mapping-row-label {
+  align-items: center;
+  display: flex;
+  padding: 5px 8px;
+}