nbdime styles are not imported (#919)

* Import some styles from nbdime-jupyterlab

* Import additional styles from nbdime

* Move import to base

* Correct comment position

Author: fcollonval

src/index.ts

@@ -28,6 +28,7 @@ import { GitWidget } from './widgets/GitWidget';
 
 export { NotebookDiff } from './components/diff/NotebookDiff';
 export { PlainTextDiff } from './components/diff/PlainTextDiff';
+export { DiffModel } from './components/diff/model';
 export { Git, IGitExtension } from './tokens';
 
 /**

style/base.css

@@ -3,6 +3,17 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+/* Import same style from nbdime than nbdime-jupyterlab
+ * see index.ts
+ */
+@import url('~nbdime/lib/common/collapsible.css');
+@import url('~nbdime/lib/upstreaming/flexpanel.css');
+@import url('~nbdime/lib/common/dragpanel.css');
+@import url('~nbdime/lib/styles/variables.css');
+@import url('~nbdime/lib/styles/common.css');
+@import url('~nbdime/lib/styles/diff.css');
+@import url('~nbdime/lib/styles/merge.css');
+
 @import url('diff-common.css');
 @import url('diff-nb.css');
 @import url('diff-text.css');

style/diff-nb.css

@@ -60,3 +60,85 @@
   background-color: var(--jp-git-diff-deleted-color);
   border: none;
 }
+
+/* Imported from nbdime-jupyterlab */
+.jp-git-diff-root .nbdime-Widget {
+  display: flex;
+  flex-direction: column;
+}
+
+.jp-git-diff-root .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;
+}
+
+
+/* Header syling */
+
+.jp-git-diff-root .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;
+}
+
+/* Hiding unchanged cells if told to */
+.jp-git-diff-root .nbdime-root.jp-mod-hideUnchanged .jp-Cell-diff.jp-Diff-unchanged {
+  display: none;
+}
+
+/* Show a marker with the number of cells hidden before */
+.jp-git-diff-root .nbdime-root.jp-mod-hideUnchanged .jp-Cell-diff[data-nbdime-NCellsHiddenBefore]::before,
+.jp-git-diff-root .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;
+}
+
+/* Show a marker with the number of cells hidden after (for hidden cells at end) */
+.jp-git-diff-root .nbdime-root.jp-mod-hideUnchanged .jp-Cell-diff[data-nbdime-NCellsHiddenAfter]::after,
+.jp-git-diff-root .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-git-diff-root .nbdime-root.jp-mod-hideUnchanged .jp-Cell-diff[data-nbdime-NCellsHiddenBefore],
+.jp-git-diff-root .nbdime-root.jp-mod-hideUnchanged .jp-Diff-addremchunk[data-nbdime-NCellsHiddenBefore] {
+  padding-top: 40px;
+}
+
+.jp-git-diff-root .nbdime-root.jp-mod-hideUnchanged .jp-Cell-diff[data-nbdime-NCellsHiddenAfter],
+.jp-git-diff-root .nbdime-root.jp-mod-hideUnchanged .jp-Diff-addremchunk[data-nbdime-NCellsHiddenAfter] {
+  padding-bottom: 40px;
+}
+
+/* Marker for when all cells are unchanged and hidden */
+.jp-git-diff-root .nbdime-root.jp-mod-hideUnchanged .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;
+}

style/index.css

@@ -1,5 +1 @@
-@import url('~nbdime/lib/styles/common.css');
-@import url('~nbdime/lib/styles/diff.css');
-@import url('~nbdime/lib/styles/merge.css');
-@import url('~nbdime/lib/styles/variables.css');
 @import url('base.css');