Skip to content

Commit

Permalink
Separator (#29096)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrmarti
chrmarti committed Aug 10, 2018
1 parent cba0345 commit 5d8c782
Show file tree
Hide file tree
Showing 4 changed files with 156 additions and 32 deletions.
25 changes: 21 additions & 4 deletions src/vs/platform/quickinput/common/quickInput.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import URI from 'vs/base/common/uri';
import { Event } from 'vs/base/common/event';

export interface IQuickPickItem {
type?: 'item';
id?: string;
label: string;
description?: string;
Expand All @@ -21,6 +22,17 @@ export interface IQuickPickItem {
picked?: boolean;
}

export interface IQuickPickSeparator {
type: 'separator';
border?: boolean;
label?: string;
}

export interface IKeyMods {
readonly ctrlCmd: boolean;
readonly alt: boolean;
}

export interface IQuickNavigateConfiguration {
keybindings: ResolvedKeybinding[];
}
Expand Down Expand Up @@ -67,6 +79,7 @@ export interface IPickOptions<T extends IQuickPickItem> {
*/
activeItem?: TPromise<T> | T;

onKeyMods?: (keyMods: IKeyMods) => void;
onDidFocus?: (entry: T) => void;
onDidTriggerItemButton?: (context: IQuickPickItemButtonContext<T>) => void;
}
Expand Down Expand Up @@ -147,7 +160,7 @@ export interface IQuickPick<T extends IQuickPickItem> extends IQuickInput {

readonly onDidTriggerItemButton: Event<IQuickPickItemButtonEvent<T>>;

items: ReadonlyArray<T>;
items: ReadonlyArray<T | IQuickPickSeparator>;

canSelectMany: boolean;

Expand All @@ -164,6 +177,8 @@ export interface IQuickPick<T extends IQuickPickItem> extends IQuickInput {
selectedItems: ReadonlyArray<T>;

readonly onDidChangeSelection: Event<T[]>;

readonly keyMods: IKeyMods;
}

export interface IInputBox extends IQuickInput {
Expand Down Expand Up @@ -208,16 +223,18 @@ export const IQuickInputService = createDecorator<IQuickInputService>('quickInpu

export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

export type QuickPickInput<T> = TPromise<(T | IQuickPickSeparator)[]> | (T | IQuickPickSeparator)[];

export interface IQuickInputService {

_serviceBrand: any;

/**
* Opens the quick input box for selecting items and returns a promise with the user selected item(s) if any.
*/
pick<T extends IQuickPickItem>(picks: TPromise<T[]> | T[], options?: IPickOptions<T> & { canPickMany: true }, token?: CancellationToken): TPromise<T[]>;
pick<T extends IQuickPickItem>(picks: TPromise<T[]> | T[], options?: IPickOptions<T> & { canPickMany: false }, token?: CancellationToken): TPromise<T>;
pick<T extends IQuickPickItem>(picks: TPromise<T[]> | T[], options?: Omit<IPickOptions<T>, 'canPickMany'>, token?: CancellationToken): TPromise<T>;
pick<T extends IQuickPickItem>(picks: QuickPickInput<T>, options?: IPickOptions<T> & { canPickMany: true }, token?: CancellationToken): TPromise<T[]>;
pick<T extends IQuickPickItem>(picks: QuickPickInput<T>, options?: IPickOptions<T> & { canPickMany: false }, token?: CancellationToken): TPromise<T>;
pick<T extends IQuickPickItem>(picks: QuickPickInput<T>, options?: Omit<IPickOptions<T>, 'canPickMany'>, token?: CancellationToken): TPromise<T>;

/**
* Opens the quick input box for text input and returns a promise with the user typed value if any.
Expand Down
25 changes: 24 additions & 1 deletion src/vs/workbench/browser/parts/quickinput/quickInput.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,21 @@
font-weight: bold;
}

.quick-input-list .quick-input-list-separator {
margin-right: 18px;
}

.quick-input-list .quick-input-list-entry.has-actions:hover .quick-input-list-separator,
.quick-input-list .monaco-list-row.focused .quick-input-list-entry.has-actions .quick-input-list-separator {
margin-right: 0;
}

.quick-input-list .quick-input-list-separator-border {
border-top-width: 1px;
border-top-style: solid;
box-sizing: border-box;
}

.quick-input-list .quick-input-list-entry-action-bar {
display: none;
flex: 0;
Expand All @@ -184,8 +199,16 @@
background-repeat: no-repeat;
}

.quick-input-list .quick-input-list-entry-action-bar {
margin-top: 1px;
}

.quick-input-list .quick-input-list-entry-action-bar ul:first-child .action-label.icon {
margin-left: 2px;
}

.quick-input-list .quick-input-list-entry-action-bar ul:last-child .action-label.icon {
margin-right: 3px;
margin-right: 8px;
}

.quick-input-list .quick-input-list-entry:hover .quick-input-list-entry-action-bar,
Expand Down
53 changes: 47 additions & 6 deletions src/vs/workbench/browser/parts/quickinput/quickInput.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import 'vs/css!./quickInput';
import { Component } from 'vs/workbench/common/component';
import { IQuickInputService, IQuickPickItem, IPickOptions, IInputOptions, IQuickNavigateConfiguration, IQuickPick, IQuickInput, IQuickInputButton, IInputBox, IQuickPickItemButtonEvent } from 'vs/platform/quickinput/common/quickInput';
import { IQuickInputService, IQuickPickItem, IPickOptions, IInputOptions, IQuickNavigateConfiguration, IQuickPick, IQuickInput, IQuickInputButton, IInputBox, IQuickPickItemButtonEvent, QuickPickInput, IQuickPickSeparator, IKeyMods } from 'vs/platform/quickinput/common/quickInput';
import { IPartService } from 'vs/workbench/services/part/common/partService';
import * as dom from 'vs/base/browser/dom';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
Expand Down Expand Up @@ -46,6 +46,8 @@ import { getIconClass } from 'vs/workbench/browser/parts/quickinput/quickInputUt

const $ = dom.$;

type Writeable<T> = { -readonly [P in keyof T]: T[P] };

const backButton = {
iconPath: {
dark: URI.parse(require.toUrl('vs/workbench/browser/parts/quickinput/media/dark/arrow-left.svg')),
Expand All @@ -70,6 +72,7 @@ interface QuickInputUI {
onDidAccept: Event<void>;
onDidTriggerButton: Event<IQuickInputButton>;
ignoreFocusOut: boolean;
keyMods: Writeable<IKeyMods>;
show(controller: QuickInput): void;
setVisibilities(visibilities: Visibilities): void;
setEnabled(enabled: boolean): void;
Expand Down Expand Up @@ -298,7 +301,7 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
private _placeholder;
private onDidChangeValueEmitter = new Emitter<string>();
private onDidAcceptEmitter = new Emitter<string>();
private _items: T[] = [];
private _items: (T | IQuickPickSeparator)[] = [];
private itemsUpdated = false;
private _canSelectMany = false;
private _matchOnDescription = false;
Expand Down Expand Up @@ -352,7 +355,7 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
return this._items;
}

set items(items: T[]) {
set items(items: (T | IQuickPickSeparator)[]) {
this._items = items;
this.itemsUpdated = true;
this.update();
Expand Down Expand Up @@ -407,6 +410,10 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
this.update();
}

get keyMods() {
return this.ui.keyMods;
}

onDidChangeSelection = this.onDidChangeSelectionEmitter.event;

onDidTriggerItemButton = this.onDidTriggerItemButtonEmitter.event;
Expand Down Expand Up @@ -950,6 +957,30 @@ export class QuickInputService extends Component implements IQuickInputService {
break;
}
}));
this._register(dom.addDisposableListener(container, dom.EventType.KEY_DOWN, (e: KeyboardEvent) => {
const event = new StandardKeyboardEvent(e);
switch (event.keyCode) {
case KeyCode.Ctrl:
case KeyCode.Meta:
this.ui.keyMods.ctrlCmd = true;
break;
case KeyCode.Alt:
this.ui.keyMods.alt = true;
break;
}
}));
this._register(dom.addDisposableListener(container, dom.EventType.KEY_UP, (e: KeyboardEvent) => {
const event = new StandardKeyboardEvent(e);
switch (event.keyCode) {
case KeyCode.Ctrl:
case KeyCode.Meta:
this.ui.keyMods.ctrlCmd = false;
break;
case KeyCode.Alt:
this.ui.keyMods.alt = false;
break;
}
}));

this._register(this.quickOpenService.onShow(() => this.hide(true)));

Expand All @@ -968,6 +999,7 @@ export class QuickInputService extends Component implements IQuickInputService {
onDidAccept: this.onDidAcceptEmitter.event,
onDidTriggerButton: this.onDidTriggerButtonEmitter.event,
ignoreFocusOut: false,
keyMods: { ctrlCmd: false, alt: false },
show: controller => this.show(controller),
hide: () => this.hide(),
setVisibilities: visibilities => this.setVisibilities(visibilities),
Expand All @@ -977,8 +1009,15 @@ export class QuickInputService extends Component implements IQuickInputService {
this.updateStyles();
}

pick<T extends IQuickPickItem, O extends IPickOptions<T>>(picks: TPromise<T[]> | T[], options: O = <O>{}, token: CancellationToken = CancellationToken.None): TPromise<O extends { canPickMany: true } ? T[] : T> {
return new TPromise<O extends { canPickMany: true } ? T[] : T>((resolve, reject) => {
pick<T extends IQuickPickItem, O extends IPickOptions<T>>(picks: QuickPickInput<T>, options: O = <O>{}, token: CancellationToken = CancellationToken.None): TPromise<O extends { canPickMany: true } ? T[] : T> {
return new TPromise<O extends { canPickMany: true } ? T[] : T>((doResolve, reject) => {
let resolve = (result: any) => {
resolve = doResolve;
if (options.onKeyMods) {
options.onKeyMods(input.keyMods);
}
doResolve(result);
};
if (token.isCancellationRequested) {
resolve(undefined);
return;
Expand Down Expand Up @@ -1045,7 +1084,7 @@ export class QuickInputService extends Component implements IQuickInputService {
input.busy = false;
input.items = items;
if (input.canSelectMany) {
input.selectedItems = items.filter(item => item.picked);
input.selectedItems = items.filter(item => item.type !== 'separator' && item.picked) as T[];
}
if (activeItem) {
input.activeItems = [activeItem];
Expand Down Expand Up @@ -1154,6 +1193,8 @@ export class QuickInputService extends Component implements IQuickInputService {
this.ui.list.matchOnDescription = false;
this.ui.list.matchOnDetail = false;
this.ui.ignoreFocusOut = false;
this.ui.keyMods.ctrlCmd = false;
this.ui.keyMods.alt = false;

const keybinding = this.keybindingService.lookupKeybinding(BackAction.ID);
backButton.tooltip = keybinding ? localize('quickInput.backWithKeybinding', "Back ({0})", keybinding.getLabel()) : localize('quickInput.back', "Back");
Expand Down
Loading

0 comments on commit 5d8c782

Please sign in to comment.