drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-09-01 18:35:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to tailwind v4 (#370)

Browse Source
This commit is contained in:
1ilit
2025-03-21 01:25:36 +04:00
committed by GitHub
parent a358b56d7e
commit f95841f0e7
20 changed files with 631 additions and 743 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/EditorCanvas/Area.jsx
View File

@@ -105,45 +105,41 @@ export default function Area({
onPointerDown={onPointerDown}
>
<div
className={`border-2 ${
className={`w-full h-full p-2 rounded cursor-move border-2 ${
isHovered
? "border-dashed border-blue-500"
: selectedElement.element === ObjectType.AREA &&
selectedElement.id === data.id
? "border-blue-500"
: "border-slate-400"
} w-full h-full cursor-move rounded`}
? "border-blue-500 opacity-100"
: "border-slate-400 opacity-100"
}`}
style={{ backgroundColor: `${data.color}66` }}
>
<div
className="w-fill p-2 h-full"
style={{ backgroundColor: `${data.color}66` }}
>
<div className="flex justify-between gap-1 w-full">
<div className="text-color select-none overflow-hidden text-ellipsis">
{data.name}
</div>
{(isHovered || (areaIsSelected() && !layout.sidebar)) && (
<Popover
visible={areaIsSelected() && !layout.sidebar}
onClickOutSide={onClickOutSide}
stopPropagation
content={<EditPopoverContent data={data} />}
trigger="custom"
position="rightTop"
showArrow
>
<Button
icon={<IconEdit />}
size="small"
theme="solid"
style={{
backgroundColor: "#2F68ADB3",
}}
onClick={edit}
/>
</Popover>
)}
<div className="flex justify-between gap-1 w-full">
<div className="text-color select-none overflow-hidden text-ellipsis">
{data.name}
</div>
{(isHovered || (areaIsSelected() && !layout.sidebar)) && (
<Popover
visible={areaIsSelected() && !layout.sidebar}
onClickOutSide={onClickOutSide}
stopPropagation
content={<EditPopoverContent data={data} />}
trigger="custom"
position="rightTop"
showArrow
>
<Button
icon={<IconEdit />}
size="small"
theme="solid"
style={{
backgroundColor: "#2F68ADB3",
}}
onClick={edit}
/>
</Popover>
)}
</div>
</div>
</foreignObject>
@@ -269,7 +265,7 @@ function EditPopoverContent({ data }) {
showArrow
>
<div
className="h-[32px] w-[32px] rounded"
className="h-[32px] w-[32px] rounded-sm"
style={{ backgroundColor: data.color }}
/>
</Popover>