Skip to content

Commit 7731822

Browse files
ci-botAniket-Engg
ci-bot
authored and
Aniket-Engg
committed
as before
1 parent b177702 commit 7731822

File tree

1 file changed

+114
-116
lines changed

1 file changed

+114
-116
lines changed

‎libs/remix-ui/top-bar/src/components/WorkspaceDropdown.tsx

Lines changed: 114 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -168,130 +168,128 @@ export const WorkspacesDropdown: React.FC<WorkspacesDropdownProps> = ({ menuItem
168168
data-id="topbar-custom-dropdown-items"
169169
show={showMain}
170170
>
171-
<div id="scrollable-section" className="overflow-y-scroll" style={{ maxHeight: '160px' }}>
172-
{menuItems.map((item, idx) => {
173-
const id = idx + 1
174-
if (!iconRefs.current[id]) iconRefs.current[id] = { current: null }
175-
return (
176-
<div key={id} className="d-flex flex-row">
177-
<Dropdown.Item
178-
key={id}
179-
className="dropdown-item d-flex justify-content-between align-items-center position-relative"
180-
onMouseDown={(e) => {
181-
switchWorkspace(item.name)
171+
{menuItems.map((item, idx) => {
172+
const id = idx + 1
173+
if (!iconRefs.current[id]) iconRefs.current[id] = { current: null }
174+
return (
175+
<div key={id} className="d-flex flex-row">
176+
<Dropdown.Item
177+
key={id}
178+
className="dropdown-item d-flex justify-content-between align-items-center position-relative"
179+
onMouseDown={(e) => {
180+
switchWorkspace(item.name)
181+
e.preventDefault()
182+
} }
183+
data-id={`dropdown-item-${item.name}`}
184+
>
185+
{item.isGitRepo && item.currentBranch && (
186+
<i className="fas fa-code-branch pt-1"></i>
187+
)}
188+
<span className="pl-1">{item.name}</span>
189+
</Dropdown.Item>
190+
<div className="d-flex align-items-center" id="submenu-activate-button">
191+
<Button
192+
ref={(el) => (iconRefs.current[id].current = el)}
193+
variant="link"
194+
className="p-0 ms-2 text-muted submenu-trigger"
195+
aria-label={`More actions for ${item.name}`}
196+
onClick={(e) => {
182197
e.preventDefault()
198+
e.stopPropagation()
199+
toggleSubmenu(id)
183200
} }
184-
data-id={`dropdown-item-${item.name}`}
201+
data-id="workspacesubMenuIcon"
185202
>
186-
{item.isGitRepo && item.currentBranch && (
187-
<i className="fas fa-code-branch pt-1"></i>
188-
)}
189-
<span className="pl-1">{item.name}</span>
190-
</Dropdown.Item>
191-
<div className="d-flex align-items-center" id="submenu-activate-button">
192-
<Button
193-
ref={(el) => (iconRefs.current[id].current = el)}
194-
variant="link"
195-
className="p-0 ms-2 text-muted submenu-trigger"
196-
aria-label={`More actions for ${item.name}`}
197-
onClick={(e) => {
198-
e.preventDefault()
199-
e.stopPropagation()
200-
toggleSubmenu(id)
201-
} }
202-
data-id="workspacesubMenuIcon"
203-
>
204-
<FiMoreVertical size={18} />
205-
</Button>
203+
<FiMoreVertical size={18} />
204+
</Button>
206205

207-
<Overlay
208-
show={openSubmenuId === id}
209-
target={iconRefs.current[id].current}
210-
placement="right-start"
211-
container={document.body}
212-
popperConfig={{
213-
modifiers: [
214-
{ name: "offset", options: { offset: [8, 12]} },
215-
{ name: "preventOverflow", options: { boundary: "viewport", padding: 8 } },
216-
{ name: 'flip', options: { enabled: false } }
217-
],
206+
<Overlay
207+
show={openSubmenuId === id}
208+
target={iconRefs.current[id].current}
209+
placement="right-start"
210+
container={document.body}
211+
popperConfig={{
212+
modifiers: [
213+
{ name: "offset", options: { offset: [8, 12]} },
214+
{ name: "preventOverflow", options: { boundary: "viewport", padding: 8 } },
215+
{ name: 'flip', options: { enabled: false } }
216+
],
217+
}}
218+
rootClose
219+
transition={false} //fix flickering and hopefully e2e as well
220+
onHide={() => setOpenSubmenuId(null)}
221+
>
222+
<section
223+
id={`submenu-${id}`}
224+
style={{
225+
minWidth: 160,
218226
}}
219-
rootClose
220-
transition={false} //fix flickering and hopefully e2e as well
221-
onHide={() => setOpenSubmenuId(null)}
227+
data-id="workspacesubMenuOverlay"
222228
>
223-
<section
224-
id={`submenu-${id}`}
225-
style={{
226-
minWidth: 160,
227-
}}
228-
data-id="workspacesubMenuOverlay"
229-
>
230-
<div className="border p-0 rounded w-75">
231-
<div className="d-grid gap-0">
232-
<Button
229+
<div className="border p-0 rounded w-75">
230+
<div className="d-grid gap-0">
231+
<Button
233232
// variant="light"
234-
className="border border-0 btn btn-sm btn-light d-flex align-items-center text-decoration-none"
235-
data-id="workspacesubMenuRename"
236-
size="sm"
237-
onClick={(e) => {
238-
e.stopPropagation()
239-
renameCurrentWorkspace(item.name)
240-
setOpenSubmenuId(null)
241-
} }
242-
style={{
243-
color: 'var(--bs-body-color)'
244-
}}
245-
>
246-
<span className="me-2">
247-
<i className="far fa-edit" />
248-
</span>
249-
<span>Rename</span>
250-
</Button>
251-
<Button
252-
variant="light"
253-
size="sm"
254-
style={{
255-
color: 'var(--bs-body-color)'
256-
}}
257-
className="border border-0 d-flex align-items-center text-decoration-none"
258-
data-id="workspacesubMenuDownload"
259-
onClick={(e) => {
260-
e.stopPropagation()
261-
downloadCurrentWorkspace()
262-
setCurrentMenuItemName(item.name)
263-
setOpenSubmenuId(null)
264-
} }
265-
>
266-
<span className="me-2">
267-
<i className="fas fa-download" />
268-
</span>
269-
<span>Download</span>
270-
</Button>
271-
<Button
272-
variant="light"
273-
size="sm"
274-
style={{
275-
color: 'var(--bs-body-color)'
276-
}}
277-
className="border border-0 d-flex align-items-center text-decoration-none"
278-
data-id="workspacesubMenuDelete"
279-
onClick={(e) => {
280-
deleteCurrentWorkspace(item.name)
281-
e.stopPropagation()
282-
setOpenSubmenuId(null)
283-
} }
284-
>
285-
<span className="me-2">
286-
<i className="fas fa-trash" />
287-
</span>
288-
<span>Delete</span>
289-
</Button>
290-
</div>
233+
className="border border-0 btn btn-sm btn-light d-flex align-items-center text-decoration-none"
234+
data-id="workspacesubMenuRename"
235+
size="sm"
236+
onClick={(e) => {
237+
e.stopPropagation()
238+
renameCurrentWorkspace(item.name)
239+
setOpenSubmenuId(null)
240+
} }
241+
style={{
242+
color: 'var(--bs-body-color)'
243+
}}
244+
>
245+
<span className="me-2">
246+
<i className="far fa-edit" />
247+
</span>
248+
<span>Rename</span>
249+
</Button>
250+
<Button
251+
variant="light"
252+
size="sm"
253+
style={{
254+
color: 'var(--bs-body-color)'
255+
}}
256+
className="border border-0 d-flex align-items-center text-decoration-none"
257+
data-id="workspacesubMenuDownload"
258+
onClick={(e) => {
259+
e.stopPropagation()
260+
downloadCurrentWorkspace()
261+
setCurrentMenuItemName(item.name)
262+
setOpenSubmenuId(null)
263+
} }
264+
>
265+
<span className="me-2">
266+
<i className="fas fa-download" />
267+
</span>
268+
<span>Download</span>
269+
</Button>
270+
<Button
271+
variant="light"
272+
size="sm"
273+
style={{
274+
color: 'var(--bs-body-color)'
275+
}}
276+
className="border border-0 d-flex align-items-center text-decoration-none"
277+
data-id="workspacesubMenuDelete"
278+
onClick={(e) => {
279+
deleteCurrentWorkspace(item.name)
280+
e.stopPropagation()
281+
setOpenSubmenuId(null)
282+
} }
283+
>
284+
<span className="me-2">
285+
<i className="fas fa-trash" />
286+
</span>
287+
<span>Delete</span>
288+
</Button>
291289
</div>
292-
</section>
293-
</Overlay>
294-
</div>
290+
</div>
291+
</section>
292+
</Overlay>
295293
</div>
296294
</div>
297295
)

0 commit comments

Comments
 (0)