mirror of https://github.com/logseq/logseq
chore: color input fixes
parent
eee2b342df
commit
b96dc052c9
|
@ -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(() => {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue