maxmustermann/vscode
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add padding to edge of pointer hover to allow mouse to hover

Browse source 
Fixes #126888
This commit is contained in:
Daniel Imms 2021-06-22 05:19:05 -07:00
parent 4e28e2c6c5
commit 96e6d1c933
4 changed files with 21 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/vs/workbench/contrib/terminal/browser/terminalView.ts
View file

@ -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[],

6
src/vs/workbench/services/hover/browser/hoverService.ts
View file

@ -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}; }`);
}
});

20
src/vs/workbench/services/hover/browser/hoverWidget.ts
View file

@ -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;
}

20
src/vs/workbench/services/hover/browser/media/hover.css
View file

@ -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);