Skip to content

Commit 15712c9

Browse files
d13d13
committed
Changes from pop-menu to gl-popover
1 parent 67af6d7 commit 15712c9

File tree

3 files changed

+234
-238
lines changed

3 files changed

+234
-238
lines changed

‎src/webviews/apps/plus/graph/GraphWrapper.tsx‎

Lines changed: 162 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,7 @@ import { GlCheckbox } from '../../shared/components/checkbox';
7272
import { CodeIcon } from '../../shared/components/code-icon.react';
7373
import { GlConnect } from '../../shared/components/integrations/connect.react';
7474
import { GlMarkdown } from '../../shared/components/markdown/markdown.react';
75-
import { MenuDivider, MenuItem, MenuLabel, MenuList } from '../../shared/components/menu/react';
76-
import { PopMenu } from '../../shared/components/overlays/pop-menu/react';
75+
import { MenuDivider, MenuItem, MenuLabel } from '../../shared/components/menu/react';
7776
import { GlPopover } from '../../shared/components/overlays/popover.react';
7877
import { GlTooltip } from '../../shared/components/overlays/tooltip.react';
7978
import type { RadioGroup } from '../../shared/components/radio/radio-group';
@@ -1325,77 +1324,83 @@ export function GraphWrapper({
13251324
<SlOption value="current">Current Branch</SlOption>
13261325
</SlSelect>
13271326
</GlTooltip>
1328-
<GlTooltip placement="top">
1329-
<PopMenu>
1330-
<button type="button" className="action-button" slot="trigger">
1327+
<GlPopover
1328+
className="popover"
1329+
placement="bottom-start"
1330+
trigger="focus"
1331+
arrow={false}
1332+
distance={0}
1333+
>
1334+
<GlTooltip placement="top" slot="anchor">
1335+
<button type="button" className="action-button">
13311336
<span className={`codicon codicon-filter${hasFilters ? '-filled' : ''}`}></span>
13321337
<span
13331338
className="codicon codicon-chevron-down action-button__more"
13341339
aria-hidden="true"
13351340
></span>
13361341
</button>
1337-
<MenuList slot="content">
1338-
<MenuLabel>Graph Filters</MenuLabel>
1339-
{repo?.isVirtual !== true && (
1340-
<>
1341-
<MenuItem role="none">
1342-
<GlTooltip
1343-
placement="right"
1344-
content="Only follow the first parent of merge commits to provide a more linear history"
1345-
>
1346-
<GlCheckbox
1347-
value="onlyFollowFirstParent"
1348-
onChange={handleFilterChange}
1349-
defaultChecked={graphConfig?.onlyFollowFirstParent ?? false}
1350-
>
1351-
Simplify Merge History
1352-
</GlCheckbox>
1353-
</GlTooltip>
1354-
</MenuItem>
1355-
<MenuDivider></MenuDivider>
1356-
<MenuItem role="none">
1357-
<GlCheckbox
1358-
value="remotes"
1359-
onChange={handleFilterChange}
1360-
defaultChecked={excludeTypes?.remotes ?? false}
1361-
>
1362-
Hide Remote-only Branches
1363-
</GlCheckbox>
1364-
</MenuItem>
1365-
<MenuItem role="none">
1342+
<span slot="content">Graph Filtering</span>
1343+
</GlTooltip>
1344+
<div slot="content">
1345+
<MenuLabel>Graph Filters</MenuLabel>
1346+
{repo?.isVirtual !== true && (
1347+
<>
1348+
<MenuItem role="none">
1349+
<GlTooltip
1350+
placement="right"
1351+
content="Only follow the first parent of merge commits to provide a more linear history"
1352+
>
13661353
<GlCheckbox
1367-
value="stashes"
1354+
value="onlyFollowFirstParent"
13681355
onChange={handleFilterChange}
1369-
defaultChecked={excludeTypes?.stashes ?? false}
1356+
defaultChecked={graphConfig?.onlyFollowFirstParent ?? false}
13701357
>
1371-
Hide Stashes
1358+
Simplify Merge History
13721359
</GlCheckbox>
1373-
</MenuItem>
1374-
</>
1375-
)}
1376-
<MenuItem role="none">
1377-
<GlCheckbox
1378-
value="tags"
1379-
onChange={handleFilterChange}
1380-
defaultChecked={excludeTypes?.tags ?? false}
1381-
>
1382-
Hide Tags
1383-
</GlCheckbox>
1384-
</MenuItem>
1385-
<MenuDivider></MenuDivider>
1386-
<MenuItem role="none">
1387-
<GlCheckbox
1388-
value="mergeCommits"
1389-
onChange={handleFilterChange}
1390-
defaultChecked={graphConfig?.dimMergeCommits ?? false}
1391-
>
1392-
Dim Merge Commit Rows
1393-
</GlCheckbox>
1394-
</MenuItem>
1395-
</MenuList>
1396-
</PopMenu>
1397-
<span slot="content">Graph Filtering</span>
1398-
</GlTooltip>
1360+
</GlTooltip>
1361+
</MenuItem>
1362+
<MenuDivider></MenuDivider>
1363+
<MenuItem role="none">
1364+
<GlCheckbox
1365+
value="remotes"
1366+
onChange={handleFilterChange}
1367+
defaultChecked={excludeTypes?.remotes ?? false}
1368+
>
1369+
Hide Remote-only Branches
1370+
</GlCheckbox>
1371+
</MenuItem>
1372+
<MenuItem role="none">
1373+
<GlCheckbox
1374+
value="stashes"
1375+
onChange={handleFilterChange}
1376+
defaultChecked={excludeTypes?.stashes ?? false}
1377+
>
1378+
Hide Stashes
1379+
</GlCheckbox>
1380+
</MenuItem>
1381+
</>
1382+
)}
1383+
<MenuItem role="none">
1384+
<GlCheckbox
1385+
value="tags"
1386+
onChange={handleFilterChange}
1387+
defaultChecked={excludeTypes?.tags ?? false}
1388+
>
1389+
Hide Tags
1390+
</GlCheckbox>
1391+
</MenuItem>
1392+
<MenuDivider></MenuDivider>
1393+
<MenuItem role="none">
1394+
<GlCheckbox
1395+
value="mergeCommits"
1396+
onChange={handleFilterChange}
1397+
defaultChecked={graphConfig?.dimMergeCommits ?? false}
1398+
>
1399+
Dim Merge Commit Rows
1400+
</GlCheckbox>
1401+
</MenuItem>
1402+
</div>
1403+
</GlPopover>
13991404
<span>
14001405
<span className="action-divider"></span>
14011406
</span>
@@ -1432,117 +1437,110 @@ export function GraphWrapper({
14321437
</button>
14331438
<span slot="content">Toggle Minimap</span>
14341439
</GlTooltip>
1435-
<GlTooltip placement="top" distance={7}>
1436-
<PopMenu position="right">
1437-
<button
1438-
type="button"
1439-
className="action-button"
1440-
slot="trigger"
1441-
aria-label="Minimap Options"
1442-
>
1440+
<GlPopover
1441+
className="popover"
1442+
placement="bottom-end"
1443+
trigger="focus"
1444+
arrow={false}
1445+
distance={0}
1446+
>
1447+
<GlTooltip placement="top" distance={7} slot="anchor">
1448+
<button type="button" className="action-button" aria-label="Minimap Options">
14431449
<span
14441450
className="codicon codicon-chevron-down action-button__more"
14451451
aria-hidden="true"
14461452
></span>
14471453
</button>
1448-
<MenuList slot="content">
1449-
<MenuLabel>Minimap</MenuLabel>
1454+
<span slot="content">Minimap Options</span>
1455+
</GlTooltip>
1456+
<div slot="content">
1457+
<MenuLabel>Minimap</MenuLabel>
1458+
<MenuItem role="none">
14501459
<GlRadioGroup
14511460
value={graphConfig?.minimapDataType ?? 'commits'}
14521461
onChange={handleOnMinimapDataTypeChange}
14531462
>
1454-
<MenuItem role="none">
1455-
<GlRadio name="minimap-datatype" value="commits">
1456-
Commits
1457-
</GlRadio>
1458-
</MenuItem>
1459-
<MenuItem role="none">
1460-
<GlRadio name="minimap-datatype" value="lines">
1461-
Lines Changed
1462-
</GlRadio>
1463-
</MenuItem>
1463+
<GlRadio name="minimap-datatype" value="commits">
1464+
Commits
1465+
</GlRadio>
1466+
<GlRadio name="minimap-datatype" value="lines">
1467+
Lines Changed
1468+
</GlRadio>
14641469
</GlRadioGroup>
1465-
<MenuDivider></MenuDivider>
1466-
<MenuLabel>Markers</MenuLabel>
1467-
<MenuItem role="none">
1468-
<GlCheckbox
1469-
value="localBranches"
1470-
onChange={handleOnMinimapAdditionalTypesChange}
1471-
defaultChecked={
1472-
graphConfig?.minimapMarkerTypes?.includes('localBranches') ??
1473-
false
1474-
}
1475-
>
1476-
<span
1477-
className="minimap-marker-swatch"
1478-
data-marker="localBranches"
1479-
></span>
1480-
Local Branches
1481-
</GlCheckbox>
1482-
</MenuItem>
1483-
<MenuItem role="none">
1484-
<GlCheckbox
1485-
value="remoteBranches"
1486-
onChange={handleOnMinimapAdditionalTypesChange}
1487-
defaultChecked={
1488-
graphConfig?.minimapMarkerTypes?.includes('remoteBranches') ??
1489-
true
1490-
}
1491-
>
1492-
<span
1493-
className="minimap-marker-swatch"
1494-
data-marker="remoteBranches"
1495-
></span>
1496-
Remote Branches
1497-
</GlCheckbox>
1498-
</MenuItem>
1499-
<MenuItem role="none">
1500-
<GlCheckbox
1501-
value="pullRequests"
1502-
onChange={handleOnMinimapAdditionalTypesChange}
1503-
defaultChecked={
1504-
graphConfig?.minimapMarkerTypes?.includes('pullRequests') ??
1505-
true
1506-
}
1507-
>
1508-
<span
1509-
className="minimap-marker-swatch"
1510-
data-marker="pullRequests"
1511-
></span>
1512-
Pull Requests
1513-
</GlCheckbox>
1514-
</MenuItem>
1515-
<MenuItem role="none">
1516-
<GlCheckbox
1517-
value="stashes"
1518-
onChange={handleOnMinimapAdditionalTypesChange}
1519-
defaultChecked={
1520-
graphConfig?.minimapMarkerTypes?.includes('stashes') ?? false
1521-
}
1522-
>
1523-
<span
1524-
className="minimap-marker-swatch"
1525-
data-marker="stashes"
1526-
></span>
1527-
Stashes
1528-
</GlCheckbox>
1529-
</MenuItem>
1530-
<MenuItem role="none">
1531-
<GlCheckbox
1532-
value="tags"
1533-
onChange={handleOnMinimapAdditionalTypesChange}
1534-
defaultChecked={
1535-
graphConfig?.minimapMarkerTypes?.includes('tags') ?? true
1536-
}
1537-
>
1538-
<span className="minimap-marker-swatch" data-marker="tags"></span>
1539-
Tags
1540-
</GlCheckbox>
1541-
</MenuItem>
1542-
</MenuList>
1543-
</PopMenu>
1544-
<span slot="content">Minimap Options</span>
1545-
</GlTooltip>
1470+
</MenuItem>
1471+
<MenuDivider></MenuDivider>
1472+
<MenuLabel>Markers</MenuLabel>
1473+
<MenuItem role="none">
1474+
<GlCheckbox
1475+
value="localBranches"
1476+
onChange={handleOnMinimapAdditionalTypesChange}
1477+
defaultChecked={
1478+
graphConfig?.minimapMarkerTypes?.includes('localBranches') ?? false
1479+
}
1480+
>
1481+
<span
1482+
className="minimap-marker-swatch"
1483+
data-marker="localBranches"
1484+
></span>
1485+
Local Branches
1486+
</GlCheckbox>
1487+
</MenuItem>
1488+
<MenuItem role="none">
1489+
<GlCheckbox
1490+
value="remoteBranches"
1491+
onChange={handleOnMinimapAdditionalTypesChange}
1492+
defaultChecked={
1493+
graphConfig?.minimapMarkerTypes?.includes('remoteBranches') ?? true
1494+
}
1495+
>
1496+
<span
1497+
className="minimap-marker-swatch"
1498+
data-marker="remoteBranches"
1499+
></span>
1500+
Remote Branches
1501+
</GlCheckbox>
1502+
</MenuItem>
1503+
<MenuItem role="none">
1504+
<GlCheckbox
1505+
value="pullRequests"
1506+
onChange={handleOnMinimapAdditionalTypesChange}
1507+
defaultChecked={
1508+
graphConfig?.minimapMarkerTypes?.includes('pullRequests') ?? true
1509+
}
1510+
>
1511+
<span
1512+
className="minimap-marker-swatch"
1513+
data-marker="pullRequests"
1514+
></span>
1515+
Pull Requests
1516+
</GlCheckbox>
1517+
</MenuItem>
1518+
<MenuItem role="none">
1519+
<GlCheckbox
1520+
value="stashes"
1521+
onChange={handleOnMinimapAdditionalTypesChange}
1522+
defaultChecked={
1523+
graphConfig?.minimapMarkerTypes?.includes('stashes') ?? false
1524+
}
1525+
>
1526+
<span className="minimap-marker-swatch" data-marker="stashes"></span>
1527+
Stashes
1528+
</GlCheckbox>
1529+
</MenuItem>
1530+
<MenuItem role="none">
1531+
<GlCheckbox
1532+
value="tags"
1533+
onChange={handleOnMinimapAdditionalTypesChange}
1534+
defaultChecked={
1535+
graphConfig?.minimapMarkerTypes?.includes('tags') ?? true
1536+
}
1537+
>
1538+
<span className="minimap-marker-swatch" data-marker="tags"></span>
1539+
Tags
1540+
</GlCheckbox>
1541+
</MenuItem>
1542+
</div>
1543+
</GlPopover>
15461544
</span>
15471545
</div>
15481546
</div>

‎src/webviews/apps/plus/graph/graph.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,11 @@ button:not([disabled]),
233233
}
234234
}
235235

236+
.popover::part(body) {
237+
padding: 0;
238+
font-size: var(--vscode-font-size);
239+
}
240+
236241
.jump-to-ref {
237242
--button-foreground: var(--color-foreground);
238243
}

0 commit comments

Comments
 (0)