From fdb168bfdd44b5cf5aff0358245489a726b66792 Mon Sep 17 00:00:00 2001 From: KarimTamani Date: Fri, 30 May 2025 19:50:54 +0100 Subject: [PATCH] Obsidian theme developed --- .../auto-complete/auto-complete.tsx | 12 +- .../cardinality-marker/cardinality-marker.tsx | 4 +- src/components/color-picker/color-picker.tsx | 6 +- src/components/menu/menu-dropdown.tsx | 15 +- src/components/menu/menu.tsx | 1 - src/components/menu/submenu-dropdown.tsx | 4 +- src/components/modal/modal.tsx | 3 +- src/components/navbar/connection-status.tsx | 8 +- src/components/navbar/navbar.tsx | 2 +- src/components/sidebar/sidebar-item.tsx | 4 +- src/components/sidebar/sidebar.tsx | 4 +- src/components/toggle/toggle.tsx | 4 +- src/components/tooltip/tooltip.tsx | 2 +- src/hooks/use-highlighted-edges.tsx | 4 + src/hooks/use-table-to-node.tsx | 29 +++- src/i18/index.ts | 2 +- src/index.css | 120 ++++++++++++++++ src/lib/colors.ts | 31 ++++ src/main.tsx | 2 + .../database/database-control-buttons.tsx | 28 ++-- src/pages/database/database-page.tsx | 21 ++- .../database/db-controller/db-controller.tsx | 4 +- .../relationship-accordion-body.tsx | 20 +-- .../relationship-accordion-header.tsx | 18 +-- .../relationship-controller.tsx | 19 +-- .../table-accordion-item/field/field-item.tsx | 38 ++--- .../table-accordion-item/field/field-list.tsx | 4 +- .../table-accordion-item/index/index-item.tsx | 17 ++- .../index/indexes-list.tsx | 4 +- .../table-accordion-body.tsx | 34 ++--- .../table-accordion-header.tsx | 34 +++-- .../tables-controller/tables-controller.tsx | 21 ++- src/pages/database/table/field.tsx | 16 +-- src/pages/database/table/relationship.tsx | 2 +- src/pages/database/table/table.tsx | 44 +++--- .../modal-provider/modal-contxet.tsx | 18 +++ .../modal-provider/modal-provider.tsx | 42 ++++++ src/styles/globals.css | 17 ++- src/utils/tables.ts | 10 +- tailwind.config.js | 135 ++++++++++++++---- 40 files changed, 595 insertions(+), 208 deletions(-) create mode 100644 src/providers/modal-provider/modal-contxet.tsx create mode 100644 src/providers/modal-provider/modal-provider.tsx diff --git a/src/components/auto-complete/auto-complete.tsx b/src/components/auto-complete/auto-complete.tsx index 3def6c1..a67c2fb 100644 --- a/src/components/auto-complete/auto-complete.tsx +++ b/src/components/auto-complete/auto-complete.tsx @@ -10,7 +10,7 @@ interface AutocompleteProps { onSelectionChange?: (item: any) => void, placeholder?: string isDisabled?: boolean - selectedItem?: Key + selectedItem?: Key } @@ -33,7 +33,15 @@ const Autocomplete: React.FC = ({ items, label = "name", onSe variant="bordered" aria-label={placeholder} placeholder={placeholder} - selectedKey={selectedItem as any } + selectedKey={selectedItem as any} + inputProps={{ + classNames: { + + inputWrapper: "border-divider group-hover:border-primary", + + }, + }} + > {(item: any) => {item[label]}} diff --git a/src/components/cardinality-marker/cardinality-marker.tsx b/src/components/cardinality-marker/cardinality-marker.tsx index d607bb8..b8f50ae 100644 --- a/src/components/cardinality-marker/cardinality-marker.tsx +++ b/src/components/cardinality-marker/cardinality-marker.tsx @@ -41,8 +41,8 @@ const CardinalityMarker: React.FC = ({ selected = false, > diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx index 3c5da6f..2b5e333 100644 --- a/src/components/color-picker/color-picker.tsx +++ b/src/components/color-picker/color-picker.tsx @@ -28,10 +28,10 @@ const ColorPicker: React.FC = ({ defaultColor, onChange }) => }, [onChange]) return ( - setIsOpen(open)}> + setIsOpen(open)} shadow="sm">
= ({ title, children, clickHand return children ? children?.filter((child: MenuDropdownProps) => child.isDisabled && child.title).map((child: MenuDropdownProps) => child.title as string) : [] }, [children]); - return + return { title && - + @@ -48,16 +48,19 @@ const DropdownMenu: React.FC = ({ title, children, clickHand className={child.theme == "danger" ? "text-danger" : ""} color={child.theme} shortcut={child.shortcut} + classNames={{ + shortcut : "dark:border-font/10" + }} onPressEnd={ child.clickHandler } > { !child.children ? -
+
{child.title} { child.divide && -
+
}
: @@ -65,7 +68,7 @@ const DropdownMenu: React.FC = ({ title, children, clickHand { child.divide && -
+
}
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx index 627a05c..81d6c40 100644 --- a/src/components/menu/menu.tsx +++ b/src/components/menu/menu.tsx @@ -19,7 +19,6 @@ const Menu: React.FC = ({ }) => { const { setTheme } = useTheme() - const { t } = useTranslation(); const menu: MenuDropdownProps[] = useMemo(() => [ { diff --git a/src/components/menu/submenu-dropdown.tsx b/src/components/menu/submenu-dropdown.tsx index ed93ecf..8e11797 100644 --- a/src/components/menu/submenu-dropdown.tsx +++ b/src/components/menu/submenu-dropdown.tsx @@ -11,9 +11,9 @@ const SubmenuDropdown: React.FC = ({ title, children }) => { return (
- + - - + {t("control_buttons.undo")} - + Cntl + Z @@ -97,12 +97,12 @@ const DatabaseControlButtons: React.FC = ({ adjustPositions }) - + {t("control_buttons.adjust_positions")} - + @@ -117,7 +117,7 @@ const DatabaseControlButtons: React.FC = ({ adjustPositions }) - + {t("control_buttons.zoom_out")} @@ -145,11 +145,11 @@ const DatabaseControlButtons: React.FC = ({ adjustPositions }) - + {t("control_buttons.zoom_in")} - + @@ -164,10 +164,10 @@ const DatabaseControlButtons: React.FC = ({ adjustPositions }) - + {t("control_buttons.show_all")} - + Cntl + A @@ -185,15 +185,15 @@ const DatabaseControlButtons: React.FC = ({ adjustPositions }) > - + {t("control_buttons.redo")} - + Ctnl + Shift + Z diff --git a/src/pages/database/database-page.tsx b/src/pages/database/database-page.tsx index a05d04f..1203fa3 100644 --- a/src/pages/database/database-page.tsx +++ b/src/pages/database/database-page.tsx @@ -1,6 +1,6 @@ // Importing necessary types and hooks from React Flow (XYFlow) import { - addEdge, Background, Connection, Controls, EdgeChange, + addEdge, Background, ColorMode, Connection, Controls, EdgeChange, EdgeRemoveChange, NodeChange, NodePositionChange, NodeRemoveChange, OnEdgesChange, OnNodesChange, ReactFlow, useEdgesState, useNodesState, useReactFlow @@ -30,16 +30,18 @@ import { useDiagramOps } from "@/providers/diagram-provider/diagram-provider"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip/tooltip"; import { addToast, Button } from "@heroui/react"; import { AlertTriangle } from "lucide-react"; -import { adjustTablesPositions } from "@/utils/tables"; +import { adjustTablesPositions, isTablesOverlapping } from "@/utils/tables"; import DatabaseControlButtons from "./database-control-buttons"; import { FieldType } from "@/lib/schemas/field-schema"; import useHighlightedEdges from "@/hooks/use-highlighted-edges"; import { useTranslation } from "react-i18next"; import useOverlappingTables from "@/hooks/use-overlapping-tables"; +import { useTheme } from "next-themes"; const DatabasePage: React.FC = () => { const { t } = useTranslation(); + const { resolvedTheme } = useTheme(); // Extract database state and operations const { database, getField } = useDatabase(); const { updateTablePositions, deleteMultiTables, deleteMultiRelationships, createRelationship } = useDatabaseOperations(); @@ -100,7 +102,7 @@ const DatabasePage: React.FC = () => { ) as NodePositionChange[]; const nodeRemoveChanges: NodeRemoveChange[] = changes.filter((change: NodeChange) => change.type == "remove"); - + // Save new positions to the database if (nodePositionChanges.length > 0) await updateTablePositions(nodePositionChanges.map((change: NodePositionChange) => ({ @@ -140,7 +142,9 @@ const DatabasePage: React.FC = () => { // Automatically reposition tables to avoid overlap and fit the view const adjustPositions = useCallback(async () => { - updateTablePositions(await adjustTablesPositions(nodes, relationships)); + const adjustedTables = await adjustTablesPositions(nodes, relationships); + console.log (adjustedTables ) + updateTablePositions(adjustedTables) setTimeout(() => { fitView({ duration: 500 @@ -153,7 +157,9 @@ const DatabasePage: React.FC = () => { useRelationshipToEdge(relationships); useHighlightedEdges(nodes, relationships, edges); const { isOverlapping, puls } = useOverlappingTables(tables); - + + + return (
@@ -162,6 +168,7 @@ const DatabasePage: React.FC = () => {
{ defaultEdgeOptions={{ type: 'relationship-edge', }} - onlyRenderVisibleElements + // onlyRenderVisibleElements panOnDrag={true} zoomOnScroll={true} nodeTypes={nodeTypes} @@ -195,7 +202,7 @@ const DatabasePage: React.FC = () => { /> - +
= ({ }) => { minConstraints={[512]} axis="x" handle={ -
+
} > -
+
diff --git a/src/pages/database/db-controller/relationship-controller/relationship-accordion-item/relationship-accordion-body.tsx b/src/pages/database/db-controller/relationship-controller/relationship-accordion-item/relationship-accordion-body.tsx index 81040c3..a1f7b57 100644 --- a/src/pages/database/db-controller/relationship-controller/relationship-accordion-item/relationship-accordion-body.tsx +++ b/src/pages/database/db-controller/relationship-controller/relationship-accordion-item/relationship-accordion-body.tsx @@ -1,10 +1,10 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip/tooltip"; import { Cardinality, RelationshipInsertType, RelationshipType } from "@/lib/schemas/relationship-schema"; -import { useDatabaseOperations } from "@/providers/database-provider/database-provider"; +import { useDatabaseOperations } from "@/providers/database-provider/database-provider"; import { Button, Select, SelectItem, SharedSelection } from "@heroui/react"; -import { ChevronsLeftRightEllipsis, FileMinus2, FileOutput, Trash2 } from "lucide-react"; -import { useEffect, useState } from "react"; +import { ChevronsLeftRightEllipsis, FileMinus2, FileOutput, Trash2 } from "lucide-react"; +import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; @@ -51,13 +51,13 @@ const RelationshipAccordionBody: React.FC = ({ r
-
-
-
- +
-

+

{t("db_controller.actions")}

-
+
= ({ }) => {
@@ -135,9 +138,7 @@ const RelationshipController: React.FC = ({ }) => { = ({ }) => { key={relationship.id} aria-label={relationship.id} classNames={{ - trigger: "w-full hover:bg-default transition-all duration-200 h-12 dark:bg-background dark:hover:bg-default-50", + trigger: "w-full hover:bg-default transition-all duration-200 h-12 dark:hover:bg-background", + + base: "rounded-md p-0 overflow-hidden", }} subtitle={ diff --git a/src/pages/database/db-controller/tables-controller/table-accordion-item/field/field-item.tsx b/src/pages/database/db-controller/tables-controller/table-accordion-item/field/field-item.tsx index 1d75b4c..9932344 100644 --- a/src/pages/database/db-controller/tables-controller/table-accordion-item/field/field-item.tsx +++ b/src/pages/database/db-controller/tables-controller/table-accordion-item/field/field-item.tsx @@ -93,7 +93,7 @@ const FieldItem: React.FC = ({ field }) => {
- +
= ({ field }) => { placeholder={t("db_controller.name")} value={fieldName} onValueChange={setFieldName} + onBlur={saveFieldName} + classNames={{ + inputWrapper: "border-divider group-hover:border-primary", + }} /> = ({ field }) => { size="sm" isIconOnly variant="light" + className="text-icon hover:text-font/90" > - + - -
-

+ +
+

{t("db_controller.field_setting")}

-
-
- +
+
+ {t("db_controller.unique")} -
-
+