Fix table names taking half of the table width when not hovered
This commit is contained in:
1ilit
parent
4d7f18c26e
commit
ee44cd2b7c
@ -85,117 +85,119 @@ export default function Table(props) {
|
|||||||
settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
|
settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="px-3 overflow-hidden text-ellipsis whitespace-nowrap">
|
<div className=" px-3 overflow-hidden text-ellipsis whitespace-nowrap">
|
||||||
{props.tableData.name}
|
{props.tableData.name}
|
||||||
</div>
|
</div>
|
||||||
<div className="invisible group-hover:visible flex justify-end items-center mx-2">
|
<div className="hidden group-hover:block">
|
||||||
<Button
|
<div className="flex justify-end items-center mx-2">
|
||||||
icon={<IconEdit />}
|
|
||||||
size="small"
|
|
||||||
theme="solid"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#2f68ad",
|
|
||||||
opacity: "0.7",
|
|
||||||
marginRight: "6px",
|
|
||||||
}}
|
|
||||||
onClick={() => {
|
|
||||||
if (!layout.sidebar) {
|
|
||||||
setSelectedElement((prev) => ({
|
|
||||||
...prev,
|
|
||||||
element: ObjectType.TABLE,
|
|
||||||
id: props.tableData.id,
|
|
||||||
open: true,
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
setSelectedElement((prev) => ({
|
|
||||||
...prev,
|
|
||||||
currentTab: Tab.TABLES,
|
|
||||||
element: ObjectType.TABLE,
|
|
||||||
id: props.tableData.id,
|
|
||||||
open: true,
|
|
||||||
}));
|
|
||||||
if (selectedElement.currentTab !== Tab.TABLES) return;
|
|
||||||
document
|
|
||||||
.getElementById(`scroll_table_${props.tableData.id}`)
|
|
||||||
.scrollIntoView({ behavior: "smooth" });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Popover
|
|
||||||
content={
|
|
||||||
<div className="popover-theme">
|
|
||||||
<div className="mb-2">
|
|
||||||
<strong>Comment :</strong>{" "}
|
|
||||||
{props.tableData.comment === "" ? (
|
|
||||||
"No comment"
|
|
||||||
) : (
|
|
||||||
<div>{props.tableData.comment}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong
|
|
||||||
className={`${
|
|
||||||
props.tableData.indices.length === 0 ? "" : "block"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Indices :
|
|
||||||
</strong>{" "}
|
|
||||||
{props.tableData.indices.length === 0 ? (
|
|
||||||
"No indices"
|
|
||||||
) : (
|
|
||||||
<div>
|
|
||||||
{props.tableData.indices.map((index, k) => (
|
|
||||||
<div
|
|
||||||
key={k}
|
|
||||||
className={`flex items-center my-1 px-2 py-1 rounded ${
|
|
||||||
settings.mode === "light"
|
|
||||||
? "bg-gray-100"
|
|
||||||
: "bg-zinc-800"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
|
|
||||||
<div>
|
|
||||||
{index.fields.map((f) => (
|
|
||||||
<Tag color="blue" key={f} className="me-1">
|
|
||||||
{f}
|
|
||||||
</Tag>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
icon={<IconDeleteStroked />}
|
|
||||||
type="danger"
|
|
||||||
block
|
|
||||||
style={{ marginTop: "8px" }}
|
|
||||||
onClick={() => {
|
|
||||||
Toast.success(`Table deleted!`);
|
|
||||||
deleteTable(props.tableData.id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delete table
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
position="rightTop"
|
|
||||||
showArrow
|
|
||||||
trigger="click"
|
|
||||||
style={{ width: "200px" }}
|
|
||||||
>
|
|
||||||
<Button
|
<Button
|
||||||
icon={<IconMore />}
|
icon={<IconEdit />}
|
||||||
type="tertiary"
|
|
||||||
size="small"
|
size="small"
|
||||||
|
theme="solid"
|
||||||
style={{
|
style={{
|
||||||
|
backgroundColor: "#2f68ad",
|
||||||
opacity: "0.7",
|
opacity: "0.7",
|
||||||
backgroundColor: "grey",
|
marginRight: "6px",
|
||||||
color: "white",
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
if (!layout.sidebar) {
|
||||||
|
setSelectedElement((prev) => ({
|
||||||
|
...prev,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
id: props.tableData.id,
|
||||||
|
open: true,
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
setSelectedElement((prev) => ({
|
||||||
|
...prev,
|
||||||
|
currentTab: Tab.TABLES,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
id: props.tableData.id,
|
||||||
|
open: true,
|
||||||
|
}));
|
||||||
|
if (selectedElement.currentTab !== Tab.TABLES) return;
|
||||||
|
document
|
||||||
|
.getElementById(`scroll_table_${props.tableData.id}`)
|
||||||
|
.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Popover>
|
<Popover
|
||||||
|
content={
|
||||||
|
<div className="popover-theme">
|
||||||
|
<div className="mb-2">
|
||||||
|
<strong>Comment :</strong>{" "}
|
||||||
|
{props.tableData.comment === "" ? (
|
||||||
|
"No comment"
|
||||||
|
) : (
|
||||||
|
<div>{props.tableData.comment}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong
|
||||||
|
className={`${
|
||||||
|
props.tableData.indices.length === 0 ? "" : "block"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Indices :
|
||||||
|
</strong>{" "}
|
||||||
|
{props.tableData.indices.length === 0 ? (
|
||||||
|
"No indices"
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
{props.tableData.indices.map((index, k) => (
|
||||||
|
<div
|
||||||
|
key={k}
|
||||||
|
className={`flex items-center my-1 px-2 py-1 rounded ${
|
||||||
|
settings.mode === "light"
|
||||||
|
? "bg-gray-100"
|
||||||
|
: "bg-zinc-800"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
|
||||||
|
<div>
|
||||||
|
{index.fields.map((f) => (
|
||||||
|
<Tag color="blue" key={f} className="me-1">
|
||||||
|
{f}
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
icon={<IconDeleteStroked />}
|
||||||
|
type="danger"
|
||||||
|
block
|
||||||
|
style={{ marginTop: "8px" }}
|
||||||
|
onClick={() => {
|
||||||
|
Toast.success(`Table deleted!`);
|
||||||
|
deleteTable(props.tableData.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete table
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
position="rightTop"
|
||||||
|
showArrow
|
||||||
|
trigger="click"
|
||||||
|
style={{ width: "200px" }}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
icon={<IconMore />}
|
||||||
|
type="tertiary"
|
||||||
|
size="small"
|
||||||
|
style={{
|
||||||
|
opacity: "0.7",
|
||||||
|
backgroundColor: "grey",
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{props.tableData.fields.map((e, i) => {
|
{props.tableData.fields.map((e, i) => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user