From fa92e4854f833973fb3e6247742bd1278b50c415 Mon Sep 17 00:00:00 2001 From: Ulugbek Date: Fri, 24 Jun 2022 12:06:28 +0200 Subject: [PATCH] add auto-hide option for minimap (default = false) which shows minimap only when hover over its region ref: #107116 --- .../editor/browser/viewParts/minimap/minimap.css | 9 +++++++++ .../editor/browser/viewParts/minimap/minimap.ts | 15 +++++++++++++-- .../scrollDecoration/scrollDecoration.ts | 2 +- src/vs/editor/common/config/editorOptions.ts | 11 +++++++++++ .../browser/config/editorLayoutProvider.test.ts | 1 + src/vs/monaco.d.ts | 4 ++++ 6 files changed, 39 insertions(+), 3 deletions(-) diff --git a/src/vs/editor/browser/viewParts/minimap/minimap.css b/src/vs/editor/browser/viewParts/minimap/minimap.css index f4663ece04d..f8c0b70f309 100644 --- a/src/vs/editor/browser/viewParts/minimap/minimap.css +++ b/src/vs/editor/browser/viewParts/minimap/minimap.css @@ -30,3 +30,12 @@ left: -1px; width: 1px; } + +/* 0.5s fade in/out for the minimap */ +.minimap.autohide { + opacity: 0.0; + transition: opacity 0.5s; +} +.minimap.autohide:hover { + opacity: 1.0; +} diff --git a/src/vs/editor/browser/viewParts/minimap/minimap.ts b/src/vs/editor/browser/viewParts/minimap/minimap.ts index 2b1ac590d2b..ab06570ed5f 100644 --- a/src/vs/editor/browser/viewParts/minimap/minimap.ts +++ b/src/vs/editor/browser/viewParts/minimap/minimap.ts @@ -56,6 +56,8 @@ class MinimapOptions { public readonly showSlider: 'always' | 'mouseover'; + public readonly autohide: boolean; + public readonly pixelRatio: number; public readonly typicalHalfwidthCharacterWidth: number; @@ -120,6 +122,7 @@ class MinimapOptions { this.minimapHeightIsEditorHeight = minimapLayout.minimapHeightIsEditorHeight; this.scrollBeyondLastLine = options.get(EditorOption.scrollBeyondLastLine); this.showSlider = minimapOpts.showSlider; + this.autohide = minimapOpts.autohide; this.pixelRatio = pixelRatio; this.typicalHalfwidthCharacterWidth = fontInfo.typicalHalfwidthCharacterWidth; this.lineHeight = options.get(EditorOption.lineHeight); @@ -166,6 +169,7 @@ class MinimapOptions { && this.minimapHeightIsEditorHeight === other.minimapHeightIsEditorHeight && this.scrollBeyondLastLine === other.scrollBeyondLastLine && this.showSlider === other.showSlider + && this.autohide === other.autohide && this.pixelRatio === other.pixelRatio && this.typicalHalfwidthCharacterWidth === other.typicalHalfwidthCharacterWidth && this.lineHeight === other.lineHeight @@ -1255,10 +1259,17 @@ class InnerMinimap extends Disposable { } private _getMinimapDomNodeClassName(): string { + const class_ = ['minimap']; if (this._model.options.showSlider === 'always') { - return 'minimap slider-always'; + class_.push('slider-always'); + } else { + class_.push('slider-mouseover'); } - return 'minimap slider-mouseover'; + if (this._model.options.autohide) { + class_.push('autohide'); + } + + return class_.join(' '); } public getDomNode(): FastDomNode { diff --git a/src/vs/editor/browser/viewParts/scrollDecoration/scrollDecoration.ts b/src/vs/editor/browser/viewParts/scrollDecoration/scrollDecoration.ts index 4a530cf6b8a..7e295754924 100644 --- a/src/vs/editor/browser/viewParts/scrollDecoration/scrollDecoration.ts +++ b/src/vs/editor/browser/viewParts/scrollDecoration/scrollDecoration.ts @@ -61,7 +61,7 @@ export class ScrollDecorationViewPart extends ViewPart { if (layoutInfo.minimap.renderMinimap === 0 || (layoutInfo.minimap.minimapWidth > 0 && layoutInfo.minimap.minimapLeft === 0)) { this._width = layoutInfo.width; } else { - this._width = layoutInfo.width - layoutInfo.minimap.minimapWidth - layoutInfo.verticalScrollbarWidth; + this._width = layoutInfo.width - layoutInfo.verticalScrollbarWidth; } } diff --git a/src/vs/editor/common/config/editorOptions.ts b/src/vs/editor/common/config/editorOptions.ts index e9b67870fc9..3cd0cc5ab43 100644 --- a/src/vs/editor/common/config/editorOptions.ts +++ b/src/vs/editor/common/config/editorOptions.ts @@ -2625,6 +2625,10 @@ export interface IEditorMinimapOptions { * Defaults to true. */ enabled?: boolean; + /** + * Control the rendering of minimap. + */ + autohide?: boolean; /** * Control the side of the minimap in editor. * Defaults to 'right'. @@ -2669,6 +2673,7 @@ class EditorMinimap extends BaseEditorOption