Merge pull request #72 from kpinnipa/ui-patch

New preview made with mini codeeditor on hover.

Author: jahn96

src/CodeSnippetDisplay.tsx

@@ -18,6 +18,7 @@ import { FileEditor } from '@jupyterlab/fileeditor';
 import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
 import { copyIcon } from '@jupyterlab/ui-components';
 import { LabIcon } from '@jupyterlab/ui-components';
+import { IEditorServices } from '@jupyterlab/codeeditor';
 
 import { IExpandableActionButton } from '@elyra/ui-components';
 
@@ -83,6 +84,7 @@ interface ICodeSnippetDisplayProps {
  codeSnippets: ICodeSnippet[];
  getCurrentWidget: () => Widget;
  openCodeSnippetEditor: (args: any) => void;
+ editorServices: IEditorServices;
 }
 
 /**
@@ -421,6 +423,47 @@ export class CodeSnippetDisplay extends React.Component<
  });
  }
 
+ private _evtMouseLeave(): void {
+ //get rid of preview by clicking anything
+ const preview = document.querySelector('.jp-preview');
+ if (preview) {
+ // if target is not the code snippet name area, then add inactive
+ // if target area is the code snippet name area, previewSnippet widget will handle preview.
+ if (!preview.classList.contains('inactive')) {
+ preview.classList.add('inactive');
+ for (const elem of document.getElementsByClassName('drag-hover')) {
+ if (elem.classList.contains('drag-hover-clicked')) {
+ elem.classList.remove('drag-hover-clicked');
+ }
+ }
+ for (const item of document.getElementsByClassName(
+ 'codeSnippet-item'
+ )) {
+ if (item.classList.contains('codeSnippet-item-clicked')) {
+ item.classList.remove('codeSnippet-item-clicked');
+ }
+ }
+ }
+ }
+ }
+
+ //Set the position of the preview to be next to the snippet title.
+ private _setPreviewPosition(id: string): void {
+ const intID = parseInt(id, 10);
+ const target = event.target as HTMLElement;
+ console.log(target);
+ const realTarget = document.getElementsByClassName(
+ 'expandableContainer-title'
+ )[intID];
+ // distDown is the number of pixels to shift the preview down
+ let distDown: number = realTarget.getBoundingClientRect().top - 40;
+ if (realTarget.getBoundingClientRect().top > window.screen.height / 2) {
+ distDown = distDown - 66;
+ }
+ const final = distDown.toString(10) + 'px';
+ document.documentElement.style.setProperty('--preview-distance', final);
+ }
+
  // Render display of code snippet list
  // To get the variety of color based on code length just append -long to CODE_SNIPPET_ITEM
  private renderCodeSnippet = (
@@ -453,10 +496,11 @@ export class CodeSnippetDisplay extends React.Component<
  {
  id: parseInt(id, 10),
  title: displayName,
- body: new PreviewHandler(codeSnippet),
+ body: new PreviewHandler(),
  codeSnippet: codeSnippet
  },
- this.props.openCodeSnippetEditor
+ this.props.openCodeSnippetEditor,
+ this.props.editorServices
  );
  this.snippetClicked(id);
  }
@@ -485,31 +529,27 @@ export class CodeSnippetDisplay extends React.Component<
  }}
  ></div>
  <div>
- <div
- key={displayName}
- className={TITLE_CLASS}
- // onMouseOver={() => {
- // this.dragHoverStyle(id);
- // }}
- // onMouseOut={() => {
- // this.dragHoverStyleRemove(id);
- // }}
- >
+ <div key={displayName} className={TITLE_CLASS}>
  <span
  id={id}
  title={codeSnippet.name}
  className={DISPLAY_NAME_CLASS}
- onClick={(): void => {
+ onMouseEnter={(event): void => {
  showPreview(
  {
  id: parseInt(id, 10),
  title: displayName,
- body: new PreviewHandler(codeSnippet),
+ body: new PreviewHandler(),
  codeSnippet: codeSnippet
  },
- this.props.openCodeSnippetEditor
+ this.props.openCodeSnippetEditor,
+ this.props.editorServices
  );
  this.snippetClicked(id);
+ this._setPreviewPosition(id);
+ }}
+ onMouseLeave={(): void => {
+ this._evtMouseLeave();
  }}
  >
  {this.boldNameOnSearch(this.state.filterValue, displayName)}
@@ -591,44 +631,21 @@ export class CodeSnippetDisplay extends React.Component<
 }
 
 class PreviewHandler extends Widget {
- constructor(codeSnippet: ICodeSnippet) {
- super({ node: Private.createPreviewNode(codeSnippet) });
+ constructor() {
+ super({ node: Private.createPreviewNode() });
  }
 }
 
 class Private {
- static createPreviewContent(codeSnippet: ICodeSnippet): HTMLElement {
+ static createPreviewContent(): HTMLElement {
  const body = document.createElement('div');
- const previewContainer = document.createElement('div');
- const descriptionContainer = document.createElement('div');
- const descriptionTitle = document.createElement('h4');
- const description = document.createElement('text');
- const preview = document.createElement('text');
-
- previewContainer.className = 'jp-preview-text';
- descriptionContainer.className = 'jp-preview-description-container';
- descriptionTitle.className = 'jp-preview-description-title';
- description.className = 'jp-preview-description';
- preview.className = 'jp-preview-textarea';
-
- descriptionTitle.textContent = 'DESCRIPTION';
- description.textContent = codeSnippet.description;
- preview.textContent = codeSnippet.code.join('\n');
-
- descriptionContainer.appendChild(descriptionTitle);
- descriptionContainer.appendChild(description);
- previewContainer.appendChild(descriptionContainer);
-
- previewContainer.appendChild(preview);
- body.append(previewContainer);
-
  return body;
  }
  /**
  * Create structure for preview of snippet data.
  */
- static createPreviewNode(codeSnippet: ICodeSnippet): HTMLElement {
- return this.createPreviewContent(codeSnippet);
+ static createPreviewNode(): HTMLElement {
+ return this.createPreviewContent();
  }
 }
 

src/CodeSnippetWidget.tsx

@@ -76,7 +76,7 @@ export class CodeSnippetWidget extends ReactWidget {
  renderCodeSnippetsSignal: Signal<this, ICodeSnippet[]>;
  app: JupyterFrontEnd;
  codeSnippetManager: CodeSnippetContentsService;
- // private editorServices: IEditorServices;
+ private editorServices: IEditorServices;
 
  constructor(
  // codeSnippets: ICodeSnippet[],
@@ -86,7 +86,7 @@ export class CodeSnippetWidget extends ReactWidget {
  ) {
  super();
  this.app = app;
- // this.editorServices = editorServices;
+ this.editorServices = editorServices;
  this.getCurrentWidget = getCurrentWidget;
  this._codeSnippetWidgetModel = new CodeSnippetWidgetModel([]);
  this._codeSnippets = this._codeSnippetWidgetModel.snippets;
@@ -176,6 +176,9 @@ export class CodeSnippetWidget extends ReactWidget {
  case 'mousedown':
  this._evtMouseDown(event as IDragEvent);
  break;
+ // case 'mouseleave':
+ // this._evtMouseLeave(event as MouseEvent);
+ // break;
  case 'lm-dragenter':
  this._evtDragEnter(event as IDragEvent);
  break;
@@ -242,6 +245,35 @@ export class CodeSnippetWidget extends ReactWidget {
  return undefined;
  }
 
+ // private _evtMouseLeave(event: MouseEvent): void {
+ // //get rid of preview by clicking anything
+ // const target = event.target as HTMLElement;
+
+ // const preview = document.querySelector('.jp-preview');
+ // if (preview) {
+ // // if target is not the code snippet name area, then add inactive
+ // // if target area is the code snippet name area, previewSnippet widget will handle preview.
+ // if (
+ // !preview.classList.contains('inactive') &&
+ // !target.classList.contains('expandableContainer-name')
+ // ) {
+ // preview.classList.add('inactive');
+ // for (const elem of document.getElementsByClassName('drag-hover')) {
+ // if (elem.classList.contains('drag-hover-clicked')) {
+ // elem.classList.remove('drag-hover-clicked');
+ // }
+ // }
+ // for (const item of document.getElementsByClassName(
+ // 'codeSnippet-item'
+ // )) {
+ // if (item.classList.contains('codeSnippet-item-clicked')) {
+ // item.classList.remove('codeSnippet-item-clicked');
+ // }
+ // }
+ // }
+ // }
+ // }
+
  private _evtMouseDown(event: MouseEvent): void {
  //get rid of preview by clicking anything
  const target = event.target as HTMLElement;
@@ -427,6 +459,7 @@ export class CodeSnippetWidget extends ReactWidget {
  codeSnippets={codeSnippets}
  getCurrentWidget={this.getCurrentWidget}
  openCodeSnippetEditor={this.openCodeSnippetEditor.bind(this)}
+ editorServices={this.editorServices}
  />
  </div>
  )}