From ac1bac641c26228e72cad613358716101d5b5fff Mon Sep 17 00:00:00 2001 From: meganrogge Date: Tue, 1 Feb 2022 16:33:49 -0600 Subject: [PATCH 1/4] fix #141403 --- .../terminal/browser/media/terminal.css | 7 +++++- .../terminal/browser/terminalTabbedView.ts | 25 +++++++++++++------ 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/src/vs/workbench/contrib/terminal/browser/media/terminal.css b/src/vs/workbench/contrib/terminal/browser/media/terminal.css index b0f82cd7de9ca..514755ad28fc5 100644 --- a/src/vs/workbench/contrib/terminal/browser/media/terminal.css +++ b/src/vs/workbench/contrib/terminal/browser/media/terminal.css @@ -48,13 +48,18 @@ .monaco-workbench .pane-body.integrated-terminal .xterm { /* All terminals have at least 10px left/right edge padding and 2 padding on the bottom (so underscores on last line are visible */ padding: 0 10px 2px; - /* Bottom align the terminal withing the split pane */ + /* Bottom align the terminal within the split pane */ position: absolute; bottom: 0; left: 0; right: 0; } +.vertical .terminal.xterm { + /* Top align the terminal within the split pane when the panel is vertical */ + top: 0; +} + .monaco-workbench .editor-instance .terminal-wrapper.fixed-dims .xterm, .monaco-workbench .pane-body.integrated-terminal .terminal-wrapper.fixed-dims .xterm { position: static; diff --git a/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts b/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts index 6c9576dbc2317..92bb09dbc79d2 100644 --- a/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts +++ b/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts @@ -28,9 +28,15 @@ import { TerminalContextKeys } from 'vs/workbench/contrib/terminal/common/termin const $ = dom.$; -const FIND_FOCUS_CLASS = 'find-focused'; -const STATUS_ICON_WIDTH = 30; -const SPLIT_ANNOTATION_WIDTH = 30; +const enum Class { + ViewIsVertical = 'vertical', + FindFocus = 'find-focused' +} + +const enum Width { + StatusIcon = 30, + SplitAnnotation = 30 +} export class TerminalTabbedView extends Disposable { @@ -129,13 +135,18 @@ export class TerminalTabbedView extends Disposable { this._register(this._themeService.onDidColorThemeChange(theme => this._updateTheme(theme))); this._updateTheme(); - this._findWidget.focusTracker.onDidFocus(() => this._terminalContainer.classList.add(FIND_FOCUS_CLASS)); - this._findWidget.focusTracker.onDidBlur(() => this._terminalContainer.classList.remove(FIND_FOCUS_CLASS)); + this._findWidget.focusTracker.onDidFocus(() => this._terminalContainer.classList.add(Class.FindFocus)); + this._findWidget.focusTracker.onDidBlur(() => this._terminalContainer.classList.remove(Class.FindFocus)); this._attachEventListeners(parentElement, this._terminalContainer); this._terminalGroupService.onDidChangePanelOrientation((orientation) => { this._panelOrientation = orientation; + if (this._panelOrientation === Orientation.VERTICAL) { + this._terminalContainer.classList.add(Class.ViewIsVertical); + } else { + this._terminalContainer.classList.remove(Class.ViewIsVertical); + } }); this._splitView = new SplitView(parentElement, { orientation: Orientation.HORIZONTAL, proportionalLayout: false }); @@ -223,8 +234,8 @@ export class TerminalTabbedView extends Disposable { private _getAdditionalWidth(instance: ITerminalInstance): number { // Size to include padding, icon, status icon (if any), split annotation (if any), + a little more const additionalWidth = 40; - const statusIconWidth = instance.statusList.statuses.length > 0 ? STATUS_ICON_WIDTH : 0; - const splitAnnotationWidth = (this._terminalGroupService.getGroupForInstance(instance)?.terminalInstances.length || 0) > 1 ? SPLIT_ANNOTATION_WIDTH : 0; + const statusIconWidth = instance.statusList.statuses.length > 0 ? Width.StatusIcon : 0; + const splitAnnotationWidth = (this._terminalGroupService.getGroupForInstance(instance)?.terminalInstances.length || 0) > 1 ? Width.SplitAnnotation : 0; return additionalWidth + splitAnnotationWidth + statusIconWidth; } From f118c46bd217c0d2f9966eb4c2c138a873839e2e Mon Sep 17 00:00:00 2001 From: meganrogge Date: Tue, 1 Feb 2022 16:37:16 -0600 Subject: [PATCH 2/4] improve name --- src/vs/workbench/contrib/terminal/browser/media/terminal.css | 2 +- src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/contrib/terminal/browser/media/terminal.css b/src/vs/workbench/contrib/terminal/browser/media/terminal.css index 514755ad28fc5..6fa0f4d9d8874 100644 --- a/src/vs/workbench/contrib/terminal/browser/media/terminal.css +++ b/src/vs/workbench/contrib/terminal/browser/media/terminal.css @@ -55,7 +55,7 @@ right: 0; } -.vertical .terminal.xterm { +.view-is-vertical .terminal.xterm { /* Top align the terminal within the split pane when the panel is vertical */ top: 0; } diff --git a/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts b/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts index 92bb09dbc79d2..41d2a560428b6 100644 --- a/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts +++ b/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts @@ -29,7 +29,7 @@ import { TerminalContextKeys } from 'vs/workbench/contrib/terminal/common/termin const $ = dom.$; const enum Class { - ViewIsVertical = 'vertical', + ViewIsVertical = 'view-is-vertical', FindFocus = 'find-focused' } From 186c9829eac51f33ef8f309af50127510ade0bf9 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Tue, 1 Feb 2022 17:57:47 -0600 Subject: [PATCH 3/4] tweak names --- .../terminal/browser/media/terminal.css | 2 +- .../terminal/browser/terminalTabbedView.ts | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/vs/workbench/contrib/terminal/browser/media/terminal.css b/src/vs/workbench/contrib/terminal/browser/media/terminal.css index 6fa0f4d9d8874..f56bf0aaeb424 100644 --- a/src/vs/workbench/contrib/terminal/browser/media/terminal.css +++ b/src/vs/workbench/contrib/terminal/browser/media/terminal.css @@ -55,7 +55,7 @@ right: 0; } -.view-is-vertical .terminal.xterm { +.view-in-side-panel .terminal.xterm { /* Top align the terminal within the split pane when the panel is vertical */ top: 0; } diff --git a/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts b/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts index 41d2a560428b6..300c9dbb97190 100644 --- a/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts +++ b/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts @@ -28,12 +28,12 @@ import { TerminalContextKeys } from 'vs/workbench/contrib/terminal/common/termin const $ = dom.$; -const enum Class { - ViewIsVertical = 'view-is-vertical', +const enum CssClass { + ViewIsVertical = 'view-in-side-panel', FindFocus = 'find-focused' } -const enum Width { +const enum WidthConstants { StatusIcon = 30, SplitAnnotation = 30 } @@ -135,17 +135,17 @@ export class TerminalTabbedView extends Disposable { this._register(this._themeService.onDidColorThemeChange(theme => this._updateTheme(theme))); this._updateTheme(); - this._findWidget.focusTracker.onDidFocus(() => this._terminalContainer.classList.add(Class.FindFocus)); - this._findWidget.focusTracker.onDidBlur(() => this._terminalContainer.classList.remove(Class.FindFocus)); + this._findWidget.focusTracker.onDidFocus(() => this._terminalContainer.classList.add(CssClass.FindFocus)); + this._findWidget.focusTracker.onDidBlur(() => this._terminalContainer.classList.remove(CssClass.FindFocus)); this._attachEventListeners(parentElement, this._terminalContainer); this._terminalGroupService.onDidChangePanelOrientation((orientation) => { this._panelOrientation = orientation; if (this._panelOrientation === Orientation.VERTICAL) { - this._terminalContainer.classList.add(Class.ViewIsVertical); + this._terminalContainer.classList.add(CssClass.ViewIsVertical); } else { - this._terminalContainer.classList.remove(Class.ViewIsVertical); + this._terminalContainer.classList.remove(CssClass.ViewIsVertical); } }); @@ -234,8 +234,8 @@ export class TerminalTabbedView extends Disposable { private _getAdditionalWidth(instance: ITerminalInstance): number { // Size to include padding, icon, status icon (if any), split annotation (if any), + a little more const additionalWidth = 40; - const statusIconWidth = instance.statusList.statuses.length > 0 ? Width.StatusIcon : 0; - const splitAnnotationWidth = (this._terminalGroupService.getGroupForInstance(instance)?.terminalInstances.length || 0) > 1 ? Width.SplitAnnotation : 0; + const statusIconWidth = instance.statusList.statuses.length > 0 ? WidthConstants.StatusIcon : 0; + const splitAnnotationWidth = (this._terminalGroupService.getGroupForInstance(instance)?.terminalInstances.length || 0) > 1 ? WidthConstants.SplitAnnotation : 0; return additionalWidth + splitAnnotationWidth + statusIconWidth; } From fe50e7fa1dbd39b3be9524a5c90e8015c94abd56 Mon Sep 17 00:00:00 2001 From: meganrogge Date: Tue, 1 Feb 2022 18:02:37 -0600 Subject: [PATCH 4/4] terminal-side-view --- src/vs/workbench/contrib/terminal/browser/media/terminal.css | 2 +- src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/contrib/terminal/browser/media/terminal.css b/src/vs/workbench/contrib/terminal/browser/media/terminal.css index f56bf0aaeb424..cc13450fe6fd8 100644 --- a/src/vs/workbench/contrib/terminal/browser/media/terminal.css +++ b/src/vs/workbench/contrib/terminal/browser/media/terminal.css @@ -55,7 +55,7 @@ right: 0; } -.view-in-side-panel .terminal.xterm { +.terminal-side-view .terminal.xterm { /* Top align the terminal within the split pane when the panel is vertical */ top: 0; } diff --git a/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts b/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts index 300c9dbb97190..c0ba0a11000e6 100644 --- a/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts +++ b/src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts @@ -29,7 +29,7 @@ import { TerminalContextKeys } from 'vs/workbench/contrib/terminal/common/termin const $ = dom.$; const enum CssClass { - ViewIsVertical = 'view-in-side-panel', + ViewIsVertical = 'terminal-side-view', FindFocus = 'find-focused' }