Skip to content

Commit

Permalink
nuke setting and add control in input box, microsoft#49922
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrieken
jrieken committed Jun 8, 2018
1 parent 400a0d2 commit 0f3c383
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 32 deletions.
1 change: 1 addition & 0 deletions ...rkbench/parts/outline/electron-browser/media/files_Filter_Filter_16x_vscode.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions ...parts/outline/electron-browser/media/files_Filter_Filter_16x_vscode_inverse.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 0 additions & 10 deletions src/vs/workbench/parts/outline/electron-browser/outline.contribution.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,16 +44,6 @@ Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration).regis
'order': 117,
'type': 'object',
'properties': {
[OutlineConfigKeys.filterOnType]: {
'description': localize('outline.typeToFilter', "Defines if typing in the input-box filters or finds elements."),
'type': 'boolean',
'default': true
},
[OutlineConfigKeys.navigateHighlights]: {
'description': localize('outline.navigateHighlights', "Only select highlighted elements (via filter or find) when navigating the tree"),
'type': 'boolean',
'default': true
},
[OutlineConfigKeys.problemsEnabled]: {
'description': localize('outline.showProblem', "Show Errors & Warnings on Outline Elements."),
'type': 'boolean',
Expand Down
2 changes: 0 additions & 2 deletions src/vs/workbench/parts/outline/electron-browser/outline.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ export const OutlineViewFiltered = new RawContextKey('outlineFiltered', false);
export const OutlineViewFocused = new RawContextKey('outlineFocused', false);

export enum OutlineConfigKeys {
'filterOnType' = 'outline.filterOnType',
'navigateHighlights' = 'outline.navigateHighlights',
'problemsEnabled' = 'outline.problems.enabled',
'problemsColors' = 'outline.problems.colors',
'problemsBadges' = 'outline.problems.badges'
Expand Down
23 changes: 23 additions & 0 deletions src/vs/workbench/parts/outline/electron-browser/outlinePanel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,35 @@
.monaco-workbench .outline-panel .outline-input {
box-sizing: border-box;
padding: 2px 9px 5px 9px;
position: relative;
}

.monaco-workbench .outline-panel .outline-input .monaco-inputbox {
width: 100%;
}

.monaco-workbench .outline-panel .outline-input .monaco-inputbox .input {
padding-right: 22px;
}

.monaco-workbench .outline-panel .outline-input .monaco-custom-checkbox {
position: absolute;
top: 5px;
right: 13px;
bottom: 0;
display: flex;
align-items: center;
}

.monaco-workbench .outline-panel .outline-input .monaco-custom-checkbox.action-filter {
background: url(./media/files_Filter_Filter_16x_vscode.svg) center center no-repeat;
background-size: 90%;
}

.vs-dark .monaco-workbench .outline-panel .outline-input .monaco-custom-checkbox.action-filter {
background: url(./media/files_Filter_Filter_16x_vscode_inverse.svg);
}

.monaco-workbench .outline-panel .outline-tree {
height: 100%;
}
Expand Down
76 changes: 56 additions & 20 deletions src/vs/workbench/parts/outline/electron-browser/outlinePanel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import { KeybindingsRegistry } from 'vs/platform/keybinding/common/keybindingsRe
import { WorkbenchTree } from 'vs/platform/list/browser/listService';
import { IMarkerService, MarkerSeverity } from 'vs/platform/markers/common/markers';
import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage';
import { attachInputBoxStyler, attachProgressBarStyler } from 'vs/platform/theme/common/styler';
import { attachInputBoxStyler, attachProgressBarStyler, attachCheckboxStyler } from 'vs/platform/theme/common/styler';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { ViewletPanel } from 'vs/workbench/browser/parts/views/panelViewlet';
import { IViewletViewOptions } from 'vs/workbench/browser/parts/views/viewsViewlet';
Expand All @@ -54,6 +54,7 @@ import { OutlineConfigKeys, OutlineViewFiltered, OutlineViewFocused, OutlineView
import { OutlineElement, OutlineModel, TreeElement } from './outlineModel';
import { OutlineController, OutlineDataSource, OutlineItemComparator, OutlineItemCompareType, OutlineItemFilter, OutlineRenderer, OutlineTreeState } from './outlineTree';
import { IViewsService } from 'vs/workbench/common/views';
import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';

class RequestState {

Expand Down Expand Up @@ -147,8 +148,8 @@ class RequestOracle {

class SimpleToggleAction extends Action {

constructor(label: string, checked: boolean, callback: (action: SimpleToggleAction) => any) {
super(`simple` + defaultGenerator.nextId(), label, undefined, true, _ => {
constructor(label: string, checked: boolean, callback: (action: SimpleToggleAction) => any, className?: string) {
super(`simple` + defaultGenerator.nextId(), label, className, true, _ => {
this.checked = !this.checked;
callback(this);
return undefined;
Expand All @@ -157,12 +158,14 @@ class SimpleToggleAction extends Action {
}
}

class OutlineState {

class OutlineViewState {

private _followCursor = false;
private _filterOnType = true;
private _sortBy = OutlineItemCompareType.ByKind;

private _onDidChange = new Emitter<{ followCursor?: boolean, sortBy?: boolean }>();
private _onDidChange = new Emitter<{ followCursor?: boolean, sortBy?: boolean, filterOnType?: boolean }>();
readonly onDidChange = this._onDidChange.event;

set followCursor(value: boolean) {
Expand All @@ -176,6 +179,17 @@ class OutlineState {
return this._followCursor;
}

get filterOnType() {
return this._filterOnType;
}

set filterOnType(value) {
if (value !== this._filterOnType) {
this._filterOnType = value;
this._onDidChange.fire({ filterOnType: true });
}
}

set sortBy(value: OutlineItemCompareType) {
if (value !== this._sortBy) {
this._sortBy = value;
Expand Down Expand Up @@ -212,7 +226,7 @@ export class OutlinePanel extends ViewletPanel {
private _disposables = new Array<IDisposable>();

private _editorDisposables = new Array<IDisposable>();
private _outlineViewState = new OutlineState();
private _outlineViewState = new OutlineViewState();
private _requestOracle: RequestOracle;
private _cachedHeight: number;
private _domNode: HTMLElement;
Expand Down Expand Up @@ -279,7 +293,9 @@ export class OutlinePanel extends ViewletPanel {
progressContainer, this._message, this._inputContainer, treeContainer
);

this._input = new InputBox(this._inputContainer, null, { placeholder: localize('filter', "Filter") });
this._input = new InputBox(this._inputContainer, null, {
placeholder: this._outlineViewState.filterOnType ? localize('filter', "Filter") : localize('find', "Find")
});
this._input.disable();

this.disposables.push(attachInputBoxStyler(this._input, this._themeService));
Expand All @@ -299,6 +315,17 @@ export class OutlinePanel extends ViewletPanel {
}
}));

const checkBox = new Checkbox({
actionClassName: 'action-filter',
title: localize('checkboxFilter', "Filter element on type"),
isChecked: this._outlineViewState.filterOnType,
onChange: () => {
this._outlineViewState.filterOnType = !this._outlineViewState.filterOnType;
}
});
this._inputContainer.appendChild(checkBox.domNode);
this.disposables.push(attachCheckboxStyler(checkBox, this._themeService));

const $this = this;
const controller = new class extends OutlineController {

Expand Down Expand Up @@ -383,7 +410,7 @@ export class OutlinePanel extends ViewletPanel {
return result;
}

private _onDidChangeUserState(e: { followCursor?: boolean, sortBy?: boolean }) {
private _onDidChangeUserState(e: { followCursor?: boolean, sortBy?: boolean, filterOnType?: boolean }) {
this._outlineViewState.persist(this._storageService);
if (e.followCursor) {
// todo@joh update immediately
Expand All @@ -392,6 +419,9 @@ export class OutlinePanel extends ViewletPanel {
this._treeComparator.type = this._outlineViewState.sortBy;
this._tree.refresh(undefined, true);
}
if (e.filterOnType) {
this._applyTypeToFilter();
}
}

private _showMessage(message: string) {
Expand Down Expand Up @@ -473,16 +503,6 @@ export class OutlinePanel extends ViewletPanel {
OutlineTreeState.restore(this._tree, state);
}

// depending on the user setting we filter or find elements
if (this._configurationService.getValue(OutlineConfigKeys.filterOnType)) {
this._treeFilter.enabled = true;
this._treeDataSource.filterOnScore = true;
this._input.setPlaceHolder(localize('filter', "Filter"));
} else {
this._treeFilter.enabled = false;
this._treeDataSource.filterOnScore = false;
this._input.setPlaceHolder(localize('find', "Find"));
}
this._input.enable();
this.layoutBody();

Expand Down Expand Up @@ -581,6 +601,22 @@ export class OutlinePanel extends ViewletPanel {
}));
}

private _applyTypeToFilter(): void {
// depending on the user setting we filter or find elements
if (this._outlineViewState.filterOnType) {
this._treeFilter.enabled = true;
this._treeDataSource.filterOnScore = true;
this._input.setPlaceHolder(localize('filter', "Filter"));
} else {
this._treeFilter.enabled = false;
this._treeDataSource.filterOnScore = false;
this._input.setPlaceHolder(localize('find', "Find"));
}
if (this._tree.getInput()) {
this._tree.refresh(undefined, true);
}
}

private async _revealTreeSelection(element: OutlineElement, focus: boolean, aside: boolean): TPromise<void> {
let { range, uri } = element.symbol.location;
let input = this._editorService.createInput({ resource: uri });
Expand Down Expand Up @@ -636,14 +672,14 @@ KeybindingsRegistry.registerCommandAndKeybindingRule({
id: 'outline.focusDownHighlighted',
weight: KeybindingsRegistry.WEIGHT.workbenchContrib(),
primary: KeyCode.DownArrow,
when: ContextKeyExpr.and(OutlineViewFiltered, OutlineViewFocused, ContextKeyExpr.equals(`config.${OutlineConfigKeys.navigateHighlights}`, true)),
when: ContextKeyExpr.and(OutlineViewFiltered, OutlineViewFocused),
handler: accessor => goUpOrDownToHighligthedElement(accessor, false)
});

KeybindingsRegistry.registerCommandAndKeybindingRule({
id: 'outline.focusUpHighlighted',
weight: KeybindingsRegistry.WEIGHT.workbenchContrib(),
primary: KeyCode.UpArrow,
when: ContextKeyExpr.and(OutlineViewFiltered, OutlineViewFocused, ContextKeyExpr.equals(`config.${OutlineConfigKeys.navigateHighlights}`, true)),
when: ContextKeyExpr.and(OutlineViewFiltered, OutlineViewFocused),
handler: accessor => goUpOrDownToHighligthedElement(accessor, true)
});

0 comments on commit 0f3c383

Please sign in to comment.