Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

set terminal alignment to top when panel is vertical #141972

Merged
merged 4 commits into from Feb 2, 2022
Merged

set terminal alignment to top when panel is vertical #141972

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ac1bac6
fix #141403
meganrogge Feb 1, 2022
f118c46
improve name
meganrogge Feb 1, 2022
186c982
tweak names
meganrogge Feb 1, 2022
fe50e7f
terminal-side-view
meganrogge Feb 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/vs/workbench/contrib/terminal/browser/media/terminal.css
View file
Open in desktop
Expand Up @@ -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;
}

.terminal-side-view .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;
Expand Down
25 changes: 18 additions & 7 deletions src/vs/workbench/contrib/terminal/browser/terminalTabbedView.ts
View file
Open in desktop
Expand Up @@ -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 CssClass {
ViewIsVertical = 'terminal-side-view',
FindFocus = 'find-focused'
}

const enum WidthConstants {
StatusIcon = 30,
SplitAnnotation = 30
}

export class TerminalTabbedView extends Disposable {

Expand Down Expand Up @@ -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(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(CssClass.ViewIsVertical);
} else {
this._terminalContainer.classList.remove(CssClass.ViewIsVertical);
}
});

this._splitView = new SplitView(parentElement, { orientation: Orientation.HORIZONTAL, proportionalLayout: false });
Expand Down Expand Up @@ -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 ? WidthConstants.StatusIcon : 0;
const splitAnnotationWidth = (this._terminalGroupService.getGroupForInstance(instance)?.terminalInstances.length || 0) > 1 ? WidthConstants.SplitAnnotation : 0;
return additionalWidth + splitAnnotationWidth + statusIconWidth;
}

Expand Down