From 8422fccff1f6256f4bbf272b055de3ec7652f067 Mon Sep 17 00:00:00 2001 From: Johannes Rieken Date: Mon, 9 Jul 2018 17:25:59 +0200 Subject: [PATCH] add shadow/border to breadcrumb picker --- src/vs/workbench/browser/parts/editor/editorBreadcrumbs.ts | 6 ++++-- .../browser/parts/editor/media/editorbreadcrumbs.css | 5 +++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/editorBreadcrumbs.ts b/src/vs/workbench/browser/parts/editor/editorBreadcrumbs.ts index d88e3047feb..d271ac2a475 100644 --- a/src/vs/workbench/browser/parts/editor/editorBreadcrumbs.ts +++ b/src/vs/workbench/browser/parts/editor/editorBreadcrumbs.ts @@ -227,7 +227,10 @@ export class EditorBreadcrumbs implements IEditorBreadcrumbs { return event.node; }, render: (container: HTMLElement) => { - dom.addClasses(container, 'monaco-workbench', 'show-file-icons'); + dom.addClasses(container, 'monaco-breadcrumbs-picker', 'monaco-workbench', 'show-file-icons'); + let color = this._themeService.getTheme().getColor(SIDE_BAR_BACKGROUND); + container.style.borderColor = color.darken(.2).toString(); + container.style.boxShadow = `${color.toString()} 6px 6px 6px -6px;`; let { element } = event.item as Item; let ctor: IConstructorSignature2 = element instanceof FileElement ? BreadcrumbsFilePicker : BreadcrumbsOutlinePicker; let res = this._instantiationService.createInstance(ctor, container, element); @@ -294,7 +297,6 @@ export abstract class BreadcrumbsPicker { this.focus = dom.trackFocus(this._domNode); this.focus.onDidBlur(_ => this._onDidPickElement.fire(undefined), undefined, this._disposables); - this._tree.domFocus(); this._tree.setInput(this._getInput(input)); } diff --git a/src/vs/workbench/browser/parts/editor/media/editorbreadcrumbs.css b/src/vs/workbench/browser/parts/editor/media/editorbreadcrumbs.css index e3b45ae4166..e40ca9ba696 100644 --- a/src/vs/workbench/browser/parts/editor/media/editorbreadcrumbs.css +++ b/src/vs/workbench/browser/parts/editor/media/editorbreadcrumbs.css @@ -11,3 +11,8 @@ .monaco-workbench>.part.editor>.content .editor-group-container .editor-breadcrumbs .monaco-breadcrumbs .monaco-breadcrumb-item:nth-child(2) { /*first-child is the style-element*/ padding-left: 8px; } + +.monaco-breadcrumbs-picker { + border: 1px #dddddd solid; + box-shadow: #dddddd 6px 6px 6px -6px; +}