Skip to content

Commit 2b9a13a

Browse files
ci-botAniket-Engg
ci-bot
authored and
Aniket-Engg
committed
readd scroll after @Aniket-Engg create workspace fix.
1 parent 7731822 commit 2b9a13a

File tree

1 file changed

+119
-117
lines changed

1 file changed

+119
-117
lines changed

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

Lines changed: 119 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -168,132 +168,134 @@ export const WorkspacesDropdown: React.FC<WorkspacesDropdownProps> = ({ menuItem
168168
data-id="topbar-custom-dropdown-items"
169169
show={showMain}
170170
>
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) => {
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)
197182
e.preventDefault()
198-
e.stopPropagation()
199-
toggleSubmenu(id)
200183
} }
201-
data-id="workspacesubMenuIcon"
184+
data-id={`dropdown-item-${item.name}`}
202185
>
203-
<FiMoreVertical size={18} />
204-
</Button>
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>
205206

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,
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+
],
226218
}}
227-
data-id="workspacesubMenuOverlay"
219+
rootClose
220+
transition={false} //fix flickering and hopefully e2e as well
221+
onHide={() => setOpenSubmenuId(null)}
228222
>
229-
<div className="border p-0 rounded w-75">
230-
<div className="d-grid gap-0">
231-
<Button
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
232233
// variant="light"
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>
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>
289291
</div>
290-
</div>
291-
</section>
292-
</Overlay>
292+
</section>
293+
</Overlay>
294+
</div>
293295
</div>
294-
</div>
295-
)
296-
})}
296+
)
297+
})}
298+
</div>
297299
<div className="d-grid gap-2">
298300
<Dropdown.Item
299301
data-id="workspacecreate"

0 commit comments

Comments
 (0)