Skip to content

Commit fede343

Browse files
TyriarTyriar
committed
Put .split-view-view's into a container
Fixes microsoft#44435
1 parent 3add098 commit fede343

4 files changed

Lines changed: 22 additions & 40 deletions

File tree

‎src/vs/base/browser/ui/splitview/splitview.css‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,20 @@
1010
height: 100%;
1111
}
1212

13-
.monaco-split-view2 > .split-view-view {
13+
.monaco-split-view2 > .split-view-container {
14+
width: 100%;
15+
height: 100%;
16+
}
17+
18+
.monaco-split-view2 > .split-view-container > .split-view-view {
1419
overflow: hidden;
1520
}
1621

17-
.monaco-split-view2.vertical > .split-view-view {
22+
.monaco-split-view2.vertical > .split-view-container > .split-view-view {
1823
width: 100%;
1924
}
2025

21-
.monaco-split-view2.horizontal > .split-view-view {
26+
.monaco-split-view2.horizontal > .split-view-container > .split-view-view {
2227
height: 100%;
2328
display: inline-block;
2429
}

‎src/vs/base/browser/ui/splitview/splitview.ts‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export class SplitView implements IDisposable {
8282

8383
private orientation: Orientation;
8484
private el: HTMLElement;
85+
private viewContainer: HTMLElement;
8586
private size = 0;
8687
private contentSize = 0;
8788
private viewItems: IViewItem[] = [];
@@ -105,6 +106,10 @@ export class SplitView implements IDisposable {
105106
dom.addClass(this.el, 'monaco-split-view2');
106107
dom.addClass(this.el, this.orientation === Orientation.VERTICAL ? 'vertical' : 'horizontal');
107108
container.appendChild(this.el);
109+
110+
this.viewContainer = document.createElement('div');
111+
dom.addClass(this.viewContainer, 'split-view-container');
112+
this.el.appendChild(this.viewContainer);
108113
}
109114

110115
addView(view: IView, size: number, index = this.viewItems.length): void {
@@ -118,13 +123,13 @@ export class SplitView implements IDisposable {
118123
const container = dom.$('.split-view-view');
119124

120125
if (index === this.viewItems.length) {
121-
this.el.appendChild(container);
126+
this.viewContainer.appendChild(container);
122127
} else {
123-
this.el.insertBefore(container, this.el.children.item(index));
128+
this.viewContainer.insertBefore(container, this.viewContainer.children.item(index));
124129
}
125130

126131
const onChangeDisposable = view.onDidChange(size => this.onViewChange(item, size));
127-
const containerDisposable = toDisposable(() => this.el.removeChild(container));
132+
const containerDisposable = toDisposable(() => this.viewContainer.removeChild(container));
128133
const disposable = combinedDisposable([onChangeDisposable, containerDisposable]);
129134

130135
const layoutContainer = this.orientation === Orientation.VERTICAL
@@ -218,9 +223,9 @@ export class SplitView implements IDisposable {
218223
this.viewItems.splice(to, 0, viewItem);
219224

220225
if (to + 1 < this.viewItems.length) {
221-
this.el.insertBefore(viewItem.container, this.viewItems[to + 1].container);
226+
this.viewContainer.insertBefore(viewItem.container, this.viewItems[to + 1].container);
222227
} else {
223-
this.el.appendChild(viewItem.container);
228+
this.viewContainer.appendChild(viewItem.container);
224229
}
225230

226231
this.layoutViews();

‎src/vs/workbench/parts/terminal/electron-browser/media/terminal.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@
3333
bottom: 2px; /* Matches padding-bottom on .terminal-outer-container */
3434
top: 0;
3535
}
36-
.monaco-workbench .panel.integrated-terminal .monaco-split-view2.horizontal .split-view-view.first .terminal-wrapper {
36+
.monaco-workbench .panel.integrated-terminal .monaco-split-view2.horizontal .split-view-view:first-child .terminal-wrapper {
3737
margin-left: 20px;
3838
}
39-
.monaco-workbench .panel.integrated-terminal .monaco-split-view2.horizontal .split-view-view.last .terminal-wrapper {
39+
.monaco-workbench .panel.integrated-terminal .monaco-split-view2.horizontal .split-view-view:last-child .terminal-wrapper {
4040
margin-right: 20px;
4141
}
4242

@@ -52,7 +52,7 @@
5252
.monaco-workbench .panel.integrated-terminal .xterm-viewport {
5353
margin-right: -10px;
5454
}
55-
.monaco-workbench .panel.integrated-terminal .monaco-split-view2.horizontal .split-view-view.last .xterm-viewport {
55+
.monaco-workbench .panel.integrated-terminal .monaco-split-view2.horizontal .split-view-view:last-child .xterm-viewport {
5656
margin-right: -20px;
5757
}
5858

@@ -111,7 +111,7 @@
111111
left: 0;
112112
user-select: none;
113113
}
114-
.monaco-workbench .panel.integrated-terminal .monaco-split-view2.vertical .split-view-view:not(.last) .xterm {
114+
.monaco-workbench .panel.integrated-terminal .monaco-split-view2.vertical .split-view-view:not(:last-child) .xterm {
115115
/* When vertical and NOT the bottom terminal, align to the top instead to prevent the output jumping around erratically */
116116
top: 0;
117117
bottom: auto;

‎src/vs/workbench/parts/terminal/electron-browser/terminalTab.ts‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,6 @@ class SplitPaneContainer {
130130
this._withDisabledLayout(() => this._splitView.addView(child, size, index));
131131

132132
this.resetSize();
133-
this._refreshOrderClasses();
134133

135134
this._onDidChange = anyEvent(...this._children.map(c => c.onDidChange));
136135
}
@@ -146,19 +145,6 @@ class SplitPaneContainer {
146145
this._children.splice(index, 1);
147146
this._splitView.removeView(index);
148147
this.resetSize();
149-
this._refreshOrderClasses();
150-
}
151-
}
152-
153-
private _refreshOrderClasses(): void {
154-
this._children.forEach((c, i) => {
155-
c.setIsFirst(i === 0);
156-
c.setIsLast(i === this._children.length - 1);
157-
});
158-
// HACK: Force another layout, this isn't ideal but terminal instance uses the first/last CSS
159-
// rules for sizing the terminal and the layout is performed when the split view is added.
160-
if (this._children.length > 0) {
161-
this.layout(this._width, this._height);
162148
}
163149
}
164150

@@ -217,7 +203,6 @@ class SplitPane implements IView {
217203
public instance: ITerminalInstance;
218204
public orientation: Orientation | undefined;
219205
protected _size: number;
220-
private _container: HTMLElement | undefined;
221206

222207
private _onDidChange: Event<number | undefined> = Event.None;
223208
public get onDidChange(): Event<number | undefined> { return this._onDidChange; }
@@ -231,22 +216,9 @@ class SplitPane implements IView {
231216
if (!container) {
232217
return;
233218
}
234-
this._container = container;
235219
this.instance.attachToElement(container);
236220
}
237221

238-
public setIsFirst(isFirst: boolean): void {
239-
if (this._container) {
240-
this._container.classList.toggle('first', isFirst);
241-
}
242-
}
243-
244-
public setIsLast(isLast: boolean): void {
245-
if (this._container) {
246-
this._container.classList.toggle('last', isLast);
247-
}
248-
}
249-
250222
public layout(size: number): void {
251223
// Only layout when both sizes are known
252224
this._size = size;

0 commit comments

Comments
 (0)