more styles

src/components/editors/IconsEditor.tsx

@@ -121,7 +121,6 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
   };
 
   const onConditionChange = (iconIdx: number, conditionIdx: number, field: keyof IconConfig, value: any) => {
-    console.log(value);
     // @ts-ignore
     icons[iconIdx][field][conditionIdx] = value;
 
@@ -138,52 +137,63 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
               {icons.map((icon, iconIdx) => {
                 return (
                   <div key={iconIdx} className={styles.icon}>
-                    <IconButton name="trash-alt" onClick={() => removeIcon(iconIdx)}></IconButton>
-                    <Input
-                      type="url"
-                      placeholder="Image URL"
-                      value={icon.url}
-                      onChange={(evt) => onIconFieldChange(iconIdx, 'url', (evt.target as any).value)}
-                    />
+                    <IconButton 
+                      name="trash-alt" 
+                      onClick={() => removeIcon(iconIdx)}
+                      tooltip="Delete Icon"
+                    ></IconButton>
+                    <div className={styles.row}>
+                      <Input
+                        type="url"
+                        placeholder="Image URL"
+                        value={icon.url}
+                        onChange={(evt) => onIconFieldChange(iconIdx, 'url', (evt.target as any).value)}
+                      />
+                    </div>
                     <RadioButtonGroup
                       value={icon.position}
                       options={positionOptions}
                       onChange={(newVal) => onIconFieldChange(iconIdx, 'position', newVal)}
                     />
-                    <Slider
-                      value={icon.size}
-                      min={1}
-                      max={100}
-                      step={1}
-                      onAfterChange={(newVal) => onIconFieldChange(iconIdx, 'size', newVal)}
-                    />
+                    <div className={styles.slider}>
+                      <Slider
+                        value={icon.size}
+                        min={1}
+                        max={100}
+                        step={1}
+                        onAfterChange={(newVal) => onIconFieldChange(iconIdx, 'size', newVal)}
+                      />
+                    </div>
 
                     {icon.conditions.map((condition, conditionIdx) => {
                       return (
-                        <HorizontalGroup key={conditionIdx}>
-                          <FieldNamePicker
-                            context={context}
-                            value={icon.metrics[conditionIdx]}
-                            onChange={(newVal: any) => onConditionChange(iconIdx, conditionIdx, 'metrics', newVal)}
-                            item={fieldNamePickerSettings}
-                          />
-                          <RadioButtonGroup
-                            value={icon.conditions[conditionIdx]}
-                            options={conditionOptions}
-                            onChange={(newVal) => onConditionChange(iconIdx, conditionIdx, 'conditions', newVal)}
-                          />
-                          <Input
-                            placeholder="value"
-                            value={icon.values[conditionIdx]}
-                            onChange={(evt) =>
-                              onConditionChange(iconIdx, conditionIdx, 'values', (evt.target as any).value)
-                            }
-                          />
-                          <IconButton
-                            name="trash-alt"
-                            onClick={() => removeCondition(iconIdx, conditionIdx)}
-                          ></IconButton>
-                        </HorizontalGroup>
+                        <div className={styles.condition}>
+                          <HorizontalGroup key={conditionIdx} >
+                            <FieldNamePicker
+                              context={context}
+                              value={icon.metrics[conditionIdx]}
+                              onChange={(newVal: any) => onConditionChange(iconIdx, conditionIdx, 'metrics', newVal)}
+                              item={fieldNamePickerSettings}
+                            />
+                            <RadioButtonGroup
+                              value={icon.conditions[conditionIdx]}
+                              options={conditionOptions}
+                              onChange={(newVal) => onConditionChange(iconIdx, conditionIdx, 'conditions', newVal)}
+                            />
+                            <Input
+                              placeholder="value"
+                              value={icon.values[conditionIdx]}
+                              onChange={(evt) =>
+                                onConditionChange(iconIdx, conditionIdx, 'values', (evt.target as any).value)
+                              }
+                            />
+                            <IconButton
+                              name="trash-alt"
+                              onClick={() => removeCondition(iconIdx, conditionIdx)}
+                              tooltip="Delete Condition"
+                            ></IconButton>
+                          </HorizontalGroup>
+                        </div>
                       );
                     })}
                     <Button variant="secondary" onClick={() => addCondition(iconIdx)}>
@@ -206,6 +216,9 @@ export function IconsEditor({ onChange, value, context }: StandardEditorProps<Ic
 interface IconsEditorStyles {
   icons: string;
   icon: string;
+  condition: string;
+  slider: string;
+  row: string;
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme): IconsEditorStyles => {
@@ -221,9 +234,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme): IconsEditorStyles => {
       padding-bottom: ${theme.spacing.formSpacingBase * 2}px;
 
       &:last-child {
-        border: none;
         margin-bottom: 0;
       }
     `,
+    condition: css`
+      margin-bottom: ${theme.spacing.xxs};
+    `,
+    slider: css`
+      padding-bottom: 0;
+    `,
+    row: css`
+      margin-bottom: ${theme.spacing.sm};
+    `,
   };
+
 });

src/components/editors/ThresholdsEditor.tsx

@@ -103,7 +103,7 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
             />
             {config.thresholds.map((threshold, thresholdIdx) => {
               return (
-                <HorizontalGroup key={thresholdIdx} className={styles.row}>
+                <HorizontalGroup key={thresholdIdx}>
                   <Input
                     type="text"
                     value={'Color'}
@@ -138,7 +138,11 @@ export function ThresholdsEditor({ onChange, value, context }: StandardEditorPro
                       onChange={(evt) => onThresholdFieldChange(thresholdIdx, 'value', (evt.target as any).value)}
                     />
                   )}
-                  <IconButton name="trash-alt" onClick={() => removeThreshold(thresholdIdx)}></IconButton>
+                  <IconButton 
+                    name="trash-alt" 
+                    onClick={() => removeThreshold(thresholdIdx)}
+                    tooltip="Delete Threshold"
+                  ></IconButton>
                 </HorizontalGroup>
               );
             })}