From f0c8ee90050e15f96f672eb5597716cb7de99e81 Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Tue, 4 May 2021 12:03:00 +0200
Subject: [PATCH] improve edit dialog for color zones

---
 .../edit-widget-color-zones-control.js        | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/widget/edit-widget/edit-widget-color-zones-control.js b/src/widget/edit-widget/edit-widget-color-zones-control.js
index 9f12610..46b4ed7 100644
--- a/src/widget/edit-widget/edit-widget-color-zones-control.js
+++ b/src/widget/edit-widget/edit-widget-color-zones-control.js
@@ -202,18 +202,24 @@ class EditWidgetColorZonesControl extends React.Component {
             width: width,
             height: '40px'
           }
-          return (<Button
-            style={style}
-            key={idx}
-            onClick={i => this.editColorZone(idx)}
-            disabled={!this.props.widget.customProperties.colorZones}>
-              <Icon icon="pen" />
-          </Button>
+          return (
+            <span>
+              <OverlayTrigger key={idx} placement={'right'} overlay={<Tooltip id={`tooltip-${"color-edit"}`}>Edit zone</Tooltip>} >
+              <Button
+              style={style}
+              key={idx}
+              onClick={i => this.editColorZone(idx)}
+              disabled={!this.props.widget.customProperties.colorZones}>
+                <Icon icon="pen" />
+              </Button>
+              </OverlayTrigger>
+            </span>
           )
         })
       }
     </div>
       <Collapse isOpened={collapse}>
+        <Form.Label>Edit selected color zone:</Form.Label>
         <OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}>Change color</Tooltip>} >
           <Button key={0} style={pickerStyle} onClick={this.openColorPicker.bind(this)}  >
             <Icon icon="paint-brush"/>
@@ -244,11 +250,13 @@ class EditWidgetColorZonesControl extends React.Component {
           </tbody>
         </Table>
         <span className='icon-button'>
-          <Button
-            variant='light'
-            onClick={this.removeZones} >
-            <Icon style={iconStyle} classname='icon-color' icon="trash-alt" />
-          </Button>
+          <OverlayTrigger key={1} placement={'right'} overlay={<Tooltip id={`tooltip-${"color-delete"}`}>Remove zone</Tooltip>} >
+            <Button
+              variant='light'
+              onClick={this.removeZones} >
+              <Icon style={iconStyle} classname='icon-color' icon="trash-alt" />
+            </Button>
+          </OverlayTrigger>
         </span>
       </Collapse>
       <ColorPicker