Skip to content

Commit ca8cf31

Browse files
fcollonvalfcollonval
authored
Merge pull request #647 from fcollonval/all-icons-as-svg
All icons as svg
2 parents 99849b7 + 5664a3d commit ca8cf31

Some content is hidden

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

58 files changed

+899
-1091
lines changed

‎src/components/ActionButton.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { LabIcon } from '@jupyterlab/ui-components';
12
import * as React from 'react';
23
import { classes } from 'typestyle';
3-
import { LabIcon } from '@jupyterlab/ui-components';
44
import { actionButtonStyle } from '../style/ActionButtonStyle';
55

66
/**
@@ -16,9 +16,9 @@ export interface IActionButtonProps {
1616
*/
1717
disabled?: boolean;
1818
/**
19-
* Icon name
19+
* Icon
2020
*/
21-
iconName: string;
21+
icon: LabIcon;
2222
/**
2323
* Button title
2424
*/
@@ -37,14 +37,15 @@ export interface IActionButtonProps {
3737
export const ActionButton: React.FunctionComponent<IActionButtonProps> = (
3838
props: IActionButtonProps
3939
) => {
40+
const { disabled, className, title, onClick, icon } = props;
4041
return (
4142
<button
42-
disabled={props.disabled}
43-
className={classes(actionButtonStyle, props.className)}
44-
title={props.title}
45-
onClick={props.onClick}
43+
disabled={disabled}
44+
className={classes(actionButtonStyle, className)}
45+
title={title}
46+
onClick={onClick}
4647
>
47-
<LabIcon.resolveReact icon={props.iconName} />
48+
<icon.react elementPosition="center" tag="span" />
4849
</button>
4950
);
5051
};

‎src/components/BranchMenu.tsx

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import * as React from 'react';
2-
import { classes } from 'typestyle';
1+
import { Dialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
32
import List from '@material-ui/core/List';
43
import ListItem from '@material-ui/core/ListItem';
54
import ClearIcon from '@material-ui/icons/Clear';
6-
import { Dialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
7-
import { Git, IGitExtension } from '../tokens';
5+
import * as React from 'react';
6+
import { classes } from 'typestyle';
87
import {
98
activeListItemClass,
109
filterClass,
@@ -17,6 +16,7 @@ import {
1716
newBranchButtonClass,
1817
wrapperClass
1918
} from '../style/BranchMenu';
19+
import { Git, IGitExtension } from '../tokens';
2020
import { NewBranchDialog } from './NewBranchDialog';
2121

2222
const CHANGES_ERR_MSG =
@@ -174,18 +174,25 @@ export class BranchMenu extends React.Component<
174174
if (this.state.filter && !branch.name.includes(this.state.filter)) {
175175
return null;
176176
}
177+
const isActive = branch.name === this.state.current;
177178
return (
178179
<ListItem
179180
button
180181
title={`Switch to branch: ${branch.name}`}
181182
className={classes(
182183
listItemClass,
183-
branch.name === this.state.current ? activeListItemClass : null
184+
isActive ? activeListItemClass : null
184185
)}
185186
key={branch.name}
186187
onClick={this._onBranchClickFactory(branch.name)}
187188
>
188-
<span className={listItemIconClass} />
189+
<span
190+
className={classes(
191+
'jp-git-icon',
192+
listItemIconClass,
193+
isActive && 'jp-git-selected'
194+
)}
195+
/>
189196
{branch.name}
190197
</ListItem>
191198
);

‎src/components/FileList.tsx

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
1-
import * as React from 'react';
21
import { Dialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
32
import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
43
import { ISettingRegistry } from '@jupyterlab/settingregistry';
54
import { Menu } from '@lumino/widgets';
5+
import * as React from 'react';
66
import { GitExtension } from '../model';
77
import { hiddenButtonStyle } from '../style/ActionButtonStyle';
88
import { fileListWrapperClass } from '../style/FileListStyle';
9+
import {
10+
addIcon,
11+
diffIcon,
12+
discardIcon,
13+
openIcon,
14+
removeIcon
15+
} from '../style/icons';
916
import { Git } from '../tokens';
1017
import { openListedFile } from '../utils';
1118
import { ActionButton } from './ActionButton';
@@ -383,7 +390,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
383390
<ActionButton
384391
className={hiddenButtonStyle}
385392
disabled={files.length === 0}
386-
iconName={'git-remove'}
393+
icon={removeIcon}
387394
title={'Unstage all changes'}
388395
onClick={this.resetAllStagedFiles}
389396
/>
@@ -404,14 +411,14 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
404411
<React.Fragment>
405412
<ActionButton
406413
className={hiddenButtonStyle}
407-
iconName={'open-file'}
414+
icon={openIcon}
408415
title={'Open this file'}
409416
onClick={openFile}
410417
/>
411418
{diffButton}
412419
<ActionButton
413420
className={hiddenButtonStyle}
414-
iconName={'git-remove'}
421+
icon={removeIcon}
415422
title={'Unstage this change'}
416423
onClick={() => {
417424
this.resetStagedFile(file.to);
@@ -449,14 +456,14 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
449456
<ActionButton
450457
className={hiddenButtonStyle}
451458
disabled={disabled}
452-
iconName={'git-discard'}
459+
icon={discardIcon}
453460
title={'Discard All Changes'}
454461
onClick={this.discardAllUnstagedFiles}
455462
/>
456463
<ActionButton
457464
className={hiddenButtonStyle}
458465
disabled={disabled}
459-
iconName={'git-add'}
466+
icon={addIcon}
460467
title={'Stage all changes'}
461468
onClick={this.addAllUnstagedFiles}
462469
/>
@@ -478,22 +485,22 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
478485
<React.Fragment>
479486
<ActionButton
480487
className={hiddenButtonStyle}
481-
iconName={'open-file'}
488+
icon={openIcon}
482489
title={'Open this file'}
483490
onClick={openFile}
484491
/>
485492
{diffButton}
486493
<ActionButton
487494
className={hiddenButtonStyle}
488-
iconName={'git-discard'}
495+
icon={discardIcon}
489496
title={'Discard changes'}
490497
onClick={() => {
491498
this.discardChanges(file);
492499
}}
493500
/>
494501
<ActionButton
495502
className={hiddenButtonStyle}
496-
iconName={'git-add'}
503+
icon={addIcon}
497504
title={'Stage this change'}
498505
onClick={() => {
499506
this.addFile(file.to);
@@ -529,7 +536,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
529536
<ActionButton
530537
className={hiddenButtonStyle}
531538
disabled={files.length === 0}
532-
iconName={'git-add'}
539+
icon={addIcon}
533540
title={'Track all untracked files'}
534541
onClick={this.addAllUntrackedFiles}
535542
/>
@@ -546,15 +553,15 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
546553
<React.Fragment>
547554
<ActionButton
548555
className={hiddenButtonStyle}
549-
iconName={'open-file'}
556+
icon={openIcon}
550557
title={'Open this file'}
551-
onClick={async () => {
558+
onClick={() => {
552559
openListedFile(file, this.props.model);
553560
}}
554561
/>
555562
<ActionButton
556563
className={hiddenButtonStyle}
557-
iconName={'git-add'}
564+
icon={addIcon}
558565
title={'Track this file'}
559566
onClick={() => {
560567
this.addFile(file.to);
@@ -588,7 +595,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
588595
<ActionButton
589596
className={hiddenButtonStyle}
590597
disabled={files.length === 0}
591-
iconName={'git-discard'}
598+
icon={discardIcon}
592599
title={'Discard All Changes'}
593600
onClick={this.discardAllChanges}
594601
/>
@@ -605,7 +612,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
605612
let actions: JSX.Element = (
606613
<ActionButton
607614
className={hiddenButtonStyle}
608-
iconName={'open-file'}
615+
icon={openIcon}
609616
title={'Open this file'}
610617
onClick={openFile}
611618
/>
@@ -625,14 +632,14 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
625632
<React.Fragment>
626633
<ActionButton
627634
className={hiddenButtonStyle}
628-
iconName={'open-file'}
635+
icon={openIcon}
629636
title={'Open this file'}
630637
onClick={openFile}
631638
/>
632639
{diffButton}
633640
<ActionButton
634641
className={hiddenButtonStyle}
635-
iconName={'git-discard'}
642+
icon={discardIcon}
636643
title={'Discard changes'}
637644
onClick={() => {
638645
this.discardChanges(file);
@@ -652,7 +659,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
652659
<React.Fragment>
653660
<ActionButton
654661
className={hiddenButtonStyle}
655-
iconName={'open-file'}
662+
icon={openIcon}
656663
title={'Open this file'}
657664
onClick={openFile}
658665
/>
@@ -707,7 +714,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
707714
(isDiffSupported(file.to) || !file.is_binary) && (
708715
<ActionButton
709716
className={hiddenButtonStyle}
710-
iconName={'git-diff'}
717+
icon={diffIcon}
711718
title={'Diff this file'}
712719
onClick={() => this._openDiffView(file, currentRef)}
713720
/>

‎src/components/FilePath.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,8 @@ export interface IFilePathProps {
2121
selected?: boolean;
2222
}
2323

24-
function getFileIconClass(props: IFilePathProps) {
25-
return classes(
26-
fileIconStyle,
27-
getFileIconClassName(props.filepath, props.selected)
28-
);
24+
function getFileIconClass(path: string): string {
25+
return getFileIconClassName(path);
2926
}
3027

3128
export const FilePath: React.FunctionComponent<IFilePathProps> = (
@@ -38,7 +35,14 @@ export const FilePath: React.FunctionComponent<IFilePathProps> = (
3835

3936
return (
4037
<React.Fragment>
41-
<span className={getFileIconClass(props)} />
38+
<span
39+
className={classes(
40+
fileIconStyle,
41+
'jp-git-icon',
42+
getFileIconClass(props.filepath),
43+
props.selected && 'jp-git-selected'
44+
)}
45+
/>
4246
<span className={fileLabelStyle}>
4347
{filename}
4448
<span className={folderLabelStyle}>{folder}</span>

‎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: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,14 @@ export class NewBranchDialog extends React.Component<
278278
key={branch.name}
279279
onClick={this._onBranchClickFactory(branch.name)}
280280
>
281-
<span className={classes(listItemIconClass, 'jp-Icon-16')} />
281+
<span
282+
className={classes(
283+
'jp-git-icon',
284+
listItemIconClass,
285+
'jp-Icon-16',
286+
isBold && 'jp-git-selected'
287+
)}
288+
/>
282289
<div className={listItemContentClass}>
283290
<p
284291
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}>

0 commit comments

Comments
 (0)