Fix split terminal icon orientation

Fixes #93576
microsoft · Apr 9, 2020 · b4e3612 · b4e3612
1 parent ca72cb1
commit b4e3612
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/src/vs/workbench/contrib/terminal/browser/media/terminal.css b/src/vs/workbench/contrib/terminal/browser/media/terminal.css
@@ -156,11 +156,6 @@
 	cursor: pointer!important;
 }
 
-/* Rotate icon when terminal is in the sidebar */
-.monaco-workbench .part.sidebar .title-actions .terminal-action.codicon-split-horizontal {
-	transform: rotate(-90deg);
-}
-
 .monaco-workbench .part.sidebar > .title > .title-actions .switch-terminal,
 .monaco-pane-view .pane > .pane-header .monaco-action-bar .switch-terminal {
 	border-width: 1px;

diff --git a/src/vs/workbench/contrib/terminal/browser/terminalActions.ts b/src/vs/workbench/contrib/terminal/browser/terminalActions.ts
@@ -279,14 +279,16 @@ export class SplitTerminalAction extends Action {
 	public static readonly ID = TERMINAL_COMMAND_ID.SPLIT;
 	public static readonly LABEL = nls.localize('workbench.action.terminal.split', "Split Terminal");
 	public static readonly SHORT_LABEL = nls.localize('workbench.action.terminal.split.short', "Split");
+	public static readonly HORIZONTAL_CLASS = 'terminal-action codicon-split-horizontal';
+	public static readonly VERTICAL_CLASS = 'terminal-action codicon-split-vertical';
 
 	constructor(
 		id: string, label: string,
 		@ITerminalService private readonly _terminalService: ITerminalService,
 		@ICommandService private readonly commandService: ICommandService,
 		@IWorkspaceContextService private readonly workspaceContextService: IWorkspaceContextService
 	) {
-		super(id, label, 'terminal-action codicon-split-horizontal');
+		super(id, label, SplitTerminalAction.HORIZONTAL_CLASS);
 	}
 
 	public async run(event?: any): Promise<any> {

diff --git a/src/vs/workbench/contrib/terminal/browser/terminalView.ts b/src/vs/workbench/contrib/terminal/browser/terminalView.ts
@@ -30,6 +30,7 @@ import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IViewDescriptorService } from 'vs/workbench/common/views';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { PANEL_BACKGROUND, SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
+import { Orientation } from 'vs/base/browser/ui/sash/sash';
 
 const FIND_FOCUS_CLASS = 'find-focused';
 
@@ -42,6 +43,7 @@ export class TerminalViewPane extends ViewPane {
 	private _parentDomElement: HTMLElement | undefined;
 	private _terminalContainer: HTMLElement | undefined;
 	private _findWidget: TerminalFindWidget | undefined;
+	private _splitTerminalAction: IAction | undefined;
 
 	constructor(
 		options: IViewPaneOptions,
@@ -120,14 +122,19 @@ export class TerminalViewPane extends ViewPane {
 
 	protected layoutBody(height: number, width: number): void {
 		this._terminalService.terminalTabs.forEach(t => t.layout(width, height));
+		// Update orientation of split button icon
+		if (this._splitTerminalAction) {
+			this._splitTerminalAction.class = this.orientation === Orientation.HORIZONTAL ? SplitTerminalAction.HORIZONTAL_CLASS : SplitTerminalAction.VERTICAL_CLASS;
+		}
 	}
 
 	public getActions(): IAction[] {
 		if (!this._actions) {
+			this._splitTerminalAction = this._instantiationService.createInstance(SplitTerminalAction, SplitTerminalAction.ID, SplitTerminalAction.LABEL);
 			this._actions = [
 				this._instantiationService.createInstance(SwitchTerminalAction, SwitchTerminalAction.ID, SwitchTerminalAction.LABEL),
 				this._instantiationService.createInstance(CreateNewTerminalAction, CreateNewTerminalAction.ID, CreateNewTerminalAction.SHORT_LABEL),
-				this._instantiationService.createInstance(SplitTerminalAction, SplitTerminalAction.ID, SplitTerminalAction.LABEL),
+				this._splitTerminalAction,
 				this._instantiationService.createInstance(KillTerminalAction, KillTerminalAction.ID, KillTerminalAction.PANEL_LABEL)
 			];
 			this._actions.forEach(a => {