Skip to content

Commit bee9e25

Browse files
d13d13
committed
Removes codicon and glicon classes and css from the graph
1 parent 90673ea commit bee9e25

File tree

4 files changed

+54
-81
lines changed

4 files changed

+54
-81
lines changed

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

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1044,14 +1044,16 @@ export function GraphWrapper({
10441044
})
10451045
}
10461046
>
1047-
<span
1048-
className={
1049-
repo.provider.icon === 'cloud'
1050-
? 'codicon codicon-cloud action-button__icon'
1051-
: `glicon glicon-provider-${repo.provider.icon} action-button__icon`
1052-
}
1053-
aria-hidden="true"
1054-
>
1047+
<span>
1048+
<CodeIcon
1049+
className="action-button__icon"
1050+
icon={
1051+
repo.provider.icon === 'cloud'
1052+
? 'cloud'
1053+
: `gl-provider-${repo.provider.icon}`
1054+
}
1055+
aria-hidden="true"
1056+
/>
10551057
{repo.provider.integration?.connected && (
10561058
<GlIndicator
10571059
style={{
@@ -1069,21 +1071,21 @@ export function GraphWrapper({
10691071
<hr />
10701072
{repo.provider.integration?.connected ? (
10711073
<span>
1072-
<span
1074+
<CodeIcon
10731075
style={{ marginTop: '-3px' }}
1074-
className="codicon codicon-check"
1076+
icon="check"
10751077
aria-hidden="true"
1076-
></span>{' '}
1078+
/>{' '}
10771079
Connected to {repo.provider.name}
10781080
</span>
10791081
) : (
10801082
repo.provider.integration?.connected === false && (
10811083
<>
1082-
<span
1084+
<CodeIcon
10831085
style={{ marginTop: '-3px' }}
1084-
className="codicon codicon-plug"
1086+
icon="plug"
10851087
aria-hidden="true"
1086-
></span>{' '}
1088+
/>{' '}
10871089
<a
10881090
href={createCommandLink<ConnectCloudIntegrationsCommandArgs>(
10891091
'gitlens.plus.cloudIntegrations.connect' as Commands,
@@ -1133,18 +1135,15 @@ export function GraphWrapper({
11331135
>
11341136
{repo?.formattedName ?? 'none selected'}
11351137
{repos.length > 1 && (
1136-
<span
1137-
className="codicon codicon-chevron-down action-button__more"
1138-
aria-hidden="true"
1139-
></span>
1138+
<CodeIcon className="action-button__more" icon="chevron-down" aria-hidden="true" />
11401139
)}
11411140
</button>
11421141
<span slot="content">Switch to Another Repository...</span>
11431142
</GlTooltip>
11441143
{allowed && repo && (
11451144
<>
11461145
<span>
1147-
<span className="codicon codicon-chevron-right"></span>
1146+
<CodeIcon icon="chevron-right" />
11481147
</span>
11491148
{branchState?.pr && (
11501149
<GlPopover placement="bottom">
@@ -1188,27 +1187,25 @@ export function GraphWrapper({
11881187
>
11891188
{!branchState?.pr ? (
11901189
branchState?.worktree ? (
1191-
<span
1192-
className="glicon glicon-worktrees-view"
1193-
aria-hidden="true"
1194-
></span>
1190+
<CodeIcon icon="gl-worktrees-view" aria-hidden="true" />
11951191
) : (
1196-
<span className="codicon codicon-git-branch" aria-hidden="true"></span>
1192+
<CodeIcon icon="git-branch" aria-hidden="true" />
11971193
)
11981194
) : (
11991195
''
12001196
)}
12011197
<span className="action-button__truncated">{branchName}</span>
1202-
<span
1203-
className="codicon codicon-chevron-down action-button__more"
1198+
<CodeIcon
1199+
className="action-button__more"
1200+
icon="chevron-down"
12041201
aria-hidden="true"
1205-
></span>
1202+
/>
12061203
</a>
12071204
<div slot="content">
12081205
<span>
12091206
Switch to Another Branch...
12101207
<hr />
1211-
<span className="codicon codicon-git-branch" aria-hidden="true"></span>{' '}
1208+
<CodeIcon icon="git-branch" aria-hidden="true" />{' '}
12121209
<span className="md-code">{branchName}</span>
12131210
{branchState?.worktree ? <i> (in a worktree)</i> : ''}
12141211
</span>
@@ -1223,7 +1220,7 @@ export function GraphWrapper({
12231220
</span>
12241221
</GlButton>
12251222
<span>
1226-
<span className="codicon codicon-chevron-right"></span>
1223+
<CodeIcon icon="chevron-right" />
12271224
</span>
12281225
<GitActionsButtons
12291226
branchName={branchName}
@@ -1247,10 +1244,11 @@ export function GraphWrapper({
12471244
confirm: true,
12481245
})}
12491246
>
1250-
<span className="codicon codicon-custom-git-branch-create action-button__icon"></span>
1247+
<CodeIcon className="action-button__icon" icon="custom-start-work" />
12511248
</a>
12521249
<span slot="content">
1253-
Create New Branch from <span className="codicon codicon-git-branch"></span>
1250+
Create New Branch from
1251+
<CodeIcon icon="git-branch" />
12541252
<span className="md-code">{branchName}</span>
12551253
</span>
12561254
</GlTooltip>
@@ -1263,7 +1261,7 @@ export function GraphWrapper({
12631261
)}`}
12641262
className="action-button"
12651263
>
1266-
<span className="codicon codicon-rocket"></span>
1264+
<CodeIcon icon="rocket" />
12671265
</a>
12681266
<span slot="content">
12691267
<span style={{ whiteSpace: 'break-spaces' }}>
@@ -1320,11 +1318,12 @@ export function GraphWrapper({
13201318
>
13211319
<GlTooltip placement="top" slot="anchor">
13221320
<button type="button" className="action-button">
1323-
<span className={`codicon codicon-filter${hasFilters ? '-filled' : ''}`}></span>
1324-
<span
1325-
className="codicon codicon-chevron-down action-button__more"
1321+
<CodeIcon icon={`filter${hasFilters ? '-filled' : ''}`} />
1322+
<CodeIcon
1323+
className="action-button__more"
1324+
icon="chevron-down"
13261325
aria-hidden="true"
1327-
></span>
1326+
/>
13281327
</button>
13291328
<span slot="content">Graph Filtering</span>
13301329
</GlTooltip>
@@ -1421,7 +1420,7 @@ export function GraphWrapper({
14211420
aria-checked={graphConfig?.minimap ?? false}
14221421
onClick={handleOnMinimapToggle}
14231422
>
1424-
<span className="codicon codicon-graph-line action-button__icon"></span>
1423+
<CodeIcon className="action-button__icon" icon="graph-line"></CodeIcon>
14251424
</button>
14261425
<span slot="content">Toggle Minimap</span>
14271426
</GlTooltip>
@@ -1434,10 +1433,11 @@ export function GraphWrapper({
14341433
>
14351434
<GlTooltip placement="top" distance={7} slot="anchor">
14361435
<button type="button" className="action-button" aria-label="Minimap Options">
1437-
<span
1438-
className="codicon codicon-chevron-down action-button__more"
1436+
<CodeIcon
1437+
className="action-button__more"
1438+
icon="chevron-down"
14391439
aria-hidden="true"
1440-
></span>
1440+
/>
14411441
</button>
14421442
<span slot="content">Minimap Options</span>
14431443
</GlTooltip>

‎src/webviews/apps/plus/graph/actions/fetchButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
22
import React from 'react';
33
import type { BranchState, State } from '../../../../../plus/webviews/graph/protocol';
44
import { createWebviewCommandLink } from '../../../../../system/webview';
5+
import { CodeIcon } from '../../../shared/components/code-icon.react';
56
import { GlTooltip } from '../../../shared/components/overlays/tooltip.react';
67

78
export const FetchButton = ({
@@ -21,7 +22,7 @@ export const FetchButton = ({
2122
href={createWebviewCommandLink('gitlens.graph.fetch', state.webviewId, state.webviewInstanceId)}
2223
className="action-button"
2324
>
24-
<span className="codicon codicon-repo-fetch action-button__icon"></span>
25+
<CodeIcon className="action-button__icon" icon="repo-fetch" />
2526
Fetch {fetchedText && <span className="action-button__small">({fetchedText})</span>}
2627
</a>
2728
<span slot="content" style={{ whiteSpace: 'break-spaces' }}>

‎src/webviews/apps/plus/graph/actions/pushPullButton.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import type { BranchState, State } from '../../../../../plus/webviews/graph/protocol';
44
import { pluralize } from '../../../../../system/string';
55
import { createWebviewCommandLink } from '../../../../../system/webview';
6+
import { CodeIcon } from '../../../shared/components/code-icon.react';
67
import { GlTooltip } from '../../../shared/components/overlays/tooltip.react';
78

89
export const PushPullButton = ({
@@ -42,7 +43,7 @@ export const PushPullButton = ({
4243

4344
if (isBehind) {
4445
action = 'pull';
45-
icon = 'codicon codicon-repo-pull';
46+
icon = 'repo-pull';
4647
label = 'Pull';
4748
tooltip = (
4849
<>
@@ -72,7 +73,7 @@ export const PushPullButton = ({
7273
}
7374
} else {
7475
action = 'push';
75-
icon = 'codicon codicon-repo-push';
76+
icon = 'repo-push';
7677
label = 'Push';
7778
tooltip = (
7879
<>
@@ -91,21 +92,21 @@ export const PushPullButton = ({
9192
href={createWebviewCommandLink(`gitlens.graph.${action}`, state.webviewId, state.webviewInstanceId)}
9293
className={`action-button${isBehind ? ' is-behind' : ''}${isAhead ? ' is-ahead' : ''}`}
9394
>
94-
<span className={`${icon} action-button__icon`}></span>
95+
<CodeIcon className="action-button__icon" icon={icon} />
9596
{label}
9697
<span>
9798
<span className="pill action-button__pill">
9899
{isBehind && (
99100
<span>
100101
{branchState.behind}
101-
<span className="codicon codicon-arrow-down"></span>
102+
<CodeIcon icon="arrow-down" />
102103
</span>
103104
)}
104105
{isAhead && (
105106
<span>
106107
{isBehind && <>&nbsp;&nbsp;</>}
107108
{branchState.ahead}
108-
<span className="codicon codicon-arrow-up"></span>
109+
<CodeIcon icon="arrow-up" />
109110
</span>
110111
)}
111112
</span>
@@ -131,7 +132,7 @@ export const PushPullButton = ({
131132
className="action-button"
132133
aria-label="Force Push"
133134
>
134-
<span className="codicon codicon-repo-force-push" aria-hidden="true"></span>
135+
<CodeIcon icon="repo-force-push" aria-hidden="true" />
135136
</a>
136137
<span slot="content">
137138
Force Push {pluralize('commit', branchState.ahead)} to {remote}

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

Lines changed: 5 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
@use '../../shared/styles/utils';
33
@use '../../shared/styles/icons/utils' as iconUtils;
44
@import '../../shared/base';
5-
@import '../../shared/codicons';
6-
@import '../../shared/glicons';
75
@import '../../../../../node_modules/@gitkraken/gitkraken-components/dist/styles.css';
86

97
@mixin focusStyles() {
@@ -204,7 +202,7 @@ button:not([disabled]),
204202
color: var(--vscode-foreground);
205203
background-color: var(--vscode-editorWidget-background);
206204

207-
.codicon[class*='codicon-'] {
205+
code-icon {
208206
font-size: inherit !important;
209207
line-height: inherit !important;
210208
}
@@ -296,29 +294,13 @@ button:not([disabled]),
296294
border-color: var(--vscode-inputOption-activeBorder);
297295
}
298296

299-
.codicon[class*='codicon-'],
300-
.glicon[class*='glicon-'] {
297+
code-icon {
301298
line-height: 2.2rem;
302299
vertical-align: bottom;
303300
}
304-
305-
.codicon[class*='codicon-graph-line'] {
301+
code-icon[icon='graph-line'] {
306302
transform: translateY(1px);
307303
}
308-
.codicon-custom-git-branch-create {
309-
&:before {
310-
@include iconUtils.codicon('git-branch');
311-
}
312-
&:after {
313-
@include iconUtils.codicon('add');
314-
position: absolute;
315-
right: 0;
316-
bottom: 0;
317-
font-size: 0.6em;
318-
line-height: normal;
319-
transform: translate(-50%, 0%);
320-
}
321-
}
322304

323305
&__pill {
324306
.is-ahead & {
@@ -338,7 +320,7 @@ button:not([disabled]),
338320
margin-right: -0.25rem;
339321
}
340322

341-
&__more.codicon[class*='codicon-']::before {
323+
code-icon#{&}__more::before {
342324
margin-left: -0.25rem;
343325
}
344326

@@ -389,17 +371,6 @@ button:not([disabled]),
389371
}
390372
}
391373

392-
.action-button--narrow {
393-
padding: 0;
394-
width: 2.4rem;
395-
height: 2.4rem;
396-
text-align: center;
397-
398-
.codicon[class*='codicon-graph-line'] {
399-
transform: translateX(2px);
400-
}
401-
}
402-
403374
.action-divider {
404375
display: inline-block;
405376
width: 0.1rem;
@@ -494,7 +465,7 @@ button:not([disabled]),
494465
opacity: 0.5;
495466
}
496467

497-
.codicon[class*='codicon-'] {
468+
code-icon {
498469
font-size: 1.1rem;
499470
position: relative;
500471
}

0 commit comments

Comments
 (0)