titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix popover theme and change color button

Browse Source
This commit is contained in:
1ilit 2024-02-19 23:21:38 +02:00
parent 2355673dde
commit d792791394
1 changed files with 49 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Table.jsx
View File

@ -14,7 +14,6 @@ import {
IconDeleteStroked,
IconKeyStroked,
IconCheckboxTick,
IconColorPalette,
} from "@douyinfe/semi-icons";
import {
Select,
@ -72,13 +71,15 @@ export default function Table(props) {
onMouseLeave={() => setIsHovered(false)}
>
<div
className={`border-2 ${isHovered
className={`border-2 ${
isHovered
? "border-dashed border-blue-500"
: selectedElement.element === ObjectType.TABLE &&
selectedElement.id === props.tableData.id
? "border-blue-500"
: "border-slate-400"
} select-none rounded-lg w-full ${settings.mode === "light"
} select-none rounded-lg w-full ${
settings.mode === "light"
? "bg-zinc-100 text-zinc-800"
: "bg-zinc-800 text-zinc-200"
}`}
@ -88,7 +89,8 @@ export default function Table(props) {
style={{ backgroundColor: props.tableData.color }}
/>
<div
className={`font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
className={`font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
}`}
>
<div className="px-3">
@ -147,7 +149,8 @@ export default function Table(props) {
</div>
<div>
<strong
className={`${props.tableData.indices.length === 0 ? "" : "block"
className={`${
props.tableData.indices.length === 0 ? "" : "block"
}`}
>
Indices :
@ -159,7 +162,8 @@ export default function Table(props) {
{props.tableData.indices.map((index, k) => (
<div
key={k}
className={`flex items-center my-1 px-2 py-1 rounded ${settings.mode === "light"
className={`flex items-center my-1 px-2 py-1 rounded ${
settings.mode === "light"
? "bg-gray-100"
: "bg-zinc-800"
}`}
@ -431,7 +435,8 @@ export default function Table(props) {
fid: j,
undo: { notNull: f.notNull },
redo: { notNull: !f.notNull },
message: `Edit table field to${f.notNull ? "" : " not"
message: `Edit table field to${
f.notNull ? "" : " not"
} null`,
},
]);
@ -458,7 +463,8 @@ export default function Table(props) {
fid: j,
undo: { primary: f.primary },
redo: { primary: !f.primary },
message: `Edit table field to${f.primary ? " not" : ""
message: `Edit table field to${
f.primary ? " not" : ""
} primary`,
},
]);
@ -691,7 +697,8 @@ export default function Table(props) {
[checkedValues.target.value]:
checkedValues.target.checked,
},
message: `Edit table field to${f.unique ? " not" : ""
message: `Edit table field to${
f.unique ? " not" : ""
} unique`,
},
]);
@ -732,7 +739,8 @@ export default function Table(props) {
[checkedValues.target.value]:
checkedValues.target.checked,
},
message: `Edit table field to${f.primary ? " not" : ""
message: `Edit table field to${
f.primary ? " not" : ""
} auto increment`,
},
]);
@ -936,7 +944,8 @@ export default function Table(props) {
[checkedValues.target.value]:
checkedValues.target.checked,
},
message: `Edit table field to${idx.unique ? " not" : ""
message: `Edit table field to${
idx.unique ? " not" : ""
} unique`,
},
]);
@ -1038,7 +1047,7 @@ export default function Table(props) {
<Popover
content={
<div>
<div className="flex justify-between items-center p-2">
<div className="flex justify-between items-center p-2 popover-theme">
<div className="font-medium">Theme</div>
<Button
type="tertiary"
@ -1141,7 +1150,10 @@ export default function Table(props) {
position="bottomLeft"
showArrow
>
<Button type="tertiary" icon={<IconColorPalette />}></Button>
<div
className="h-[32px] w-[32px] rounded"
style={{ backgroundColor: props.tableData.color }}
/>
</Popover>
</Col>
<Col span={7}>
@ -1231,7 +1243,8 @@ export default function Table(props) {
function field(fieldData, index) {
return (
<div
className={`${index === props.tableData.fields.length - 1
className={`${
index === props.tableData.fields.length - 1
? ""
: "border-b border-gray-400"
} h-[36px] px-2 py-1 flex justify-between`}