Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-09-23 15:24:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #106898 from microsoft/sandy081/fix89595

Browse Source 
Simplify settings sync quick pick UI
This commit is contained in:
Sandeep Somavarapu
2020-09-17 21:15:48 +02:00
committed by GitHub
parent 95d85ec773 d9680b9d05
commit d45d4ca352
5 changed files with 47 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/base/parts/quickinput/browser/media/quickInput.css
+4
View File
@@ -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;
src/vs/base/parts/quickinput/browser/quickInput.ts
+35 -11
View File
@@ -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<T extends IQuickPickItem> 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<T extends IQuickPickItem> 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<T extends IQuickPickItem> 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<T extends IQuickPickItem> 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 = <HTMLInputElement>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
}
src/vs/base/parts/quickinput/common/quickInput.ts
+2
View File
@@ -275,6 +275,8 @@ export interface IQuickPick<T extends IQuickPickItem> extends IQuickInput {
* be presented.
*/
hideInput: boolean;
hideCheckAll: boolean;
}
export interface IInputBox extends IQuickInput {
src/vs/workbench/contrib/userDataSync/browser/userDataSync.ts
+5 -11
View File
@@ -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));
src/vs/workbench/services/userDataSync/browser/userDataSyncWorkbenchService.ts
+1 -1
View File
@@ -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();