Fix drag and drop (#723)

* Use lumino and not Phosphor convention

* Fix the style

* Update Playwright Snapshots

* Update Playwright Snapshots

* Update Playwright Snapshots

* Update Playwright Snapshots

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

packages/nbdime/src/common/dragpanel.css

@@ -9,8 +9,14 @@
     radial-gradient(transparent 19%, rgba(0, 0, 0, 0.4) 20%, transparent 50%) 0
       1px;
   background-size: 6px 6px;
+  cursor: grab;
 }
 
-.p-Panel.jp-DragPanel .p-Widget.jp-mod-dropTarget {
+.lm-Panel.jp-DragPanel .lm-Widget.jp-mod-dropTarget {
   border-top: 1px dashed black;
 }
+
+.lm-mod-drag-image {
+  left: 0px;
+  top: 0px;
+}

packages/nbdime/src/common/dragpanel.ts

@@ -137,16 +137,16 @@ export abstract class DropPanel extends Panel {
    */
   handleEvent(event: Event): void {
     switch (event.type) {
-      case 'p-dragenter':
+      case 'lm-dragenter':
         this._evtDragEnter(event as Drag.Event);
         break;
-      case 'p-dragleave':
+      case 'lm-dragleave':
         this._evtDragLeave(event as Drag.Event);
         break;
-      case 'p-dragover':
+      case 'lm-dragover':
         this._evtDragOver(event as Drag.Event);
         break;
-      case 'p-drop':
+      case 'lm-drop':
         this.evtDrop(event as Drag.Event);
         break;
       default:
@@ -190,7 +190,7 @@ export abstract class DropPanel extends Panel {
   }
 
   /**
-   * Handle the `'p-drop'` event for the widget.
+   * Handle the `'lm-drop'` event for the widget.
    *
    * Responsible for pre-processing event before calling `processDrop`.
    *
@@ -227,25 +227,25 @@ export abstract class DropPanel extends Panel {
    */
   protected onAfterAttach(msg: Message): void {
     let node = this.node;
-    node.addEventListener('p-dragenter', this);
-    node.addEventListener('p-dragleave', this);
-    node.addEventListener('p-dragover', this);
-    node.addEventListener('p-drop', this);
+    node.addEventListener('lm-dragenter', this);
+    node.addEventListener('lm-dragleave', this);
+    node.addEventListener('lm-dragover', this);
+    node.addEventListener('lm-drop', this);
   }
 
   /**
    * Handle `before_detach` messages for the widget.
    */
   protected onBeforeDetach(msg: Message): void {
     let node = this.node;
-    node.removeEventListener('p-dragenter', this);
-    node.removeEventListener('p-dragleave', this);
-    node.removeEventListener('p-dragover', this);
-    node.removeEventListener('p-drop', this);
+    node.removeEventListener('lm-dragenter', this);
+    node.removeEventListener('lm-dragleave', this);
+    node.removeEventListener('lm-dragover', this);
+    node.removeEventListener('lm-drop', this);
   }
 
   /**
-   * Handle the `'p-dragenter'` event for the widget.
+   * Handle the `'lm-dragenter'` event for the widget.
    */
   private _evtDragEnter(event: Drag.Event): void {
     if (!this.validateSource(event)) {
@@ -265,7 +265,7 @@ export abstract class DropPanel extends Panel {
   }
 
   /**
-   * Handle the `'p-dragleave'` event for the widget.
+   * Handle the `'lm-dragleave'` event for the widget.
    */
   private _evtDragLeave(event: Drag.Event): void {
     event.preventDefault();
@@ -274,7 +274,7 @@ export abstract class DropPanel extends Panel {
   }
 
   /**
-   * Handle the `'p-dragover'` event for the widget.
+   * Handle the `'lm-dragover'` event for the widget.
    */
   private _evtDragOver(event: Drag.Event): void {
     if (!this.validateSource(event)) {

packages/nbdime/src/styles/diff.css

@@ -285,7 +285,7 @@ Output mimetype selection:
   margin-left: 5px;
 }
 
-.jp-Diff-outputsContainer > .p-Widget:not(:last-child) {
+.jp-Diff-outputsContainer > .lm-Widget:not(:last-child) {
   padding-bottom: 6px;
   min-height: 2em;
   border-bottom: var(--jp-border-width) solid var(--jp-nbdime-output-color2);

packages/nbdime/src/styles/merge.css

@@ -16,7 +16,7 @@
   width: 80%;
 }
 
-.jp-Notebook-merge .jp-merge-celldragdrop > .p-Panel:not(:first-child) {
+.jp-Notebook-merge .jp-merge-celldragdrop > .lm-Panel:not(:first-child) {
   margin-top: 20px;
 }
 
@@ -35,7 +35,7 @@
   border-top: solid #ccc 1px;
 }
 
-.jp-Notebook-merge .jp-Merge-cellHeader > .p-Widget {
+.jp-Notebook-merge .jp-Merge-cellHeader > .lm-Widget {
   margin-right: 0.5em;
 }
 
@@ -54,11 +54,11 @@
   max-width: 33%;
 }
 
-.jp-Cell-merge.p-mod-drag-image {
+.jp-Cell-merge.lm-mod-drag-image {
   background-color: var(--jp-layout-color1);
 }
 
-.jp-Cell-merge.p-mod-drag-image .jp-Merge-cellHeader {
+.jp-Cell-merge.lm-mod-drag-image .jp-Merge-cellHeader {
   display: none;
 }
 
@@ -280,7 +280,7 @@
 
 .jp-Notebook-merge
   .jp-Cell-merge.jp-mod-todelete
-  > .p-Widget:not(.jp-Merge-cellHeader) {
+  > .lm-Widget:not(.jp-Merge-cellHeader) {
   opacity: 0.5;
   filter: alpha(opacity = 50);
 }
@@ -299,7 +299,7 @@
 
 .jp-Notebook-merge
   .jp-Cellrow-outputs
-  .p-FlexPanel:last-of-type
+  .lm-FlexPanel:last-of-type
   .jp-OutputArea {
   margin-top: 5px;
 }
@@ -444,7 +444,7 @@ Output mimetype selection:
   margin-left: 5px;
 }
 
-.jp-Diff-outputsContainer > .p-Widget:not(:last-child) {
+.jp-Diff-outputsContainer > .lm-Widget:not(:last-child) {
   padding-bottom: 6px;
   min-height: 2em;
   border-bottom: var(--jp-border-width) solid var(--jp-nbdime-output-color2);

packages/nbdime/src/upstreaming/flexlayout.ts

@@ -14,22 +14,22 @@ import { PanelLayout, Widget } from '@lumino/widgets';
 /**
  * The class name added to left-to-right flex layout parents.
  */
-const LEFT_TO_RIGHT_CLASS = 'p-mod-left-to-right';
+const LEFT_TO_RIGHT_CLASS = 'lm-mod-left-to-right';
 
 /**
  * The class name added to right-to-left flex layout parents.
  */
-const RIGHT_TO_LEFT_CLASS = 'p-mod-right-to-left';
+const RIGHT_TO_LEFT_CLASS = 'lm-mod-right-to-left';
 
 /**
  * The class name added to top-to-bottom flex layout parents.
  */
-const TOP_TO_BOTTOM_CLASS = 'p-mod-top-to-bottom';
+const TOP_TO_BOTTOM_CLASS = 'lm-mod-top-to-bottom';
 
 /**
  * The class name added to bottom-to-top flex layout parents.
  */
-const BOTTOM_TO_TOP_CLASS = 'p-mod-bottom-to-top';
+const BOTTOM_TO_TOP_CLASS = 'lm-mod-bottom-to-top';
 
 /**
  * A layout which arranges its widgets in a single row or column.
@@ -44,7 +44,7 @@ const BOTTOM_TO_TOP_CLASS = 'p-mod-bottom-to-top';
  *      `setGrow`, `setShrink` and `setSizeBasis`.
  *    - Using the convenience attributes `evenSizes` or `stretchType`.
  *  - Manually by CSS using the flexbox CSS attribute for the classes
- *    `p-FlexPanel` and `p-FlexPanel-child`.
+ *    `lm-FlexPanel` and `lm-FlexPanel-child`.
  */
 export class FlexLayout extends PanelLayout {
   /**

packages/nbdime/src/upstreaming/flexpanel.css

@@ -1,19 +1,19 @@
-.p-FlexPanel {
+.lm-FlexPanel {
   display: flex;
 }
 
-.p-FlexPanel.p-mod-left-to-right {
+.lm-FlexPanel.lm-mod-left-to-right {
   flex-direction: row;
 }
 
-.p-FlexPanel.p-mod-right-to-left {
+.lm-FlexPanel.lm-mod-right-to-left {
   flex-direction: row-reverse;
 }
 
-.p-FlexPanel.p-mod-top-to-bottom {
+.lm-FlexPanel.lm-mod-top-to-bottom {
   flex-direction: column;
 }
 
-.p-FlexPanel.p-mod-bottom-to-top {
+.lm-FlexPanel.lm-mod-bottom-to-top {
   flex-direction: column-reverse;
 }

packages/nbdime/src/upstreaming/flexpanel.ts

@@ -14,12 +14,12 @@ import { Panel, Widget } from '@lumino/widgets';
 /**
  * The class name added to FlexPanel instances.
  */
-const FLEX_PANEL_CLASS = 'p-FlexPanel';
+const FLEX_PANEL_CLASS = 'lm-FlexPanel';
 
 /**
  * The class name added to a FlexPanel child.
  */
-const CHILD_CLASS = 'p-FlexPanel-child';
+const CHILD_CLASS = 'lm-FlexPanel-child';
 
 /**
  * A panel which arranges its widgets in a single row or column.
@@ -34,7 +34,7 @@ const CHILD_CLASS = 'p-FlexPanel-child';
  *      `setGrow`, `setShrink` and `setSizeBasis`.
  *    - Using the convenience attributes `evenSizes` or `stretchType`.
  *  - Manually by CSS using the flexbox CSS attribute for the classes
- *    `p-FlexPanel` and `p-FlexPanel-child`.
+ *    `lm-FlexPanel` and `lm-FlexPanel-child`.
  *
  * #### Notes
  * This class provides a convenience wrapper around a [[FlexLayout]].

packages/nbdime/test/src/common/flexpanel.spec.ts

@@ -103,7 +103,7 @@ describe('upstreaming', () => {
 
     it('should add a class name to the flex panel', () => {
       let p = new FlexPanel();
-      expect(p.hasClass('p-FlexPanel')).toBe(true);
+      expect(p.hasClass('lm-FlexPanel')).toBe(true);
     });
 
     it('should add a class name to the flex panel children', () => {
@@ -112,7 +112,7 @@ describe('upstreaming', () => {
       p.addWidget(new Widget());
       p.addWidget(new Widget());
       for (const child of p.widgets) {
-        expect(child.hasClass('p-FlexPanel-child')).toBe(true);
+        expect(child.hasClass('lm-FlexPanel-child')).toBe(true);
       }
     });
 
@@ -124,7 +124,7 @@ describe('upstreaming', () => {
       while (p.widgets.length > 0) {
         let child = p.widgets[0];
         child.parent = null!;
-        expect(child.hasClass('p-FlexPanel-child')).toBe(false);
+        expect(child.hasClass('lm-FlexPanel-child')).toBe(false);
       }
     });
 
@@ -139,14 +139,14 @@ describe('upstreaming', () => {
       let p = new FlexPanel();
       p.direction = 'bottom-to-top';
       Widget.attach(p, document.body);
-      expect(p.hasClass('p-mod-bottom-to-top')).toBe(true);
+      expect(p.hasClass('lm-mod-bottom-to-top')).toBe(true);
     });
 
     it('should apply direction if attached before setting', () => {
       let p = new FlexPanel();
       Widget.attach(p, document.body);
       p.direction = 'bottom-to-top';
-      expect(p.hasClass('p-mod-bottom-to-top')).toBe(true);
+      expect(p.hasClass('lm-mod-bottom-to-top')).toBe(true);
     });
 
     it('should report isHorizontal/isVertical correctly', () => {