From b96dc052c9ca0ed9dfcf742adb052230f93ab17f Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Thu, 27 Oct 2022 10:37:31 +0300
Subject: [PATCH] chore: color input fixes

---
 .../ContextBar/contextBarActionFactory.tsx    |  7 ++--
 .../src/components/inputs/ColorInput.tsx      | 35 +++++++------------
 tldraw/apps/tldraw-logseq/src/styles.css      | 27 ++++++++------
 tldraw/packages/core/src/types/types.ts       | 11 ++++++
 4 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
index 69c4e6ebd..4d47c65a2 100644
--- a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
@@ -1,4 +1,4 @@
-import { debounce, Decoration, isNonNullable } from '@tldraw/core'
+import { Decoration, isNonNullable, HighlightColor } from '@tldraw/core'
 import { useApp } from '@tldraw/react'
 import { observer } from 'mobx-react-lite'
 import React from 'react'
@@ -331,8 +331,7 @@ const SwatchAction = observer(() => {
     BoxShape | PolygonShape | EllipseShape | LineShape | PencilShape | TextShape
   >(app.selectedShapesArray, 'Swatch')
 
-  const handleClick = React.useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
-    const color = e.target.getAttribute("data-color")
+  const handleSetColor = React.useCallback((color: HighlightColor) => {
     shapes.forEach(s => {
       s.update({ fill: color, stroke: color })
     })
@@ -340,7 +339,7 @@ const SwatchAction = observer(() => {
   }, [])
 
   const value = shapes[0].props.noFill ? shapes[0].props.stroke : shapes[0].props.fill
-  return <ColorInput title="Color Picker" value={value} onClick={handleClick} />
+  return <ColorInput title="Color Picker" value={value} setColor={handleSetColor} />
 })
 
 const StrokeTypeAction = observer(() => {
diff --git a/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx b/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx
index 2d1173aae..b3728876d 100644
--- a/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx
@@ -1,21 +1,12 @@
 import * as React from 'react'
 import * as Popover from '@radix-ui/react-popover';
 import { TablerIcon } from '../icons'
-
-interface ColorInputProps extends React.InputHTMLAttributes<HTMLButtonElement> {}
-
-enum HighlightColor {
-  Gray = 'gray',
-  Red = 'red',
-  Yellow = 'yellow',
-  Green = 'green',
-  Blue = 'blue',
-  Purple = 'purple',
-  Pink = 'pink',
-  None = 'transparent',
+import { HighlightColor } from '@tldraw/core'
+interface ColorInputProps extends React.InputHTMLAttributes<HTMLButtonElement> {
+  setColor: (value: HighlightColor) => void
 }
 
-export function ColorInput({ value, onClick, ...rest }: ColorInputProps) {
+export function ColorInput({ value, setColor, ...rest }: ColorInputProps) {
   const ref = React.useRef<HTMLDivElement>(null)
   const [computedValue, setComputedValue] = React.useState(value)
 
@@ -34,9 +25,9 @@ export function ColorInput({ value, onClick, ...rest }: ColorInputProps) {
     <Popover.Root>
       <Popover.Trigger>
         <div className="input" ref={ref}>
-          <div className="color-input-wrapper">
-            <button className={`bg-${value}-500`} />
-          </div>
+          <button className={`tl-color-drip mx-1`}>
+            <div className={`tl-color-bg bg-${value}-500`}></div>
+          </button>
         </div>
       </Popover.Trigger>
       <Popover.Anchor />
@@ -49,14 +40,12 @@ export function ColorInput({ value, onClick, ...rest }: ColorInputProps) {
           <div className={"tl-color-palette"}>
             {Object.values(HighlightColor).map(color =>
               <button
-                className={`tl-color-drip bg-${color}-500`}
-                data-color={color}
-                onClick={(e)=>{
-                  // setComputedValue(value)
-                  onClick?.(e)
-                }}
+                className={`tl-color-drip  m-1${color === value ? " active" : ""}`}
+                onClick={()=>setColor(color)}
               >
-                {(color === "transparent") && <TablerIcon name="droplet-off" />}
+                {(color === "transparent") ?
+                  <TablerIcon name="droplet-off" /> :
+                  <div className={`tl-color-bg bg-${color}-500`}></div>}
               </button>
             )}
           </div>
diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css
index c60f8d8b3..9a0d88e53 100644
--- a/tldraw/apps/tldraw-logseq/src/styles.css
+++ b/tldraw/apps/tldraw-logseq/src/styles.css
@@ -132,15 +132,6 @@
     padding: 2px;
   }
 
-  .color-input-wrapper {
-    overflow: hidden;
-    height: 20px;
-    width: 20px;
-    border-radius: 2px;
-    margin: 2px;
-    box-shadow: 0 0 0 2px var(--ls-tertiary-background-color);
-  }
-
   .color-input {
     transform: translate(-50%, -50%) scale(4);
   }
@@ -736,6 +727,8 @@ button.tl-select-input-trigger {
 .tl-logseq-cp-container {
   @apply h-full w-full rounded-lg;
 
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
   overscroll-behavior: none;
   flex: 1 1 0%;
   cursor: default;
@@ -868,11 +861,23 @@ html[data-theme='dark'] {
 }
 
 .tl-color-drip {
-  @apply rounded-sm;
+  @apply rounded;
 
   width: 30px;
   height: 30px;
-  margin: 4px;
+  padding: 4px;
   border: 1px solid var(--ls-secondary-border-color);
   color: var(--ls-secondary-text-color);
+
+  &.active {
+    padding: 0;
+
+    .tl-color-bg {
+      border: 4px solid var(--ls-selection-background-color);
+    }
+  }
+}
+
+.tl-color-bg {
+  @apply w-full h-full rounded-sm;
 }
diff --git a/tldraw/packages/core/src/types/types.ts b/tldraw/packages/core/src/types/types.ts
index 387f2ee68..c4b5a6e02 100644
--- a/tldraw/packages/core/src/types/types.ts
+++ b/tldraw/packages/core/src/types/types.ts
@@ -3,6 +3,17 @@ import type { TLShape, TLApp } from '../lib'
 import type { TLEventMap } from './TLEventMap'
 import type { TLHandle } from './TLHandle'
 
+export enum HighlightColor {
+  Gray = 'gray',
+  Red = 'red',
+  Yellow = 'yellow',
+  Green = 'green',
+  Blue = 'blue',
+  Purple = 'purple',
+  Pink = 'pink',
+  None = 'transparent',
+}
+
 export enum AlignType {
   Top = 'top',
   CenterVertical = 'centerVertical',