@jupyterlab/filebrowser 4.3.0-alpha.1 → 4.3.0-beta.0

package/src/model.ts

@@ -383,6 +383,7 @@ export class FileBrowserModel implements IDisposable {
    * Upload a `File` object.
    *
    * @param file - The `File` object to upload.
+   * @param path - The directory into which the file should be uploaded; defaults to current directory.
    *
    * @returns A promise containing the new file contents model.
    *
@@ -392,7 +393,7 @@ export class FileBrowserModel implements IDisposable {
    * Jupyter Server, it will ask for confirmation then upload the file in 1 MB
    * chunks.
    */
-  async upload(file: File): Promise<Contents.IModel> {
+  async upload(file: File, path?: string): Promise<Contents.IModel> {
     // We do not support Jupyter Notebook version less than 4, and Jupyter
     // Server advertises itself as version 1 and supports chunked
     // uploading. We assume any version less than 4.0.0 to be Jupyter Server
@@ -428,7 +429,7 @@ export class FileBrowserModel implements IDisposable {
     }
     await this._uploadCheckDisposed();
     const chunkedUpload = supportsChunked && file.size > CHUNK_SIZE;
-    return await this._upload(file, chunkedUpload);
+    return await this._upload(file, chunkedUpload, path);
   }
 
   private async _shouldUploadLarge(file: File): Promise<boolean> {
@@ -451,10 +452,12 @@ export class FileBrowserModel implements IDisposable {
    */
   private async _upload(
     file: File,
-    chunked: boolean
+    chunked: boolean,
+    uploadPath?: string
   ): Promise<Contents.IModel> {
     // Gather the file model parameters.
-    let path = this._model.path;
+    let path =
+      typeof uploadPath === 'undefined' ? this._model.path : uploadPath;
     path = path ? path + '/' + file.name : file.name;
     const name = file.name;
     const type: Contents.ContentType = 'file';

package/style/base.css

@@ -29,6 +29,20 @@
   row-gap: 12px;
 }
 
+.jp-FileBrowser-filterToolbar {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+}
+
+.jp-FileBrowser-filterToolbar.jp-Toolbar {
+  border-bottom: none;
+  height: auto;
+  margin: 0 12px 6px;
+  box-shadow: none;
+  padding: 0;
+}
+
 .jp-FileBrowser-Panel {
   flex: 1 1 auto;
   display: flex;
@@ -64,7 +78,8 @@
 | Buttons
 |----------------------------------------------------------------------------*/
 
-.jp-FileBrowser-toolbar > .jp-Toolbar-item {
+.jp-FileBrowser-toolbar > .jp-Toolbar-item,
+.jp-FileBrowser-filterToolbar > .jp-Toolbar-item {
   flex: 0 0 auto;
   padding-left: 0;
   align-items: center;
@@ -72,7 +87,7 @@
 }
 
 .jp-FileBrowser-toolbar > .jp-Toolbar-item .jp-ToolbarButtonComponent {
-  width: 40px;
+  width: 28px;
 }
 
 /*-----------------------------------------------------------------------------
@@ -87,19 +102,15 @@
   margin-top: 12px;
 }
 
-.jp-LastModified-hidden {
-  display: none;
-}
-
-.jp-FileSize-hidden {
+.jp-FileBrowser .lm-AccordionPanel > h3:first-child {
   display: none;
 }
 
-.jp-FileBrowser .lm-AccordionPanel > h3:first-child {
-  display: none;
+.jp-FileBrowser-filterToolbar > .jp-FileBrowser-filterBox {
+  width: 100%;
 }
 
-.jp-FileBrowser-toolbar > .jp-FileBrowser-filterBox {
+.jp-FileBrowser-filterBox > .jp-FilterBox {
   width: 100%;
 }
 
@@ -132,24 +143,48 @@
   border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
   box-shadow: var(--jp-toolbar-box-shadow);
   z-index: 2;
+  user-select: none;
 }
 
 .jp-DirListing-headerItem {
   padding: 4px 12px 2px;
   font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  box-sizing: border-box;
+  display: flex;
+}
+
+.jp-DirListing-headerItemText {
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.jp-DirListing-header > .jp-DirListing-headerItem:last-child {
+  flex-grow: 1;
 }
 
 .jp-DirListing-headerItem:hover {
   background: var(--jp-layout-color2);
 }
 
-.jp-DirListing-headerItem.jp-id-name {
+.jp-DirListing-headerItem.jp-id-name:not([style*='width']) {
+  /* default width before user resizes this column */
   flex: 1 1 126px;
 }
 
-.jp-DirListing-headerItem.jp-id-modified {
+.jp-DirListing-headerItem.jp-id-modified:not([style*='width']) {
+  /* default width before user resizes this column */
   flex: 1 0 70px;
-  border-left: var(--jp-border-width) solid var(--jp-border-color2);
+}
+
+.jp-DirListing-headerItem.jp-id-filesize:not([style*='width']) {
+  /* default width before user resizes this column */
+  flex: 0 0 75px;
+}
+
+.jp-DirListing-headerItem.jp-id-modified {
   text-align: right;
   /* stylelint-disable */
   container-type: inline-size;
@@ -189,29 +224,9 @@
 }
 
 .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;
-  padding: 4px;
-  border-left: var(--jp-border-width) solid var(--jp-border-color2);
-  text-align: right;
-  color: var(--jp-border-color2);
-}
-
-.jp-DirListing-narrow .jp-id-narrow {
-  display: block;
-}
-
-.jp-DirListing-narrow .jp-id-modified,
-.jp-DirListing-narrow .jp-DirListing-itemModified {
-  display: none;
-}
-
 .jp-DirListing-headerItem.jp-mod-selected {
   font-weight: 600;
 }
@@ -245,7 +260,6 @@
 
 .jp-DirListing-item {
   display: flex;
-  flex-direction: row;
   align-items: center;
   padding: 4px 12px;
   -webkit-user-select: none;
@@ -254,6 +268,11 @@
   user-select: none;
 }
 
+.jp-DirListing-item > :last-child {
+  flex-grow: 1;
+  margin-right: 2px;
+}
+
 .jp-DirListing-checkboxWrapper {
   /* Increases hit area of checkbox. */
   padding: 4px;
@@ -288,6 +307,33 @@
   }
 }
 
+.jp-DirListing-resizeHandle {
+  min-width: var(--jp-border-width);
+  background: var(--jp-border-color2);
+  height: calc(100% - 4px);
+
+  /* border increases the area where handle can be grabbed */
+  border: 2px solid var(--jp-layout-color1);
+}
+
+.jp-DirListing-resizeHandle.jp-mod-active {
+  background: var(--jp-brand-color1);
+  border-color: var(--jp-brand-color1);
+}
+
+.jp-DirListing-resizeHandle.jp-mod-active:hover {
+  border-color: var(--jp-brand-color1);
+}
+
+.jp-DirListing-resizeHandle:hover {
+  cursor: col-resize;
+  border-color: var(--jp-border-color2);
+}
+
+.jp-DirListing-itemName {
+  display: flex;
+}
+
 .jp-DirListing-item[data-is-dot] {
   opacity: 75%;
 }
@@ -310,12 +356,16 @@
   margin-right: 4px;
 }
 
-.jp-DirListing-itemText {
-  flex: 1 1 106px;
-  white-space: nowrap;
+.jp-DirListing-itemText,
+.jp-DirListing-itemModified,
+.jp-DirListing-itemFileSize {
   overflow: hidden;
   text-overflow: ellipsis;
-  user-select: none;
+  white-space: nowrap;
+}
+
+.jp-DirListing-itemName:not([style*='width']) > .jp-DirListing-itemText {
+  flex: 1 1 106px;
 }
 
 .jp-DirListing-item:has(.jp-DirListing-itemText:focus-visible) {
@@ -331,17 +381,15 @@
   outline-color: var(--jp-layout-color1);
 }
 
-.jp-DirListing-item > .jp-DirListing-itemText:focus {
+.jp-DirListing-item > .jp-DirListing-itemName > .jp-DirListing-itemText:focus {
   outline: 0;
 }
 
 .jp-DirListing-itemModified {
-  flex: 1 0 83px;
   text-align: right;
 }
 
 .jp-DirListing-itemFileSize {
-  flex: 0 0 90px;
   text-align: right;
 }