scroll for workspaces list

pull/3372/head
lianahus 2 years ago
parent 6e5ef17bc1
commit 457349099d
  1. 3
      libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx
  2. 7
      libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@ -38,6 +38,7 @@ export const CustomIconsToggle = React.forwardRef(({ onClick, icon, className =
// Dropdown needs access to the DOM of the Menu to measure it // Dropdown needs access to the DOM of the Menu to measure it
export const CustomMenu = React.forwardRef( export const CustomMenu = React.forwardRef(
({ children, style, className, 'aria-labelledby': labeledBy }: { children: React.ReactNode, style?: React.CSSProperties, className: string, 'aria-labelledby'?: string }, ref: Ref<HTMLDivElement>) => { ({ children, style, className, 'aria-labelledby': labeledBy }: { children: React.ReactNode, style?: React.CSSProperties, className: string, 'aria-labelledby'?: string }, ref: Ref<HTMLDivElement>) => {
const height = window.innerHeight * 0.6
return ( return (
<div <div
ref={ref} ref={ref}
@ -45,7 +46,7 @@ export const CustomMenu = React.forwardRef(
className={className} className={className}
aria-labelledby={labeledBy} aria-labelledby={labeledBy}
> >
<ul className="list-unstyled mb-0"> <ul className="overflow-auto list-unstyled mb-0" style={{height: height+'px'}}>
{ {
children children
} }

@ -451,7 +451,12 @@ export function Workspace () {
</div> </div>
<Dropdown id="workspacesSelect" data-id="workspacesSelect" onToggle={toggleDropdown} show={showDropdown}> <Dropdown id="workspacesSelect" data-id="workspacesSelect" onToggle={toggleDropdown} show={showDropdown}>
<Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control mt-1" icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}> <Dropdown.Toggle
as={CustomToggle}
id="dropdown-custom-components"
className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control mt-1"
icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}
>
{ selectedWorkspace ? selectedWorkspace.name : currentWorkspace === LOCALHOST ? formatNameForReadonly("localhost") : NO_WORKSPACE } { selectedWorkspace ? selectedWorkspace.name : currentWorkspace === LOCALHOST ? formatNameForReadonly("localhost") : NO_WORKSPACE }
</Dropdown.Toggle> </Dropdown.Toggle>

Loading…
Cancel
Save