ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Make dropdown update width immediately upon opening (#8716)

Browse Source 
* Make dropdown update width immediately upon opening

* remove type

* min size of the input container width

* use clamp
This commit is contained in:
Charles Gagnon
2020-01-03 11:07:24 -08:00
committed by GitHub
parent d2e367c139
commit d647dbde09
1 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/sql/base/parts/editableDropdown/browser/dropdown.ts
View File

@@ -23,6 +23,7 @@ import { KeyCode } from 'vs/base/common/keyCodes';
import { Tree } from 'vs/base/parts/tree/browser/treeImpl'; import { Tree } from 'vs/base/parts/tree/browser/treeImpl';
import { ITree } from 'vs/base/parts/tree/browser/tree'; import { ITree } from 'vs/base/parts/tree/browser/tree';
import { onUnexpectedError } from 'vs/base/common/errors'; import { onUnexpectedError } from 'vs/base/common/errors';
import { clamp } from 'vs/base/common/numbers';
export interface IDropdownOptions extends IDropdownStyles { export interface IDropdownOptions extends IDropdownStyles {
/** /**
@@ -264,31 +265,36 @@ export class Dropdown extends Disposable {
}, 0); }, 0);
let height = filteredLength * this._renderer.getHeight() > this._options.maxHeight! ? this._options.maxHeight! : filteredLength * this._renderer.getHeight(); let height = filteredLength * this._renderer.getHeight() > this._options.maxHeight! ? this._options.maxHeight! : filteredLength * this._renderer.getHeight();
this._treeContainer.style.height = height + 'px'; this._treeContainer.style.height = height + 'px';
this._treeContainer.style.width = DOM.getContentWidth(this._inputContainer) - 2 + 'px'; this.updateTreeWidth();
this._tree.layout(parseInt(this._treeContainer.style.height)); this._tree.layout(parseInt(this._treeContainer.style.height));
this._tree.refresh().catch(e => onUnexpectedError(e)); this._tree.refresh().catch(e => onUnexpectedError(e));
} }
} }
/**
* Update the width of the context tree to better fit the contents.
*/
private updateTreeWidth(): void {
if (this._dataSource && this._dataSource.options) {
const longestOption = this._dataSource.options.reduce((previous, current) => {
return previous.value.length > current.value.length ? previous : current;
}, { value: '' });
this._widthControlElement.innerText = longestOption.value;
const inputContainerWidth = DOM.getContentWidth(this._inputContainer);
const longestOptionWidth = DOM.getTotalWidth(this._widthControlElement);
this._treeContainer.style.width = `${clamp(longestOptionWidth, inputContainerWidth, 500)}px`;
}
}
public set values(vals: string[] | undefined) { public set values(vals: string[] | undefined) {
if (vals) { if (vals) {
const longestString = vals.reduce((previous, current) => {
return previous.length > current.length ? previous : current;
}, '');
this._widthControlElement.innerText = longestString;
this._filter.filterString = ''; this._filter.filterString = '';
this._dataSource.options = vals.map(i => { return { value: i }; }); this._dataSource.options = vals.map(i => { return { value: i }; });
this.updateTreeWidth();
let height = this._dataSource.options.length * 22 > this._options.maxHeight! ? this._options.maxHeight! : this._dataSource.options.length * 22; let height = this._dataSource.options.length * 22 > this._options.maxHeight! ? this._options.maxHeight! : this._dataSource.options.length * 22;
this._treeContainer.style.height = height + 'px'; this._treeContainer.style.height = height + 'px';
if (longestString.length > 10) {
this._treeContainer.style.width = DOM.getTotalWidth(this._widthControlElement) + 'px';
}
this._treeContainer.style.maxWidth = `500px`;
this._tree.layout(parseInt(this._treeContainer.style.height)); this._tree.layout(parseInt(this._treeContainer.style.height));
this._tree.setInput(new DropdownModel()).catch(e => onUnexpectedError(e)); this._tree.setInput(new DropdownModel()).catch(e => onUnexpectedError(e));
this._input.validate(); this._input.validate();