[gephi-lite] color picker

Fix #232

Clicking on a color picker should close others
-> ranking, it is solved by removing the stopPropagation on the tooltip
-> gradient, the solution can't be applied otherwise a new point is
created, so just adding a document.body.click() to simulate a click
outside

Also fix the render of the color picker inside forms (like the edit node
modal for eaxample)

Author: sim51

packages/gephi-lite/src/components/GraphAppearance/color/ColorPickerTooltip.tsx

@@ -54,6 +54,8 @@ const ColorPickerTooltip: FC<{
             // prevent thumb creation on track click
             e.stopPropagation();
             e.preventDefault();
+            // adding a click on the body to close other already opened color pickers
+            document.body.click();
             // drag stops
             setIsDraggingThumb(false);
           }}

packages/gephi-lite/src/components/Tooltip.tsx

@@ -81,7 +81,6 @@ const Tooltip = forwardRef<
           ref={ref}
           onClick={(e) => {
             e.preventDefault();
-            e.stopPropagation();
             setShowTooltip("click");
           }}
           onMouseEnter={() => {

packages/gephi-lite/src/components/data/Attribute.tsx

@@ -291,7 +291,9 @@ export const AttributeEditors: {
         <InlineColorPicker color={value} onChange={(v) => onChange(v)} />
       </div>
     ) : (
-      <ColorPicker clearable color={value} onChange={(v) => onChange(v)} />
+      <div className="d-flex">
+        <ColorPicker clearable color={value} onChange={(v) => onChange(v)} />
+      </div>
     );
   },
 };