Improve diff view (#696)

* Restore gap element in diff view Improve alignment (homogeneous grid usage) Remove unneeded gutter in diff view * Lint the code * Fix styling of input prompt for added/removed cells * Update Playwright Snapshots * Update Playwright Snapshots * Add quotes to ids --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
jupyter · Oct 3, 2023 · 1f8e420 · 1f8e420
1 parent d4a6c77
commit 1f8e420
Show file tree

Hide file tree

Showing 18 changed files with 195 additions and 182 deletions.
diff --git a/nbdime/webapp/templates/diff.html b/nbdime/webapp/templates/diff.html
@@ -22,7 +22,7 @@ <h3>Notebook Diff</h3>
         <button id="nbdime-close" type="checkbox" style="display: none">Close tool</button>
         <button id="nbdime-export" type="checkbox" style="display: none">Export diff</button>
       </div>
-      <div id=nbdime-header-banner>
+      <div id="nbdime-header-banner" class="cm-merge-2pane">
         <span id="nbdime-header-base">Base</span>
         <span id="nbdime-header-remote">Remote</span>
       </div>

diff --git a/nbdime/webapp/templates/difftool.html b/nbdime/webapp/templates/difftool.html
@@ -10,7 +10,7 @@ <h3>Notebook Diff</h3>
         <button id="nbdime-close" style="display: none">Close tool</button>
         <button id="nbdime-export" style="display: none">Export diff</button>
       </div>
-      <div id=nbdime-header-banner>
+      <div id="nbdime-header-banner" class="cm-merge-2pane">
         <span id="nbdime-header-base">Base</span>
         <span id="nbdime-header-remote">Remote</span>
       </div>

diff --git a/packages/labextension/package.json b/packages/labextension/package.json
@@ -42,7 +42,6 @@
     "watch": "tsc --build --watch"
   },
   "dependencies": {
-
     "@jupyterlab/apputils": "^4.0.0",
     "@jupyterlab/coreutils": "^6.0.0",
     "@jupyterlab/codeeditor": "^4.0.0",

diff --git a/packages/labextension/src/widget.ts b/packages/labextension/src/widget.ts
@@ -223,7 +223,7 @@ namespace Private {
         <label><input class="nbdime-hide-unchanged" type="checkbox">Hide unchanged cells</label>
         <button class="nbdime-export" style="display: none">Export diff</button>
       </div>
-      <div class=nbdime-header-banner>
+      <div class="nbdime-header-banner">
         <span class="nbdime-header-base"></span>
         <span class="nbdime-header-remote"></span>
       </div>`;

diff --git a/packages/labextension/style/index.css b/packages/labextension/style/index.css
@@ -11,135 +11,138 @@
 @import url('nbdime/lib/styles/merge.css');
 
 .nbdime-Widget {
-display: flex;
-flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .nbdime-root {
-padding: var(--jp-notebook-padding);
-min-width: 50px;
-min-height: 50px;
-outline: none;
-overflow: auto;
-background: var(--jp-layout-color0);
-color: var(--jp-ui-font-color0);
-flex: 1 1 auto;
+  padding: var(--jp-notebook-padding);
+  min-width: 50px;
+  min-height: 50px;
+  outline: none;
+  overflow: auto;
+  background: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
+  flex: 1 1 auto;
 }
 
 .jp-ToolbarButtonComponent-icon.action-notebook-diff {
-color: var(--jp-ui-font-color0);
+  color: var(--jp-ui-font-color0);
 }
 
 .nbdime-toolbarButton .jp-ToolbarButtonComponent-label {
-display: none;
+  display: none;
 }
 
 .jp-PluginList-icon.nbdime-icon {
-font-size: 16px;
-vertical-align: text-bottom;
+  font-size: 16px;
+  vertical-align: text-bottom;
 }
 
 /* Header syling */
 
 .jp-fa-tabIcon {
-padding-top: 6px;
+  padding-top: 6px;
 }
 
 .nbdime-Diff {
-border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
-box-shadow: var(--jp-toolbar-box-shadow);
-background: var(--jp-toolbar-background);
-color: var(--jp-ui-font-color1);
-flex: 0 0 auto;
-padding: 2px;
-z-index: 1;
+  border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
+  box-shadow: var(--jp-toolbar-box-shadow);
+  background: var(--jp-toolbar-background);
+  color: var(--jp-ui-font-color1);
+  flex: 0 0 auto;
+  padding: 2px;
+  z-index: 1;
 }
 
 .nbdime-header-buttonrow > * {
-padding-left: 8px;
-padding-right: 8px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.nbdime-Diff .nbdime-header-banner {
+  display: grid;
+  /* editor | gap | editor */
+  grid-template-columns: 47% 6% 47%;
 }
 
 .nbdime-Diff .nbdime-header-base {
-display: inline-block;
-width: calc(50% - 8px);
-background-color: var(--jp-diff-deleted-color0);
-padding: 0px 4px;
-vertical-align: top;
+  grid-column: 1;
+  display: inline-block;
+  background-color: var(--jp-diff-deleted-color0);
+  padding: 0px 4px;
 }
 
 .nbdime-Diff .nbdime-header-remote {
-display: inline-block;
-width: calc(49% - 8px);
-background-color: var(--jp-diff-added-color0);
-padding: 0px 4px;
-vertical-align: top;
+  grid-column: 3;
+  display: inline-block;
+  background-color: var(--jp-diff-added-color0);
+  padding: 0px 4px;
 }
 
 .nbdime-Diff .nbdime-header-local {
-display: none;
-width: calc(49% - 8px);
-padding: 0px 4px;
-vertical-align: top;
+  display: none;
+  width: calc(49% - 8px);
+  padding: 0px 4px;
+  vertical-align: top;
 }
 
 /* Hiding unchanged cells if told to */
 .nbdime-root.jp-mod-hideUnchanged .jp-Cell-diff.jp-Diff-unchanged {
-display: none;
+  display: none;
 }
 
 /* Show a marker with the number of cells hidden before */
 .nbdime-root.jp-mod-hideUnchanged
-.jp-Cell-diff[data-nbdime-NCellsHiddenBefore]::before,
+  .jp-Cell-diff[data-nbdime-NCellsHiddenBefore]::before,
 .nbdime-root.jp-mod-hideUnchanged
-.jp-Diff-addremchunk[data-nbdime-NCellsHiddenBefore]::before {
-content: attr(data-nbdime-NCellsHiddenBefore) ' unchanged cell(s) hidden';
-position: absolute;
-width: 100%;
-top: 0;
-background-color: var(--jp-layout-color2);
-border-top: solid var(--jp-layout-color3) 1px;
-border-bottom: solid var(--jp-layout-color3) 1px;
-text-align: center;
+  .jp-Diff-addremchunk[data-nbdime-NCellsHiddenBefore]::before {
+  content: attr(data-nbdime-NCellsHiddenBefore) ' unchanged cell(s) hidden';
+  position: absolute;
+  width: 100%;
+  top: 0;
+  background-color: var(--jp-layout-color2);
+  border-top: solid var(--jp-layout-color3) 1px;
+  border-bottom: solid var(--jp-layout-color3) 1px;
+  text-align: center;
 }
 
 /* Show a marker with the number of cells hidden after (for hidden cells at end) */
 .nbdime-root.jp-mod-hideUnchanged
-.jp-Cell-diff[data-nbdime-NCellsHiddenAfter]::after,
+  .jp-Cell-diff[data-nbdime-NCellsHiddenAfter]::after,
 .nbdime-root.jp-mod-hideUnchanged
-.jp-Diff-addremchunk[data-nbdime-NCellsHiddenAfter]::after {
-content: attr(data-nbdime-NCellsHiddenAfter) ' unchanged cell(s) hidden';
-position: absolute;
-width: 100%;
-bottom: 0;
-background-color: var(--jp-layout-color2);
-border-top: solid var(--jp-layout-color3) 1px;
-border-bottom: solid var(--jp-layout-color3) 1px;
-text-align: center;
+  .jp-Diff-addremchunk[data-nbdime-NCellsHiddenAfter]::after {
+  content: attr(data-nbdime-NCellsHiddenAfter) ' unchanged cell(s) hidden';
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  background-color: var(--jp-layout-color2);
+  border-top: solid var(--jp-layout-color3) 1px;
+  border-bottom: solid var(--jp-layout-color3) 1px;
+  text-align: center;
 }
 
 .nbdime-root.jp-mod-hideUnchanged .jp-Cell-diff[data-nbdime-NCellsHiddenBefore],
 .nbdime-root.jp-mod-hideUnchanged
-.jp-Diff-addremchunk[data-nbdime-NCellsHiddenBefore] {
-padding-top: 40px;
+  .jp-Diff-addremchunk[data-nbdime-NCellsHiddenBefore] {
+  padding-top: 40px;
 }
 
 .nbdime-root.jp-mod-hideUnchanged .jp-Cell-diff[data-nbdime-NCellsHiddenAfter],
 .nbdime-root.jp-mod-hideUnchanged
-.jp-Diff-addremchunk[data-nbdime-NCellsHiddenAfter] {
-padding-bottom: 40px;
+  .jp-Diff-addremchunk[data-nbdime-NCellsHiddenAfter] {
+  padding-bottom: 40px;
 }
 
 /* Marker for when all cells are unchanged and hidden */
 .nbdime-root.jp-mod-hideUnchanged
-.jp-Notebook-diff[data-nbdime-AllCellsHidden]::after {
-content: 'No changes, ' attr(data-nbdime-AllCellsHidden)
+  .jp-Notebook-diff[data-nbdime-AllCellsHidden]::after {
+  content: 'No changes, ' attr(data-nbdime-AllCellsHidden)
     ' unchanged cell(s) hidden';
-display: block;
-width: 100%;
-background-color: var(--jp-layout-color2);
-border-top: solid var(--jp-layout-color3) 1px;
-border-bottom: solid var(--jp-layout-color3) 1px;
-text-align: center;
+  display: block;
+  width: 100%;
+  background-color: var(--jp-layout-color2);
+  border-top: solid var(--jp-layout-color3) 1px;
+  border-bottom: solid var(--jp-layout-color3) 1px;
+  text-align: center;
 }
-