drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-05-24 10:29:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add table styling for crows_foot and idef1x

Browse Source
This commit is contained in:
Francisco-Galindo 2025-03-04 23:02:24 -06:00
parent cc08f45449
commit 8f9c447935
2 changed files with 65 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/EditorCanvas/Table.jsx
View File

@ -70,34 +70,45 @@ export default function Table(props) {
y={tableData.y}
width={settings.tableWidth}
height={height}
className="group drop-shadow-lg rounded-md cursor-move"
className="group drop-shadow-lg cursor-move"
onPointerDown={onPointerDown}
>
<div
onDoubleClick={openEditor}
className={`border-2 hover:border-dashed hover:border-blue-500
select-none rounded-lg w-full ${
settings.mode === "light"
? "bg-zinc-100 text-zinc-800"
: "bg-zinc-800 text-zinc-200"
select-none w-full ${
settings.notation !== "default"
? "transparent no-border"
: "rounded-lg"
} ${
selectedElement.id === tableData.id &&
selectedElement.element === ObjectType.TABLE
selectedElement.element === ObjectType.TABLE
? "border-solid border-blue-500"
: "border-zinc-500"
}`}
style={{ direction: "ltr" }}
>
<div
className="h-[10px] w-full rounded-t-md"
style={{ backgroundColor: tableData.color }}
className={`h-[10px] w-full ${
settings.notation !== "default"
? ""
: "rounded-t-md"
}`}
style={{ backgroundColor: tableData.color, height: settings.notation !== "default" ? 0 : "10px" }}
/>
<div
className={`overflow-hidden font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
} ${
settings.notation !== "default" ? "transparent" : ""
}`}
>
<div className=" px-3 overflow-hidden text-ellipsis whitespace-nowrap">
<div className={` px-3 overflow-hidden text-ellipsis whitespace-nowrap ${
settings.notation !== "default"
? ""
: ""
}`}
>
{tableData.name}
</div>
<div className="hidden group-hover:block">
@ -282,10 +293,32 @@ export default function Table(props) {
function field(fieldData, index) {
return (
<div
className={`${
index === tableData.fields.length - 1
? ""
: "border-b border-gray-400"
className={`
${
(fieldData.primary && settings.notation !== "default" )
? "border"
: ""
} ${
(!fieldData.primary && settings.notation !== "default" )
? "border-l border-r"
: ""
} ${
settings.mode === "light"
? "bg-zinc-100 text-zinc-800"
: "bg-zinc-800 text-zinc-200"
} ${
(settings.notation !== "default" && index !== tableData.fields.length - 1)
? "border-l border-r border-gray-400"
: ""
} ${
(settings.notation !== "default" && index === tableData.fields.length - 1)
? "border-b border-gray-400"
: ""
} ${
// Checa que cuando seas el último se redondee
(settings.notation === "default" && index === tableData.fields.length - 1)
? "border-b border-gray-400"
: ""
} group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
onPointerEnter={(e) => {
if (!e.isPrimary) return;
@ -313,7 +346,11 @@ export default function Table(props) {
} flex items-center gap-2 overflow-hidden`}
>
<button
className="flex-shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full"
className={`flex-shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full ${
(fieldData.primary && settings.notation !== "default")
? "bg-[#ff2222cc]"
: "bg-[#2f68adcc]"
}`}
onPointerDown={(e) => {
if (!e.isPrimary) return;
@ -356,8 +393,10 @@ export default function Table(props) {
/>
) : (
<div className="flex gap-1 items-center">
{fieldData.primary && <IconKeyStroked />}
{!fieldData.notNull && <span>?</span>}
{(fieldData.primary && settings.notation === "default") && <IconKeyStroked />}
{(fieldData.notNull && settings.notation !== "default") && <span>NOT NULL</span>}
{(!fieldData.notNull && settings.notation !== "default") && <span>NULL</span>}
{(!fieldData.notNull && settings.notation === "default") && <span>?</span>}
<span>
{fieldData.type +
((dbToTypes[database][fieldData.type].isSized ||

11
src/index.css
View File

@ -129,7 +129,8 @@
}
.table-border {
border-color: rgba(var(--semi-grey-2), 1);
/* border-color: rgba(var(--semi-grey-2), 1); */
border-color: rgba(0, 255, 0, 1);
}
.bg-dots {
@ -186,3 +187,11 @@
opacity: 0;
}
}
.transparent {
background-color: transparent;
}
.no-border {
border: none;
}