Make DraggableColorPicker actually draggable

themebuilder/package.json

@@ -11,6 +11,7 @@
     "nanoid": "^4.0.2",
     "qrcode.react": "^3.1.0",
     "react-color": "^2.19.3",
+    "react-draggable": "^4.4.6",
     "react-scripts": "5.0.1",
     "react-to-print": "^2.15.1",
     "sass": "^1.70.0",

themebuilder/src/components/DraggableColorPicker.tsx

@@ -1,36 +1,39 @@
 import css from "./styling/DraggableColorPicker.module.scss";
+import Draggable from "react-draggable";
 import { SketchPicker } from "react-color";
 import { classList } from "react-common/components/util";
 import { Button } from "react-common/components/controls/Button";
+import React from "react";
 
 export interface DraggableColorPickerProps {
     color: string;
     onChange: (color: string) => void;
     onClose: () => void;
     className?: string;
+    initialPosition?: { x: number; y: number };
 }
 export const DraggableColorPicker = (props: DraggableColorPickerProps) => {
-    // TODO - make this draggable
     return (
-        <div className={classList(props.className, css["draggable-color-picker"])}>
-            <div className={css["control-bar"]}>
-                <i className="fas fa-grip-horizontal" />
-                <Button onClick={props.onClose} title={"Close picker"} leftIcon="fas fa-times"/>
-            </div>
-            <SketchPicker
-                color={props.color}
-                onChange={e => props.onChange(e.hex)}
-                styles={
-                    {
+        <Draggable handle={`.${css["drag-handle"]}`} defaultPosition={props.initialPosition}>
+            <div className={classList(props.className, css["draggable-color-picker"])}>
+                <div className={css["control-bar"]}>
+                    <i className={classList("fas fa-grip-horizontal", css["drag-handle"])} />
+                    <Button onClick={props.onClose} title={"Close picker"} leftIcon="fas fa-times" />
+                </div>
+                <SketchPicker
+                    color={props.color}
+                    onChange={e => props.onChange(e.hex)}
+                    disableAlpha={false} // TODO thsparks - alpha not working
+                    styles={{
                         default: {
                             picker: {
                                 boxShadow: "none",
-                                padding: "0 0.5rem"
+                                padding: "0 0.5rem",
                             },
                         },
-                    }
-                }
-            />
-        </div>
+                    }}
+                />
+            </div>
+        </Draggable>
     );
 };

themebuilder/src/components/ThemeColorSetter.tsx

@@ -20,6 +20,10 @@ export const ThemeColorSetter = (props: ThemeColorSetterProps) => {
     const [ color, setColor ] = React.useState<string>(editingTheme?.colors[colorId] || "#000000");
     const [ colorPickerOpen, setColorPickerOpen ] = React.useState<boolean>(false);
     const [isHighlighted, setIsHighlighted] = React.useState<boolean>(false);
+    const openPickerButtonRef = React.useRef<HTMLButtonElement | null>(null);
+    const setOpenPickerButtonRef = React.useCallback((el: HTMLButtonElement | null) => {
+        openPickerButtonRef.current = el;
+    }, []);
 
     React.useEffect(() => {
         setIsHighlighted(!!state.colorsToHighlight?.includes(colorId));
@@ -29,6 +33,17 @@ export const ThemeColorSetter = (props: ThemeColorSetterProps) => {
         setColor(editingTheme?.colors[colorId] || "#000000");
     }, [editingTheme?.colors[colorId], colorId]);
 
+    function getColorPickerPosition() {
+        if (!openPickerButtonRef.current) return { x: 0, y: 0 };
+
+        const rect = openPickerButtonRef.current.getBoundingClientRect();
+        return {
+             // intentionally moving a tad to the left and up from the button.
+            x: rect.left - 5,
+            y: rect.top - 5,
+        };
+    }
+
     if (!color) return null;
     return (
         <div key={key} className={className}>
@@ -51,12 +66,14 @@ export const ThemeColorSetter = (props: ThemeColorSetterProps) => {
                 style={{ backgroundColor: color }}
                 onClick={() => setColorPickerOpen(!colorPickerOpen)}
                 title={lf("Open color picker")}
+                buttonRef={setOpenPickerButtonRef}
             />
             {colorPickerOpen && <DraggableColorPicker
                 color={color}
                 className="theme-color-picker"
                 onClose={() => setColorPickerOpen(false)}
                 onChange={c => setColorValue(colorId, c)}
+                initialPosition={getColorPickerPosition()}
             />}
         </div>
     );

themebuilder/src/components/styling/DraggableColorPicker.module.scss

@@ -8,6 +8,9 @@
     background-color: var(--pxt-neutral-background2);
     color: var(--pxt-neutral-foreground2);
     box-shadow: 0 0 2px 2px var(--pxt-neutral-alpha10);
+    border-radius: 0.5rem;
+    top: 0;
+    left: 0;
 
     .control-bar {
         display: flex;
@@ -16,6 +19,11 @@
         justify-content: space-between;
         width: 100%;
 
+        .drag-handle {
+            flex-grow: 1;
+            cursor: grab;
+        }
+
         button[class*="common-button"] {
             padding: 0;
         }

themebuilder/src/components/styling/ThemeEditor.module.scss

@@ -60,7 +60,6 @@
                     flex-direction: row;
                     justify-content: space-between;
                     align-items: center;
-                    gap: 0.5rem;
                     padding: 0 1rem;
                     height: 4rem;