@jupyterlab/filebrowser 4.6.0-alpha.4 → 4.6.0-alpha.5

package/style/base.css

@@ -3,6 +3,8 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+@import url('./pathnavigator.css');
+
 /*-----------------------------------------------------------------------------
 | Variables
 |----------------------------------------------------------------------------*/
@@ -54,21 +56,48 @@
 .jp-BreadCrumbs {
   flex: 0 0 auto;
   margin: 8px 12px;
+  cursor: text;
+}
+
+.jp-BreadCrumbs:hover:not(:has(.jp-BreadCrumbs-content:hover)) {
+  background: var(--jp-layout-color2);
+}
+
+/* The container holds breadcrumb icons, separators, and items */
+.jp-BreadCrumbs-container {
+  min-width: 0;
+}
+
+.jp-BreadCrumbs-content {
+  display: inline;
+}
+
+.jp-BreadCrumbs.jp-mod-editMode > .jp-BreadCrumbs-container {
+  display: none;
 }
 
 .jp-BreadCrumbs-item {
   margin: 0 2px;
-  padding: 0 2px;
+  padding: 2px;
   border-radius: var(--jp-border-radius);
   cursor: pointer;
 }
 
+.jp-BreadCrumbs-ellipsis {
+  padding: 0;
+}
+
 .jp-BreadCrumbs-item:hover {
   background-color: var(--jp-layout-color2);
 }
 
-.jp-BreadCrumbs-item:first-child {
-  margin-left: 0;
+.jp-BreadCrumbs-home,
+.jp-BreadCrumbs-preferred {
+  margin-right: 2px;
+}
+
+.jp-BreadCrumbs-item:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
 }
 
 .jp-BreadCrumbs-item.jp-mod-dropTarget {
@@ -76,6 +105,11 @@
   opacity: 0.7;
 }
 
+.jp-BreadCrumbs-item,
+.jp-BreadCrumbs-separator {
+  vertical-align: middle;
+}
+
 /*-----------------------------------------------------------------------------
 | Buttons
 |----------------------------------------------------------------------------*/
@@ -180,12 +214,18 @@
   flex: 1 0 70px;
 }
 
+.jp-DirListing-headerItem.jp-id-created:not([style*='width']) {
+  /* default width before user resizes this column */
+  flex: 1 0 70px;
+}
+
 .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,
+.jp-DirListing-headerItem.jp-id-created,
 .jp-DirListing-headerItem.jp-id-filesize {
   text-align: right;
   /* stylelint-disable */
@@ -195,14 +235,16 @@
 
 /**
  * Use container queries (not yet supported by our version of stylelint)
- * to display either a small or large header for the last-modified column.
+ * to display either a small or large header for the date and file size columns.
  */
 /* stylelint-disable */
-@container (max-width: 300px) {
+@container (max-width: 100px) {
   /* stylelint-enable */
   .jp-DirListing-headerItem.jp-id-modified
     > .jp-DirListing-headerItemText-small,
   .jp-DirListing-headerItem.jp-id-filesize
+    > .jp-DirListing-headerItemText-small,
+  .jp-DirListing-headerItem.jp-id-created
     > .jp-DirListing-headerItemText-small {
     display: inline;
   }
@@ -210,34 +252,8 @@
   .jp-DirListing-headerItem.jp-id-modified
     > .jp-DirListing-headerItemText-large,
   .jp-DirListing-headerItem.jp-id-filesize
-    > .jp-DirListing-headerItemText-large {
-    display: none;
-  }
-}
-
-/* stylelint-disable */
-@container (min-width: 300px) {
-  /* stylelint-enable */
-  .jp-DirListing-headerItem.jp-id-modified
-    > .jp-DirListing-headerItemText-small {
-    display: none;
-  }
-
-  .jp-DirListing-headerItem.jp-id-modified
-    > .jp-DirListing-headerItemText-large {
-    display: inline;
-  }
-}
-
-/* stylelint-disable */
-@container (max-width: 100px) {
-  /* stylelint-enable */
-  .jp-DirListing-headerItem.jp-id-filesize
-    > .jp-DirListing-headerItemText-small {
-    display: inline;
-  }
-
-  .jp-DirListing-headerItem.jp-id-filesize
+    > .jp-DirListing-headerItemText-large,
+  .jp-DirListing-headerItem.jp-id-created
     > .jp-DirListing-headerItemText-large {
     display: none;
   }
@@ -246,12 +262,20 @@
 /* stylelint-disable */
 @container (min-width: 100px) {
   /* stylelint-enable */
+  .jp-DirListing-headerItem.jp-id-modified
+    > .jp-DirListing-headerItemText-small,
   .jp-DirListing-headerItem.jp-id-filesize
+    > .jp-DirListing-headerItemText-small,
+  .jp-DirListing-headerItem.jp-id-created
     > .jp-DirListing-headerItemText-small {
     display: none;
   }
 
+  .jp-DirListing-headerItem.jp-id-modified
+    > .jp-DirListing-headerItemText-large,
   .jp-DirListing-headerItem.jp-id-filesize
+    > .jp-DirListing-headerItemText-large,
+  .jp-DirListing-headerItem.jp-id-created
     > .jp-DirListing-headerItemText-large {
     display: inline;
   }
@@ -382,7 +406,8 @@
 
 .jp-DirListing-itemText,
 .jp-DirListing-itemModified,
-.jp-DirListing-itemFileSize {
+.jp-DirListing-itemFileSize,
+.jp-DirListing-itemCreated {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -417,6 +442,10 @@
   text-align: right;
 }
 
+.jp-DirListing-itemCreated {
+  text-align: right;
+}
+
 .jp-DirListing-editor {
   flex: 1 0 64px;
   outline: none;
@@ -431,7 +460,7 @@
 .jp-DirListing-item.jp-mod-running .jp-DirListing-itemIcon::before {
   color: var(--jp-success-color1);
   content: '\25CF';
-  font-size: 8px;
+  font-size: calc(var(--jp-ui-font-size1) * 8 / 13);
   position: absolute;
   left: -8px;
 }

package/style/pathnavigator.css

@@ -0,0 +1,72 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* PathNavigator contains only the input and the suggestions dropdown */
+.jp-PathNavigator {
+  position: relative;
+  display: inline-block;
+}
+
+.jp-PathNavigator > input {
+  display: none;
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
+  border-radius: var(--jp-border-radius);
+  padding: 2px 6px;
+  font-size: var(--jp-ui-font-size1);
+  height: 20px;
+  border: var(--jp-border-width) solid var(--jp-cell-editor-active-border-color);
+}
+
+.jp-PathNavigator > input:focus {
+  outline: none;
+}
+
+.jp-PathNavigator-suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: var(--jp-layout-color1);
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+  border-radius: var(--jp-border-radius);
+  list-style: none;
+  margin: 2px 0 0;
+  padding: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  box-shadow: var(--jp-elevation-z4);
+}
+
+.jp-PathNavigator-suggestions > li {
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: var(--jp-ui-font-size1);
+}
+
+.jp-PathNavigator-suggestions > li:hover,
+.jp-PathNavigator-suggestions > li.jp-mod-active {
+  background: var(--jp-layout-color2);
+}
+
+.jp-PathNavigator-suggestions > li[data-is-dot] {
+  opacity: 75%;
+}
+
+/*
+ * Edit mode: stretch the PathNavigator to fill the full width.
+ */
+.jp-BreadCrumbs.jp-mod-editMode > .jp-PathNavigator {
+  display: block;
+  flex: 1;
+  position: relative;
+}
+
+.jp-BreadCrumbs.jp-mod-editMode > .jp-PathNavigator > input {
+  display: block;
+}