daohualiuxiang
/
vscode
mirror of https://github.com/microsoft/vscode.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Removing bottom padding on editor hover (#235507) 

* almost there

* fixing padding, but now does not render correctly

* adding changes

* removing line

* renaming class

* taking into account borders
pull/235520/head
Aiday Marlen Kyzy 2024-12-06 18:43:21 +01:00 committed by GitHub
parent d6faa5b076
commit d89fdcbfa8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/vs/editor/contrib/hover/browser/contentHoverWidget.ts
View File

@ -19,7 +19,6 @@ import { Emitter } from '../../../../base/common/event.js';
import { RenderedContentHover } from './contentHoverRendered.js';
const HORIZONTAL_SCROLLING_BY = 30;
const CONTAINER_HEIGHT_PADDING = 6;
export class ContentHoverWidget extends ResizableContentWidget {
@ -68,6 +67,7 @@ export class ContentHoverWidget extends ResizableContentWidget {
dom.append(this._resizableNode.domNode, this._hover.containerDomNode);
this._resizableNode.domNode.style.zIndex = '50';
this._resizableNode.domNode.className = 'monaco-resizable-hover';
this._register(this._editor.onDidLayoutChange(() => {
if (this.isVisible) {
@ -117,9 +117,15 @@ export class ContentHoverWidget extends ResizableContentWidget {
return ContentHoverWidget._applyDimensions(containerDomNode, width, height);
}
private _setScrollableElementDimensions(width: number | string, height: number | string): void {
const scrollbarDomElement = this._hover.scrollbar.getDomNode();
return ContentHoverWidget._applyDimensions(scrollbarDomElement, width, height);
}
private _setHoverWidgetDimensions(width: number | string, height: number | string): void {
this._setContentsDomNodeDimensions(width, height);
this._setContainerDomNodeDimensions(width, height);
this._setScrollableElementDimensions(width, height);
this._setContentsDomNodeDimensions(width, height);
this._layoutContentWidget();
}
@ -176,12 +182,11 @@ export class ContentHoverWidget extends ResizableContentWidget {
if (!availableSpace) {
return;
}
// Padding needed in order to stop the resizing down to a smaller height
let maximumHeight = CONTAINER_HEIGHT_PADDING;
const children = this._hover.contentsDomNode.children;
let maximumHeight = children.length - 1;
Array.from(this._hover.contentsDomNode.children).forEach((hoverPart) => {
maximumHeight += hoverPart.clientHeight;
});
return Math.min(availableSpace, maximumHeight);
}
@ -209,7 +214,7 @@ export class ContentHoverWidget extends ResizableContentWidget {
const initialWidth = (
typeof this._contentWidth === 'undefined'
? 0
: this._contentWidth - 2 // - 2 for the borders
: this._contentWidth
);
if (overflowing || this._hover.containerDomNode.clientWidth < initialWidth) {
@ -217,7 +222,7 @@ export class ContentHoverWidget extends ResizableContentWidget {
const horizontalPadding = 14;
return bodyBoxWidth - horizontalPadding;
} else {
return this._hover.containerDomNode.clientWidth + 2;
return this._hover.containerDomNode.clientWidth;
}
}
@ -389,16 +394,16 @@ export class ContentHoverWidget extends ResizableContentWidget {
public onContentsChanged(): void {
this._removeConstraintsRenderNormally();
const containerDomNode = this._hover.containerDomNode;
const contentsDomNode = this._hover.contentsDomNode;
let height = dom.getTotalHeight(containerDomNode);
let width = dom.getTotalWidth(containerDomNode);
let height = dom.getTotalHeight(contentsDomNode);
let width = dom.getTotalWidth(contentsDomNode) + 2;
this._resizableNode.layout(height, width);
this._setHoverWidgetDimensions(width, height);
height = dom.getTotalHeight(containerDomNode);
width = dom.getTotalWidth(containerDomNode);
height = dom.getTotalHeight(contentsDomNode);
width = dom.getTotalWidth(contentsDomNode);
this._contentWidth = width;
this._updateMinimumWidth();
this._resizableNode.layout(height, width);

10
src/vs/editor/contrib/hover/browser/hover.css
View File

@ -7,17 +7,15 @@
background-color: var(--vscode-editor-hoverHighlightBackground);
}
.monaco-editor .monaco-hover-content {
padding-right: 2px;
padding-bottom: 2px;
box-sizing: border-box;
.monaco-editor .monaco-resizable-hover {
border: 1px solid var(--vscode-editorHoverWidget-border);
border-radius: 3px;
box-sizing: content-box;
}
.monaco-editor .monaco-hover {
color: var(--vscode-editorHoverWidget-foreground);
background-color: var(--vscode-editorHoverWidget-background);
border: 1px solid var(--vscode-editorHoverWidget-border);
border-radius: 3px;
}
.monaco-editor .monaco-hover a {