Skip to content

Commit 86593ed

Browse files
rebornixrebornix
committed
flex layout and shared metadata component
1 parent 62e2deb commit 86593ed

3 files changed

Lines changed: 97 additions & 64 deletions

File tree

‎src/vs/workbench/contrib/notebook/browser/diff/cellComponents.ts‎

Lines changed: 54 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,14 @@ enum MetadataFoldingState {
7979
abstract class AbstractCellRenderer extends Disposable {
8080
protected _metadataHeaderContainer!: HTMLElement;
8181
protected _metadataInfoContainer!: HTMLElement;
82+
protected _diffEditorContainer!: HTMLElement;
83+
protected _diagonalFill?: HTMLElement;
8284
protected _layoutInfo!: {
8385
editorHeight: number;
8486
editorMargin: number;
8587
metadataStatusHeight: number;
8688
metadataHeight: number;
89+
bodyMargin: number;
8790
};
8891
protected _foldingIndicator!: HTMLElement;
8992
protected _foldingState!: MetadataFoldingState;
@@ -95,6 +98,7 @@ abstract class AbstractCellRenderer extends Disposable {
9598
readonly notebookEditor: INotebookTextDiffEditor,
9699
readonly cell: CellDiffViewModel,
97100
readonly templateData: CellDiffRenderTemplate,
101+
readonly style: 'left' | 'right' | 'full',
98102
protected readonly instantiationService: IInstantiationService,
99103
protected readonly modeService: IModeService,
100104
protected readonly modelService: IModelService,
@@ -104,9 +108,10 @@ abstract class AbstractCellRenderer extends Disposable {
104108
// init
105109
this._layoutInfo = {
106110
editorHeight: 0,
107-
editorMargin: 32,
111+
editorMargin: 0,
108112
metadataHeight: 0,
109-
metadataStatusHeight: 24
113+
metadataStatusHeight: 25,
114+
bodyMargin: 16
110115
};
111116
this._metadataEditorDisposeStore = new DisposableStore();
112117
this._foldingState = MetadataFoldingState.Collapsed;
@@ -116,16 +121,32 @@ abstract class AbstractCellRenderer extends Disposable {
116121
}
117122

118123
buildBody(container: HTMLElement) {
119-
const diffEditorContainer = DOM.$('.cell-diff-editor-container');
120-
DOM.append(container, diffEditorContainer);
121-
this.styleContainer(diffEditorContainer);
122-
const sourceContainer = DOM.append(diffEditorContainer, DOM.$('.source-container'));
124+
const body = DOM.$('.cell-body');
125+
DOM.append(container, body);
126+
this._diffEditorContainer = DOM.$('.cell-diff-editor-container');
127+
switch (this.style) {
128+
case 'left':
129+
DOM.addClass(body, 'left');
130+
break;
131+
case 'right':
132+
DOM.addClass(body, 'right');
133+
break;
134+
default:
135+
DOM.addClass(body, 'full');
136+
break;
137+
}
138+
139+
DOM.append(body, this._diffEditorContainer);
140+
this._diagonalFill = DOM.append(body, DOM.$('.diagonal-fill'));
141+
// this._diagonalFill.style.display = '0px';
142+
this.styleContainer(this._diffEditorContainer);
143+
const sourceContainer = DOM.append(this._diffEditorContainer, DOM.$('.source-container'));
123144
this.buildSourceEditor(sourceContainer);
124145

125-
this._metadataHeaderContainer = DOM.append(diffEditorContainer, DOM.$('.metadata-header-container'));
126-
this._metadataInfoContainer = DOM.append(diffEditorContainer, DOM.$('.metadata-info-container'));
146+
this._metadataHeaderContainer = DOM.append(this._diffEditorContainer, DOM.$('.metadata-header-container'));
147+
this._metadataInfoContainer = DOM.append(this._diffEditorContainer, DOM.$('.metadata-info-container'));
127148
this.buildMetadataHeader(this._metadataHeaderContainer);
128-
this.buildMetadataBody(this._metadataInfoContainer);
149+
// this.buildMetadataBody(this._metadataInfoContainer);
129150
}
130151

131152
buildMetadataHeader(metadataHeaderContainer: HTMLElement): void {
@@ -225,8 +246,6 @@ abstract class AbstractCellRenderer extends Disposable {
225246
abstract initData(): void;
226247
abstract styleContainer(container: HTMLElement): void;
227248
abstract buildSourceEditor(sourceContainer: HTMLElement): void;
228-
abstract buildMetadataBody(metadataBodyContainer: HTMLElement): void;
229-
230249
abstract onDidLayoutChange(event: CellDiffViewModelLayoutChangeEvent): void;
231250
abstract layout(state: { outerWidth?: boolean, editorHeight?: boolean, metadataEditor?: boolean }): void;
232251
}
@@ -242,7 +261,7 @@ export class UnchangedCell extends AbstractCellRenderer {
242261
@IModelService protected modelService: IModelService,
243262
@IInstantiationService protected readonly instantiationService: IInstantiationService,
244263
) {
245-
super(notebookEditor, cell, templateData, instantiationService, modeService, modelService);
264+
super(notebookEditor, cell, templateData, 'full', instantiationService, modeService, modelService);
246265
}
247266

248267
initData() {
@@ -284,9 +303,6 @@ export class UnchangedCell extends AbstractCellRenderer {
284303
});
285304
}
286305

287-
buildMetadataBody(metadataBodyContainer: HTMLElement): void {
288-
289-
}
290306

291307
onDidLayoutChange(event: CellDiffViewModelLayoutChangeEvent): void {
292308
if (event.outerWidth !== undefined) {
@@ -310,13 +326,12 @@ export class UnchangedCell extends AbstractCellRenderer {
310326
}
311327

312328
this.notebookEditor.layoutNotebookCell(this.cell,
313-
this._layoutInfo.editorHeight + this._layoutInfo.editorMargin + this._layoutInfo.metadataHeight + this._layoutInfo.metadataStatusHeight);
329+
this._layoutInfo.editorHeight + this._layoutInfo.editorMargin + this._layoutInfo.metadataHeight + this._layoutInfo.metadataStatusHeight + this._layoutInfo.bodyMargin);
314330
}
315331
}
316332

317333
export class DeletedCell extends AbstractCellRenderer {
318334
private _editor!: CodeEditorWidget;
319-
private _diagonalFill!: HTMLElement;
320335
constructor(
321336
readonly notebookEditor: INotebookTextDiffEditor,
322337
readonly cell: CellDiffViewModel,
@@ -325,14 +340,13 @@ export class DeletedCell extends AbstractCellRenderer {
325340
@IModelService readonly modelService: IModelService,
326341
@IInstantiationService protected readonly instantiationService: IInstantiationService,
327342
) {
328-
super(notebookEditor, cell, templateData, instantiationService, modeService, modelService);
343+
super(notebookEditor, cell, templateData, 'left', instantiationService, modeService, modelService);
329344
}
330345

331346
initData(): void {
332347
}
333348

334349
styleContainer(container: HTMLElement) {
335-
DOM.addClass(container, 'delete');
336350
}
337351

338352
buildSourceEditor(sourceContainer: HTMLElement): void {
@@ -342,7 +356,6 @@ export class DeletedCell extends AbstractCellRenderer {
342356
const editorHeight = lineCount * lineHeight + EDITOR_TOP_PADDING + EDITOR_BOTTOM_PADDING;
343357

344358
const editorContainer = DOM.append(sourceContainer, DOM.$('.editor-container'));
345-
this._diagonalFill = DOM.append(sourceContainer, DOM.$('.diagonal-fill'));
346359

347360
this._editor = this.instantiationService.createInstance(CodeEditorWidget, editorContainer, {
348361
...fixedEditorOptions,
@@ -352,7 +365,10 @@ export class DeletedCell extends AbstractCellRenderer {
352365
}
353366
}, {});
354367

355-
this._diagonalFill.style.height = `${editorHeight}px`;
368+
if (this._diagonalFill) {
369+
this._layoutInfo.editorHeight = editorHeight;
370+
// this._diagonalFill.style.height = `${this._diffEditorContainer.clientHeight}px`;
371+
}
356372

357373
this._register(this._editor.onDidContentSizeChange((e) => {
358374
if (e.contentHeightChanged) {
@@ -372,9 +388,6 @@ export class DeletedCell extends AbstractCellRenderer {
372388

373389
}
374390

375-
buildMetadataBody(metadataBodyContainer: HTMLElement): void {
376-
}
377-
378391
onDidLayoutChange(e: CellDiffViewModelLayoutChangeEvent) {
379392
if (e.outerWidth !== undefined) {
380393
this.layout({ outerWidth: true });
@@ -390,21 +403,22 @@ export class DeletedCell extends AbstractCellRenderer {
390403

391404
if (state.metadataEditor || state.outerWidth) {
392405
this._metadataEditor?.layout({
393-
width: this.notebookEditor.getLayoutInfo().width - 20,
406+
width: (this.notebookEditor.getLayoutInfo().width - 20) / 2 - 18,
394407
height: this._layoutInfo.metadataHeight
395408
});
396409
}
397410

398-
this._diagonalFill.style.height = `${this._layoutInfo.editorHeight}px`;
411+
if (this._diagonalFill) {
412+
// this._diagonalFill.style.height = `${this._diffEditorContainer.clientHeight}px`;
413+
}
399414

400415
this.notebookEditor.layoutNotebookCell(this.cell,
401-
this._layoutInfo.editorHeight + this._layoutInfo.editorMargin + this._layoutInfo.metadataHeight + this._layoutInfo.metadataStatusHeight);
416+
this._layoutInfo.editorHeight + this._layoutInfo.editorMargin + this._layoutInfo.metadataHeight + this._layoutInfo.metadataStatusHeight + this._layoutInfo.bodyMargin);
402417
}
403418
}
404419

405420
export class InsertCell extends AbstractCellRenderer {
406421
private _editor!: CodeEditorWidget;
407-
private _diagonalFill!: HTMLElement;
408422
constructor(
409423
readonly notebookEditor: INotebookTextDiffEditor,
410424
readonly cell: CellDiffViewModel,
@@ -413,22 +427,20 @@ export class InsertCell extends AbstractCellRenderer {
413427
@IModeService readonly modeService: IModeService,
414428
@IModelService readonly modelService: IModelService,
415429
) {
416-
super(notebookEditor, cell, templateData, instantiationService, modeService, modelService);
430+
super(notebookEditor, cell, templateData, 'right', instantiationService, modeService, modelService);
417431
}
418432

419433
initData(): void {
420434
}
421435

422436
styleContainer(container: HTMLElement): void {
423-
DOM.addClass(container, 'insert');
424437
}
425438

426439
buildSourceEditor(sourceContainer: HTMLElement): void {
427440
const modifiedCell = this.cell.modified!;
428441
const lineCount = modifiedCell.textBuffer.getLineCount();
429442
const lineHeight = this.notebookEditor.getLayoutInfo().fontInfo.lineHeight || 17;
430443
const editorHeight = lineCount * lineHeight + EDITOR_TOP_PADDING + EDITOR_BOTTOM_PADDING;
431-
this._diagonalFill = DOM.append(sourceContainer, DOM.$('.diagonal-fill'));
432444
const editorContainer = DOM.append(sourceContainer, DOM.$('.editor-container'));
433445

434446
this._editor = this.instantiationService.createInstance(CodeEditorWidget, editorContainer, {
@@ -439,7 +451,11 @@ export class InsertCell extends AbstractCellRenderer {
439451
}
440452
}, {});
441453

442-
this._diagonalFill.style.height = `${editorHeight}px`;
454+
this._layoutInfo.editorHeight = editorHeight;
455+
456+
if (this._diagonalFill) {
457+
this._diagonalFill.style.height = `${this._diffEditorContainer.clientHeight}px`;
458+
}
443459

444460
this._register(this._editor.onDidContentSizeChange((e) => {
445461
if (e.contentHeightChanged) {
@@ -458,9 +474,6 @@ export class InsertCell extends AbstractCellRenderer {
458474
});
459475
}
460476

461-
buildMetadataBody(metadataBodyContainer: HTMLElement): void {
462-
}
463-
464477
onDidLayoutChange(e: CellDiffViewModelLayoutChangeEvent) {
465478
if (e.outerWidth !== undefined) {
466479
this.layout({ outerWidth: true });
@@ -482,10 +495,12 @@ export class InsertCell extends AbstractCellRenderer {
482495
});
483496
}
484497

485-
this._diagonalFill.style.height = `${this._layoutInfo.editorHeight}px`;
498+
if (this._diagonalFill) {
499+
this._diagonalFill.style.height = `${this._diffEditorContainer.clientHeight}px`;
500+
}
486501

487502
this.notebookEditor.layoutNotebookCell(this.cell,
488-
this._layoutInfo.editorHeight + this._layoutInfo.editorMargin + this._layoutInfo.metadataHeight + this._layoutInfo.metadataStatusHeight);
503+
this._layoutInfo.editorHeight + this._layoutInfo.editorMargin + this._layoutInfo.metadataHeight + this._layoutInfo.metadataStatusHeight + this._layoutInfo.bodyMargin);
489504
}
490505
}
491506

@@ -500,7 +515,7 @@ export class ModifiedCell extends AbstractCellRenderer {
500515
@IModeService readonly modeService: IModeService,
501516
@IModelService readonly modelService: IModelService,
502517
) {
503-
super(notebookEditor, cell, templateData, instantiationService, modeService, modelService);
518+
super(notebookEditor, cell, templateData, 'full', instantiationService, modeService, modelService);
504519
}
505520

506521
initData(): void {
@@ -559,9 +574,6 @@ export class ModifiedCell extends AbstractCellRenderer {
559574

560575
}
561576

562-
buildMetadataBody(metadataBodyContainer: HTMLElement): void {
563-
}
564-
565577
onDidLayoutChange(e: CellDiffViewModelLayoutChangeEvent) {
566578
if (e.outerWidth !== undefined) {
567579
this.layout({ outerWidth: true });
@@ -582,7 +594,7 @@ export class ModifiedCell extends AbstractCellRenderer {
582594
}
583595

584596
this.notebookEditor.layoutNotebookCell(this.cell,
585-
this._layoutInfo.editorHeight + this._layoutInfo.editorMargin + this._layoutInfo.metadataHeight + this._layoutInfo.metadataStatusHeight);
597+
this._layoutInfo.editorHeight + this._layoutInfo.editorMargin + this._layoutInfo.metadataHeight + this._layoutInfo.metadataStatusHeight + this._layoutInfo.bodyMargin);
586598

587599
}
588600
}

‎src/vs/workbench/contrib/notebook/browser/diff/notebookDiff.css‎

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,49 @@
1616
width: 50%;
1717
} */
1818

19-
.notebook-text-diff-editor .cell-diff-editor-container {
19+
/* .notebook-text-diff-editor {
2020
margin: 8px;
21+
} */
22+
23+
.notebook-text-diff-editor .cell-body {
24+
display: flex;
25+
flex-direction: row;
26+
margin: 8px;
27+
}
28+
29+
.notebook-text-diff-editor .cell-body .diagonal-fill {
30+
display: none;
31+
width: 50%;
32+
}
33+
34+
.notebook-text-diff-editor .cell-body .cell-diff-editor-container {
35+
width: 100%;
36+
}
37+
38+
.notebook-text-diff-editor .cell-body.left .cell-diff-editor-container,
39+
.notebook-text-diff-editor .cell-body.right .cell-diff-editor-container {
40+
display: inline-block;
41+
}
42+
43+
.notebook-text-diff-editor .cell-body.left .diagonal-fill,
44+
.notebook-text-diff-editor .cell-body.right .diagonal-fill {
45+
display: inline-block;
46+
}
47+
48+
.notebook-text-diff-editor .cell-body.left .cell-diff-editor-container {
49+
width: calc(50% - 18px);
50+
}
51+
52+
.notebook-text-diff-editor .cell-body.left .diagonal-fill {
53+
width: calc(50% + 18px);
54+
}
55+
56+
.notebook-text-diff-editor .cell-body.right .cell-diff-editor-container {
57+
width: calc(50% + 18px);
58+
}
59+
60+
.notebook-text-diff-editor .cell-body.right .diagonal-fill {
61+
width: calc(50% - 18px);
2162
}
2263

2364
.notebook-text-diff-editor .cell-diff-editor-container .metadata-header-container {
@@ -42,26 +83,6 @@
4283
line-height: 21px;
4384
}
4485

45-
.notebook-text-diff-editor .cell-diff-editor-container.delete .editor-container {
46-
display: inline-block;
47-
width: calc(50% - 18px);
48-
}
49-
50-
.notebook-text-diff-editor .cell-diff-editor-container.delete .diagonal-fill {
51-
display: inline-block;
52-
width: calc(50% + 18px);
53-
}
54-
55-
.notebook-text-diff-editor .cell-diff-editor-container.insert .editor-container {
56-
display: inline-block;
57-
width: calc(50% + 18px);
58-
}
59-
60-
.notebook-text-diff-editor .cell-diff-editor-container.insert .diagonal-fill {
61-
display: inline-block;
62-
width: calc(50% - 18px);
63-
}
64-
6586
.notebook-text-diff-editor {
6687
overflow: hidden;
6788
}

‎src/vs/workbench/contrib/notebook/browser/diff/notebookTextDiffEditor.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -288,7 +288,7 @@ export class NotebookTextDiffEditor extends BaseEditor implements INotebookTextD
288288
registerThemingParticipant((theme, collector) => {
289289
const cellBorderColor = theme.getColor(notebookCellBorder);
290290
if (cellBorderColor) {
291-
collector.addRule(`.notebook-text-diff-editor .editor-container { border: 1px solid ${cellBorderColor};}`);
291+
collector.addRule(`.notebook-text-diff-editor .source-container { border: 1px solid ${cellBorderColor};}`);
292292
collector.addRule(`.notebook-text-diff-editor .metadata-editor-container {
293293
border-left: 1px solid ${cellBorderColor};
294294
border-right: 1px solid ${cellBorderColor};

0 commit comments

Comments
 (0)