@jupyterlab/filebrowser 4.0.0-alpha.8 → 4.0.0-beta.0

package/src/uploadstatus.tsx

@@ -0,0 +1,259 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+//
+
+import { WidgetTracker } from '@jupyterlab/apputils';
+import { IChangedArgs } from '@jupyterlab/coreutils';
+import { GroupItem, ProgressBar, TextItem } from '@jupyterlab/statusbar';
+import {
+  ITranslator,
+  nullTranslator,
+  TranslationBundle
+} from '@jupyterlab/translation';
+import { VDomModel, VDomRenderer } from '@jupyterlab/ui-components';
+import { ArrayExt } from '@lumino/algorithm';
+import React from 'react';
+import { FileBrowser, FileBrowserModel, IUploadModel } from '.';
+
+/**
+ * Half-spacing between items in the overall status item.
+ */
+const HALF_SPACING = 4;
+
+/**
+ * A pure function component for a FileUpload status item.
+ *
+ * @param props: the props for the component.
+ *
+ * @returns a tsx component for the file upload status.
+ */
+function FileUploadComponent(
+  props: FileUploadComponent.IProps
+): React.ReactElement<FileUploadComponent.IProps> {
+  const translator = props.translator || nullTranslator;
+  const trans = translator.load('jupyterlab');
+  return (
+    <GroupItem spacing={HALF_SPACING}>
+      <TextItem source={trans.__('Uploading…')} />
+      <ProgressBar percentage={props.upload} />
+    </GroupItem>
+  );
+}
+
+/**
+ * A namespace for FileUploadComponent statics.
+ */
+namespace FileUploadComponent {
+  /**
+   * The props for the FileUploadComponent.
+   */
+  export interface IProps {
+    /**
+     * The current upload percentage, from 0 to 100.
+     */
+    upload: number;
+
+    /**
+     * The language translator.
+     */
+    translator?: ITranslator;
+  }
+}
+
+/**
+ * The time for which to show the "Complete!" message after uploading.
+ */
+const UPLOAD_COMPLETE_MESSAGE_MILLIS: number = 2000;
+
+/**
+ * Status bar item to display file upload progress.
+ */
+export class FileUploadStatus extends VDomRenderer<FileUploadStatus.Model> {
+  /**
+   * Construct a new FileUpload status item.
+   */
+  constructor(opts: FileUploadStatus.IOptions) {
+    super(
+      new FileUploadStatus.Model(
+        opts.tracker.currentWidget && opts.tracker.currentWidget.model
+      )
+    );
+    this.translator = opts.translator || nullTranslator;
+    this._trans = this.translator.load('jupyterlab');
+    this._tracker = opts.tracker;
+    this._tracker.currentChanged.connect(this._onBrowserChange);
+  }
+
+  /**
+   * Render the FileUpload status.
+   */
+  render(): JSX.Element {
+    const uploadPaths = this.model!.items;
+    if (uploadPaths.length > 0) {
+      const item = this.model!.items[0];
+
+      if (item.complete) {
+        return <TextItem source={this._trans.__('Complete!')} />;
+      } else {
+        return (
+          <FileUploadComponent
+            upload={this.model!.items[0].progress}
+            translator={this.translator}
+          />
+        );
+      }
+    } else {
+      return <FileUploadComponent upload={100} translator={this.translator} />;
+    }
+  }
+
+  dispose(): void {
+    super.dispose();
+    this._tracker.currentChanged.disconnect(this._onBrowserChange);
+  }
+
+  private _onBrowserChange = (
+    tracker: WidgetTracker<FileBrowser>,
+    browser: FileBrowser | null
+  ) => {
+    if (browser === null) {
+      this.model!.browserModel = null;
+    } else {
+      this.model!.browserModel = browser.model;
+    }
+  };
+
+  private readonly translator: ITranslator;
+  private _trans: TranslationBundle;
+  private _tracker: WidgetTracker<FileBrowser>;
+}
+
+/**
+ * A namespace for FileUpload class statics.
+ */
+export namespace FileUploadStatus {
+  /**
+   * The VDomModel for the FileUpload renderer.
+   */
+  export class Model extends VDomModel {
+    /**
+     * Construct a new model.
+     */
+    constructor(browserModel: FileBrowserModel | null) {
+      super();
+      this.browserModel = browserModel;
+    }
+
+    /**
+     * The currently uploading items.
+     */
+    get items(): IFileUploadItem[] {
+      return this._items;
+    }
+
+    /**
+     * The current file browser model.
+     */
+    get browserModel(): FileBrowserModel | null {
+      return this._browserModel;
+    }
+    set browserModel(browserModel: FileBrowserModel | null) {
+      const oldBrowserModel = this._browserModel;
+      if (oldBrowserModel) {
+        oldBrowserModel.uploadChanged.disconnect(this._uploadChanged);
+      }
+
+      this._browserModel = browserModel;
+      this._items = [];
+
+      if (this._browserModel !== null) {
+        this._browserModel.uploadChanged.connect(this._uploadChanged);
+      }
+
+      this.stateChanged.emit(void 0);
+    }
+
+    /**
+     * Handle an uploadChanged event in the filebrowser model.
+     */
+    private _uploadChanged = (
+      browse: FileBrowserModel,
+      uploads: IChangedArgs<IUploadModel>
+    ) => {
+      if (uploads.name === 'start') {
+        this._items.push({
+          path: uploads.newValue.path,
+          progress: uploads.newValue.progress * 100,
+          complete: false
+        });
+      } else if (uploads.name === 'update') {
+        const idx = ArrayExt.findFirstIndex(
+          this._items,
+          val => val.path === uploads.oldValue.path
+        );
+        if (idx !== -1) {
+          this._items[idx].progress = uploads.newValue.progress * 100;
+        }
+      } else if (uploads.name === 'finish') {
+        const finishedItem = ArrayExt.findFirstValue(
+          this._items,
+          val => val.path === uploads.oldValue.path
+        );
+
+        if (finishedItem) {
+          finishedItem.complete = true;
+          setTimeout(() => {
+            ArrayExt.removeFirstOf(this._items, finishedItem);
+            this.stateChanged.emit(void 0);
+          }, UPLOAD_COMPLETE_MESSAGE_MILLIS);
+        }
+      } else if (uploads.name === 'failure') {
+        ArrayExt.removeFirstWhere(
+          this._items,
+          val => val.path === uploads.newValue.path
+        );
+      }
+
+      this.stateChanged.emit(void 0);
+    };
+
+    private _items: Array<IFileUploadItem> = [];
+    private _browserModel: FileBrowserModel | null = null;
+  }
+
+  /**
+   * Options for creating the upload status item.
+   */
+  export interface IOptions {
+    /**
+     * The application file browser tracker.
+     */
+    readonly tracker: WidgetTracker<FileBrowser>;
+
+    /**
+     * The translation language bundle.
+     */
+    readonly translator?: ITranslator;
+  }
+}
+
+/**
+ * The interface for an item that is being uploaded to
+ * the file system.
+ */
+interface IFileUploadItem {
+  /**
+   * The path on the filesystem that is being uploaded to.
+   */
+  path: string;
+
+  /**
+   * The upload progress fraction.
+   */
+  progress: number;
+
+  /**
+   * Whether the upload is complete.
+   */
+  complete: boolean;
+}

package/style/base.css

@@ -23,6 +23,8 @@
 }
 
 .jp-FileBrowser-toolbar.jp-Toolbar {
+  flex-wrap: wrap;
+  row-gap: 12px;
   border-bottom: none;
   height: auto;
   margin: 8px 12px 0;
@@ -70,29 +72,14 @@
   flex: 0 0 auto;
   padding-left: 0;
   padding-right: 2px;
+  align-items: center;
+  height: unset;
 }
 
 .jp-FileBrowser-toolbar > .jp-Toolbar-item .jp-ToolbarButtonComponent {
   width: 40px;
 }
 
-.jp-FileBrowser-toolbar
-  .jp-ToolbarButtonComponent[data-command='filebrowser:create-main-launcher'] {
-  width: 72px;
-  background: var(--jp-brand-color1);
-}
-
-.jp-FileBrowser-toolbar
-  .jp-ToolbarButtonComponent[data-command='filebrowser:create-main-launcher']:focus-visible {
-  background-color: var(--jp-accept-color-active, var(--jp-brand-color0));
-}
-
-.jp-FileBrowser-toolbar
-  .jp-ToolbarButtonComponent[data-command='filebrowser:create-main-launcher']
-  .jp-icon3 {
-  fill: var(--jp-layout-color1);
-}
-
 /*-----------------------------------------------------------------------------
 | Other styles
 |----------------------------------------------------------------------------*/
@@ -109,10 +96,8 @@
   display: none;
 }
 
-.jp-FileBrowser-filterBox {
-  padding: 0;
-  flex: 0 0 auto;
-  margin: 8px 12px 0;
+.jp-FileSize-hidden {
+  display: none;
 }
 
 .jp-FileBrowser .lm-AccordionPanel > h3:first-child {
@@ -131,13 +116,15 @@
 }
 
 .jp-DirListing:focus-visible {
-  border: 1px solid var(--jp-brand-color1);
+  outline: 1px solid var(--jp-brand-color1);
+  outline-offset: -2px;
 }
 
 .jp-DirListing-header {
   flex: 0 0 auto;
   display: flex;
   flex-direction: row;
+  align-items: center;
   overflow: hidden;
   border-top: var(--jp-border-width) solid var(--jp-border-color2);
   border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
@@ -164,6 +151,12 @@
   text-align: right;
 }
 
+.jp-DirListing-headerItem.jp-id-filesize {
+  flex: 0 0 75px;
+  border-left: var(--jp-border-width) solid var(--jp-border-color2);
+  text-align: right;
+}
+
 .jp-id-narrow {
   display: none;
   flex: 0 0 5px;
@@ -216,6 +209,7 @@
 .jp-DirListing-item {
   display: flex;
   flex-direction: row;
+  align-items: center;
   padding: 4px 12px;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -223,6 +217,40 @@
   user-select: none;
 }
 
+.jp-DirListing-checkboxWrapper {
+  /* Increases hit area of checkbox. */
+  padding: 4px;
+}
+
+.jp-DirListing-header
+  .jp-DirListing-checkboxWrapper
+  + .jp-DirListing-headerItem {
+  padding-left: 4px;
+}
+
+.jp-DirListing-content .jp-DirListing-checkboxWrapper {
+  position: relative;
+  left: -4px;
+  margin: -4px 0 -4px -8px;
+}
+
+.jp-DirListing-checkboxWrapper.jp-mod-visible {
+  visibility: visible;
+}
+
+/* For devices that support hovering, hide checkboxes until hovered, selected...
+*/
+@media (hover: hover) {
+  .jp-DirListing-checkboxWrapper {
+    visibility: hidden;
+  }
+
+  .jp-DirListing-item:hover .jp-DirListing-checkboxWrapper,
+  .jp-DirListing-item.jp-mod-selected .jp-DirListing-checkboxWrapper {
+    visibility: visible;
+  }
+}
+
 .jp-DirListing-item[data-is-dot] {
   opacity: 75%;
 }
@@ -258,10 +286,17 @@
   text-align: right;
 }
 
+.jp-DirListing-itemFileSize {
+  flex: 0 0 90px;
+  text-align: right;
+}
+
 .jp-DirListing-editor {
   flex: 1 0 64px;
   outline: none;
   border: none;
+  color: var(--jp-ui-font-color1);
+  background-color: var(--jp-layout-color1);
 }
 
 .jp-DirListing-item.jp-mod-running .jp-DirListing-itemIcon::before {
@@ -290,15 +325,6 @@
   transform: translateX(-40%) translateY(-58%);
 }
 
-.jp-DirListing-deadSpace {
-  flex: 1 1 auto;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  overflow: auto;
-  background-color: var(--jp-layout-color1);
-}
-
 .jp-Document {
   min-width: 120px;
   min-height: 120px;