ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Change how dropdowns get their lengths - take 2 (#8356)

Browse Source 
* Add an element for width control

* Change the method that retrieves length

* Change to a readonly element
This commit is contained in:
Amir Omidi
2019-11-15 15:17:46 -08:00
committed by GitHub
parent 131b0b93bf
commit d6ef42c8b0
2 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -96,6 +96,7 @@ export class Dropdown extends Disposable {
private _onFocus = this._register(new Emitter<void>()); private _onFocus = this._register(new Emitter<void>());
public onFocus: Event<void> = this._onFocus.event; public onFocus: Event<void> = this._onFocus.event;
private readonly _widthControlElement: HTMLElement;
constructor( constructor(
container: HTMLElement, container: HTMLElement,
@@ -105,6 +106,10 @@ export class Dropdown extends Disposable {
super(); super();
this._options = opt || Object.create(null); this._options = opt || Object.create(null);
mixin(this._options, defaults, false); mixin(this._options, defaults, false);
this._widthControlElement = DOM.append(container, document.createElement('span'));
this._widthControlElement.classList.add('monaco-dropdown-width-control-element');
this._widthControlElement.setAttribute('aria-hidden', 'true');
this._el = DOM.append(container, DOM.$('.monaco-dropdown')); this._el = DOM.append(container, DOM.$('.monaco-dropdown'));
this._el.style.width = '100%'; this._el.style.width = '100%';
@@ -267,14 +272,27 @@ export class Dropdown extends Disposable {
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 }; });
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';
this._treeContainer.style.width = DOM.getContentWidth(this._inputContainer) - 2 + '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();
} }
} }

6
src/sql/base/parts/editableDropdown/browser/media/dropdownList.css
View File

@@ -12,6 +12,12 @@
background-image: url("dropdownarrow_inverse.svg"); background-image: url("dropdownarrow_inverse.svg");
} }
.monaco-dropdown-width-control-element {
position: absolute;
left: -10000px;
visibility: hidden;
}
.monaco-dropdown .monaco-action-bar .action-label.codicon.dropdown-arrow { .monaco-dropdown .monaco-action-bar .action-label.codicon.dropdown-arrow {
padding: 0; padding: 0;
background-size: 10px; background-size: 10px;