Skip to content

Commit

Permalink
Add padding to edge of pointer hover to allow mouse to hover
Browse files Browse the repository at this point in the history
Fixes #126888
  • Loading branch information
Tyriar committed Jun 22, 2021
1 parent 4e28e2c commit 96e6d1c
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 26 deletions.
1 change: 1 addition & 0 deletions src/vs/workbench/contrib/terminal/browser/terminalView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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[],
Expand Down
6 changes: 3 additions & 3 deletions src/vs/workbench/services/hover/browser/hoverService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)}; }`);
Expand Down Expand Up @@ -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}; }`);
}
});
20 changes: 12 additions & 8 deletions src/vs/workbench/services/hover/browser/hoverWidget.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
20 changes: 5 additions & 15 deletions src/vs/workbench/services/hover/browser/media/hover.css
Original file line number Diff line number Diff line change
Expand Up @@ -36,40 +36,30 @@
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);
-webkit-transform: rotate(135deg);
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);
Expand Down

0 comments on commit 96e6d1c

Please sign in to comment.