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

Title and steps (#49340)

Browse Source
This commit is contained in:
Christof Marti
2018-06-15 16:43:55 +02:00
parent 56980850c5
commit 3b4fb7d2fb
5 changed files with 114 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/platform/quickinput/common/quickInput.ts
+5
View File
@@ -88,6 +88,11 @@ export interface IInputOptions {
export interface IQuickInput {
title: string | undefined;
step: number | undefined;
totalSteps: number | undefined;
enabled: boolean;
src/vs/vscode.proposed.d.ts
Vendored
+6
View File
@@ -455,6 +455,12 @@ declare module 'vscode' {
export interface QuickInput {
title: string | undefined;
step: number | undefined;
totalSteps: number | undefined;
enabled: boolean;
busy: boolean;
src/vs/workbench/api/node/extHostQuickOpen.ts
+30
View File
@@ -211,6 +211,9 @@ class ExtHostQuickInput implements QuickInput {
private static _nextId = 1;
_id = ExtHostQuickPick._nextId++;
private _title: string;
private _steps: number;
private _totalSteps: number;
private _visible = false;
private _enabled = true;
private _busy = false;
@@ -237,6 +240,33 @@ class ExtHostQuickInput implements QuickInput {
constructor(protected _proxy: MainThreadQuickOpenShape, protected _extensionId: string, private _onDidDispose: () => void) {
}
get title() {
return this._title;
}
set title(title: string) {
this._title = title;
this.update({ title });
}
get step() {
return this._steps;
}
set step(step: number) {
this._steps = step;
this.update({ step });
}
get totalSteps() {
return this._totalSteps;
}
set totalSteps(totalSteps: number) {
this._totalSteps = totalSteps;
this.update({ totalSteps });
}
get enabled() {
return this._enabled;
}
src/vs/workbench/browser/parts/quickinput/quickInput.css
+4
View File
@@ -12,6 +12,10 @@
margin-left: -300px;
}
.quick-input-title {
padding: 3px 11px;
}
.quick-input-header {
display: flex;
padding: 6px 6px 4px 6px;
src/vs/workbench/browser/parts/quickinput/quickInput.ts
+69 -4
View File
@@ -45,6 +45,7 @@ const $ = dom.$;
interface QuickInputUI {
container: HTMLElement;
title: HTMLElement;
checkAll: HTMLInputElement;
inputBox: QuickInputBox;
count: CountBadge;
@@ -61,6 +62,7 @@ interface QuickInputUI {
}
type Visibilities = {
title?: boolean;
checkAll?: boolean;
inputBox?: boolean;
count?: boolean;
@@ -71,6 +73,9 @@ type Visibilities = {
class QuickInput implements IQuickInput {
private _title: string;
private _steps: number;
private _totalSteps: number;
protected visible = false;
private _enabled = true;
private _busy = false;
@@ -91,6 +96,33 @@ class QuickInput implements IQuickInput {
constructor(protected ui: QuickInputUI) {
}
get title() {
return this._title;
}
set title(title: string) {
this._title = title;
this.update();
}
get step() {
return this._steps;
}
set step(step: number) {
this._steps = step;
this.update();
}
get totalSteps() {
return this._totalSteps;
}
set totalSteps(totalSteps: number) {
this._totalSteps = totalSteps;
this.update();
}
get enabled() {
return this._enabled;
}
@@ -158,6 +190,10 @@ class QuickInput implements IQuickInput {
if (!this.visible) {
return;
}
const title = this.getTitle();
if (this.ui.title.textContent !== title) {
this.ui.title.textContent = title;
}
if (this.busy && !this.busyDelay) {
this.busyDelay = TPromise.timeout(800);
this.busyDelay.then(() => {
@@ -181,6 +217,29 @@ class QuickInput implements IQuickInput {
this.ui.setEnabled(this.enabled);
}
private getTitle() {
if (this.title && this.step) {
return `${this.title} ― ${this.getSteps()}`;
}
if (this.title) {
return this.title;
}
if (this.step) {
return this.getSteps();
}
return '';
}
private getSteps() {
if (this.step && this.totalSteps) {
return localize('quickInput.steps', "{0} of {1}", this.step, this.totalSteps);
}
if (this.step) {
return String(this.step);
}
return '';
}
public dispose(): void {
this.hide();
this.disposables = dispose(this.disposables);
@@ -385,7 +444,7 @@ class QuickPick extends QuickInput implements IQuickPick {
this.ui.ignoreFocusOut = this.ignoreFocusOut;
this.ui.list.matchOnDescription = this.matchOnDescription;
this.ui.list.matchOnDetail = this.matchOnDetail;
this.ui.setVisibilities(this.canSelectMany ? { checkAll: true, inputBox: true, count: true, ok: true, list: true } : { inputBox: true, list: true });
this.ui.setVisibilities(this.canSelectMany ? { title: !!this.title || !!this.step, checkAll: true, inputBox: true, count: true, ok: true, list: true } : { title: !!this.title || !!this.step, inputBox: true, list: true });
}
configureQuickNavigate(quickNavigate: IQuickNavigateConfiguration) {
@@ -561,7 +620,7 @@ class InputBox extends QuickInput implements IInputBox {
this.ui.message.textContent = this.validationMessage;
this.ui.inputBox.showDecoration(Severity.Error);
}
this.ui.setVisibilities({ inputBox: true, message: true });
this.ui.setVisibilities({ title: !!this.title || !!this.step, inputBox: true, message: true });
}
}
@@ -631,6 +690,8 @@ export class QuickInputService extends Component implements IQuickInputService {
container.tabIndex = -1;
container.style.display = 'none';
const title = dom.append(container, $('.quick-input-title'));
const headerContainer = dom.append(container, $('.quick-input-header'));
const checkAll = <HTMLInputElement>dom.append(headerContainer, $('input.quick-input-check-all'));
@@ -733,6 +794,7 @@ export class QuickInputService extends Component implements IQuickInputService {
this.ui = {
container,
title,
checkAll,
inputBox,
count,
@@ -883,6 +945,7 @@ export class QuickInputService extends Component implements IQuickInputService {
}
this.setEnabled(true);
this.ui.title.textContent = '';
this.ui.checkAll.checked = false;
// this.ui.inputBox.value = ''; Avoid triggering an event.
this.ui.inputBox.placeholder = '';
@@ -905,6 +968,7 @@ export class QuickInputService extends Component implements IQuickInputService {
}
private setVisibilities(visibilities: Visibilities) {
this.ui.title.style.display = visibilities.title ? '' : 'none';
this.ui.checkAll.style.display = visibilities.checkAll ? '' : 'none';
this.filterContainer.style.display = visibilities.inputBox ? '' : 'none';
this.countContainer.style.display = visibilities.count ? '' : 'none';
@@ -995,9 +1059,10 @@ export class QuickInputService extends Component implements IQuickInputService {
protected updateStyles() {
const theme = this.themeService.getTheme();
if (this.ui) {
// TODO
const titleColor = { dark: 'rgba(255, 255, 255, 0.105)', light: 'rgba(0,0,0,.06)', hc: 'black' }[theme.type];
this.ui.title.style.backgroundColor = titleColor ? titleColor.toString() : undefined;
this.ui.inputBox.style(theme);
}
if (this.ui) {
const sideBarBackground = theme.getColor(SIDE_BAR_BACKGROUND);
this.ui.container.style.backgroundColor = sideBarBackground ? sideBarBackground.toString() : undefined;
const sideBarForeground = theme.getColor(SIDE_BAR_FOREGROUND);