Add padding to edge of pointer hover to allow mouse to hover
Fixes #126888
This commit is contained in:
parent
4e28e2c6c5
commit
96e6d1c933
|
@ -364,6 +364,7 @@ class SingleTerminalTabActionViewItem extends MenuEntryActionViewItem {
|
||||||
private _altCommand: string | undefined;
|
private _altCommand: string | undefined;
|
||||||
private _class: string | undefined;
|
private _class: string | undefined;
|
||||||
private readonly _elementDisposables: IDisposable[] = [];
|
private readonly _elementDisposables: IDisposable[] = [];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
action: IAction,
|
action: IAction,
|
||||||
private readonly _actions: IAction[],
|
private readonly _actions: IAction[],
|
||||||
|
|
|
@ -114,12 +114,12 @@ registerSingleton(IHoverService, HoverService, true);
|
||||||
registerThemingParticipant((theme, collector) => {
|
registerThemingParticipant((theme, collector) => {
|
||||||
const hoverBackground = theme.getColor(editorHoverBackground);
|
const hoverBackground = theme.getColor(editorHoverBackground);
|
||||||
if (hoverBackground) {
|
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}; }`);
|
collector.addRule(`.monaco-workbench .workbench-hover-pointer:after { background-color: ${hoverBackground}; }`);
|
||||||
}
|
}
|
||||||
const hoverBorder = theme.getColor(editorHoverBorder);
|
const hoverBorder = theme.getColor(editorHoverBorder);
|
||||||
if (hoverBorder) {
|
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 .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-top: 1px solid ${hoverBorder.transparent(0.5)}; }`);
|
||||||
collector.addRule(`.monaco-workbench .workbench-hover hr { border-bottom: 0px 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) => {
|
registerThemingParticipant((theme, collector) => {
|
||||||
const widgetShadowColor = theme.getColor(widgetShadow);
|
const widgetShadowColor = theme.getColor(widgetShadow);
|
||||||
if (widgetShadowColor) {
|
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}; }`);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -203,23 +203,27 @@ export class HoverWidget extends Widget {
|
||||||
this.adjustVerticalHoverPosition(targetRect);
|
this.adjustVerticalHoverPosition(targetRect);
|
||||||
|
|
||||||
// Offset the hover position if there is a pointer so it aligns with the target element
|
// 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) {
|
if (this._hoverPointer) {
|
||||||
switch (this._hoverPosition) {
|
switch (this._hoverPosition) {
|
||||||
case HoverPosition.RIGHT:
|
case HoverPosition.RIGHT:
|
||||||
targetRect.left += Constants.PointerSize;
|
this._hover.containerDomNode.style.paddingLeft = `${Constants.PointerSize}px`;
|
||||||
targetRect.right += Constants.PointerSize;
|
this._hover.containerDomNode.style.left = `-${Constants.PointerSize * 2}px`;
|
||||||
break;
|
break;
|
||||||
case HoverPosition.LEFT:
|
case HoverPosition.LEFT:
|
||||||
targetRect.left -= Constants.PointerSize;
|
this._hover.containerDomNode.style.paddingRight = `${Constants.PointerSize}px`;
|
||||||
targetRect.right -= Constants.PointerSize;
|
this._hover.containerDomNode.style.right = `-${Constants.PointerSize * 2}px`;
|
||||||
break;
|
break;
|
||||||
case HoverPosition.BELOW:
|
case HoverPosition.BELOW:
|
||||||
targetRect.top += Constants.PointerSize;
|
this._hover.containerDomNode.style.paddingTop = `${Constants.PointerSize}px`;
|
||||||
targetRect.bottom += Constants.PointerSize;
|
|
||||||
break;
|
break;
|
||||||
case HoverPosition.ABOVE:
|
case HoverPosition.ABOVE:
|
||||||
targetRect.top -= Constants.PointerSize;
|
this._hover.containerDomNode.style.paddingBottom = `${Constants.PointerSize}px`;
|
||||||
targetRect.bottom -= Constants.PointerSize;
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -36,9 +36,11 @@
|
||||||
height: 5px;
|
height: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.monaco-workbench .workbench-hover-pointer.left {
|
/* pointer size * 2 to cover offset and the hover padding */
|
||||||
left: -3px;
|
.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 {
|
.monaco-workbench .workbench-hover-pointer.left:after {
|
||||||
-moz-transform: rotate(135deg);
|
-moz-transform: rotate(135deg);
|
||||||
|
@ -46,30 +48,18 @@
|
||||||
transform: rotate(135deg);
|
transform: rotate(135deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.monaco-workbench .workbench-hover-pointer.right {
|
|
||||||
right: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.monaco-workbench .workbench-hover-pointer.right:after {
|
.monaco-workbench .workbench-hover-pointer.right:after {
|
||||||
-moz-transform: rotate(315deg);
|
-moz-transform: rotate(315deg);
|
||||||
-webkit-transform: rotate(315deg);
|
-webkit-transform: rotate(315deg);
|
||||||
transform: rotate(315deg);
|
transform: rotate(315deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.monaco-workbench .workbench-hover-pointer.top {
|
|
||||||
top: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.monaco-workbench .workbench-hover-pointer.top:after {
|
.monaco-workbench .workbench-hover-pointer.top:after {
|
||||||
-moz-transform: rotate(225deg);
|
-moz-transform: rotate(225deg);
|
||||||
-webkit-transform: rotate(225deg);
|
-webkit-transform: rotate(225deg);
|
||||||
transform: rotate(225deg);
|
transform: rotate(225deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.monaco-workbench .workbench-hover-pointer.bottom {
|
|
||||||
bottom: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.monaco-workbench .workbench-hover-pointer.bottom:after {
|
.monaco-workbench .workbench-hover-pointer.bottom:after {
|
||||||
-moz-transform: rotate(45deg);
|
-moz-transform: rotate(45deg);
|
||||||
-webkit-transform: rotate(45deg);
|
-webkit-transform: rotate(45deg);
|
||||||
|
|
Loading…
Reference in a new issue