From e06c4879cdab49387a56d388f3f2aabac2252aed Mon Sep 17 00:00:00 2001 From: MH4GF Date: Wed, 4 Dec 2024 17:17:57 +0900 Subject: [PATCH 1/9] Add TableHeader component and update TableNode styling --- .../TableNode/TableHeader/TableHeader.module.css | 14 ++++++++++++++ .../TableNode/TableHeader/TableHeader.tsx | 16 ++++++++++++++++ .../ERDContent/TableNode/TableHeader/index.ts | 1 + .../ERDContent/TableNode/TableNode.module.css | 4 ++-- .../ERDContent/TableNode/TableNode.tsx | 3 ++- 5 files changed, 35 insertions(+), 3 deletions(-) create mode 100644 frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.module.css create mode 100644 frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx create mode 100644 frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/index.ts diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.module.css new file mode 100644 index 000000000..c808808dc --- /dev/null +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.module.css @@ -0,0 +1,14 @@ +.wrapper { + display: flex; + padding: var(--spacing-2); + align-items: center; + gap: var(--spacing-1); + border-radius: var(--border-radius-md) var(--border-radius-md) 0px 0px; + background: var(--global-muted-background); + backdrop-filter: blur(8px); + color: var(--overlay-60); + text-overflow: ellipsis; + font-size: var(--font-size-5); + font-weight: 500; + line-height: normal; +} diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx new file mode 100644 index 000000000..bea4f4d7b --- /dev/null +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx @@ -0,0 +1,16 @@ +import { Table2 } from '@liam-hq/ui' +import type { FC } from 'react' +import styles from './TableHeader.module.css' + +type Props = { + name: string +} + +export const TableHeader: FC = ({ name }) => { + return ( +
+ + {name} +
+ ) +} diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/index.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/index.ts new file mode 100644 index 000000000..6e319f34d --- /dev/null +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/index.ts @@ -0,0 +1 @@ +export * from './TableHeader' diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css index eee36478d..15dc4c08a 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css @@ -1,6 +1,6 @@ .wrapper { - border: 1px solid white; - color: white; + border-radius: var(--border-radius-md); + border: 1px solid var(--overlay-20); } .content { diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx index b3a0d5edc..9044d3bf0 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx @@ -11,6 +11,7 @@ import { } from '@liam-hq/ui' import type { Node, NodeProps } from '@xyflow/react' import type { FC } from 'react' +import { TableHeader } from './TableHeader' import styles from './TableNode.module.css' type Data = { @@ -27,7 +28,7 @@ export const TableNode: FC = ({ data: { table } }) => {
-
{table.name}
+
    {Object.values(table.columns).map((column) => (
  • From 9e29c9036a958e8c8a51484cac7dbe92641727c3 Mon Sep 17 00:00:00 2001 From: MH4GF Date: Wed, 4 Dec 2024 17:56:40 +0900 Subject: [PATCH 2/9] feat: Add TableColumn component and integrate it into TableNode --- .../TableColumn/TableColumn.module.css | 17 ++++++++ .../TableNode/TableColumn/TableColumn.tsx | 39 +++++++++++++++++++ .../ERDContent/TableNode/TableColumn/index.ts | 1 + .../ERDContent/TableNode/TableNode.tsx | 37 +----------------- 4 files changed, 59 insertions(+), 35 deletions(-) create mode 100644 frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css create mode 100644 frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx create mode 100644 frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/index.ts diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css new file mode 100644 index 000000000..1f0f58454 --- /dev/null +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css @@ -0,0 +1,17 @@ +.wrapper { + display: grid; + grid-template-columns: auto 1fr; + align-items: center; + padding: var(--spacing-2); + gap: var(--spacing-1half); + background: var(--node-background); + color: var(--global-foreground); + font-size: var(--font-size-3); + line-height: normal; + border-bottom: 1px solid var(--node-border); +} + +.columnName { + display: inline-flex; + justify-content: space-between; +} \ No newline at end of file diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx new file mode 100644 index 000000000..38965a5fa --- /dev/null +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx @@ -0,0 +1,39 @@ +import type { Column } from '@liam-hq/db-structure' +import { DiamondFillIcon, DiamondIcon, KeyRound } from '@liam-hq/ui' +import type { FC } from 'react' +import styles from './TableColumn.module.css' + +type Props = { + column: Column +} + +export const TableColumn: FC = ({ column }) => { + return ( +
  • + {column.primary && ( + + )} + {!column.primary && + (column.notNull ? ( + + ) : ( + + ))} + + + {column.name} + {column.type} + +
    • + ) +} diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/index.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/index.ts new file mode 100644 index 000000000..1340d33d1 --- /dev/null +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/index.ts @@ -0,0 +1 @@ +export * from './TableColumn' diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx index 9044d3bf0..457f0415b 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx @@ -11,6 +11,7 @@ import { } from '@liam-hq/ui' import type { Node, NodeProps } from '@xyflow/react' import type { FC } from 'react' +import { TableColumn } from './TableColumn' import { TableHeader } from './TableHeader' import styles from './TableNode.module.css' @@ -31,41 +32,7 @@ export const TableNode: FC = ({ data: { table } }) => {
      {Object.values(table.columns).map((column) => ( -
    • - - {column.primary && ( - - )} - - {!column.primary && ( - - {column.notNull ? ( - - ) : ( - - )} - - )} - - {column.name} - - {column.type} -
      • + ))}
From 5f1f6c88fc07ae816267a3adaa26a4d3043026ad Mon Sep 17 00:00:00 2001 From: MH4GF Date: Wed, 4 Dec 2024 17:59:35 +0900 Subject: [PATCH 3/9] fix: Update fill-rule and clip-rule attributes to fillRule and clipRule in Diamond icons --- frontend/packages/ui/src/icons/DiamondFillIcon.tsx | 4 ++-- frontend/packages/ui/src/icons/DiamondIcon.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/packages/ui/src/icons/DiamondFillIcon.tsx b/frontend/packages/ui/src/icons/DiamondFillIcon.tsx index d90a302f4..94ff84c26 100644 --- a/frontend/packages/ui/src/icons/DiamondFillIcon.tsx +++ b/frontend/packages/ui/src/icons/DiamondFillIcon.tsx @@ -15,8 +15,8 @@ export const DiamondFillIcon: FC = (props) => { {...props} > diff --git a/frontend/packages/ui/src/icons/DiamondIcon.tsx b/frontend/packages/ui/src/icons/DiamondIcon.tsx index e9cbc5466..009d0a665 100644 --- a/frontend/packages/ui/src/icons/DiamondIcon.tsx +++ b/frontend/packages/ui/src/icons/DiamondIcon.tsx @@ -15,8 +15,8 @@ export const DiamondIcon: FC = (props) => { {...props} > From 533b70495f4794b8fb0b781b16083671f3dcb48f Mon Sep 17 00:00:00 2001 From: MH4GF Date: Wed, 4 Dec 2024 18:02:31 +0900 Subject: [PATCH 4/9] feat: Update Diamond icons to use currentColor and add styling for diamondIcon class --- .../ERDContent/TableNode/TableColumn/TableColumn.module.css | 4 ++++ .../ERDContent/TableNode/TableColumn/TableColumn.tsx | 2 ++ frontend/packages/ui/src/icons/DiamondFillIcon.tsx | 2 +- frontend/packages/ui/src/icons/DiamondIcon.tsx | 2 +- 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css index 1f0f58454..bd999078a 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css @@ -11,6 +11,10 @@ border-bottom: 1px solid var(--node-border); } +.diamondIcon { + color: var(--overlay-70); +} + .columnName { display: inline-flex; justify-content: space-between; diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx index 38965a5fa..afce44f02 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx @@ -18,6 +18,7 @@ export const TableColumn: FC = ({ column }) => { @@ -25,6 +26,7 @@ export const TableColumn: FC = ({ column }) => { diff --git a/frontend/packages/ui/src/icons/DiamondFillIcon.tsx b/frontend/packages/ui/src/icons/DiamondFillIcon.tsx index 94ff84c26..a81876739 100644 --- a/frontend/packages/ui/src/icons/DiamondFillIcon.tsx +++ b/frontend/packages/ui/src/icons/DiamondFillIcon.tsx @@ -18,7 +18,7 @@ export const DiamondFillIcon: FC = (props) => { fillRule="evenodd" clipRule="evenodd" d="M3.39608 13.3961C2.62505 12.625 2.62505 11.375 3.39608 10.6039L10.5034 3.49659C11.2744 2.72555 12.5245 2.72555 13.2956 3.49659L20.4029 10.6039C21.1739 11.375 21.1739 12.625 20.4029 13.3961L13.2956 20.5034C12.5245 21.2744 11.2744 21.2744 10.5034 20.5034L3.39608 13.3961Z" - fill="black" + fill="currentColor" /> ) diff --git a/frontend/packages/ui/src/icons/DiamondIcon.tsx b/frontend/packages/ui/src/icons/DiamondIcon.tsx index 009d0a665..35b21b3c5 100644 --- a/frontend/packages/ui/src/icons/DiamondIcon.tsx +++ b/frontend/packages/ui/src/icons/DiamondIcon.tsx @@ -18,7 +18,7 @@ export const DiamondIcon: FC = (props) => { fillRule="evenodd" clipRule="evenodd" d="M4.15758 11.3654C3.80711 11.7159 3.80711 12.2841 4.15758 12.6346L11.2649 19.7419C11.6154 20.0924 12.1836 20.0924 12.5341 19.7419L19.6414 12.6346C19.9919 12.2841 19.9919 11.7159 19.6414 11.3654L12.5341 4.25809C12.1836 3.90762 11.6154 3.90762 11.2649 4.25809L4.15758 11.3654ZM3.39608 13.3961C2.62505 12.625 2.62505 11.375 3.39608 10.6039L10.5034 3.49659C11.2744 2.72555 12.5245 2.72555 13.2956 3.49659L20.4029 10.6039C21.1739 11.375 21.1739 12.625 20.4029 13.3961L13.2956 20.5034C12.5245 21.2744 11.2744 21.2744 10.5034 20.5034L3.39608 13.3961Z" - fill="black" + fill="currentColor" /> ) From 05ce510dcc897509644f66a2a0cdd2da4ec923e7 Mon Sep 17 00:00:00 2001 From: MH4GF Date: Wed, 4 Dec 2024 18:03:39 +0900 Subject: [PATCH 5/9] feat: Add primaryKeyIcon styling and apply it to KeyRound component in TableColumn --- .../TableNode/TableColumn/TableColumn.module.css | 4 ++++ .../ERDContent/TableNode/TableColumn/TableColumn.tsx | 8 +++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css index bd999078a..d8a6bc3bb 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css @@ -11,6 +11,10 @@ border-bottom: 1px solid var(--node-border); } +.primaryKeyIcon { + color: var(--primary-accent); +} + .diamondIcon { color: var(--overlay-70); } diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx index afce44f02..3cc9c0ca5 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx @@ -11,7 +11,13 @@ export const TableColumn: FC = ({ column }) => { return (
  • {column.primary && ( - + )} {!column.primary && (column.notNull ? ( From 70529db5648dd0214c213129e6792fcfa2a30218 Mon Sep 17 00:00:00 2001 From: MH4GF Date: Wed, 4 Dec 2024 18:19:54 +0900 Subject: [PATCH 6/9] feat: Add columnType styling and apply it to TableColumn component --- .../TableNode/TableColumn/TableColumn.module.css | 11 ++++++++++- .../ERDContent/TableNode/TableColumn/TableColumn.tsx | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css index d8a6bc3bb..774dbc47c 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css @@ -22,4 +22,13 @@ .columnName { display: inline-flex; justify-content: space-between; -} \ No newline at end of file +} + +.columnType { + color: var(--overlay-70, rgba(255, 255, 255, 0.7)); + text-align: right; + font-family: var(--code-font); + font-size: var(--font-size-1); + font-weight: 400; + line-height: normal; +} diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx index 3cc9c0ca5..a38369afa 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx @@ -40,7 +40,7 @@ export const TableColumn: FC = ({ column }) => { {column.name} - {column.type} + {column.type}
    • ) From 802494c8bfb3017494f0f4b608957c598ceaa0b1 Mon Sep 17 00:00:00 2001 From: MH4GF Date: Wed, 4 Dec 2024 18:20:16 +0900 Subject: [PATCH 7/9] feat: Add width styling to TableNode component --- .../ERDRenderer/ERDContent/TableNode/TableNode.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css index 15dc4c08a..80a629c67 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css @@ -1,6 +1,7 @@ .wrapper { border-radius: var(--border-radius-md); border: 1px solid var(--overlay-20); + width: 172px; } .content { From 0dcfcd41cea705b2f5c6106aa4661057ab9a9a94 Mon Sep 17 00:00:00 2001 From: MH4GF Date: Wed, 4 Dec 2024 18:34:57 +0900 Subject: [PATCH 8/9] refactor: Remove TableColumn component and integrate its functionality into TableNode --- .../TableColumn/TableColumn.module.css | 34 -------------- .../TableNode/TableColumn/TableColumn.tsx | 47 ------------------- .../ERDContent/TableNode/TableColumn/index.ts | 1 - .../ERDContent/TableNode/TableNode.module.css | 36 ++++++++++++++ .../ERDContent/TableNode/TableNode.tsx | 36 +++++++++++++- 5 files changed, 70 insertions(+), 84 deletions(-) delete mode 100644 frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css delete mode 100644 frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx delete mode 100644 frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/index.ts diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css deleted file mode 100644 index 774dbc47c..000000000 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.module.css +++ /dev/null @@ -1,34 +0,0 @@ -.wrapper { - display: grid; - grid-template-columns: auto 1fr; - align-items: center; - padding: var(--spacing-2); - gap: var(--spacing-1half); - background: var(--node-background); - color: var(--global-foreground); - font-size: var(--font-size-3); - line-height: normal; - border-bottom: 1px solid var(--node-border); -} - -.primaryKeyIcon { - color: var(--primary-accent); -} - -.diamondIcon { - color: var(--overlay-70); -} - -.columnName { - display: inline-flex; - justify-content: space-between; -} - -.columnType { - color: var(--overlay-70, rgba(255, 255, 255, 0.7)); - text-align: right; - font-family: var(--code-font); - font-size: var(--font-size-1); - font-weight: 400; - line-height: normal; -} diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx deleted file mode 100644 index a38369afa..000000000 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/TableColumn.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import type { Column } from '@liam-hq/db-structure' -import { DiamondFillIcon, DiamondIcon, KeyRound } from '@liam-hq/ui' -import type { FC } from 'react' -import styles from './TableColumn.module.css' - -type Props = { - column: Column -} - -export const TableColumn: FC = ({ column }) => { - return ( -
  • - {column.primary && ( - - )} - {!column.primary && - (column.notNull ? ( - - ) : ( - - ))} - - - {column.name} - {column.type} - -
    • - ) -} diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/index.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/index.ts deleted file mode 100644 index 1340d33d1..000000000 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumn/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './TableColumn' diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css index 80a629c67..5cbfbf053 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css @@ -4,6 +4,42 @@ width: 172px; } +.columnWrapper { + display: grid; + grid-template-columns: auto 1fr; + align-items: center; + padding: var(--spacing-2); + gap: var(--spacing-1half); + background: var(--node-background); + color: var(--global-foreground); + font-size: var(--font-size-3); + line-height: normal; + border-bottom: 1px solid var(--node-border); +} + +.primaryKeyIcon { + color: var(--primary-accent); +} + +.diamondIcon { + color: var(--overlay-70); +} + +.columnName { + display: inline-flex; + justify-content: space-between; +} + +.columnType { + color: var(--overlay-70, rgba(255, 255, 255, 0.7)); + text-align: right; + font-family: var(--code-font); + font-size: var(--font-size-1); + font-weight: 400; + line-height: normal; +} + + .content { top: var(--default-header-height); right: 0; diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx index 457f0415b..c4b0e7c95 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx @@ -11,7 +11,6 @@ import { } from '@liam-hq/ui' import type { Node, NodeProps } from '@xyflow/react' import type { FC } from 'react' -import { TableColumn } from './TableColumn' import { TableHeader } from './TableHeader' import styles from './TableNode.module.css' @@ -32,7 +31,40 @@ export const TableNode: FC = ({ data: { table } }) => {
      {Object.values(table.columns).map((column) => ( - +
    • + {column.primary && ( + + )} + {!column.primary && + (column.notNull ? ( + + ) : ( + + ))} + + + {column.name} + {column.type} + +
      • ))}
    From 7d137721bc61f372c473b94a1b3b556d68de819e Mon Sep 17 00:00:00 2001 From: MH4GF Date: Wed, 4 Dec 2024 18:40:22 +0900 Subject: [PATCH 9/9] feat: Add hover effects and transitions to TableNode styling --- .../ERDContent/TableNode/TableNode.module.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css index 5cbfbf053..f76c2d0f7 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css @@ -2,6 +2,12 @@ border-radius: var(--border-radius-md); border: 1px solid var(--overlay-20); width: 172px; + transition: border-color 300ms var(--default-timing-function); +} + +.wrapper:hover { + border: 1px solid var(--primary-accent); + box-shadow: 0px 0px 20px 0px rgba(29, 237, 131, 0.4); } .columnWrapper { @@ -37,8 +43,13 @@ font-size: var(--font-size-1); font-weight: 400; line-height: normal; + opacity: 0; + transition: opacity 300ms var(--default-timing-function); } +.wrapper:hover .columnType { + opacity: 1; +} .content { top: var(--default-header-height);