Skip to content

Commit 3dbb23d

Browse files
committed
More coherent naming with JLab core
1 parent ec0ad1b commit 3dbb23d

22 files changed

+77
-65
lines changed

src/components/ActionButton.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ export interface IActionButtonProps {
1616
*/
1717
disabled?: boolean;
1818
/**
19-
* Icon name
19+
* Icon
2020
*/
21-
iconName: string;
21+
icon: LabIcon.IMaybeResolvable;
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+
{LabIcon.resolveReact({ icon })}
4849
</button>
4950
);
5051
};

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';
@@ -338,7 +345,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
338345
<ActionButton
339346
className={hiddenButtonStyle}
340347
disabled={files.length === 0}
341-
iconName={'git-remove'}
348+
icon={removeIcon}
342349
title={'Unstage all changes'}
343350
onClick={this.resetAllStagedFiles}
344351
/>
@@ -359,14 +366,14 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
359366
<React.Fragment>
360367
<ActionButton
361368
className={hiddenButtonStyle}
362-
iconName={'git-open-file'}
369+
icon={openIcon}
363370
title={'Open this file'}
364371
onClick={openFile}
365372
/>
366373
{diffButton}
367374
<ActionButton
368375
className={hiddenButtonStyle}
369-
iconName={'git-remove'}
376+
icon={removeIcon}
370377
title={'Unstage this change'}
371378
onClick={() => {
372379
this.resetStagedFile(file.to);
@@ -404,14 +411,14 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
404411
<ActionButton
405412
className={hiddenButtonStyle}
406413
disabled={disabled}
407-
iconName={'git-discard'}
414+
icon={discardIcon}
408415
title={'Discard All Changes'}
409416
onClick={this.discardAllUnstagedFiles}
410417
/>
411418
<ActionButton
412419
className={hiddenButtonStyle}
413420
disabled={disabled}
414-
iconName={'git-add'}
421+
icon={addIcon}
415422
title={'Stage all changes'}
416423
onClick={this.addAllUnstagedFiles}
417424
/>
@@ -433,22 +440,22 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
433440
<React.Fragment>
434441
<ActionButton
435442
className={hiddenButtonStyle}
436-
iconName={'git-open-file'}
443+
icon={openIcon}
437444
title={'Open this file'}
438445
onClick={openFile}
439446
/>
440447
{diffButton}
441448
<ActionButton
442449
className={hiddenButtonStyle}
443-
iconName={'git-discard'}
450+
icon={discardIcon}
444451
title={'Discard changes'}
445452
onClick={() => {
446453
this.discardChanges(file.to);
447454
}}
448455
/>
449456
<ActionButton
450457
className={hiddenButtonStyle}
451-
iconName={'git-add'}
458+
icon={addIcon}
452459
title={'Stage this change'}
453460
onClick={() => {
454461
this.addFile(file.to);
@@ -484,7 +491,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
484491
<ActionButton
485492
className={hiddenButtonStyle}
486493
disabled={files.length === 0}
487-
iconName={'git-add'}
494+
icon={addIcon}
488495
title={'Track all untracked files'}
489496
onClick={this.addAllUntrackedFiles}
490497
/>
@@ -501,15 +508,15 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
501508
<React.Fragment>
502509
<ActionButton
503510
className={hiddenButtonStyle}
504-
iconName={'git-open-file'}
511+
icon={openIcon}
505512
title={'Open this file'}
506-
onClick={async () => {
513+
onClick={() => {
507514
openListedFile(file, this.props.model);
508515
}}
509516
/>
510517
<ActionButton
511518
className={hiddenButtonStyle}
512-
iconName={'git-add'}
519+
icon={addIcon}
513520
title={'Track this file'}
514521
onClick={() => {
515522
this.addFile(file.to);
@@ -543,7 +550,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
543550
<ActionButton
544551
className={hiddenButtonStyle}
545552
disabled={files.length === 0}
546-
iconName={'git-discard'}
553+
icon={discardIcon}
547554
title={'Discard All Changes'}
548555
onClick={this.discardAllChanges}
549556
/>
@@ -560,7 +567,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
560567
let actions: JSX.Element = (
561568
<ActionButton
562569
className={hiddenButtonStyle}
563-
iconName={'git-open-file'}
570+
icon={openIcon}
564571
title={'Open this file'}
565572
onClick={openFile}
566573
/>
@@ -576,14 +583,14 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
576583
<React.Fragment>
577584
<ActionButton
578585
className={hiddenButtonStyle}
579-
iconName={'git-open-file'}
586+
icon={openIcon}
580587
title={'Open this file'}
581588
onClick={openFile}
582589
/>
583590
{diffButton}
584591
<ActionButton
585592
className={hiddenButtonStyle}
586-
iconName={'git-discard'}
593+
icon={discardIcon}
587594
title={'Discard changes'}
588595
onClick={() => {
589596
this.discardChanges(file.to);
@@ -602,7 +609,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
602609
<React.Fragment>
603610
<ActionButton
604611
className={hiddenButtonStyle}
605-
iconName={'git-open-file'}
612+
icon={openIcon}
606613
title={'Open this file'}
607614
onClick={openFile}
608615
/>
@@ -646,7 +653,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
646653
(isDiffSupported(file.to) || !file.is_binary) && (
647654
<ActionButton
648655
className={hiddenButtonStyle}
649-
iconName={'git-diff'}
656+
icon={diffIcon}
650657
title={'Diff this file'}
651658
onClick={() => this._openDiffView(file, currentRef)}
652659
/>

src/components/FilePath.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { classes } from 'typestyle';
33
import {
4-
// fileIconStyle,
4+
fileIconStyle,
55
fileLabelStyle,
66
folderLabelStyle
77
} from '../style/FilePathStyle';
@@ -39,7 +39,7 @@ export const FilePath: React.FunctionComponent<IFilePathProps> = (
3939
<React.Fragment>
4040
<LabIcon.resolveReact
4141
icon={props.filetype.icon}
42-
iconClass={classes(props.filetype.iconClass, 'jp-Icon')}
42+
iconClass={classes(props.filetype.iconClass, fileIconStyle)}
4343
elementPosition="center"
4444
tag="span"
4545
/>

src/components/SinglePastCommitInfo.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import * as React from 'react';
22
import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
33
import { fileIcon } from '@jupyterlab/ui-components';
4-
import { insertionsMadeIcon, deletionsMadeIcon } from '../style/icons';
4+
import {
5+
insertionsMadeIcon,
6+
deletionsMadeIcon,
7+
discardIcon,
8+
rewindIcon,
9+
diffIcon
10+
} from '../style/icons';
511
import { classes } from 'typestyle/';
612
import { GitExtension } from '../model';
713
import { Git } from '../tokens';
@@ -185,13 +191,13 @@ export class SinglePastCommitInfo extends React.Component<
185191
Changed
186192
<ActionButton
187193
className={actionButtonClass}
188-
iconName="git-discard"
194+
icon={discardIcon}
189195
title="Revert changes introduced by this commit"
190196
onClick={this._onRevertClick}
191197
/>
192198
<ActionButton
193199
className={actionButtonClass}
194-
iconName="git-rewind"
200+
icon={rewindIcon}
195201
title="Discard changes introduced *after* this commit (hard reset)"
196202
onClick={this._onResetClick}
197203
/>
@@ -241,7 +247,7 @@ export class SinglePastCommitInfo extends React.Component<
241247
>
242248
<FilePath filepath={path} filetype={file.type} />
243249
{flg ? (
244-
<ActionButton iconName="git-diff" title="View file changes" />
250+
<ActionButton icon={diffIcon} title="View file changes" />
245251
) : null}
246252
</li>
247253
);

src/components/Toolbar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -179,19 +179,19 @@ export class Toolbar extends React.Component<IToolbarProps, IToolbarState> {
179179
<span className={spacer} />
180180
<ActionButton
181181
className={toolbarButtonClass}
182-
iconName={pullIcon.name}
182+
icon={pullIcon}
183183
onClick={this._onPullClick}
184184
title={'Pull latest changes'}
185185
/>
186186
<ActionButton
187187
className={toolbarButtonClass}
188-
iconName={pushIcon.name}
188+
icon={pushIcon}
189189
onClick={this._onPushClick}
190190
title={'Push committed changes'}
191191
/>
192192
<ActionButton
193193
className={toolbarButtonClass}
194-
iconName={refreshIcon.name}
194+
icon={refreshIcon}
195195
onClick={this._onRefreshClick}
196196
title={'Refresh the repository to detect local and remote changes'}
197197
/>

src/style/FilePathStyle.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import { style } from 'typestyle';
22

33
export const fileIconStyle = style({
4-
backgroundPosition: 'center',
5-
backgroundRepeat: 'no-repeat',
6-
backgroundSize: '16px',
74
flex: '0 0 auto',
85
marginRight: '4px',
96
minHeight: '16px',

src/style/icons.ts

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,71 @@
11
import { LabIcon } from '@jupyterlab/ui-components';
2+
23
// icon svg import statements
3-
import deletionsMadeSvg from '../../style/images/deletions-made-icon.svg';
4-
import desktopSvg from '../../style/images/desktop.svg';
5-
import diffSvg from '../../style/images/diff-hover.svg';
6-
import discardSvg from '../../style/images/discard.svg';
7-
import branchSvg from '../../style/images/git-branch.svg';
8-
import gitSvg from '../../style/images/git-icon.svg';
9-
import pullSvg from '../../style/images/git-pull.svg';
10-
import pushSvg from '../../style/images/git-push.svg';
11-
import insertionsMadeSvg from '../../style/images/insertions-made-icon.svg';
12-
import removeSvg from '../../style/images/move-file-down.svg';
13-
import addSvg from '../../style/images/move-file-up.svg';
14-
import openSvg from '../../style/images/open-file.svg';
15-
import rewindSvg from '../../style/images/rewind.svg';
16-
import cloneSvg from '../../style/images/git-clone-icon.svg';
4+
import addSvg from '../../style/icons/add.svg';
5+
import branchSvg from '../../style/icons/branch.svg';
6+
import cloneSvg from '../../style/icons/clone.svg';
7+
import deletionsMadeSvg from '../../style/icons/deletions.svg';
8+
import desktopSvg from '../../style/icons/desktop.svg';
9+
import diffSvg from '../../style/icons/diff.svg';
10+
import discardSvg from '../../style/icons/discard.svg';
11+
import gitSvg from '../../style/icons/git.svg';
12+
import insertionsMadeSvg from '../../style/icons/insertions.svg';
13+
import openSvg from '../../style/icons/open-file.svg';
14+
import pullSvg from '../../style/icons/pull.svg';
15+
import pushSvg from '../../style/icons/push.svg';
16+
import removeSvg from '../../style/icons/remove.svg';
17+
import rewindSvg from '../../style/icons/rewind.svg';
1718

1819
export const gitIcon = new LabIcon({ name: 'git', svgstr: gitSvg });
1920
export const deletionsMadeIcon = new LabIcon({
20-
name: 'git-deletionsMade',
21+
name: 'git:deletions',
2122
svgstr: deletionsMadeSvg
2223
});
2324
export const insertionsMadeIcon = new LabIcon({
24-
name: 'git-insertionsMade',
25+
name: 'git:insertions',
2526
svgstr: insertionsMadeSvg
2627
});
2728
export const addIcon = new LabIcon({
28-
name: 'git-add',
29+
name: 'git:add',
2930
svgstr: addSvg
3031
});
3132
export const branchIcon = new LabIcon({
32-
name: 'git-branch',
33+
name: 'git:branch',
3334
svgstr: branchSvg
3435
});
3536
export const cloneIcon = new LabIcon({
36-
name: 'git-clone',
37+
name: 'git:clone',
3738
svgstr: cloneSvg
3839
});
3940
export const desktopIcon = new LabIcon({
40-
name: 'git-desktop',
41+
name: 'git:desktop',
4142
svgstr: desktopSvg
4243
});
4344
export const diffIcon = new LabIcon({
44-
name: 'git-diff',
45+
name: 'git:diff',
4546
svgstr: diffSvg
4647
});
4748
export const discardIcon = new LabIcon({
48-
name: 'git-discard',
49+
name: 'git:discard',
4950
svgstr: discardSvg
5051
});
5152
export const openIcon = new LabIcon({
52-
name: 'git-open-file',
53+
name: 'git:open-file',
5354
svgstr: openSvg
5455
});
5556
export const pullIcon = new LabIcon({
56-
name: 'git-pull',
57+
name: 'git:pull',
5758
svgstr: pullSvg
5859
});
5960
export const pushIcon = new LabIcon({
60-
name: 'git-push',
61+
name: 'git:push',
6162
svgstr: pushSvg
6263
});
6364
export const removeIcon = new LabIcon({
64-
name: 'git-remove',
65+
name: 'git:remove',
6566
svgstr: removeSvg
6667
});
6768
export const rewindIcon = new LabIcon({
68-
name: 'git-rewind',
69+
name: 'git:rewind',
6970
svgstr: rewindSvg
7071
});
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
 (0)