Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use LabIcon in code-snippet package #463

Merged
merged 4 commits into from May 1, 2020
Merged

Use LabIcon in code-snippet package #463

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
52aede5
Use LabIcon in code-snippet package
ajbozarth Apr 30, 2020
9322909
Update packages/application/style/code-snippet.svg
ajbozarth Apr 30, 2020
6fd6b52
Merge branch 'master' into icons
ajbozarth Apr 30, 2020
40c04d7
fixed failing tests
ajbozarth Apr 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/application/src/icons.tsx
View file
Open in desktop
Expand Up @@ -17,9 +17,14 @@
import { LabIcon } from '@jupyterlab/ui-components';

import elyraSvg from '../style/codait-piebrainlogo-jupyter-color.svg';
import codeSnippetSvg from '../style/code-snippet.svg';
import dragDropSvg from '../style/dragdrop.svg';
import pipelineSvg from '../style/pipeline-flow.svg';

export const codeSnippetIcon = new LabIcon({
name: 'elyra:code-snippet',
svgstr: codeSnippetSvg
});
export const dragDropIcon = new LabIcon({
name: 'elyra:dragdrop',
svgstr: dragDropSvg
Expand Down
11 changes: 11 additions & 0 deletions packages/application/style/code-snippet.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 3 additions & 4 deletions packages/code-snippet/src/CodeSnippetWidget.tsx
View file
Open in desktop
Expand Up @@ -19,6 +19,7 @@ import '../style/index.css';
import { ReactWidget, UseSignal, Clipboard } from '@jupyterlab/apputils';
import { IDocumentManager } from '@jupyterlab/docmanager';
import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
import { copyIcon, addIcon } from '@jupyterlab/ui-components';
import { Message } from '@lumino/messaging';
import { Signal } from '@lumino/signaling';

Expand All @@ -33,8 +34,6 @@ import { ExpandableComponent } from './ExpandableComponent';
const CODE_SNIPPETS_CLASS = 'elyra-CodeSnippets';
const CODE_SNIPPETS_HEADER_CLASS = 'elyra-codeSnippetsHeader';
const CODE_SNIPPET_ITEM = 'elyra-codeSnippet-item';
const COPY_ICON_CLASS = 'elyra-copy-icon';
const INSERT_ICON_CLASS = 'elyra-add-icon';

/**
* CodeSnippetTable props.
Expand All @@ -58,14 +57,14 @@ class CodeSnippetTable extends React.Component<ICodeSnippetProps> {
const actionButtons = [
{
title: 'Copy',
iconClass: COPY_ICON_CLASS,
icon: copyIcon,
onClick: (): void => {
Clipboard.copyToSystem(codeSnippet.code.join('\n'));
}
},
{
title: 'Insert',
iconClass: INSERT_ICON_CLASS,
icon: addIcon,
onClick: (): void => {
console.log('INSERT CODE BUTTON CLICKED');
}
Expand Down
47 changes: 30 additions & 17 deletions packages/code-snippet/src/ExpandableComponent.tsx
View file
Open in desktop
Expand Up @@ -16,6 +16,11 @@

import '../style/index.css';

import {
caretDownIcon,
caretRightIcon,
LabIcon
} from '@jupyterlab/ui-components';
import * as React from 'react';

/**
Expand All @@ -25,8 +30,6 @@ const DETAILS_VISIBLE_CLASS = 'elyra-expandableContainer-details-visible';
const DETAILS_HIDDEN_CLASS = 'elyra-expandableContainer-details-hidden';
const DISPLAY_NAME_CLASS = 'elyra-expandableContainer-name';
const ELYRA_BUTTON_CLASS = 'elyra-button';
const DOWN_ICON_CLASS = 'elyra-downArrow-icon';
const UP_ICON_CLASS = 'elyra-upArrow-icon';
const BUTTON_CLASS = 'elyra-expandableContainer-button';
const TITLE_CLASS = 'elyra-expandableContainer-title';
const ACTION_BUTTONS_WRAPPER_CLASS = 'elyra-expandableContainer-action-buttons';
Expand All @@ -37,7 +40,7 @@ const ACTION_BUTTON_CLASS = 'elyra-expandableContainer-actionButton';
*/
export interface IExpandableActionButton {
title: string;
iconClass: string;
icon: LabIcon;
onClick: Function;
}

Expand Down Expand Up @@ -76,15 +79,25 @@ export class ExpandableComponent extends React.Component<
<div>
<div key={this.props.displayName} className={TITLE_CLASS}>
<button
className={
buttonClasses +
' ' +
(this.state.expanded ? UP_ICON_CLASS : DOWN_ICON_CLASS)
}
className={buttonClasses}
onClick={(): void => {
this.toggleDetailsDisplay();
}}
></button>
>
{this.state.expanded ? (
<caretDownIcon.react
tag="span"
elementPosition="center"
width="20px"
/>
) : (
<caretRightIcon.react
tag="span"
elementPosition="center"
width="20px"
/>
)}
</button>
<span
title={this.props.tooltip}
className={DISPLAY_NAME_CLASS}
Expand All @@ -101,17 +114,17 @@ export class ExpandableComponent extends React.Component<
<button
key={btn.title}
title={btn.title}
className={
buttonClasses +
' ' +
ACTION_BUTTON_CLASS +
' ' +
btn.iconClass
}
className={buttonClasses + ' ' + ACTION_BUTTON_CLASS}
onClick={(): void => {
btn.onClick();
}}
></button>
>
<btn.icon.react
tag="span"
elementPosition="center"
width="16px"
/>
</button>
);
})}
</div>
Expand Down
5 changes: 3 additions & 2 deletions packages/code-snippet/src/index.ts
View file
Open in desktop
Expand Up @@ -16,6 +16,8 @@

import '../style/index.css';

import { codeSnippetIcon } from '@elyra/application';

import {
JupyterFrontEnd,
JupyterFrontEndPlugin
Expand All @@ -38,8 +40,7 @@ export const code_snippet_extension: JupyterFrontEndPlugin<void> = {

const codeSnippetWidget = new CodeSnippetWidget();
codeSnippetWidget.id = CODE_SNIPPET_EXTENSION_ID;
codeSnippetWidget.title.iconClass =
'jp-SideBar-tabIcon elyra-codeSnippet-icon';
codeSnippetWidget.title.icon = codeSnippetIcon;
codeSnippetWidget.title.caption = 'Code Snippet';

// Rank has been chosen somewhat arbitrarily to give priority to the running
Expand Down
1 change: 0 additions & 1 deletion packages/code-snippet/style/code-snippet.svg
View file
Open in desktop

This file was deleted.

39 changes: 2 additions & 37 deletions packages/code-snippet/style/index.css
View file
Open in desktop
Expand Up @@ -14,50 +14,15 @@
* limitations under the License.
*/

.elyra-codeSnippet-icon {
background-image: url('./code-snippet.svg');
}

.lm-TabBar-tabIcon.jp-SideBar-tabIcon.elyra-codeSnippet-icon {
background-size: 30px;
}

.elyra-expandableContainer-button {
background-color: transparent;
vertical-align: middle;
}

.elyra-expandableContainer-button:hover {
cursor: pointer;
}

.elyra-downArrow-icon,
.elyra-upArrow-icon {
background-size: 18px;
padding: 0;
width: 20px;
}

.elyra-downArrow-icon {
background-image: var(--jp-icon-caret-right);
}

.elyra-upArrow-icon {
background-image: var(--jp-icon-caret-down);
}

.elyra-expandableContainer-actionButton {
background-size: 15px;
padding: 0;
width: 20px;
}

.elyra-copy-icon {
background-image: var(--jp-icon-copy);
}

.elyra-add-icon {
background-image: var(--jp-icon-add);
.elyra-expandableContainer-button:hover {
cursor: pointer;
}

.elyra-expandableContainer-actionButton:hover {
Expand Down