Skip to content

Commit a1dfda1

Browse files
committed
Improve styling
1 parent 2a8a8d5 commit a1dfda1

File tree

10 files changed

+86
-405
lines changed

10 files changed

+86
-405
lines changed

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,8 @@
8989
"@mui/styles": "^5.12.0",
9090
"diff-match-patch": "^1.0.4",
9191
"filesize": "^10.0.7",
92-
"nbdime": "^7.0.0-alpha.0",
93-
"nbdime-jupyterlab": "^3.0.0-alpha.0",
92+
"nbdime": "^7.0.0-alpha.2",
93+
"nbdime-jupyterlab": "^3.0.0-alpha.2",
9494
"react": "^18.2.0",
9595
"react-dom": "^18.2.0",
9696
"react-virtualized-auto-sizer": "^1.0.2",

pyproject.toml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ classifiers = [
2323
]
2424
dependencies = [
2525
"jupyter_server>=2.0.1,<3",
26-
"nbdime~=4.0.0a0",
26+
"nbdime~=4.0.0a1",
2727
"nbformat",
2828
"packaging",
2929
"pexpect",

src/components/diff/NotebookDiff.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -379,11 +379,10 @@ namespace Private {
379379
node.className = 'jp-git-diff-header';
380380
node.innerHTML = `<div class="${bannerClass}">
381381
<span>${localLabel}</span>
382-
<span class="jp-spacer"></span>
383382
${
384383
hasConflict
385384
? // Add extra space during notebook merge view
386-
`<span>${baseLabel}</span><span class="jp-spacer"></span>`
385+
`<span>${baseLabel}</span>`
387386
: ''
388387
}
389388
<span>${remoteLabel}</span>

src/components/diff/PlainTextDiff.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ export class PlainTextDiff extends Panel implements Git.Diff.IDiffWidget {
220220
head.innerHTML = labels
221221
.filter(label => !!label)
222222
.map(label => `<span>${label}</span>`)
223-
.join('<span class="jp-spacer"></span>');
223+
.join('');
224224
return head;
225225
}
226226

@@ -259,8 +259,9 @@ export class PlainTextDiff extends Panel implements Git.Diff.IDiffWidget {
259259
this._mergeView = createNbdimeMergeView({
260260
remote,
261261
local,
262-
merged
262+
merged,
263263
// factory: this._editorFactory
264+
showBase: false
264265
});
265266
this._mergeView.addClass('jp-git-PlainText-diff');
266267

style/base.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@
33
| Distributed under the terms of the Modified BSD License.
44
|---------------------------------------------------------------------------- */
55

6+
@import url('variables.css');
67
@import url('credentials-box.css');
78
@import url('diff-common.css');
8-
@import url('diff-nb.css');
9-
@import url('diff-text.css');
10-
@import url('variables.css');
119
@import url('status-widget.css');
1210
@import url('advanced-push-form.css');
1311

style/diff-common.css

Lines changed: 64 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
overflow: hidden;
2525
}
2626

27+
.jp-git-diff-root .cm-editor {
28+
height: 100%;
29+
}
30+
2731
button.jp-git-diff-refresh {
2832
border: solid 1px var(--jp-warn-color2);
2933
}
@@ -44,35 +48,58 @@ button.jp-git-diff-resolve .jp-ToolbarButtonComponent-label {
4448
.jp-git-merge-banner {
4549
flex: 0 0 auto;
4650
margin: 2px 0;
47-
display: flex;
51+
display: grid;
52+
grid-auto-rows: minmax(18px, auto);
53+
width: 100%;
54+
}
55+
56+
.jp-git-diff-banner {
57+
grid-template-columns: 47% 6% 47%;
4858
}
4959

5060
.jp-git-diff-banner span {
5161
padding: 0 4px;
52-
width: 47%;
5362
font-weight: bold;
63+
64+
overflow: hidden;
65+
text-overflow: ellipsis;
5466
}
5567

56-
.jp-git-diff-banner span.jp-spacer {
57-
width: 6%;
68+
.jp-git-diff-banner span:first-child {
69+
grid-column: 1;
5870
}
5971

60-
.jp-git-merge-banner span {
61-
padding: 0 4px;
62-
width: 31%;
63-
font-weight: bold;
72+
.jp-git-diff-banner span:last-child {
73+
grid-column: 3;
6474
}
6575

6676
.jp-git-diff-banner span:first-of-type {
67-
background-color: var(--jp-git-diff-deleted-color);
77+
background-color: var(--jp-git-diff-deleted-color1);
6878
}
6979

7080
.jp-git-diff-banner span:last-of-type {
71-
background-color: var(--jp-git-diff-added-color);
81+
background-color: var(--jp-git-diff-added-color1);
7282
}
7383

74-
.jp-git-merge-banner span.jp-spacer {
75-
width: 3.5%;
84+
.jp-git-merge-banner {
85+
grid-template-columns: repeat(3, 1fr);
86+
gap: 10px;
87+
}
88+
89+
.jp-git-merge-banner span {
90+
padding: 0 4px;
91+
font-weight: bold;
92+
93+
overflow: hidden;
94+
text-overflow: ellipsis;
95+
}
96+
97+
.jp-git-merge-banner span:first-of-type {
98+
background-color: var(--jp-merge-local-color1);
99+
}
100+
101+
.jp-git-merge-banner span:last-of-type {
102+
background-color: var(--jp-git-diff-added-color1);
76103
}
77104

78105
.jp-git-diff-root .cm-merge {
@@ -106,71 +133,35 @@ button.jp-git-diff-resolve .jp-ToolbarButtonComponent-label {
106133
vertical-align: top;
107134
}
108135

109-
.jp-git-diff-root .cm-merge-1pane .cm-merge-gap {
110-
width: 6%;
111-
}
112-
113-
.jp-git-diff-root .cm-merge-2pane .cm-merge-pane {
114-
width: 47%;
115-
}
116-
117-
.jp-git-diff-root .cm-merge-2pane .cm-merge-gap {
118-
width: 6%;
119-
}
120-
121-
.jp-git-diff-root .cm-merge-3pane .cm-merge-pane {
122-
width: 31%;
123-
}
124-
125-
.jp-git-diff-root .cm-merge-3pane .cm-merge-gap {
126-
width: 3.5%;
127-
}
128-
129136
.jp-git-diff-root .cm-merge-pane-rightmost {
130137
position: absolute;
131138
right: 0;
132139
z-index: 1;
133140
}
134141

135-
.jp-git-diff-root .cm-merge-scrolllock-wrap {
136-
position: absolute;
137-
bottom: 0;
138-
left: 50%;
139-
}
140-
141-
.jp-git-diff-root .cm-merge-scrolllock {
142-
position: relative;
143-
left: -50%;
144-
cursor: pointer;
145-
line-height: 1;
146-
}
147-
148-
.jp-git-diff-root .cm-merge-r-inserted,
149-
.jp-git-diff-root .cm-merge-l-inserted {
150-
background-color: var(--jp-git-diff-added-color);
142+
.jp-Notebook-merge .jp-Merge-conflict {
143+
background-color: var(--jp-merge-both-color2);
151144
}
152145

153146
.jp-git-diff-root .cm-merge-r-deleted,
154-
.jp-git-diff-root .cm-merge-l-deleted {
147+
.jp-git-diff-root .cm-merge-l-deleted,
148+
.jp-git-diff-root .cm-diff-left-editor .cm-merge-r-chunk {
155149
background-color: var(--jp-git-diff-deleted-color);
156150
}
157151

158-
.jp-git-diff-root .cm-merge-collapsed-widget::before {
159-
content: '(...)';
152+
.jp-git-diff-root .cm-merge-left-editor .cm-merge-l-chunk:not(.jp-Merge-conflict) {
153+
background-color: var(--jp-merge-local-color);
160154
}
161155

162-
.jp-git-diff-root .cm-merge-collapsed-widget {
163-
cursor: pointer;
164-
color: var(--jp-ui-font-color1);
165-
background: var(--jp-layout-color2);
166-
border: 1px solid var(--jp-border-color1);
167-
font-size: 90%;
168-
padding: 0 3px;
169-
border-radius: 4px;
156+
.jp-git-diff-root .cm-merge-left-editor .cm-merge-l-inserted {
157+
background-color: var(--jp-merge-local-color1);
170158
}
171159

172-
.jp-git-diff-root .cm-merge-collapsed-line .cm-gutter-elt {
173-
display: none;
160+
.jp-git-diff-root .cm-merge-r-inserted,
161+
.jp-git-diff-root .cm-merge-l-inserted,
162+
.jp-git-diff-root .cm-diff-right-editor .cm-merge-r-chunk,
163+
.jp-git-diff-root .cm-merge-right-editor .cm-merge-r-chunk {
164+
background-color: var(--jp-git-diff-added-color);
174165
}
175166

176167
.jp-git-diff-root .cm-merge-spacer {
@@ -182,3 +173,15 @@ button.jp-git-diff-resolve .jp-ToolbarButtonComponent-label {
182173
var(--jp-border-color0) 12px
183174
);
184175
}
176+
177+
/* Hide drag handles */
178+
.jp-git-diff-root .jp-Notebook-merge .jp-DragPanel-dragHandle {
179+
display: none;
180+
}
181+
182+
.jp-git-diff-parent-widget .jp-Merge-notebook-controls {
183+
margin-bottom: 0;
184+
padding: 0;
185+
background-color: transparent;
186+
border: none;
187+
}

0 commit comments

Comments
 (0)