Skip to content

Commit 5c7257d

Browse files
LianaHusAniket-Engg
LianaHus
authored and
Aniket-Engg
committed
ttoltips and internal element layout fix for FE bottom menu
1 parent 0640a5b commit 5c7257d

File tree

4 files changed

+97
-86
lines changed

4 files changed

+97
-86
lines changed

‎libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const CustomToggle = React.forwardRef(
2929
className={className.replace('dropdown-toggle', '')}
3030
>
3131
<div className="d-flex">
32-
<div className="mr-auto text-nowrap overflow-hidden">{children}</div>
32+
<div className="mr-auto text-nowrap text-truncate overflow-hidden">{children}</div>
3333
{icon && (
3434
<div className="pr-1">
3535
<i className={`${icon} pr-1`}></i>

‎libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function HomeTabFeatured() {
1212
const themeFilter = useContext(ThemeContext)
1313

1414
return (
15-
<div className="pt-1 pl-2 h-100" id="hTFeaturedeSection">
15+
<div className="pt-1 pl-2" id="hTFeaturedeSection">
1616
<div className="mb-2 remix_ui-carousel-container">
1717
<div className="w-100 d-flex flex-column rounded-3 remix_ui-carouselbox">
1818
<ThemeContext.Provider value={themeFilter}>

‎libs/remix-ui/workspace/src/lib/css/remix-ui-workspace.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,10 @@
7777
background: var(--custom-select);
7878
}
7979

80+
.branches-dropdown {
81+
max-width: 16rem;
82+
}
83+
8084
.custom-dropdown-items a {
8185
border-radius: .25rem;
8286
text-transform: none;

‎libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx‎

Lines changed: 91 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1364,93 +1364,100 @@ export function Workspace() {
13641364
</button> }
13651365
</div>
13661366
</CustomTooltip>
1367-
: null}
1368-
<div className="pt-0 mr-2" data-id="workspaceGitBranchesDropdown">
1369-
<Dropdown style={{ height: 30, width: "7rem" }} onToggle={toggleBranches} show={showBranches} drop={'up'}>
1370-
<Dropdown.Toggle
1371-
as={CustomToggle}
1372-
id="dropdown-custom-components"
1373-
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"
1374-
icon={null}
1375-
>
1376-
{global.fs.browser.isRequestingCloning ? <i className="fad fa-spinner fa-spin"></i> : currentBranch || '-none-'}
1377-
</Dropdown.Toggle>
1378-
1379-
<Dropdown.Menu as={CustomMenu} className="custom-dropdown-items branches-dropdown">
1380-
<div data-id="custom-dropdown-menu">
1381-
<div className="d-flex text-dark" style={{ fontSize: 14, fontWeight: 'bold' }}>
1382-
<span className="mt-2 ml-2 mr-auto">
1383-
<FormattedMessage id="filePanel.switchBranches" />
1384-
</span>
1385-
<div
1386-
className="pt-2 pr-2"
1387-
onClick={() => {
1388-
toggleBranches(false)
1389-
}}
1390-
>
1391-
<i className="fa fa-close"></i>
1367+
: null
1368+
}
1369+
<CustomTooltip
1370+
placement="top"
1371+
tooltipId="branchesDropdown"
1372+
tooltipClasses="text-nowrap"
1373+
tooltipText={'Current branch: ' + currentBranch || 'Branches'}
1374+
>
1375+
<div className="pt-0 mr-2" data-id="workspaceGitBranchesDropdown">
1376+
<Dropdown style={{ height: 30, width: "7rem" }} onToggle={toggleBranches} show={showBranches} drop={'up'}>
1377+
<Dropdown.Toggle
1378+
as={CustomToggle}
1379+
id="dropdown-custom-components"
1380+
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"
1381+
icon={null}
1382+
>
1383+
{global.fs.browser.isRequestingCloning ? <i className="fad fa-spinner fa-spin"></i> : currentBranch || '-none-'}
1384+
</Dropdown.Toggle>
1385+
<Dropdown.Menu as={CustomMenu} className="custom-dropdown-items branches-dropdown">
1386+
<div data-id="custom-dropdown-menu">
1387+
<div className="d-flex text-dark" style={{ fontSize: 14, fontWeight: 'bold' }}>
1388+
<span className="mt-2 ml-2 mr-auto">
1389+
<FormattedMessage id="filePanel.switchBranches" />
1390+
</span>
1391+
<div
1392+
className="pt-2 pr-2"
1393+
onClick={() => {
1394+
toggleBranches(false)
1395+
}}
1396+
>
1397+
<i className="fa fa-close"></i>
1398+
</div>
13921399
</div>
1393-
</div>
1394-
<div className="border-top py-2">
1395-
<input
1396-
className="form-control border checkout-input bg-light"
1397-
placeholder={intl.formatMessage({
1398-
id: 'filePanel.findOrCreateABranch'
1399-
})}
1400-
style={{ minWidth: 225 }}
1401-
onChange={handleBranchFilterChange}
1402-
data-id="workspaceGitInput"
1403-
/>
1404-
</div>
1405-
<div className="border-top" style={{ maxHeight: 120, overflowY: 'scroll' }} data-id="custom-dropdown-items">
1406-
{filteredBranches.length > 0 ? (
1407-
filteredBranches.map((branch, index) => {
1408-
return (
1409-
<Dropdown.Item
1410-
key={index}
1411-
onClick={() => {
1412-
switchToBranch(branch)
1413-
}}
1414-
title={intl.formatMessage({ id: `filePanel.switchToBranch${branch.remote ? 'Title1' : 'Title2'}` })}
1415-
>
1416-
<div data-id={`workspaceGit-${branch.remote ? `${branch.remote}/${branch.name}` : branch.name}`}>
1417-
{currentBranch === branch.name && !branch.remote ? (
1418-
<span>
1419-
&#10003; <i className="far fa-code-branch"></i>
1420-
<span className="pl-1">{branch.name}</span>
1421-
</span>
1422-
) : (
1423-
<span className="pl-3">
1424-
<i className={`far ${branch.remote ? 'fa-cloud' : 'fa-code-branch'}`}></i>
1425-
<span className="pl-1">{branch.remote ? `${branch.remote}/${branch.name}` : branch.name}</span>
1426-
</span>
1427-
)}
1428-
</div>
1429-
</Dropdown.Item>
1430-
)
1431-
})
1432-
) : (
1433-
<Dropdown.Item onClick={switchToNewBranch}>
1434-
<div className="pl-1 pr-1" data-id="workspaceGitCreateNewBranch">
1435-
<i className="fas fa-code-branch pr-2"></i>
1436-
<span>
1437-
<FormattedMessage id="filePanel.createBranch" />: {branchFilter} from '{currentBranch}'
1438-
</span>
1439-
</div>
1440-
</Dropdown.Item>
1400+
<div className="border-top py-2">
1401+
<input
1402+
className="form-control border checkout-input bg-light"
1403+
placeholder={intl.formatMessage({
1404+
id: 'filePanel.findOrCreateABranch'
1405+
})}
1406+
style={{ minWidth: 225 }}
1407+
onChange={handleBranchFilterChange}
1408+
data-id="workspaceGitInput"
1409+
/>
1410+
</div>
1411+
<div className="border-top" style={{ maxHeight: 120, overflowY: 'scroll' }} data-id="custom-dropdown-items">
1412+
{filteredBranches.length > 0 ? (
1413+
filteredBranches.map((branch, index) => {
1414+
return (
1415+
<Dropdown.Item
1416+
key={index}
1417+
onClick={() => {
1418+
switchToBranch(branch)
1419+
}}
1420+
title={intl.formatMessage({ id: `filePanel.switchToBranch${branch.remote ? 'Title1' : 'Title2'}` })}
1421+
>
1422+
<div data-id={`workspaceGit-${branch.remote ? `${branch.remote}/${branch.name}` : branch.name}`}>
1423+
{currentBranch === branch.name && !branch.remote ? (
1424+
<span>
1425+
&#10003; <i className="far fa-code-branch"></i>
1426+
<span className="pl-1">{branch.name}</span>
1427+
</span>
1428+
) : (
1429+
<span className="pl-3">
1430+
<i className={`far ${branch.remote ? 'fa-cloud' : 'fa-code-branch'}`}></i>
1431+
<span className="pl-1">{branch.remote ? `${branch.remote}/${branch.name}` : branch.name}</span>
1432+
</span>
1433+
)}
1434+
</div>
1435+
</Dropdown.Item>
1436+
)
1437+
})
1438+
) : (
1439+
<Dropdown.Item onClick={switchToNewBranch}>
1440+
<div className="pl-1 pr-1" data-id="workspaceGitCreateNewBranch">
1441+
<i className="fas fa-code-branch pr-2"></i>
1442+
<span>
1443+
<FormattedMessage id="filePanel.createBranch" />: {branchFilter} from '{currentBranch}'
1444+
</span>
1445+
</div>
1446+
</Dropdown.Item>
1447+
)}
1448+
</div>
1449+
{(selectedWorkspace.branches || []).length > 4 && (
1450+
<div className="text-center border-top pt-2">
1451+
<label style={{ fontSize: 12, cursor: 'pointer' }} onClick={showAllBranches}>
1452+
<FormattedMessage id="filePanel.viewAllBranches" />
1453+
</label>
1454+
</div>
14411455
)}
14421456
</div>
1443-
{(selectedWorkspace.branches || []).length > 4 && (
1444-
<div className="text-center border-top pt-2">
1445-
<label style={{ fontSize: 12, cursor: 'pointer' }} onClick={showAllBranches}>
1446-
<FormattedMessage id="filePanel.viewAllBranches" />
1447-
</label>
1448-
</div>
1449-
)}
1450-
</div>
1451-
</Dropdown.Menu>
1452-
</Dropdown>
1453-
</div>
1457+
</Dropdown.Menu>
1458+
</Dropdown>
1459+
</div>
1460+
</CustomTooltip>
14541461
</div>
14551462
</div>
14561463
)}

0 commit comments

Comments
 (0)