quick open side by side icon update

src/vs/workbench/browser/parts/editor/editor.contribution.ts

@@ -108,6 +108,8 @@ export class QuickOpenActionContributor extends ActionBarContributor {
 		if (entry) {
 			if (!this.openToSideActionInstance) {
 				this.openToSideActionInstance = this.instantiationService.createInstance(OpenToSideAction);
+			} else {
+				this.openToSideActionInstance.updateClass();
 			}
 
 			actions.push(this.openToSideActionInstance);

src/vs/workbench/browser/parts/editor/editorActions.ts

@@ -16,6 +16,7 @@ import { IPartService } from 'vs/workbench/services/part/common/partService';
 import { Position, IEditor, Direction, IResourceInput, IEditorInput } from 'vs/platform/editor/common/editor';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IHistoryService } from 'vs/workbench/services/history/common/history';
+import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IEditorGroupService, GroupArrangement } from 'vs/workbench/services/group/common/groupService';
 import { BaseTextEditor } from 'vs/workbench/browser/parts/editor/textEditor';
@@ -409,12 +410,21 @@ export class OpenToSideAction extends Action {
 	public static OPEN_TO_SIDE_ID = 'workbench.action.openToSide';
 	public static OPEN_TO_SIDE_LABEL = nls.localize('openToSide', "Open to the Side");
 
-	constructor( @IWorkbenchEditorService private editorService: IWorkbenchEditorService) {
+	constructor(
+		@IWorkbenchEditorService private editorService: IWorkbenchEditorService,
+		@IConfigurationService private configurationService: IConfigurationService
+	) {
 		super(OpenToSideAction.OPEN_TO_SIDE_ID, OpenToSideAction.OPEN_TO_SIDE_LABEL);
 
-		this.class = 'quick-open-sidebyside';
 
 		this.updateEnablement();
+		this.updateClass();
+	}
+
+	public updateClass(): void {
+		const editorLayoutVertical = this.configurationService.lookup('workbench.editor.sideBySideLayout').value !== 'horizontal';
+
+		this.class = editorLayoutVertical ? 'quick-open-sidebyside-vertical' : 'quick-open-sidebyside-horizontal';
 	}
 
 	private updateEnablement(): void {

src/vs/workbench/parts/files/browser/media/fileactions.css

@@ -57,13 +57,22 @@
 	background: url('CollapseAll_inverse.svg') center center no-repeat;
 }
 
-.monaco-workbench .quick-open-sidebyside {
-	background-image: url('SplitEditor.svg');
+.monaco-workbench .quick-open-sidebyside-vertical {
+	background-image: url('split-editor-vertical.svg');
 }
 
-.vs-dark .monaco-workbench .quick-open-sidebyside,
-.hc-black .monaco-workbench .quick-open-sidebyside {
-	background-image: url('SplitEditor_inverse.svg');
+.vs-dark .monaco-workbench .quick-open-sidebyside-vertical,
+.hc-black .monaco-workbench .quick-open-sidebyside-vertical {
+	background-image: url('split-editor-vertical-inverse.svg');
+}
+
+.monaco-workbench .quick-open-sidebyside-horizontal {
+	background-image: url('split-editor-horizontal.svg');
+}
+
+.vs-dark .monaco-workbench .quick-open-sidebyside-horizontal,
+.hc-black .monaco-workbench .quick-open-sidebyside-horizontal {
+	background-image: url('split-editor-horizontal-inverse.svg');
 }
 
 .monaco-workbench .conflict-editor-action.accept-changes {

src/vs/workbench/parts/files/browser/media/split-editor-horizontal-inverse.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" enable-background="new 0 0 16 16"><style>.icon-canvas-transparent{opacity:0;fill:#2d2d30}.icon-vs-out{fill:#2d2d30}.icon-vs-bg{fill:#c5c5c5}.icon-vs-fg{fill:#2b282e}</style><path class="icon-canvas-transparent" d="M16 16H0V0h16v16z" id="canvas"/><path class="icon-vs-out" d="M16 15H0V0h16v15z" id="outline" style="display: none;"/><path class="icon-vs-fg" d="M14 13H2v-2h12v2zM2 6h12V4H2v2zm0 7h12v-2H2v2zm0-9v2h12V4H2z" id="iconFg" style="display: none;"/><path class="icon-vs-bg" d="M1 1v6h14V1H1zm13 5H2V4h12v2zM1 14h14V8H1v6zm1-3h12v2H2v-2z" id="iconBg"/></svg>
\ No newline at end of file

src/vs/workbench/parts/files/browser/media/split-editor-horizontal.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" enable-background="new 0 0 16 16"><style>.icon-canvas-transparent{opacity:0;fill:#f6f6f6}.icon-vs-out{fill:#f6f6f6}.icon-vs-bg{fill:#424242}.icon-vs-fg{fill:#f0eff1}</style><path class="icon-canvas-transparent" d="M16 16H0V0h16v16z" id="canvas"/><path class="icon-vs-out" d="M16 15H0V0h16v15z" id="outline" style="display: none;"/><path class="icon-vs-fg" d="M14 13H2v-2h12v2zM2 6h12V4H2v2zm0 7h12v-2H2v2zm0-9v2h12V4H2z" id="iconFg" style="display: none;"/><path class="icon-vs-bg" d="M1 1v6h14V1H1zm13 5H2V4h12v2zM1 14h14V8H1v6zm1-3h12v2H2v-2z" id="iconBg"/></svg>
\ No newline at end of file

src/vs/workbench/parts/files/browser/media/SplitEditor.svg → src/vs/workbench/parts/files/browser/media/split-editor-vertical.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -1 16 16" enable-background="new 0 -1 16 16"><path fill="#424242" d="M1 1v12h14v-12h-14zm1 3h4.999v8h-4.999v-8zm12 8h-5.001v-8h5.001v8z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -1 16 16" enable-background="new 0 -1 16 16"><path fill="#656565" d="M1 1v12h14v-12h-14zm1 3h4.999v8h-4.999v-8zm12 8h-5.001v-8h5.001v8z"/></svg>
\ No newline at end of file