ux of color picker improved

Author: RafaelGB

src/components/ColorPicker.tsx

@@ -1,7 +1,7 @@
 import { ColorPickerProps } from "cdm/StyleModel";
 import React from "react";
 import { ColorResult, SketchPicker } from "react-color";
-import { castHslToString } from "./styles/ColumnWidthStyle";
+import { castHslToString } from "components/styles/ColumnWidthStyle";
 
 export function ColorPicker(colorPickerProps: ColorPickerProps) {
   const { view, options, option, columnKey } = colorPickerProps;
@@ -23,7 +23,6 @@ export function ColorPicker(colorPickerProps: ColorPickerProps) {
     event: React.ChangeEvent<HTMLInputElement>
   ) {
     handleChange(color, event);
-    setShowColorPicker(false);
     // Persist changes
     await view.diskConfig.updateColumnProperties(columnKey, {
       options: options,
@@ -39,11 +38,13 @@ export function ColorPicker(colorPickerProps: ColorPickerProps) {
         {option.label}
       </span>
       {showColorPicker && (
-        <SketchPicker
-          color={colorState}
-          onChange={handleChange}
-          onChangeComplete={handleChangeComplete}
-        />
+        <div onMouseLeave={() => setShowColorPicker(false)}>
+          <SketchPicker
+            color={colorState}
+            onChange={handleChange}
+            onChangeComplete={handleChangeComplete}
+          />
+        </div>
       )}
     </>
   );

src/components/modals/handlers/SelectedColumnOptionsHandler.tsx

@@ -2,13 +2,10 @@ import { ColumnHandlerResponse } from "cdm/ModalSettingsModel";
 import { ColorPickerProps } from "cdm/StyleModel";
 import { ColorPicker } from "components/ColorPicker";
 import { AbstractColumnHandler } from "components/modals/handlers/AbstractColumnHandler";
-import { castHslToString } from "components/styles/ColumnWidthStyle";
 import { randomColor } from "helpers/Colors";
 import { ButtonComponent, Setting } from "obsidian";
 import React from "react";
-import { ColorResult } from "react-color";
 import ReactDOM from "react-dom";
-import { add_button } from "settings/SettingsComponents";
 
 export class SelectedColumnOptionsHandler extends AbstractColumnHandler {
   settingTitle: string = "Column Options";
@@ -66,7 +63,7 @@ export class SelectedColumnOptionsHandler extends AbstractColumnHandler {
           .onClick(async (): Promise<void> => {
             options.splice(index, 1);
             // Persist changes
-            await view.diskConfig.updateColumnConfig(column.key, {
+            await view.diskConfig.updateColumnProperties(column.key, {
               options: options,
             });
             // Force refresh of settings