Skip to content

Commit

Permalink
Polish title (#49340)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrmarti
chrmarti committed Jun 20, 2018
1 parent 124ebf6 commit 19231f6
Show file tree
Hide file tree
Showing 6 changed files with 87 additions and 27 deletions.
12 changes: 12 additions & 0 deletions src/vs/workbench/browser/parts/quickinput/media/dark/arrow-left.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/vs/workbench/browser/parts/quickinput/media/dark/back.svg
View file

This file was deleted.

12 changes: 12 additions & 0 deletions src/vs/workbench/browser/parts/quickinput/media/light/arrow-left.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/vs/workbench/browser/parts/quickinput/media/light/back.svg
View file

This file was deleted.

26 changes: 22 additions & 4 deletions src/vs/workbench/browser/parts/quickinput/quickInput.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,36 @@
display: flex;
}

.quick-input-title {
.quick-input-left-action-bar {
display: flex;
margin-left: 6px;
flex: 1;
padding: 3px 11px;
}

.quick-input-action-bar {
.quick-input-left-action-bar.monaco-action-bar .actions-container {
justify-content: flex-start;
}

.quick-input-left-action-bar .action-label.icon {
margin: 0 5px 0 0;
}

.quick-input-title {
padding: 3px 0px;
text-align: center;
}

.quick-input-right-action-bar {
display: flex;
margin-right: 6px;
flex: 1;
}

.quick-input-action-bar .action-label.icon {
.quick-input-right-action-bar .action-label.icon {
margin: 0 0 0 5px;
}

.quick-input-titlebar .monaco-action-bar .action-label.icon {
width: 16px;
height: 100%;
background-position: center;
Expand Down
62 changes: 41 additions & 21 deletions src/vs/workbench/browser/parts/quickinput/quickInput.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,23 @@ import { IdGenerator } from 'vs/base/common/idGenerator';

const $ = dom.$;

const backButton = {
iconPath: {
dark: URI.parse(require.toUrl('vs/workbench/browser/parts/quickinput/media/dark/arrow-left.svg')),
light: URI.parse(require.toUrl('vs/workbench/browser/parts/quickinput/media/light/arrow-left.svg'))
},
tooltip: localize('quickInput.back', "Back"),
handle: -1 // TODO
};

interface QuickInputUI {
container: HTMLElement;
leftActionBar: ActionBar;
title: HTMLElement;
rightActionBar: ActionBar;
checkAll: HTMLInputElement;
inputBox: QuickInputBox;
count: CountBadge;
actionBar: ActionBar;
message: HTMLElement;
progressBar: ProgressBar;
list: QuickInputList;
Expand Down Expand Up @@ -215,8 +225,16 @@ class QuickInput implements IQuickInput {
}
if (this.buttonsUpdated) {
this.buttonsUpdated = false;
this.ui.actionBar.clear();
this.ui.actionBar.push(this.buttons.map((button, index) => {
this.ui.leftActionBar.clear();
const leftButtons = this.buttons.filter(button => button === backButton);
this.ui.leftActionBar.push(leftButtons.map((button, index) => {
const action = new Action(`id-${index}`, '', getIconClass(button.iconPath), true, () => this.onDidTriggerButtonEmitter.fire(button));
action.tooltip = button.tooltip;
return action;
}), { icon: true, label: false });
this.ui.rightActionBar.clear();
const rightButtons = this.buttons.filter(button => button !== backButton);
this.ui.rightActionBar.push(rightButtons.map((button, index) => {
const action = new Action(`id-${index}`, '', getIconClass(button.iconPath), true, () => this.onDidTriggerButtonEmitter.fire(button));
action.tooltip = button.tooltip;
return action;
Expand All @@ -227,7 +245,7 @@ class QuickInput implements IQuickInput {

private getTitle() {
if (this.title && this.step) {
return `${this.title} ― ${this.getSteps()}`;
return `${this.title} (${this.getSteps()})`;
}
if (this.title) {
return this.title;
Expand All @@ -240,7 +258,7 @@ class QuickInput implements IQuickInput {

private getSteps() {
if (this.step && this.totalSteps) {
return localize('quickInput.steps', "{0} of {1}", this.step, this.totalSteps);
return localize('quickInput.steps', "{0}/{1}", this.step, this.totalSteps);
}
if (this.step) {
return String(this.step);
Expand Down Expand Up @@ -731,11 +749,15 @@ export class QuickInputService extends Component implements IQuickInputService {

this.titleBar = dom.append(container, $('.quick-input-titlebar'));

const leftActionBar = new ActionBar(this.titleBar);
leftActionBar.domNode.classList.add('quick-input-left-action-bar');
this.toUnbind.push(leftActionBar);

const title = dom.append(this.titleBar, $('.quick-input-title'));

const actionBar = new ActionBar(this.titleBar);
actionBar.domNode.classList.add('quick-input-action-bar');
this.toUnbind.push(actionBar);
const rightActionBar = new ActionBar(this.titleBar);
rightActionBar.domNode.classList.add('quick-input-right-action-bar');
this.toUnbind.push(rightActionBar);

const headerContainer = dom.append(container, $('.quick-input-header'));

Expand Down Expand Up @@ -835,12 +857,13 @@ export class QuickInputService extends Component implements IQuickInputService {

this.ui = {
container,
leftActionBar,
title,
rightActionBar,
checkAll,
inputBox,
count,
message,
actionBar,
progressBar,
list,
onDidAccept: this.onDidAcceptEmitter.event,
Expand Down Expand Up @@ -970,14 +993,7 @@ export class QuickInputService extends Component implements IQuickInputService {
});
}

backButton = {
iconPath: {
dark: URI.parse(require.toUrl('vs/workbench/browser/parts/quickinput/media/dark/back.svg')),
light: URI.parse(require.toUrl('vs/workbench/browser/parts/quickinput/media/light/back.svg'))
},
tooltip: localize('quickInput.back', "Back"),
handle: -1 // TODO
};
backButton = backButton;

createQuickPick(): IQuickPick {
this.create();
Expand All @@ -999,14 +1015,15 @@ export class QuickInputService extends Component implements IQuickInputService {
}

this.setEnabled(true);
this.ui.leftActionBar.clear();
this.ui.title.textContent = '';
this.ui.rightActionBar.clear();
this.ui.checkAll.checked = false;
// this.ui.inputBox.value = ''; Avoid triggering an event.
this.ui.inputBox.placeholder = '';
this.ui.inputBox.password = false;
this.ui.inputBox.showDecoration(Severity.Ignore);
this.ui.count.setCount(0);
this.ui.actionBar.clear();
this.ui.message.textContent = '';
this.ui.progressBar.stop();
this.ui.list.setElements([]);
Expand Down Expand Up @@ -1036,11 +1053,14 @@ export class QuickInputService extends Component implements IQuickInputService {
private setEnabled(enabled: boolean) {
if (enabled !== this.enabled) {
this.enabled = enabled;
this.ui.checkAll.disabled = !enabled;
this.ui.inputBox.enabled = enabled;
for (const item of this.ui.actionBar.items) {
for (const item of this.ui.leftActionBar.items) {
(item as ActionItem).getAction().enabled = enabled;
}
for (const item of this.ui.rightActionBar.items) {
(item as ActionItem).getAction().enabled = enabled;
}
this.ui.checkAll.disabled = !enabled;
this.ui.inputBox.enabled = enabled;
this.ok.enabled = enabled;
this.ui.list.enabled = enabled;
}
Expand Down

0 comments on commit 19231f6

Please sign in to comment.