From 96e6d1c933c315fd98fa1d5f0e96211fcb150124 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Tue, 22 Jun 2021 05:19:05 -0700 Subject: [PATCH] Add padding to edge of pointer hover to allow mouse to hover Fixes #126888 --- .../contrib/terminal/browser/terminalView.ts | 1 + .../services/hover/browser/hoverService.ts | 6 +++--- .../services/hover/browser/hoverWidget.ts | 20 +++++++++++-------- .../services/hover/browser/media/hover.css | 20 +++++-------------- 4 files changed, 21 insertions(+), 26 deletions(-) diff --git a/src/vs/workbench/contrib/terminal/browser/terminalView.ts b/src/vs/workbench/contrib/terminal/browser/terminalView.ts index 52d76dbce15..0b401f9a388 100644 --- a/src/vs/workbench/contrib/terminal/browser/terminalView.ts +++ b/src/vs/workbench/contrib/terminal/browser/terminalView.ts @@ -364,6 +364,7 @@ class SingleTerminalTabActionViewItem extends MenuEntryActionViewItem { private _altCommand: string | undefined; private _class: string | undefined; private readonly _elementDisposables: IDisposable[] = []; + constructor( action: IAction, private readonly _actions: IAction[], diff --git a/src/vs/workbench/services/hover/browser/hoverService.ts b/src/vs/workbench/services/hover/browser/hoverService.ts index f89f70cd98e..330ddd67bbb 100644 --- a/src/vs/workbench/services/hover/browser/hoverService.ts +++ b/src/vs/workbench/services/hover/browser/hoverService.ts @@ -114,12 +114,12 @@ registerSingleton(IHoverService, HoverService, true); registerThemingParticipant((theme, collector) => { const hoverBackground = theme.getColor(editorHoverBackground); if (hoverBackground) { - collector.addRule(`.monaco-workbench .workbench-hover { background-color: ${hoverBackground}; }`); + collector.addRule(`.monaco-workbench .workbench-hover .monaco-scrollable-element { background-color: ${hoverBackground}; }`); collector.addRule(`.monaco-workbench .workbench-hover-pointer:after { background-color: ${hoverBackground}; }`); } const hoverBorder = theme.getColor(editorHoverBorder); if (hoverBorder) { - collector.addRule(`.monaco-workbench .workbench-hover { border: 1px solid ${hoverBorder}; }`); + collector.addRule(`.monaco-workbench .workbench-hover .monaco-scrollable-element { border: 1px solid ${hoverBorder}; }`); collector.addRule(`.monaco-workbench .workbench-hover .hover-row:not(:first-child):not(:empty) { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`); collector.addRule(`.monaco-workbench .workbench-hover hr { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`); collector.addRule(`.monaco-workbench .workbench-hover hr { border-bottom: 0px solid ${hoverBorder.transparent(0.5)}; }`); @@ -148,6 +148,6 @@ registerThemingParticipant((theme, collector) => { registerThemingParticipant((theme, collector) => { const widgetShadowColor = theme.getColor(widgetShadow); if (widgetShadowColor) { - collector.addRule(`.monaco-workbench .workbench-hover { box-shadow: 0 2px 8px ${widgetShadowColor}; }`); + collector.addRule(`.monaco-workbench .workbench-hover .monaco-scrollable-element { box-shadow: 0 2px 8px ${widgetShadowColor}; }`); } }); diff --git a/src/vs/workbench/services/hover/browser/hoverWidget.ts b/src/vs/workbench/services/hover/browser/hoverWidget.ts index 03d021edcbd..eebd46dd175 100644 --- a/src/vs/workbench/services/hover/browser/hoverWidget.ts +++ b/src/vs/workbench/services/hover/browser/hoverWidget.ts @@ -203,23 +203,27 @@ export class HoverWidget extends Widget { this.adjustVerticalHoverPosition(targetRect); // Offset the hover position if there is a pointer so it aligns with the target element + this._hover.containerDomNode.style.paddingLeft = ''; + this._hover.containerDomNode.style.paddingRight = ''; + this._hover.containerDomNode.style.paddingTop = ''; + this._hover.containerDomNode.style.paddingBottom = ''; + this._hover.containerDomNode.style.left = ''; + this._hover.containerDomNode.style.right = ''; if (this._hoverPointer) { switch (this._hoverPosition) { case HoverPosition.RIGHT: - targetRect.left += Constants.PointerSize; - targetRect.right += Constants.PointerSize; + this._hover.containerDomNode.style.paddingLeft = `${Constants.PointerSize}px`; + this._hover.containerDomNode.style.left = `-${Constants.PointerSize * 2}px`; break; case HoverPosition.LEFT: - targetRect.left -= Constants.PointerSize; - targetRect.right -= Constants.PointerSize; + this._hover.containerDomNode.style.paddingRight = `${Constants.PointerSize}px`; + this._hover.containerDomNode.style.right = `-${Constants.PointerSize * 2}px`; break; case HoverPosition.BELOW: - targetRect.top += Constants.PointerSize; - targetRect.bottom += Constants.PointerSize; + this._hover.containerDomNode.style.paddingTop = `${Constants.PointerSize}px`; break; case HoverPosition.ABOVE: - targetRect.top -= Constants.PointerSize; - targetRect.bottom -= Constants.PointerSize; + this._hover.containerDomNode.style.paddingBottom = `${Constants.PointerSize}px`; break; } diff --git a/src/vs/workbench/services/hover/browser/media/hover.css b/src/vs/workbench/services/hover/browser/media/hover.css index 49a413c99ff..83f8788165c 100644 --- a/src/vs/workbench/services/hover/browser/media/hover.css +++ b/src/vs/workbench/services/hover/browser/media/hover.css @@ -36,9 +36,11 @@ height: 5px; } -.monaco-workbench .workbench-hover-pointer.left { - left: -3px; -} +/* pointer size * 2 to cover offset and the hover padding */ +.monaco-workbench .workbench-hover-pointer.left { left: -6px; } +.monaco-workbench .workbench-hover-pointer.right { right: 0; } +.monaco-workbench .workbench-hover-pointer.top { top: -6px; } +.monaco-workbench .workbench-hover-pointer.bottom { bottom: 6px; } .monaco-workbench .workbench-hover-pointer.left:after { -moz-transform: rotate(135deg); @@ -46,30 +48,18 @@ transform: rotate(135deg); } -.monaco-workbench .workbench-hover-pointer.right { - right: 3px; -} - .monaco-workbench .workbench-hover-pointer.right:after { -moz-transform: rotate(315deg); -webkit-transform: rotate(315deg); transform: rotate(315deg); } -.monaco-workbench .workbench-hover-pointer.top { - top: -3px; -} - .monaco-workbench .workbench-hover-pointer.top:after { -moz-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); } -.monaco-workbench .workbench-hover-pointer.bottom { - bottom: 3px; -} - .monaco-workbench .workbench-hover-pointer.bottom:after { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg);