Merge pull request #731 from vidartf/fix-mergepane-border

Ensure collapsed mergepane border

packages/nbdime/package.json

@@ -16,7 +16,7 @@
   ],
   "scripts": {
     "build": "tsc --project . && node scripts/copy-files.js",
-    "build:dev": "tsc --project .",
+    "build:dev": "npm run build",
     "clean": "rimraf test/build lib tsconfig.tsbuildinfo",
     "prepublishOnly": "npm run build",
     "test": "jest --coverage",

packages/nbdime/src/common/mergeview.ts

@@ -1491,6 +1491,8 @@ export class MergeView extends Panel {
       value,
     });
 
+    this.addClass('jp-Mergeview-root');
+
     // START MERGE CASE
     if (merged) {
       this.addClass('cm-merge-grid-panel');
@@ -1628,6 +1630,7 @@ export class MergeView extends Panel {
         } else if (remote.deleted) {
           this._base.addClass('cm-merge-pane-deleted');
         }
+        this._base.addClass('cm-merge-pane');
       } else {
         panes = 2;
         this.addWidget(this._base);

packages/nbdime/src/styles/common.css

@@ -1,3 +1,11 @@
+.nbdime-root .cm-merge-pane {
+  background-color: var(--jp-cell-editor-background);
+}
+
+.nbdime-root .jp-Mergeview-root {
+  border: var(--codemirror-border);
+}
+
 .nbdime-root .cm-merge-1pane {
   display: grid;
   /* editor */
@@ -25,24 +33,23 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(18px, auto);
+  gap: var(--jp-border-width);
+  background-color: var(--jp-cell-editor-border-color);
 }
 
 .nbdime-root .cm-merge-left-editor {
   grid-column: 1;
   grid-row: 1;
-  background-color: var(--jp-cell-editor-background);
 }
 
 .nbdime-root .cm-central-editor {
   grid-column: 2;
   grid-row: 1;
-  background-color: var(--jp-cell-editor-background);
 }
 
 .nbdime-root .cm-merge-right-editor {
   grid-column: 3;
   grid-row: 1;
-  background-color: var(--jp-cell-editor-background);
 }
 
 .nbdime-root .cm-merge-4pane > .cm-merge-editor {
@@ -87,9 +94,7 @@
   white-space: normal;
   vertical-align: top;
   width: 100%;
-  background-color: var(--jp-cell-editor-background);
-  border: var(--codemirror-border);
-  border-radius: 0px;
+  background-color: transparent;
 }
 
 .nbdime-root .cm-merge-pane-rightmost {

packages/nbdime/src/styles/diff.css

@@ -19,8 +19,7 @@
 
 /* Match input border of unchanged cell source */
 .jp-Notebook-diff .jp-Diff-unchanged .cm-merge-pane-unchanged {
-  border: var(--jp-border-width) solid
-    var(--jp-private-notebook-cell-editor-border);
+  border: var(--codemirror-border);
 }
 
 /* Do not use border between unchanged cells */
@@ -223,14 +222,19 @@
   background-color: var(--jp-diff-added-color2);
 }
 
-.jp-Notebook-diff .cm-merge-pane-deleted > .cm-editor,
+/* Unset outer border from common */
+.jp-Notebook-diff .jp-Mergeview-root.cm-merge-1pane {
+  border: unset;
+}
+
+.jp-Notebook-diff .cm-merge-pane-deleted,
 .jp-Notebook-diff .jp-Diff-deleted .jp-Diff-renderedOutput,
 .jp-Cellrow-outputs .jp-Diff-twoway .jp-Diff-base {
   background-color: var(--jp-diff-deleted-color2);
   border: solid 1px var(--jp-diff-deleted-color0);
 }
 
-.jp-Notebook-diff .cm-merge-pane-added > .cm-editor,
+.jp-Notebook-diff .cm-merge-pane-added,
 .jp-Notebook-diff .jp-Diff-added .jp-Diff-renderedOutput,
 .jp-Cellrow-outputs .jp-Diff-twoway .jp-Diff-remote {
   background-color: var(--jp-diff-added-color2);

packages/nbdime/src/styles/merge.css

@@ -20,11 +20,6 @@
   margin-top: 20px;
 }
 
-.jp-Notebook-merge .cm-merge-pane-final {
-  width: 100%;
-  border-top: var(--codemirror-border);
-}
-
 .jp-Notebook-merge .jp-Output-result img {
   max-width: 100%;
 }
@@ -287,6 +282,14 @@
   margin-left: 25%;
 }
 
+.jp-Notebook-merge .jp-Merge-oneway-local .cm-merge-pane {
+  background-color: var(--jp-merge-local-color2);
+}
+
+.jp-Notebook-merge .jp-Merge-oneway-remote .cm-merge-pane {
+  background-color: var(--jp-merge-remote-color2);
+}
+
 .jp-Notebook-merge .jp-Merge-gutter-picker {
   width: 16px;
   text-align: right;