diff --git a/src/vs/base/parts/quickinput/browser/media/quickInput.css b/src/vs/base/parts/quickinput/browser/media/quickInput.css index 547d47ba0b2..29a3f02bca7 100644 --- a/src/vs/base/parts/quickinput/browser/media/quickInput.css +++ b/src/vs/base/parts/quickinput/browser/media/quickInput.css @@ -49,6 +49,10 @@ margin: 6px; } +.quick-input-header .quick-input-description { + margin: 4px 2px; +} + .quick-input-header { display: flex; padding: 6px 6px 0px 6px; diff --git a/src/vs/base/parts/quickinput/browser/quickInput.ts b/src/vs/base/parts/quickinput/browser/quickInput.ts index 8dcfe3dc2c5..0a4c9f1ba53 100644 --- a/src/vs/base/parts/quickinput/browser/quickInput.ts +++ b/src/vs/base/parts/quickinput/browser/quickInput.ts @@ -84,7 +84,8 @@ interface QuickInputUI { leftActionBar: ActionBar; titleBar: HTMLElement; title: HTMLElement; - description: HTMLElement; + description1: HTMLElement; + description2: HTMLElement; rightActionBar: ActionBar; checkAll: HTMLInputElement; filterContainer: HTMLElement; @@ -119,6 +120,7 @@ type Visibilities = { description?: boolean; checkAll?: boolean; inputBox?: boolean; + checkBox?: boolean; visibleCount?: boolean; count?: boolean; message?: boolean; @@ -281,8 +283,11 @@ class QuickInput extends Disposable implements IQuickInput { this.ui.title.innerText = '\u00a0;'; } const description = this.getDescription(); - if (this.ui.description.textContent !== description) { - this.ui.description.textContent = description; + if (this.ui.description1.textContent !== description) { + this.ui.description1.textContent = description; + } + if (this.ui.description2.textContent !== description) { + this.ui.description2.textContent = description; } if (this.busy && !this.busyDelay) { this.busyDelay = new TimeoutTimer(); @@ -414,6 +419,7 @@ class QuickPick extends QuickInput implements IQuickPi private _customButtonHover: string | undefined; private _quickNavigate: IQuickNavigateConfiguration | undefined; private _hideInput: boolean | undefined; + private _hideCheckAll: boolean | undefined; get quickNavigate() { return this._quickNavigate; @@ -640,6 +646,15 @@ class QuickPick extends QuickInput implements IQuickPi this.update(); } + get hideCheckAll() { + return !!this._hideCheckAll; + } + + set hideCheckAll(hideCheckAll: boolean) { + this._hideCheckAll = hideCheckAll; + this.update(); + } + onDidChangeSelection = this.onDidChangeSelectionEmitter.event; onDidTriggerItemButton = this.onDidTriggerItemButtonEmitter.event; @@ -856,11 +871,12 @@ class QuickPick extends QuickInput implements IQuickPi hideInput = true; } } - this.ui.container.classList.toggle('hidden-input', hideInput); + this.ui.container.classList.toggle('hidden-input', hideInput && !this.description); const visibilities: Visibilities = { title: !!this.title || !!this.step || !!this.buttons.length, description: !!this.description, - checkAll: this.canSelectMany, + checkAll: this.canSelectMany && !this._hideCheckAll, + checkBox: this.canSelectMany, inputBox: !hideInput, progressBar: !hideInput, visibleCount: true, @@ -959,6 +975,11 @@ class QuickPick extends QuickInput implements IQuickPi // we need to move focus into the tree to detect keybindings // properly when the input box is not visible (quick nav) this.ui.list.domFocus(); + + // Focus the first element in the list if multiselect is enabled + if (this.canSelectMany) { + this.ui.list.focus(QuickInputListFocus.First); + } } } } @@ -1153,8 +1174,7 @@ export class QuickInputController extends Disposable { const rightActionBar = this._register(new ActionBar(titleBar)); rightActionBar.domNode.classList.add('quick-input-right-action-bar'); - const description = dom.append(container, $('.quick-input-description')); - + const description1 = dom.append(container, $('.quick-input-description')); const headerContainer = dom.append(container, $('.quick-input-header')); const checkAll = dom.append(headerContainer, $('input.quick-input-check-all')); @@ -1169,6 +1189,7 @@ export class QuickInputController extends Disposable { } })); + const description2 = dom.append(headerContainer, $('.quick-input-description')); const extraContainer = dom.append(headerContainer, $('.quick-input-and-message')); const filterContainer = dom.append(extraContainer, $('.quick-input-filter')); @@ -1283,7 +1304,8 @@ export class QuickInputController extends Disposable { leftActionBar, titleBar, title, - description, + description1, + description2, rightActionBar, checkAll, filterContainer, @@ -1496,7 +1518,8 @@ export class QuickInputController extends Disposable { this.setEnabled(true); ui.leftActionBar.clear(); ui.title.textContent = ''; - ui.description.textContent = ''; + ui.description1.textContent = ''; + ui.description2.textContent = ''; ui.rightActionBar.clear(); ui.checkAll.checked = false; // ui.inputBox.value = ''; Avoid triggering an event. @@ -1527,7 +1550,8 @@ export class QuickInputController extends Disposable { private setVisibilities(visibilities: Visibilities) { const ui = this.getUI(); ui.title.style.display = visibilities.title ? '' : 'none'; - ui.description.style.display = visibilities.description ? '' : 'none'; + ui.description1.style.display = visibilities.description && (visibilities.inputBox || visibilities.checkAll) ? '' : 'none'; + ui.description2.style.display = visibilities.description && !(visibilities.inputBox || visibilities.checkAll) ? '' : 'none'; ui.checkAll.style.display = visibilities.checkAll ? '' : 'none'; ui.filterContainer.style.display = visibilities.inputBox ? '' : 'none'; ui.visibleCountContainer.style.display = visibilities.visibleCount ? '' : 'none'; @@ -1537,7 +1561,7 @@ export class QuickInputController extends Disposable { ui.message.style.display = visibilities.message ? '' : 'none'; ui.progressBar.getContainer().style.display = visibilities.progressBar ? '' : 'none'; ui.list.display(!!visibilities.list); - ui.container.classList[visibilities.checkAll ? 'add' : 'remove']('show-checkboxes'); + ui.container.classList[visibilities.checkBox ? 'add' : 'remove']('show-checkboxes'); this.updateLayout(); // TODO } diff --git a/src/vs/base/parts/quickinput/common/quickInput.ts b/src/vs/base/parts/quickinput/common/quickInput.ts index de7339e6757..5312368257c 100644 --- a/src/vs/base/parts/quickinput/common/quickInput.ts +++ b/src/vs/base/parts/quickinput/common/quickInput.ts @@ -275,6 +275,8 @@ export interface IQuickPick extends IQuickInput { * be presented. */ hideInput: boolean; + + hideCheckAll: boolean; } export interface IInputBox extends IQuickInput { diff --git a/src/vs/workbench/contrib/userDataSync/browser/userDataSync.ts b/src/vs/workbench/contrib/userDataSync/browser/userDataSync.ts index 52a0041eafa..1ad860e5e49 100644 --- a/src/vs/workbench/contrib/userDataSync/browser/userDataSync.ts +++ b/src/vs/workbench/contrib/userDataSync/browser/userDataSync.ts @@ -515,19 +515,13 @@ export class UserDataSyncWorkbenchContribution extends Disposable implements IWo quickPick.title = SYNC_TITLE; quickPick.ok = false; quickPick.customButton = true; - if (this.userDataSyncWorkbenchService.all.length) { - quickPick.customLabel = localize('turn on', "Turn On"); - } else { - const orTerm = localize({ key: 'or', comment: ['Here is the context where it is used - Sign in with your A or B or C account to synchronize your data across devices.'] }, "or"); - const displayName = this.userDataSyncWorkbenchService.authenticationProviders.length === 1 - ? this.authenticationService.getLabel(this.userDataSyncWorkbenchService.authenticationProviders[0].id) - : this.userDataSyncWorkbenchService.authenticationProviders.map(({ id }) => this.authenticationService.getLabel(id)).join(` ${orTerm} `); - quickPick.description = localize('sign in and turn on sync detail', "Sign in with your {0} account to synchronize your data across devices.", displayName); - quickPick.customLabel = localize('sign in and turn on sync', "Sign in & Turn on"); - } - quickPick.placeholder = localize('configure sync placeholder', "Choose what to sync"); + quickPick.customLabel = localize('sign in and turn on', "Sign in & Turn on"); + quickPick.description = localize('configure and turn on sync detail', "Please sign in to synchronize your data across devices."); quickPick.canSelectMany = true; quickPick.ignoreFocusOut = true; + quickPick.hideInput = true; + quickPick.hideCheckAll = true; + const items = this.getConfigureSyncQuickPickItems(); quickPick.items = items; quickPick.selectedItems = items.filter(item => this.userDataSyncResourceEnablementService.isResourceEnabled(item.id)); diff --git a/src/vs/workbench/services/userDataSync/browser/userDataSyncWorkbenchService.ts b/src/vs/workbench/services/userDataSync/browser/userDataSyncWorkbenchService.ts index e8b4924fe5a..9d97faa76f5 100644 --- a/src/vs/workbench/services/userDataSync/browser/userDataSyncWorkbenchService.ts +++ b/src/vs/workbench/services/userDataSync/browser/userDataSyncWorkbenchService.ts @@ -499,7 +499,7 @@ export class UserDataSyncWorkbenchService extends Disposable implements IUserDat quickPick.title = SYNC_TITLE; quickPick.ok = false; - quickPick.placeholder = localize('choose account placeholder', "Select an account"); + quickPick.placeholder = localize('choose account placeholder', "Select an account to sign in"); quickPick.ignoreFocusOut = true; quickPick.items = this.createQuickpickItems();