Skip to content

Commit 7fbb420

Browse files
nzaytsevd13
nzaytsev
authored and
d13
committed
Replaces FAST dependencies to Lit components
1 parent 3683490 commit 7fbb420

File tree

18 files changed

+499
-130
lines changed

18 files changed

+499
-130
lines changed

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

Lines changed: 41 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import type {
1616
import GraphContainer, { CommitDateTimeSources, refZone } from '@gitkraken/gitkraken-components';
1717
import type { SlChangeEvent } from '@shoelace-style/shoelace';
1818
import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
19-
import { VSCodeCheckbox, VSCodeRadio, VSCodeRadioGroup } from '@vscode/webview-ui-toolkit/react';
2019
import type { FormEvent, MouseEvent, ReactElement } from 'react';
2120
import React, { createElement, useEffect, useMemo, useRef, useState } from 'react';
2221
import type { DateStyle, GraphBranchesVisibility } from '../../../../config';
@@ -69,13 +68,16 @@ import type { IpcNotification } from '../../../protocol';
6968
import { DidChangeHostWindowFocusNotification } from '../../../protocol';
7069
import { createCommandLink } from '../../shared/commands';
7170
import { GlButton } from '../../shared/components/button.react';
71+
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';
7575
import { MenuDivider, MenuItem, MenuLabel, MenuList } from '../../shared/components/menu/react';
7676
import { PopMenu } from '../../shared/components/overlays/pop-menu/react';
7777
import { GlPopover } from '../../shared/components/overlays/popover.react';
7878
import { GlTooltip } from '../../shared/components/overlays/tooltip.react';
79+
import type { RadioGroup } from '../../shared/components/radio/radio-group';
80+
import { GlRadio, GlRadioGroup } from '../../shared/components/radio/radio.react';
7981
import { GlFeatureBadge } from '../../shared/components/react/feature-badge';
8082
import { GlFeatureGate } from '../../shared/components/react/feature-gate';
8183
import { GlIssuePullRequest } from '../../shared/components/react/issue-pull-request';
@@ -469,14 +471,12 @@ export function GraphWrapper({
469471
const handleOnMinimapDataTypeChange = (e: Event | FormEvent<HTMLElement>) => {
470472
if (graphConfig == null) return;
471473

472-
const $el = e.target as HTMLInputElement;
473-
if ($el.value === 'commits') {
474-
const minimapDataType = $el.checked ? 'commits' : 'lines';
475-
if (graphConfig.minimapDataType === minimapDataType) return;
474+
const $el = e.target as RadioGroup;
475+
const minimapDataType = $el.value === 'lines' ? 'lines' : 'commits';
476+
if (graphConfig.minimapDataType === minimapDataType) return;
476477

477-
setGraphConfig({ ...graphConfig, minimapDataType: minimapDataType });
478-
onChangeGraphConfiguration?.({ minimapDataType: minimapDataType });
479-
}
478+
setGraphConfig({ ...graphConfig, minimapDataType: minimapDataType });
479+
onChangeGraphConfiguration?.({ minimapDataType: minimapDataType });
480480
};
481481

482482
const handleOnMinimapAdditionalTypesChange = (e: Event | FormEvent<HTMLElement>) => {
@@ -1343,54 +1343,54 @@ export function GraphWrapper({
13431343
placement="right"
13441344
content="Only follow the first parent of merge commits to provide a more linear history"
13451345
>
1346-
<VSCodeCheckbox
1346+
<GlCheckbox
13471347
value="onlyFollowFirstParent"
13481348
onChange={handleFilterChange}
13491349
defaultChecked={graphConfig?.onlyFollowFirstParent ?? false}
13501350
>
13511351
Simplify Merge History
1352-
</VSCodeCheckbox>
1352+
</GlCheckbox>
13531353
</GlTooltip>
13541354
</MenuItem>
13551355
<MenuDivider></MenuDivider>
13561356
<MenuItem role="none">
1357-
<VSCodeCheckbox
1357+
<GlCheckbox
13581358
value="remotes"
13591359
onChange={handleFilterChange}
13601360
defaultChecked={excludeTypes?.remotes ?? false}
13611361
>
13621362
Hide Remote-only Branches
1363-
</VSCodeCheckbox>
1363+
</GlCheckbox>
13641364
</MenuItem>
13651365
<MenuItem role="none">
1366-
<VSCodeCheckbox
1366+
<GlCheckbox
13671367
value="stashes"
13681368
onChange={handleFilterChange}
13691369
defaultChecked={excludeTypes?.stashes ?? false}
13701370
>
13711371
Hide Stashes
1372-
</VSCodeCheckbox>
1372+
</GlCheckbox>
13731373
</MenuItem>
13741374
</>
13751375
)}
13761376
<MenuItem role="none">
1377-
<VSCodeCheckbox
1377+
<GlCheckbox
13781378
value="tags"
13791379
onChange={handleFilterChange}
13801380
defaultChecked={excludeTypes?.tags ?? false}
13811381
>
13821382
Hide Tags
1383-
</VSCodeCheckbox>
1383+
</GlCheckbox>
13841384
</MenuItem>
13851385
<MenuDivider></MenuDivider>
13861386
<MenuItem role="none">
1387-
<VSCodeCheckbox
1387+
<GlCheckbox
13881388
value="mergeCommits"
13891389
onChange={handleFilterChange}
13901390
defaultChecked={graphConfig?.dimMergeCommits ?? false}
13911391
>
13921392
Dim Merge Commit Rows
1393-
</VSCodeCheckbox>
1393+
</GlCheckbox>
13941394
</MenuItem>
13951395
</MenuList>
13961396
</PopMenu>
@@ -1447,27 +1447,25 @@ export function GraphWrapper({
14471447
</button>
14481448
<MenuList slot="content">
14491449
<MenuLabel>Minimap</MenuLabel>
1450-
<MenuItem role="none">
1451-
<VSCodeRadioGroup
1452-
orientation="vertical"
1453-
value={graphConfig?.minimapDataType ?? 'commits'}
1454-
>
1455-
<VSCodeRadio
1456-
name="minimap-datatype"
1457-
value="commits"
1458-
onChange={handleOnMinimapDataTypeChange}
1459-
>
1450+
<GlRadioGroup
1451+
value={graphConfig?.minimapDataType ?? 'commits'}
1452+
onChange={handleOnMinimapDataTypeChange}
1453+
>
1454+
<MenuItem role="none">
1455+
<GlRadio name="minimap-datatype" value="commits">
14601456
Commits
1461-
</VSCodeRadio>
1462-
<VSCodeRadio name="minimap-datatype" value="lines">
1457+
</GlRadio>
1458+
</MenuItem>
1459+
<MenuItem role="none">
1460+
<GlRadio name="minimap-datatype" value="lines">
14631461
Lines Changed
1464-
</VSCodeRadio>
1465-
</VSCodeRadioGroup>
1466-
</MenuItem>
1462+
</GlRadio>
1463+
</MenuItem>
1464+
</GlRadioGroup>
14671465
<MenuDivider></MenuDivider>
14681466
<MenuLabel>Markers</MenuLabel>
14691467
<MenuItem role="none">
1470-
<VSCodeCheckbox
1468+
<GlCheckbox
14711469
value="localBranches"
14721470
onChange={handleOnMinimapAdditionalTypesChange}
14731471
defaultChecked={
@@ -1480,10 +1478,10 @@ export function GraphWrapper({
14801478
data-marker="localBranches"
14811479
></span>
14821480
Local Branches
1483-
</VSCodeCheckbox>
1481+
</GlCheckbox>
14841482
</MenuItem>
14851483
<MenuItem role="none">
1486-
<VSCodeCheckbox
1484+
<GlCheckbox
14871485
value="remoteBranches"
14881486
onChange={handleOnMinimapAdditionalTypesChange}
14891487
defaultChecked={
@@ -1496,10 +1494,10 @@ export function GraphWrapper({
14961494
data-marker="remoteBranches"
14971495
></span>
14981496
Remote Branches
1499-
</VSCodeCheckbox>
1497+
</GlCheckbox>
15001498
</MenuItem>
15011499
<MenuItem role="none">
1502-
<VSCodeCheckbox
1500+
<GlCheckbox
15031501
value="pullRequests"
15041502
onChange={handleOnMinimapAdditionalTypesChange}
15051503
defaultChecked={
@@ -1512,10 +1510,10 @@ export function GraphWrapper({
15121510
data-marker="pullRequests"
15131511
></span>
15141512
Pull Requests
1515-
</VSCodeCheckbox>
1513+
</GlCheckbox>
15161514
</MenuItem>
15171515
<MenuItem role="none">
1518-
<VSCodeCheckbox
1516+
<GlCheckbox
15191517
value="stashes"
15201518
onChange={handleOnMinimapAdditionalTypesChange}
15211519
defaultChecked={
@@ -1527,10 +1525,10 @@ export function GraphWrapper({
15271525
data-marker="stashes"
15281526
></span>
15291527
Stashes
1530-
</VSCodeCheckbox>
1528+
</GlCheckbox>
15311529
</MenuItem>
15321530
<MenuItem role="none">
1533-
<VSCodeCheckbox
1531+
<GlCheckbox
15341532
value="tags"
15351533
onChange={handleOnMinimapAdditionalTypesChange}
15361534
defaultChecked={
@@ -1539,7 +1537,7 @@ export function GraphWrapper({
15391537
>
15401538
<span className="minimap-marker-swatch" data-marker="tags"></span>
15411539
Tags
1542-
</VSCodeCheckbox>
1540+
</GlCheckbox>
15431541
</MenuItem>
15441542
</MenuList>
15451543
</PopMenu>

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1223,11 +1223,12 @@ gl-feature-gate gl-feature-badge {
12231223

12241224
.minimap-marker-swatch {
12251225
display: inline-block;
1226-
width: 1.6rem;
1227-
height: 1.6rem;
1228-
border-radius: 3px;
1229-
margin-right: 0.75rem;
1230-
vertical-align: bottom;
1226+
width: 1rem;
1227+
height: 1rem;
1228+
border-radius: 2px;
1229+
transform: scale(1.6);
1230+
margin-left: 0.3rem;
1231+
margin-right: 1rem;
12311232

12321233
&[data-marker='localBranches'] {
12331234
background-color: var(--color-graph-minimap-marker-local-branches);

‎src/webviews/apps/plus/timeline/timeline.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -45,17 +45,17 @@ <h2 data-bind="description"></h2>
4545
<div class="toolbox">
4646
<div class="select-container">
4747
<label for="periods">Timeframe</label>
48-
<vscode-dropdown id="periods" name="periods" position="below">
49-
<vscode-option value="7|D">1 week</vscode-option>
50-
<vscode-option value="1|M">1 month</vscode-option>
51-
<vscode-option value="3|M" selected="true">3 months</vscode-option>
52-
<vscode-option value="6|M">6 months</vscode-option>
53-
<vscode-option value="9|M">9 months</vscode-option>
54-
<vscode-option value="1|Y">1 year</vscode-option>
55-
<vscode-option value="2|Y">2 years</vscode-option>
56-
<vscode-option value="4|Y">4 years</vscode-option>
57-
<vscode-option value="all">Full history</vscode-option>
58-
</vscode-dropdown>
48+
<select id="periods" name="periods" position="below" class="gl-timeline-select">
49+
<option value="7|D">1 week</option>
50+
<option value="1|M">1 month</option>
51+
<option value="3|M" selected="true">3 months</option>
52+
<option value="6|M">6 months</option>
53+
<option value="9|M">9 months</option>
54+
<option value="1|Y">1 year</option>
55+
<option value="2|Y">2 years</option>
56+
<option value="4|Y">4 years</option>
57+
<option value="all">Full history</option>
58+
</select>
5959
</div>
6060
<gl-button
6161
appearance="toolbar"

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,32 @@
2121
--popover-bg: var(--color-background--darken-15);
2222
}
2323

24+
.gl-timeline-select:focus {
25+
outline-color: var(--vscode-list-focusOutline);
26+
}
27+
28+
.gl-timeline-select {
29+
-webkit-appearance: none;
30+
-moz-appearance: none;
31+
appearance: none;
32+
border: 1px solid var(--vscode-dropdown-border);
33+
border-radius: calc(var(--corner-radius-round) * 1px);
34+
cursor: pointer;
35+
font-family: inherit;
36+
min-height: 100%;
37+
padding: 2px 26px 2px 8px;
38+
background-color: var(--vscode-dropdown-background);
39+
border-radius: 2px;
40+
box-sizing: border-box;
41+
color: var(--vscode-foreground);
42+
font-family: var(--font-family);
43+
height: 26px;
44+
position: relative;
45+
user-select: none;
46+
outline: none;
47+
vertical-align: top;
48+
}
49+
2450
:root {
2551
font-size: 62.5%;
2652
font-family: var(--font-family);
@@ -152,13 +178,26 @@ h4 {
152178
align-items: center;
153179
justify-content: flex-end;
154180
flex: 100% 0 1;
181+
position: relative;
155182

156183
label {
157184
margin: 0 1em 0 0.5rem;
158185
font-size: var(--font-size);
159186
}
160187
}
161188

189+
.select-container::after {
190+
font-family: codicon;
191+
content: '\eab4';
192+
font-size: 1.4rem;
193+
pointer-events: none;
194+
top: 50%;
195+
right: 8px;
196+
transform: translateY(-50%);
197+
position: absolute;
198+
color: var(--vscode-foreground);
199+
}
200+
162201
#content {
163202
position: relative;
164203
width: 100%;

‎src/webviews/apps/plus/timeline/timeline.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/*global*/
22
import './timeline.scss';
3-
import { provideVSCodeDesignSystem, vsCodeDropdown, vsCodeOption } from '@vscode/webview-ui-toolkit';
43
import { isSubscriptionPaid } from '../../../../plus/gk/account/subscription';
54
import type { Period, State } from '../../../../plus/webviews/timeline/protocol';
65
import {
@@ -29,8 +28,6 @@ export class TimelineApp extends App<State> {
2928
}
3029

3130
protected override onInitialize() {
32-
provideVSCodeDesignSystem().register(vsCodeDropdown(), vsCodeOption());
33-
3431
this.updateState();
3532
}
3633

@@ -147,7 +144,7 @@ export class TimelineApp extends App<State> {
147144
if ($periods != null) {
148145
const period = this.state?.period;
149146

150-
const $periodOptions = $periods.getElementsByTagName('vscode-option');
147+
const $periodOptions = $periods.getElementsByTagName('option');
151148
for (const $option of $periodOptions) {
152149
if (period === $option.getAttribute('value')) {
153150
$option.setAttribute('selected', '');

0 commit comments

Comments
 (0)