Skip to content

Commit

Permalink
Fix #54140 - implement context menu button
Browse files Browse the repository at this point in the history
  • Loading branch information
@roblourens
roblourens committed Aug 18, 2018
1 parent 5669f1d commit a19a0a6
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 8 deletions.
1 change: 1 addition & 0 deletions src/vs/workbench/parts/preferences/browser/media/configure-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.
1 change: 1 addition & 0 deletions src/vs/workbench/parts/preferences/browser/media/configure.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.
49 changes: 46 additions & 3 deletions src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,50 @@
.settings-editor > .settings-body > .settings-tree-container .setting-measure-container {
/** 11px for scrollbar + 208px for TOC margin */
width: calc(100% - 219px);
margin-left: 208px;
margin-left: 188px;
padding-left: 20px;
}

.settings-editor > .settings-body > .settings-tree-container .setting-measure-container {
/* 20 from monaco-tree-wrapper + 20 from monaco-tree-row */
padding-left: 40px;
}

.settings-editor > .settings-body .settings-tree-container .monaco-tree-rows {
width: calc(100% - 20px);
}

.settings-editor > .settings-body .settings-tree-container .monaco-tree-row > .content::before {
/* Hide twisties */
display: none !important;
}

.settings-editor > .settings-body .settings-tree-container .monaco-toolbar {
display: none;
position: absolute;
left: -23px;
top: 11px;
}

.settings-editor > .settings-body .settings-tree-container .monaco-tree-row:hover .monaco-toolbar {
display: flex;
}

.settings-editor > .settings-body .settings-tree-container .monaco-toolbar .toolbar-toggle-more {
display: block;
width: 22px;
height: 22px;
background-position: center;
background-repeat: no-repeat;
background-size: 16px;
}

.vs .settings-editor > .settings-body .settings-tree-container .monaco-toolbar .toolbar-toggle-more {
background-image: url('configure.svg');
}

.vs-dark .settings-editor > .settings-body .settings-tree-container .monaco-toolbar .toolbar-toggle-more {
background-image: url('configure-inverse.svg');
}

.settings-editor > .settings-body .settings-toc-container {
Expand Down Expand Up @@ -171,11 +214,11 @@
margin-left: 3px;
}

.settings-editor > .settings-body .settings-toc-container .monaco-tree-row.has-children > .content:before {
.settings-editor > .settings-body .settings-toc-container .monaco-tree-row.has-children > .content::before {
opacity: 0.9;
}

.settings-editor > .settings-body .settings-toc-container .monaco-tree-row.has-children.selected > .content:before {
.settings-editor > .settings-body .settings-toc-container .monaco-tree-row.has-children.selected > .content::before {
opacity: 1;
}

Expand Down
2 changes: 1 addition & 1 deletion src/vs/workbench/parts/preferences/browser/settingsEditor2.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -493,7 +493,7 @@ export class SettingsEditor2 extends BaseEditor {
}

return this.configurationService.updateValue(key, value, overrides, configurationTarget)
.then(() => this.renderTree(key)) // to draw "Modified" TODO
.then(() => this.renderTree(key))
.then(() => {
const reportModifiedProps = {
key,
Expand Down
57 changes: 53 additions & 4 deletions src/vs/workbench/parts/preferences/browser/settingsTree.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { Tree } from 'vs/base/parts/tree/browser/treeImpl';
import { localize } from 'vs/nls';
import { ICommandService } from 'vs/platform/commands/common/commands';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IContextViewService, IContextMenuService } from 'vs/platform/contextview/browser/contextView';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { WorkbenchTreeController } from 'vs/platform/list/browser/listService';
import { IOpenerService } from 'vs/platform/opener/common/opener';
Expand All @@ -39,6 +39,9 @@ import { ISettingsEditorViewState, isExcludeSetting, SettingsTreeElement, Settin
import { ExcludeSettingWidget, IExcludeDataItem, settingsHeaderForeground, settingsNumberInputBackground, settingsNumberInputBorder, settingsNumberInputForeground, settingsSelectBackground, settingsSelectBorder, settingsSelectForeground, settingsTextInputBackground, settingsTextInputBorder, settingsTextInputForeground } from 'vs/workbench/parts/preferences/browser/settingsWidgets';
import { ISetting, ISettingsGroup } from 'vs/workbench/services/preferences/common/preferences';
import { alert as ariaAlert } from 'vs/base/browser/ui/aria/aria';
import { ToolBar } from 'vs/base/browser/ui/toolbar/toolbar';
import { Action, IAction } from 'vs/base/common/actions';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';

const $ = DOM.$;

Expand Down Expand Up @@ -218,6 +221,7 @@ interface ISettingItemTemplate<T = any> extends IDisposableTemplate {
controlElement: HTMLElement;
deprecationWarningElement: HTMLElement;
otherOverridesElement: HTMLElement;
toolbar: ToolBar;
}

interface ISettingBoolItemTemplate extends ISettingItemTemplate<boolean> {
Expand Down Expand Up @@ -295,19 +299,33 @@ export class SettingsRenderer implements ITreeRenderer {
private rowHeightCache = new Map<string, number>();
private lastRenderedWidth: number;

private settingActions: IAction[];

constructor(
_measureContainer: HTMLElement,
@IThemeService private themeService: IThemeService,
@IContextViewService private contextViewService: IContextViewService,
@IOpenerService private readonly openerService: IOpenerService,
@IInstantiationService private readonly instantiationService: IInstantiationService,
@ICommandService private readonly commandService: ICommandService,
@IContextMenuService private contextMenuService: IContextMenuService
) {
this.descriptionMeasureContainer = $('.setting-item-description');
DOM.append(_measureContainer,
$('.setting-measure-container.monaco-tree-row', undefined,
$('.setting-item', undefined,
this.descriptionMeasureContainer)));

this.settingActions = [
this.instantiationService.createInstance(CopySettingIdAction),
new Action('settings.resetSetting', localize('resetSettingLabel', "Reset Setting"), undefined, undefined, (context: SettingsTreeSettingElement) => {
if (context) {
this._onDidChangeSetting.fire({ key: context.setting.key, value: undefined });
}

return TPromise.wrap(null);
})
];
}

updateWidth(width: number): void {
Expand Down Expand Up @@ -495,6 +513,11 @@ export class SettingsRenderer implements ITreeRenderer {
const deprecationWarningElement = DOM.append(container, $('.setting-item-deprecation-message'));

const toDispose = [];

const toolbar = new ToolBar(container, this.contextMenuService, {});
toolbar.setActions([], this.settingActions)();
toDispose.push(toolbar);

const template: ISettingItemTemplate = {
toDispose,

Expand All @@ -504,7 +527,8 @@ export class SettingsRenderer implements ITreeRenderer {
descriptionElement,
controlElement,
deprecationWarningElement,
otherOverridesElement
otherOverridesElement,
toolbar
};

// Prevent clicks from being handled by list
Expand Down Expand Up @@ -616,6 +640,10 @@ export class SettingsRenderer implements ITreeRenderer {
}));
checkbox.domNode.classList.add(SettingsRenderer.CONTROL_CLASS);

const toolbar = new ToolBar(container, this.contextMenuService, {});
toolbar.setActions([], this.settingActions)();
toDispose.push(toolbar);

const template: ISettingBoolItemTemplate = {
toDispose,

Expand All @@ -626,7 +654,8 @@ export class SettingsRenderer implements ITreeRenderer {
checkbox,
descriptionElement,
deprecationWarningElement,
otherOverridesElement
otherOverridesElement,
toolbar
};

this.addSettingElementFocusHandler(template);
Expand Down Expand Up @@ -826,6 +855,7 @@ export class SettingsRenderer implements ITreeRenderer {

private renderSettingElement(tree: ITree, element: SettingsTreeSettingElement, templateId: string, template: ISettingItemTemplate | ISettingBoolItemTemplate): void {
template.context = element;
template.toolbar.context = element;

const setting = element.setting;

Expand Down Expand Up @@ -1271,7 +1301,7 @@ export class SettingsTree extends NonExpandableOrSelectableTree {
ariaLabel: localize('treeAriaLabel', "Settings"),
showLoading: false,
indentPixels: 0,
twistiePixels: 0,
twistiePixels: 20, // Actually for gear button
};

super(container,
Expand Down Expand Up @@ -1339,3 +1369,22 @@ export class SettingsTree extends NonExpandableOrSelectableTree {
}));
}
}

class CopySettingIdAction extends Action {
static readonly ID = 'settings.copySettingId';
static readonly LABEL = localize('copySettingIdLabel', "Copy Setting ID");

constructor(
@IClipboardService private clipboardService: IClipboardService
) {
super(CopySettingIdAction.ID, CopySettingIdAction.LABEL);
}

run(context: SettingsTreeSettingElement): TPromise<void> {
if (context) {
this.clipboardService.writeText(context.setting.key);
}

return TPromise.as(null);
}
}

0 comments on commit a19a0a6

Please sign in to comment.