development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-08-27 04:49:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make action list scrollable (#171014)

Browse source 
Fixes #168955
This commit is contained in:
Matt Bierner 2023-01-10 15:59:16 -08:00 committed by GitHub
parent 34b96c3229
commit e977f4d913
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/vs/platform/actionWidget/browser/actionList.ts
View file

@ -184,7 +184,11 @@ export class ActionList<T extends IActionItem> extends Disposable {
getHeight: element => element.kind === ActionListItemKind.Header ? this._headerLineHeight : this._actionLineHeight,
getTemplateId: element => element.kind
};
this._list = this._register(new List(user, this.domNode, virtualDelegate, [new ActionItemRenderer<IListMenuItem<IActionItem>>(preview, this._keybindingService), new HeaderRenderer()], {
this._list = this._register(new List(user, this.domNode, virtualDelegate, [
new ActionItemRenderer<IListMenuItem<IActionItem>>(preview, this._keybindingService),
new HeaderRenderer(),
], {
keyboardSupport: false,
accessibilityProvider: {
getAriaLabel: element => {
@ -228,8 +232,8 @@ export class ActionList<T extends IActionItem> extends Disposable {
layout(minWidth: number): number {
// Updating list height, depending on how many separators and headers there are.
const numHeaders = this._allMenuItems.filter(item => item.kind === 'header').length;
const height = this._allMenuItems.length * this._actionLineHeight;
const heightWithHeaders = height + numHeaders * this._headerLineHeight - numHeaders * this._actionLineHeight;
const itemsHeight = this._allMenuItems.length * this._actionLineHeight;
const heightWithHeaders = itemsHeight + numHeaders * this._headerLineHeight - numHeaders * this._actionLineHeight;
this._list.layout(heightWithHeaders);
// For finding width dynamically (not using resize observer)
@ -246,9 +250,12 @@ export class ActionList<T extends IActionItem> extends Disposable {
// resize observer - can be used in the future since list widget supports dynamic height but not width
const width = Math.max(...itemWidths, minWidth);
this._list.layout(heightWithHeaders, width);
this.domNode.style.height = `${heightWithHeaders}px`;
const maxVhPrecentage = 0.7;
const height = Math.min(heightWithHeaders, document.body.clientHeight * maxVhPrecentage);
this._list.layout(height, width);
this.domNode.style.height = `${height}px`;
this._list.domFocus();
return width;

5
src/vs/platform/actionWidget/browser/actionWidget.css
View file

@ -54,10 +54,6 @@
outline: 0 !important;
}
.action-widget .monaco-list .monaco-scrollable-element .monaco-list-rows {
height: 100% !important;
}
.action-widget .monaco-list .monaco-scrollable-element {
overflow: visible;
}
@ -123,7 +119,6 @@
/* Action bar */
.action-widget .action-widget-action-bar {
margin-top: 4px;
background-color: var(--vscode-editorHoverWidget-statusBarBackground);
border-top: 1px solid var(--vscode-editorHoverWidget-border);
}