Skip to content

Commit d7a85a4

Browse files
author
nicosammito
committed
refactor: simplify DFlowTabs menu content and remove extra UI components
1 parent 08ec148 commit d7a85a4

1 file changed

Lines changed: 36 additions & 76 deletions

File tree

‎src/components/d-flow-file/DFlowTabs.tsx‎

Lines changed: 36 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,13 @@ import {FileTabs, FileTabsContent, FileTabsList, FileTabsTrigger} from "../file-
44
import React from "react";
55
import {Menu, MenuContent, MenuItem, MenuLabel, MenuPortal, MenuSeparator, MenuTrigger} from "../menu/Menu";
66
import {Button} from "../button/Button";
7-
import {IconArrowDown, IconArrowUp, IconCornerDownLeft, IconDotsVertical, IconPlus} from "@tabler/icons-react";
7+
import {IconDotsVertical, IconPlus} from "@tabler/icons-react";
88
import {FileTabsView} from "../file-tabs/FileTabs.view";
99
import {DLayout} from "../d-layout/DLayout";
1010
import {ButtonGroup} from "../button-group/ButtonGroup";
1111
import {Flow, type Namespace, type NamespaceProject} from "@code0-tech/sagittarius-graphql-types";
1212
import {DFlowReactiveService} from "../d-flow";
1313
import {DFlowTypeReactiveService} from "../d-flow-type";
14-
import {Card} from "../card/Card";
15-
import {Flex} from "../flex/Flex";
16-
import {Badge} from "../badge/Badge";
17-
import {Spacing} from "../spacing/Spacing";
1814

1915
export interface DFlowTabsProps {
2016
flowId: Flow['id']
@@ -88,50 +84,32 @@ export const DFlowTabs: React.FC<DFlowTabsProps> = (props) => {
8884
</Button>
8985
</MenuTrigger>
9086
<MenuPortal>
91-
<MenuContent align="start" sideOffset={8} color={"secondary"}>
92-
<Card paddingSize={"xxs"} mt={-0.2} mx={-0.2}>
93-
<MenuLabel>Starting Node</MenuLabel>
94-
{triggerTab &&
95-
<MenuItem onSelect={() => fileTabsService.activateTab(triggerTab.id!!)}>
96-
{triggerTab.children}
97-
</MenuItem>}
98-
<MenuSeparator/>
99-
<MenuLabel>Opened Nodes</MenuLabel>
100-
{visibleTabs.map((tab: FileTabsView) => (
101-
<MenuItem key={`menu-${tab.id}`}
102-
onSelect={() => {
103-
fileTabsService.activateTab(tab.id!)
104-
}}>
105-
{tab.children}
106-
</MenuItem>
107-
))}
108-
<MenuSeparator/>
109-
<MenuLabel>Available Node</MenuLabel>
110-
{hiddenTabs.map((tab: FileTabsView) => (
111-
<MenuItem key={`menu-${tab.id}`}
112-
onSelect={() => {
113-
fileTabsService.activateTab(tab.id!)
114-
}}>
115-
{tab.children}
116-
</MenuItem>
117-
))}
118-
</Card>
119-
<MenuLabel>
120-
<Flex style={{gap: ".35rem"}}>
121-
<Flex align={"center"} style={{gap: "0.35rem"}}>
122-
<Flex>
123-
<Badge border><IconArrowUp size={12}/></Badge>
124-
<Badge border><IconArrowDown size={12}/></Badge>
125-
</Flex>
126-
move
127-
</Flex>
128-
<Spacing spacing={"xxs"}/>
129-
<Flex align={"center"} style={{gap: ".35rem"}}>
130-
<Badge border><IconCornerDownLeft size={12}/></Badge>
131-
select
132-
</Flex>
133-
</Flex>
134-
</MenuLabel>
87+
<MenuContent align="start" sideOffset={8}>
88+
<MenuLabel>Starting Node</MenuLabel>
89+
{triggerTab &&
90+
<MenuItem onSelect={() => fileTabsService.activateTab(triggerTab.id!!)}>
91+
{triggerTab.children}
92+
</MenuItem>}
93+
<MenuSeparator/>
94+
<MenuLabel>Opened Nodes</MenuLabel>
95+
{visibleTabs.map((tab: FileTabsView) => (
96+
<MenuItem key={`menu-${tab.id}`}
97+
onSelect={() => {
98+
fileTabsService.activateTab(tab.id!)
99+
}}>
100+
{tab.children}
101+
</MenuItem>
102+
))}
103+
<MenuSeparator/>
104+
<MenuLabel>Available Node</MenuLabel>
105+
{hiddenTabs.map((tab: FileTabsView) => (
106+
<MenuItem key={`menu-${tab.id}`}
107+
onSelect={() => {
108+
fileTabsService.activateTab(tab.id!)
109+
}}>
110+
{tab.children}
111+
</MenuItem>
112+
))}
135113
</MenuContent>
136114
</MenuPortal>
137115
</Menu>
@@ -143,33 +121,15 @@ export const DFlowTabs: React.FC<DFlowTabsProps> = (props) => {
143121
</Button>
144122
</MenuTrigger>
145123
<MenuPortal>
146-
<MenuContent align="end" sideOffset={8} color={"secondary"}>
147-
<Card paddingSize={"xxs"} mt={-0.2} mx={-0.2}>
148-
<MenuItem onClick={() => fileTabsService.clearAll()}>Close all tabs</MenuItem>
149-
<MenuItem onClick={() => fileTabsService.clearWithoutActive()}>Close other
150-
tabs</MenuItem>
151-
<MenuSeparator/>
152-
<MenuItem onClick={() => fileTabsService.clearLeft()}>Close all tabs to
153-
left</MenuItem>
154-
<MenuItem onClick={() => fileTabsService.clearRight()}>Close all tabs to
155-
right</MenuItem>
156-
</Card>
157-
<MenuLabel>
158-
<Flex style={{gap: ".35rem"}}>
159-
<Flex align={"center"} style={{gap: "0.35rem"}}>
160-
<Flex>
161-
<Badge border><IconArrowUp size={12}/></Badge>
162-
<Badge border><IconArrowDown size={12}/></Badge>
163-
</Flex>
164-
move
165-
</Flex>
166-
<Spacing spacing={"xxs"}/>
167-
<Flex align={"center"} style={{gap: ".35rem"}}>
168-
<Badge border><IconCornerDownLeft size={12}/></Badge>
169-
select
170-
</Flex>
171-
</Flex>
172-
</MenuLabel>
124+
<MenuContent align="end" sideOffset={8}>
125+
<MenuItem onClick={() => fileTabsService.clearAll()}>Close all tabs</MenuItem>
126+
<MenuItem onClick={() => fileTabsService.clearWithoutActive()}>Close other
127+
tabs</MenuItem>
128+
<MenuSeparator/>
129+
<MenuItem onClick={() => fileTabsService.clearLeft()}>Close all tabs to
130+
left</MenuItem>
131+
<MenuItem onClick={() => fileTabsService.clearRight()}>Close all tabs to
132+
right</MenuItem>
173133
</MenuContent>
174134
</MenuPortal>
175135
</Menu>

0 commit comments

Comments
 (0)