From a08e8e02529d56a289fbcb289d3b6bb10a89141f Mon Sep 17 00:00:00 2001 From: pkoushik Date: Mon, 1 Jul 2019 11:15:11 +0530 Subject: [PATCH 1/2] Added border for image --- src/vs/workbench/browser/parts/editor/media/resourceviewer.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/vs/workbench/browser/parts/editor/media/resourceviewer.css b/src/vs/workbench/browser/parts/editor/media/resourceviewer.css index b6f7b107db7..1878d4f8f9c 100644 --- a/src/vs/workbench/browser/parts/editor/media/resourceviewer.css +++ b/src/vs/workbench/browser/parts/editor/media/resourceviewer.css @@ -22,6 +22,7 @@ padding: 0; background-position: 0 0, 8px 8px; background-size: 16px 16px; + border: 1px solid; } .vs .monaco-resource-viewer.image img { From ffc49d53246953faee3d4ecaa16624167b0b29a8 Mon Sep 17 00:00:00 2001 From: skprabhanjan Date: Wed, 3 Jul 2019 14:54:55 +0530 Subject: [PATCH 2/2] Added same border color as panel border , added image preview border color in theme --- .../browser/parts/editor/media/resourceviewer.css | 1 - src/vs/workbench/browser/parts/editor/resourceViewer.ts | 7 +++++++ src/vs/workbench/common/theme.ts | 6 ++++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/vs/workbench/browser/parts/editor/media/resourceviewer.css b/src/vs/workbench/browser/parts/editor/media/resourceviewer.css index 1878d4f8f9c..b6f7b107db7 100644 --- a/src/vs/workbench/browser/parts/editor/media/resourceviewer.css +++ b/src/vs/workbench/browser/parts/editor/media/resourceviewer.css @@ -22,7 +22,6 @@ padding: 0; background-position: 0 0, 8px 8px; background-size: 16px 16px; - border: 1px solid; } .vs .monaco-resource-viewer.image img { diff --git a/src/vs/workbench/browser/parts/editor/resourceViewer.ts b/src/vs/workbench/browser/parts/editor/resourceViewer.ts index a5e644112b5..ed9f4f5bff1 100644 --- a/src/vs/workbench/browser/parts/editor/resourceViewer.ts +++ b/src/vs/workbench/browser/parts/editor/resourceViewer.ts @@ -21,6 +21,8 @@ import { IFileService } from 'vs/platform/files/common/files'; import { IStatusbarEntry, IStatusbarEntryAccessor, IStatusbarService, StatusbarAlignment } from 'vs/platform/statusbar/common/statusbar'; import { IEditorService } from 'vs/workbench/services/editor/common/editorService'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; +import { ITheme, registerThemingParticipant, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; +import { IMAGE_PREVIEW_BORDER } from 'vs/workbench/common/theme'; export interface IResourceDescriptor { readonly resource: URI; @@ -67,6 +69,11 @@ interface ResourceViewerDelegate { metadataClb(meta: string): void; } +registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { + const borderColor = theme.getColor(IMAGE_PREVIEW_BORDER); + collector.addRule(`.monaco-resource-viewer.image img { border : 1px solid ${borderColor ? borderColor.toString() : ''}; }`); +}); + /** * Helper to actually render the given resource into the provided container. Will adjust scrollbar (if provided) automatically based on loading * progress of the binary resource. diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 2d453924e8a..81eac44ae20 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -200,7 +200,13 @@ export const EDITOR_DRAG_AND_DROP_BACKGROUND = registerColor('editorGroup.dropBa hc: null }, nls.localize('editorDragAndDropBackground', "Background color when dragging editors around. The color should have transparency so that the editor contents can still shine through.")); +// < --- Resource Viewer --- > +export const IMAGE_PREVIEW_BORDER = registerColor('imagePreview.border', { + dark: Color.fromHex('#808080').transparent(0.35), + light: Color.fromHex('#808080').transparent(0.35), + hc: contrastBorder +}, nls.localize('imagePreviewBorder', "Border color for image in image preview.")); // < --- Panels --- >