Skip to content

Commit ec0ad1b

Browse files
fcollonvalfcollonval
committed
All icons are injected as SVG
1 parent baad620 commit ec0ad1b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+143
-357
lines changed

‎src/components/BranchMenu.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
wrapperClass
1919
} from '../style/BranchMenu';
2020
import { NewBranchDialog } from './NewBranchDialog';
21+
import { branchIcon } from '../style/icons';
2122

2223
const CHANGES_ERR_MSG =
2324
'The current branch contains files with uncommitted changes. Please commit or discard these changes before switching to or creating another branch.';
@@ -185,7 +186,7 @@ export class BranchMenu extends React.Component<
185186
key={branch.name}
186187
onClick={this._onBranchClickFactory(branch.name)}
187188
>
188-
<span className={listItemIconClass} />
189+
<branchIcon.react className={listItemIconClass} tag="span" />
189190
{branch.name}
190191
</ListItem>
191192
);

‎src/components/FileList.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -359,7 +359,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
359359
<React.Fragment>
360360
<ActionButton
361361
className={hiddenButtonStyle}
362-
iconName={'open-file'}
362+
iconName={'git-open-file'}
363363
title={'Open this file'}
364364
onClick={openFile}
365365
/>
@@ -433,7 +433,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
433433
<React.Fragment>
434434
<ActionButton
435435
className={hiddenButtonStyle}
436-
iconName={'open-file'}
436+
iconName={'git-open-file'}
437437
title={'Open this file'}
438438
onClick={openFile}
439439
/>
@@ -501,7 +501,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
501501
<React.Fragment>
502502
<ActionButton
503503
className={hiddenButtonStyle}
504-
iconName={'open-file'}
504+
iconName={'git-open-file'}
505505
title={'Open this file'}
506506
onClick={async () => {
507507
openListedFile(file, this.props.model);
@@ -560,7 +560,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
560560
let actions: JSX.Element = (
561561
<ActionButton
562562
className={hiddenButtonStyle}
563-
iconName={'open-file'}
563+
iconName={'git-open-file'}
564564
title={'Open this file'}
565565
onClick={openFile}
566566
/>
@@ -576,7 +576,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
576576
<React.Fragment>
577577
<ActionButton
578578
className={hiddenButtonStyle}
579-
iconName={'open-file'}
579+
iconName={'git-open-file'}
580580
title={'Open this file'}
581581
onClick={openFile}
582582
/>
@@ -602,7 +602,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
602602
<React.Fragment>
603603
<ActionButton
604604
className={hiddenButtonStyle}
605-
iconName={'open-file'}
605+
iconName={'git-open-file'}
606606
title={'Open this file'}
607607
onClick={openFile}
608608
/>

‎src/components/GitStage.tsx

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1+
import { caretDownIcon, caretRightIcon } from '@jupyterlab/ui-components';
12
import * as React from 'react';
2-
import { classes } from 'typestyle';
33
import {
4-
caretdownImageStyle,
5-
caretrightImageStyle,
64
changeStageButtonStyle,
7-
sectionHeaderSizeStyle,
85
sectionAreaStyle,
96
sectionFileContainerStyle,
10-
sectionHeaderLabelStyle
7+
sectionHeaderLabelStyle,
8+
sectionHeaderSizeStyle
119
} from '../style/GitStageStyle';
1210

1311
/**
@@ -49,18 +47,19 @@ export const GitStage: React.FunctionComponent<IGitStageProps> = (
4947
<div className={sectionAreaStyle}>
5048
{props.collapsible && (
5149
<button
52-
className={classes(
53-
changeStageButtonStyle,
54-
showFiles && props.nFiles > 0
55-
? caretdownImageStyle
56-
: caretrightImageStyle
57-
)}
50+
className={changeStageButtonStyle}
5851
onClick={() => {
5952
if (props.nFiles > 0) {
6053
setShowFiles(!showFiles);
6154
}
6255
}}
63-
/>
56+
>
57+
{showFiles && props.nFiles > 0 ? (
58+
<caretDownIcon.react />
59+
) : (
60+
<caretRightIcon.react />
61+
)}
62+
</button>
6463
)}
6564
<span className={sectionHeaderLabelStyle}>{props.heading}</span>
6665
{props.actions}

‎src/components/NewBranchDialog.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {
3131
titleClass,
3232
titleWrapperClass
3333
} from '../style/NewBranchDialog';
34+
import { branchIcon } from '../style/icons';
3435

3536
const BRANCH_DESC = {
3637
current:
@@ -278,7 +279,7 @@ export class NewBranchDialog extends React.Component<
278279
key={branch.name}
279280
onClick={this._onBranchClickFactory(branch.name)}
280281
>
281-
<span className={classes(listItemIconClass, 'jp-Icon-16')} />
282+
<branchIcon.react className={listItemIconClass} tag="span" />
282283
<div className={listItemContentClass}>
283284
<p
284285
className={classes(

‎src/components/PastCommitNode.tsx

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1+
import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
2+
import { caretDownIcon, caretUpIcon } from '@jupyterlab/ui-components';
13
import * as React from 'react';
24
import { classes } from 'typestyle';
3-
import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
45
import { GitExtension } from '../model';
5-
import { Git } from '../tokens';
66
import {
7-
branchWrapperClass,
87
branchClass,
9-
collapseIconButtonClass,
8+
branchWrapperClass,
109
commitBodyClass,
1110
commitExpandedClass,
1211
commitHeaderClass,
1312
commitHeaderItemClass,
1413
commitWrapperClass,
15-
expandIconButtonClass,
1614
iconButtonClass,
1715
localBranchClass,
1816
remoteBranchClass,
1917
workingBranchClass
2018
} from '../style/PastCommitNode';
19+
import { Git } from '../tokens';
2120
import { SinglePastCommitInfo } from './SinglePastCommitInfo';
2221

2322
/**
@@ -99,15 +98,11 @@ export class PastCommitNode extends React.Component<
9998
<span className={commitHeaderItemClass}>
10099
{this.props.commit.date}
101100
</span>
102-
<span
103-
className={classes(
104-
iconButtonClass,
105-
this.state.expanded
106-
? collapseIconButtonClass
107-
: expandIconButtonClass,
108-
'jp-Icon-16'
109-
)}
110-
/>
101+
{this.state.expanded ? (
102+
<caretUpIcon.react className={iconButtonClass} tag="span" />
103+
) : (
104+
<caretDownIcon.react className={iconButtonClass} tag="span" />
105+
)}
111106
</div>
112107
<div className={branchWrapperClass}>{this._renderBranches()}</div>
113108
<div className={commitBodyClass}>

‎src/components/SinglePastCommitInfo.tsx

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -160,27 +160,21 @@ export class SinglePastCommitInfo extends React.Component<
160160
<div>
161161
<div className={commitClass}>
162162
<div className={commitOverviewNumbersClass}>
163-
<span>
164-
<fileIcon.react
165-
className={iconClass}
166-
tag="span"
167-
title="# Files Changed"
168-
/>
163+
<span title="# Files Changed">
164+
<fileIcon.react className={iconClass} tag="span" />
169165
{this.state.numFiles}
170166
</span>
171-
<span>
167+
<span title="# Insertions">
172168
<insertionsMadeIcon.react
173169
className={classes(iconClass, insertionsIconClass)}
174-
tag="div"
175-
title="# Insertions"
170+
tag="span"
176171
/>
177172
{this.state.insertions}
178173
</span>
179-
<span>
174+
<span title="# Deletions">
180175
<deletionsMadeIcon.react
181176
className={classes(iconClass, deletionsIconClass)}
182-
tag="div"
183-
title="# Deletions"
177+
tag="span"
184178
/>
185179
{this.state.deletions}
186180
</span>

‎src/components/Toolbar.tsx

Lines changed: 31 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import * as React from 'react';
2-
import { classes } from 'typestyle';
31
import { Dialog, showDialog } from '@jupyterlab/apputils';
42
import { PathExt } from '@jupyterlab/coreutils';
5-
63
import {
7-
// NOTE: keep in alphabetical order
8-
branchIconClass,
9-
closeMenuIconClass,
10-
openMenuIconClass,
11-
pullButtonClass,
12-
pushButtonClass,
13-
refreshButtonClass,
14-
repoIconClass,
4+
caretDownIcon,
5+
caretUpIcon,
6+
refreshIcon
7+
} from '@jupyterlab/ui-components';
8+
import * as React from 'react';
9+
import { classes } from 'typestyle';
10+
import { branchIcon, desktopIcon, pullIcon, pushIcon } from '../style/icons';
11+
import {
12+
spacer,
1513
toolbarButtonClass,
1614
toolbarClass,
1715
toolbarMenuButtonClass,
@@ -23,9 +21,10 @@ import {
2321
toolbarMenuWrapperClass,
2422
toolbarNavClass
2523
} from '../style/Toolbar';
24+
import { IGitExtension } from '../tokens';
2625
import { GitCredentialsForm } from '../widgets/CredentialsBox';
2726
import { GitPullPushDialog, Operation } from '../widgets/gitPushPull';
28-
import { IGitExtension } from '../tokens';
27+
import { ActionButton } from './ActionButton';
2928
import { BranchMenu } from './BranchMenu';
3029

3130
/**
@@ -177,24 +176,24 @@ export class Toolbar extends React.Component<IToolbarProps, IToolbarState> {
177176
private _renderTopNav(): React.ReactElement {
178177
return (
179178
<div className={toolbarNavClass}>
180-
<button
181-
className={classes(toolbarButtonClass, pullButtonClass, 'jp-Icon-16')}
182-
title={'Pull latest changes'}
179+
<span className={spacer} />
180+
<ActionButton
181+
className={toolbarButtonClass}
182+
iconName={pullIcon.name}
183183
onClick={this._onPullClick}
184+
title={'Pull latest changes'}
184185
/>
185-
<button
186-
className={classes(toolbarButtonClass, pushButtonClass, 'jp-Icon-16')}
187-
title={'Push committed changes'}
186+
<ActionButton
187+
className={toolbarButtonClass}
188+
iconName={pushIcon.name}
188189
onClick={this._onPushClick}
190+
title={'Push committed changes'}
189191
/>
190-
<button
191-
className={classes(
192-
toolbarButtonClass,
193-
refreshButtonClass,
194-
'jp-Icon-16'
195-
)}
196-
title={'Refresh the repository to detect local and remote changes'}
192+
<ActionButton
193+
className={toolbarButtonClass}
194+
iconName={refreshIcon.name}
197195
onClick={this._onRefreshClick}
196+
title={'Refresh the repository to detect local and remote changes'}
198197
/>
199198
</div>
200199
);
@@ -214,26 +213,13 @@ export class Toolbar extends React.Component<IToolbarProps, IToolbarState> {
214213
title={`Current repository: ${this.state.repository}`}
215214
onClick={this._onRepositoryClick}
216215
>
217-
<span
218-
className={classes(
219-
toolbarMenuButtonIconClass,
220-
repoIconClass,
221-
'jp-Icon-16'
222-
)}
223-
/>
216+
<desktopIcon.react className={toolbarMenuButtonIconClass} />
224217
<div className={toolbarMenuButtonTitleWrapperClass}>
225218
<p className={toolbarMenuButtonTitleClass}>Current Repository</p>
226219
<p className={toolbarMenuButtonSubtitleClass}>
227220
{PathExt.basename(this.state.repository)}
228221
</p>
229222
</div>
230-
{/*<span
231-
className={classes(
232-
toolbarMenuButtonIconClass,
233-
this.state.repoMenu ? closeMenuIconClass : openMenuIconClass,
234-
'jp-Icon-16'
235-
)}
236-
/>*/}
237223
</button>
238224
{this.state.repoMenu ? null : null}
239225
</div>
@@ -259,26 +245,18 @@ export class Toolbar extends React.Component<IToolbarProps, IToolbarState> {
259245
title={`Change the current branch: ${this.state.branch}`}
260246
onClick={this._onBranchClick}
261247
>
262-
<span
263-
className={classes(
264-
toolbarMenuButtonIconClass,
265-
branchIconClass,
266-
'jp-Icon-16'
267-
)}
268-
/>
248+
<branchIcon.react className={toolbarMenuButtonIconClass} />
269249
<div className={toolbarMenuButtonTitleWrapperClass}>
270250
<p className={toolbarMenuButtonTitleClass}>Current Branch</p>
271251
<p className={toolbarMenuButtonSubtitleClass}>
272252
{this.state.branch}
273253
</p>
274254
</div>
275-
<span
276-
className={classes(
277-
toolbarMenuButtonIconClass,
278-
this.state.branchMenu ? closeMenuIconClass : openMenuIconClass,
279-
'jp-Icon-16'
280-
)}
281-
/>
255+
{this.state.branchMenu ? (
256+
<caretUpIcon.react className={toolbarMenuButtonIconClass} />
257+
) : (
258+
<caretDownIcon.react className={toolbarMenuButtonIconClass} />
259+
)}
282260
</button>
283261
{this.state.branchMenu ? (
284262
<BranchMenu

‎src/style/BranchMenu.ts

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -120,10 +120,5 @@ export const listItemIconClass = style({
120120
width: '16px',
121121
height: '16px',
122122

123-
marginRight: '4px',
124-
125-
backgroundImage: 'var(--jp-icon-git-branch)',
126-
backgroundSize: '16px',
127-
backgroundRepeat: 'no-repeat',
128-
backgroundPosition: 'center'
123+
marginRight: '4px'
129124
});

‎src/style/CloneButton.ts

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/style/GitStageStyle.ts

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,20 +52,8 @@ export const sectionHeaderSizeStyle = style({
5252
export const changeStageButtonStyle = style({
5353
flex: '0 0 auto',
5454
backgroundColor: 'transparent',
55-
backgroundPosition: 'center',
56-
backgroundRepeat: 'no-repeat',
57-
backgroundSize: '20px',
58-
transition: 'background-color 0.1s ease',
5955
height: '13px',
6056
width: '12px',
6157
border: 'none',
6258
outline: 'none'
6359
});
64-
65-
export const caretdownImageStyle = style({
66-
backgroundImage: 'var(--jp-icon-caret-down)'
67-
});
68-
69-
export const caretrightImageStyle = style({
70-
backgroundImage: 'var(--jp-icon-caret-right)'
71-
});

0 commit comments

Comments
 (0)