mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

ttoltips and internal element layout fix for FE bottom menu

Browse Source
pull/5370/head
lianahus 5 months ago committed by Aniket
parent 836b6ddd2d
commit 364df8b14c
4 changed files with 97 additions and 86 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx
  2. 2
      libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx
  3. 4
      libs/remix-ui/workspace/src/lib/css/remix-ui-workspace.css
  4. 175
      libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

2
libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx
Unescape View File

@ -29,7 +29,7 @@ export const CustomToggle = React.forwardRef(
className={className.replace('dropdown-toggle', '')} className={className.replace('dropdown-toggle', '')}
> >
<div className="d-flex"> <div className="d-flex">
<div className="mr-auto text-nowrap overflow-hidden">{children}</div> <div className="mr-auto text-nowrap text-truncate overflow-hidden">{children}</div>
{icon && ( {icon && (
<div className="pr-1"> <div className="pr-1">
<i className={`${icon} pr-1`}></i> <i className={`${icon} pr-1`}></i>

2
libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx
Unescape View File

@ -12,7 +12,7 @@ function HomeTabFeatured() {
const themeFilter = useContext(ThemeContext) const themeFilter = useContext(ThemeContext)
return ( return (
<div className="pt-1 pl-2 h-100" id="hTFeaturedeSection"> <div className="pt-1 pl-2" id="hTFeaturedeSection">
<div className="mb-2 remix_ui-carousel-container"> <div className="mb-2 remix_ui-carousel-container">
<div className="w-100 d-flex flex-column rounded-3 remix_ui-carouselbox"> <div className="w-100 d-flex flex-column rounded-3 remix_ui-carouselbox">
<ThemeContext.Provider value={themeFilter}> <ThemeContext.Provider value={themeFilter}>

4
libs/remix-ui/workspace/src/lib/css/remix-ui-workspace.css
Unescape View File

@ -77,6 +77,10 @@
background: var(--custom-select); background: var(--custom-select);
} }
.branches-dropdown {
max-width: 16rem;
}
.custom-dropdown-items a { .custom-dropdown-items a {
border-radius: .25rem; border-radius: .25rem;
text-transform: none; text-transform: none;

175
libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
Unescape View File

@ -1364,93 +1364,100 @@ export function Workspace() {
</button> } </button> }
</div> </div>
</CustomTooltip> </CustomTooltip>
: null} : null
<div className="pt-0 mr-2" data-id="workspaceGitBranchesDropdown"> }
<Dropdown style={{ height: 30, width: "7rem" }} onToggle={toggleBranches} show={showBranches} drop={'up'}> <CustomTooltip
<Dropdown.Toggle placement="top"
as={CustomToggle} tooltipId="branchesDropdown"
id="dropdown-custom-components" tooltipClasses="text-nowrap"
className="btn btn-sm btn-light btn-block w-100 d-inline-block border border-dark form-control h-100 p-0 pl-2 pr-2 text-dark" tooltipText={'Current branch: ' + currentBranch || 'Branches'}
icon={null} >
> <div className="pt-0 mr-2" data-id="workspaceGitBranchesDropdown">
{global.fs.browser.isRequestingCloning ? <i className="fad fa-spinner fa-spin"></i> : currentBranch || '-none-'} <Dropdown style={{ height: 30, width: "7rem" }} onToggle={toggleBranches} show={showBranches} drop={'up'}>
</Dropdown.Toggle> <Dropdown.Toggle
as={CustomToggle}
<Dropdown.Menu as={CustomMenu} className="custom-dropdown-items branches-dropdown"> id="dropdown-custom-components"
<div data-id="custom-dropdown-menu"> className="btn btn-sm btn-light btn-block w-100 d-inline-block border border-dark form-control h-100 p-0 pl-2 pr-2 text-dark"
<div className="d-flex text-dark" style={{ fontSize: 14, fontWeight: 'bold' }}> icon={null}
<span className="mt-2 ml-2 mr-auto"> >
<FormattedMessage id="filePanel.switchBranches" /> {global.fs.browser.isRequestingCloning ? <i className="fad fa-spinner fa-spin"></i> : currentBranch || '-none-'}
</span> </Dropdown.Toggle>
<div <Dropdown.Menu as={CustomMenu} className="custom-dropdown-items branches-dropdown">
className="pt-2 pr-2" <div data-id="custom-dropdown-menu">
onClick={() => { <div className="d-flex text-dark" style={{ fontSize: 14, fontWeight: 'bold' }}>
toggleBranches(false) <span className="mt-2 ml-2 mr-auto">
}} <FormattedMessage id="filePanel.switchBranches" />
> </span>
<i className="fa fa-close"></i> <div
className="pt-2 pr-2"
onClick={() => {
toggleBranches(false)
}}
>
<i className="fa fa-close"></i>
</div>
</div> </div>
</div> <div className="border-top py-2">
<div className="border-top py-2"> <input
<input className="form-control border checkout-input bg-light"
className="form-control border checkout-input bg-light" placeholder={intl.formatMessage({
placeholder={intl.formatMessage({ id: 'filePanel.findOrCreateABranch'
id: 'filePanel.findOrCreateABranch' })}
})} style={{ minWidth: 225 }}
style={{ minWidth: 225 }} onChange={handleBranchFilterChange}
onChange={handleBranchFilterChange} data-id="workspaceGitInput"
data-id="workspaceGitInput" />
/> </div>
</div> <div className="border-top" style={{ maxHeight: 120, overflowY: 'scroll' }} data-id="custom-dropdown-items">
<div className="border-top" style={{ maxHeight: 120, overflowY: 'scroll' }} data-id="custom-dropdown-items"> {filteredBranches.length > 0 ? (
{filteredBranches.length > 0 ? ( filteredBranches.map((branch, index) => {
filteredBranches.map((branch, index) => { return (
return ( <Dropdown.Item
<Dropdown.Item key={index}
key={index} onClick={() => {
onClick={() => { switchToBranch(branch)
switchToBranch(branch) }}
}} title={intl.formatMessage({ id: `filePanel.switchToBranch${branch.remote ? 'Title1' : 'Title2'}` })}
title={intl.formatMessage({ id: `filePanel.switchToBranch${branch.remote ? 'Title1' : 'Title2'}` })} >
> <div data-id={`workspaceGit-${branch.remote ? `${branch.remote}/${branch.name}` : branch.name}`}>
<div data-id={`workspaceGit-${branch.remote ? `${branch.remote}/${branch.name}` : branch.name}`}> {currentBranch === branch.name && !branch.remote ? (
{currentBranch === branch.name && !branch.remote ? ( <span>
<span> &#10003; <i className="far fa-code-branch"></i>
&#10003; <i className="far fa-code-branch"></i> <span className="pl-1">{branch.name}</span>
<span className="pl-1">{branch.name}</span> </span>
</span> ) : (
) : ( <span className="pl-3">
<span className="pl-3"> <i className={`far ${branch.remote ? 'fa-cloud' : 'fa-code-branch'}`}></i>
<i className={`far ${branch.remote ? 'fa-cloud' : 'fa-code-branch'}`}></i> <span className="pl-1">{branch.remote ? `${branch.remote}/${branch.name}` : branch.name}</span>
<span className="pl-1">{branch.remote ? `${branch.remote}/${branch.name}` : branch.name}</span> </span>
</span> )}
)} </div>
</div> </Dropdown.Item>
</Dropdown.Item> )
) })
}) ) : (
) : ( <Dropdown.Item onClick={switchToNewBranch}>
<Dropdown.Item onClick={switchToNewBranch}> <div className="pl-1 pr-1" data-id="workspaceGitCreateNewBranch">
<div className="pl-1 pr-1" data-id="workspaceGitCreateNewBranch"> <i className="fas fa-code-branch pr-2"></i>
<i className="fas fa-code-branch pr-2"></i> <span>
<span> <FormattedMessage id="filePanel.createBranch" />: {branchFilter} from '{currentBranch}'
<FormattedMessage id="filePanel.createBranch" />: {branchFilter} from '{currentBranch}' </span>
</span> </div>
</div> </Dropdown.Item>
</Dropdown.Item> )}
</div>
{(selectedWorkspace.branches || []).length > 4 && (
<div className="text-center border-top pt-2">
<label style={{ fontSize: 12, cursor: 'pointer' }} onClick={showAllBranches}>
<FormattedMessage id="filePanel.viewAllBranches" />
</label>
</div>
)} )}
</div> </div>
{(selectedWorkspace.branches || []).length > 4 && ( </Dropdown.Menu>
<div className="text-center border-top pt-2"> </Dropdown>
<label style={{ fontSize: 12, cursor: 'pointer' }} onClick={showAllBranches}> </div>
<FormattedMessage id="filePanel.viewAllBranches" /> </CustomTooltip>
</label>
</div>
)}
</div>
</Dropdown.Menu>
</Dropdown>
</div>
</div> </div>
</div> </div>
)} )}

Write Preview
Loading…
Cancel
Save