update layout logic (#207687)

This commit is contained in:
Johannes Rieken
2024-03-14 10:21:41 +01:00
committed by GitHub
parent f8be2820ef
commit 080f9685c0
3 changed files with 18 additions and 7 deletions
@@ -202,6 +202,10 @@ export class InlineChatInputWidget {
return new Dimension(width, height);
}
getLineHeight(): number {
return this._inputEditor.getOption(EditorOption.lineHeight);
}
reset() {
this._ctxInputEmpty.reset();
this._ctxInnerCursorFirst.reset();
@@ -200,6 +200,8 @@ export class InlineChatWidget {
this._chatMessageContents.className = 'chatMessageContent';
this._chatMessageContents.tabIndex = 0;
this._chatMessageContents.ariaLabel = this._accessibleViewService.getOpenAriaHint(AccessibilityVerbositySettingId.InlineChat);
this._chatMessageContents.style.maxHeight = `${this._inputWidget.getLineHeight() * 9}px`;
this._chatMessageScrollable = new DomScrollableElement(this._chatMessageContents, { alwaysConsumeMouseWheel: true });
this._store.add(this._chatMessageScrollable);
this._elements.chatMessage.appendChild(this._chatMessageScrollable.getDomNode());
@@ -291,8 +293,8 @@ export class InlineChatWidget {
const widgetToolbarWidth = getTotalWidth(this._elements.widgetToolbar);
const innerEditorWidth = widgetDim.width - widgetToolbarWidth;
const inputDim = new Dimension(innerEditorWidth, this._inputWidget.getPreferredSize().height);
if (!this._lastDim || !Dimension.equals(this._lastDim, inputDim)) {
this._lastDim = inputDim;
if (!this._lastDim || !Dimension.equals(this._lastDim, widgetDim)) {
this._lastDim = widgetDim;
this._doLayout(widgetDim, inputDim);
}
} finally {
@@ -310,9 +312,11 @@ export class InlineChatWidget {
protected _doLayout(widgetDimension: Dimension, inputDimension: Dimension): void {
this._elements.root.style.height = `${widgetDimension.height - this._getExtraHeight()}px`;
this._elements.root.style.width = `${widgetDimension.width}px`;
this._elements.progress.style.width = `${inputDimension.width}px`;
this._chatMessageContents.style.width = `${widgetDimension.width - 10}px`;
this._chatMessageContents.style.maxHeight = Math.min(270, widgetDimension.height) + 'px';
this._inputWidget.layout(inputDimension);
}
@@ -324,7 +328,11 @@ export class InlineChatWidget {
const chatResponseHeight = getTotalHeight(this._chatMessageContents);
const followUpsHeight = getTotalHeight(this._elements.followUps);
const statusHeight = getTotalHeight(this._elements.status);
return progressHeight + editorHeight + detectedIntentHeight + followUpsHeight + chatResponseHeight + statusHeight + 12 /* padding */ + 2 /*border*/ + 12 /*shadow*/;
return progressHeight + editorHeight + detectedIntentHeight + followUpsHeight + chatResponseHeight + statusHeight + this._getExtraHeight();
}
private _getExtraHeight(): number {
return 12 /* padding */ + 2 /*border*/ + 12 /*shadow*/;
}
updateProgress(show: boolean) {
@@ -93,11 +93,9 @@ export class InlineChatZoneWidget extends ZoneWidget {
protected override _doLayout(heightInPixel: number): void {
const maxWidth = !this.widget.showsAnyPreview() ? 640 : Number.MAX_SAFE_INTEGER;
const width = Math.min(maxWidth, this._availableSpaceGivenIndentation(this._indentationWidth));
this._dimension = new Dimension(width, heightInPixel);
this.widget.domNode.style.width = `${width}px`;
this.widget.layout(this._dimension);
}
@@ -108,7 +106,8 @@ export class InlineChatZoneWidget extends ZoneWidget {
private _computeHeightInLines(): number {
const lineHeight = this.editor.getOption(EditorOption.lineHeight);
return this.widget.getHeight() / lineHeight;
const widgetHeight = this.widget.getHeight();
return widgetHeight / lineHeight;
}
protected override _onWidth(_widthInPixel: number): void {