Styled file browser item drag state to look identical to the cells in the file browser, changed the multiple selection drag state to state number of items instead of having the number in parenthesis

src/default-theme/icons.css

@@ -44,6 +44,11 @@
 }
 
 
+.jp-DragIcon {
+  margin-right: 4px;
+}
+
+
 .jp-EditIcon {
   background-image: url(icons/md/edit.svg);
 }

src/filebrowser/index.css

@@ -205,7 +205,7 @@
 
 
 .jp-DirListing-item.jp-mod-dropTarget {
-  background: #FEDBC4;
+  background: var(--jp-brand-color3);
 }
 
 
@@ -280,9 +280,13 @@
 
 .jp-DirListing-item.p-mod-drag-image,
 .jp-DirListing-item.jp-mod-selected.p-mod-drag-image {
+  font-size: var(--jp-ui-font-size1);
+  padding-left: 4px;
+  margin-left: 4px;
+  width: 160px;
   background-color: #FFFFFF;
-  box-shadow: 5px 5px 10px rgba(46,46,46,0.5);
-  border-radius: 3px;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  border-radius: 0px;
   color: var(--jp-ui-font-color1);
   transform: translateX(-40%) translateY(-58%);
 }

src/filebrowser/listing.ts

@@ -136,12 +136,18 @@ const MODIFIED_ID_CLASS = 'jp-id-modified';
 const FILE_TYPE_CLASS = 'jp-FileIcon';
 
 /**
- * The class name added to a folder type content item.
+ * The class name added to a material icon content item.
  */
 const FOLDER_TYPE_CLASS = 'jp-type-folder';
 const FOLDER_MATERIAL_ICON_CLASS = 'jp-OpenFolderIcon';
 const NOTEBOOK_MATERIAL_ICON_CLASS = 'jp-NotebookIcon';
 const MATERIAL_ICON_CLASS = 'jp-MaterialIcon';
+
+/**
+ * The class name added to drag state icons to add space between the icon and the file name
+ */
+const DRAG_ICON_CLASS = 'jp-DragIcon';
+
 /**
  * The class name added to a notebook type content item.
  */
@@ -987,7 +993,7 @@ class DirListing extends Widget {
     }
 
     // Create the drag image.
-    let dragImage = this.renderer.createDragImage(source, selectedNames.length);
+    let dragImage = this.renderer.createDragImage(source, selectedNames.length, item);
 
     // Set up the drag event.
     this._drag = new Drag({
@@ -1381,7 +1387,7 @@ namespace DirListing {
      *
      * @returns An element to use as the drag image.
      */
-    createDragImage(node: HTMLElement, count: number): HTMLElement;
+    createDragImage(node: HTMLElement, count: number, model: Contents.IModel): HTMLElement;
   }
 
   /**
@@ -1550,15 +1556,27 @@ namespace DirListing {
      *
      * @returns An element to use as the drag image.
      */
-    createDragImage(node: HTMLElement, count: number): HTMLElement {
+    createDragImage(node: HTMLElement, count: number, model: Contents.IModel): HTMLElement {
       let dragImage = node.cloneNode(true) as HTMLElement;
       let modified = utils.findElement(dragImage, ITEM_MODIFIED_CLASS);
+      var iconNode = utils.findElement(dragImage, ITEM_ICON_CLASS);
       dragImage.removeChild(modified as HTMLElement);
+      if (model) {
+        switch (model.type) {
+          case 'directory':
+            iconNode.className = MATERIAL_ICON_CLASS + ' ' + FOLDER_MATERIAL_ICON_CLASS + ' ' + DRAG_ICON_CLASS;
+            break;
+          case 'notebook':
+            iconNode.className = MATERIAL_ICON_CLASS + ' ' + NOTEBOOK_MATERIAL_ICON_CLASS + ' ' + DRAG_ICON_CLASS;
+            break;
+          default:
+            iconNode.className = MATERIAL_ICON_CLASS + ' ' + FILE_TYPE_CLASS + ' ' + DRAG_ICON_CLASS;
+            break;
+        }
+      }
       if (count > 1) {
         let nameNode = utils.findElement(dragImage, ITEM_TEXT_CLASS);
-        nameNode.textContent = '(' + count + ')';
-        let iconNode = utils.findElement(dragImage, ITEM_ICON_CLASS);
-        iconNode.className = `${ITEM_ICON_CLASS} ${FILE_TYPE_CLASS}`;
+        nameNode.textContent = count + ' Items';
       }
       return dragImage;
     }