fix layout issues (#215969)

This commit is contained in:
Megan Rogge 2024-06-17 14:18:30 -07:00 committed by GitHub
parent 9eba3ad2fc
commit 3a682a623b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 29 additions and 11 deletions

View file

@ -291,7 +291,7 @@ registerActiveXtermAction({
id: MENU_TERMINAL_CHAT_WIDGET_STATUS,
group: '0_main',
order: 1,
when: ContextKeyExpr.and(TerminalChatContextKeys.responseContainsCodeBlock.negate(), TerminalChatContextKeys.requestActive.negate()),
when: ContextKeyExpr.and(TerminalChatContextKeys.responseContainsCodeBlock, TerminalChatContextKeys.requestActive.negate()),
},
{
id: MENU_TERMINAL_CHAT_WIDGET,

View file

@ -20,7 +20,8 @@ import { MENU_TERMINAL_CHAT_INPUT, MENU_TERMINAL_CHAT_WIDGET, MENU_TERMINAL_CHAT
import { TerminalStickyScrollContribution } from 'vs/workbench/contrib/terminalContrib/stickyScroll/browser/terminalStickyScrollContribution';
const enum Constants {
HorizontalMargin = 10
HorizontalMargin = 10,
VerticalMargin = 30
}
export class TerminalChatWidget extends Disposable {
@ -119,15 +120,26 @@ export class TerminalChatWidget extends Disposable {
const style = getActiveWindow().getComputedStyle(xtermElement);
const xtermPadding = parseInt(style.paddingLeft) + parseInt(style.paddingRight);
const width = Math.min(640, xtermElement.clientWidth - 12/* padding */ - 2/* border */ - Constants.HorizontalMargin - xtermPadding);
const height = Math.min(480, heightInPixel, this._getTerminalWrapperHeight() ?? Number.MAX_SAFE_INTEGER);
const terminalWrapperHeight = this._getTerminalWrapperHeight() ?? Number.MAX_SAFE_INTEGER;
let height = Math.min(480, heightInPixel, terminalWrapperHeight);
const top = this._getTop() ?? 0;
if (width === 0 || height === 0) {
return;
}
let adjustedHeight = undefined;
if (height < this._inlineChatWidget.contentHeight) {
if (height - top > 0) {
height = height - top - Constants.VerticalMargin;
} else {
height = height - Constants.VerticalMargin;
adjustedHeight = height;
}
}
this._container.style.paddingLeft = style.paddingLeft;
this._dimension = new Dimension(width, height);
this._inlineChatWidget.layout(this._dimension);
this._updateVerticalPosition();
this._updateVerticalPosition(adjustedHeight);
}
private _reset() {
@ -144,7 +156,7 @@ export class TerminalChatWidget extends Disposable {
this._instance.scrollToBottom();
}
private _updateVerticalPosition(): void {
private _getTop(): number | undefined {
const font = this._instance.xterm?.getFont();
if (!font?.charHeight) {
return;
@ -153,21 +165,27 @@ export class TerminalChatWidget extends Disposable {
const cellHeight = font.charHeight * font.lineHeight;
const topPadding = terminalWrapperHeight - (this._instance.rows * cellHeight);
const cursorY = (this._instance.xterm?.raw.buffer.active.cursorY ?? 0) + 1;
const top = topPadding + cursorY * cellHeight;
return topPadding + cursorY * cellHeight;
}
private _updateVerticalPosition(adjustedHeight?: number): void {
const top = this._getTop();
if (!top) {
return;
}
this._container.style.top = `${top}px`;
const widgetHeight = this._inlineChatWidget.contentHeight;
const terminalWrapperHeight = this._getTerminalWrapperHeight();
if (!terminalWrapperHeight) {
return;
}
if (top > terminalWrapperHeight - widgetHeight && terminalWrapperHeight - widgetHeight > 0) {
this._setTerminalOffset(top - (terminalWrapperHeight - widgetHeight));
} else if (adjustedHeight) {
this._setTerminalOffset(adjustedHeight);
} else {
this._setTerminalOffset(undefined);
}
if (terminalWrapperHeight - widgetHeight < 0) {
this._dimension = new Dimension(this._dimension!.width, terminalWrapperHeight - top - 20);
this._inlineChatWidget.layout(this._dimension!);
}
}
private _getTerminalWrapperHeight(): number | undefined {