Skip to content

theming - use flex for tree actions to avoid background color duplication #23882

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bpasero merged 2 commits into from
Apr 4, 2017
Merged

theming - use flex for tree actions to avoid background color duplication #23882

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee10519
theming - use flex for tree actions to avoid background color duplica…
bpasero Apr 4, 2017
edad6b2
fix overflow
bpasero Apr 4, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions src/vs/base/parts/quickopen/browser/quickOpenModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -474,29 +474,10 @@ class Renderer implements IRenderer<QuickOpenEntry> {
return this.entryItemRenderer.renderTemplate(null, templateId, container);
}

// Entry Group
let group: HTMLDivElement;
if (templateId === templateEntryGroup) {
group = document.createElement('div');
DOM.addClass(group, 'results-group');
container.appendChild(group);
}

// Action Bar
DOM.addClass(container, 'actions');

const entryContainer = document.createElement('div');
DOM.addClass(entryContainer, 'sub-content');
container.appendChild(entryContainer);

const actionBarContainer = document.createElement('div');
DOM.addClass(actionBarContainer, 'primary-action-bar');
container.appendChild(actionBarContainer);

const actionBar = new ActionBar(actionBarContainer, {
actionRunner: this.actionRunner
});

// Entry
const row1 = DOM.$('.row');
const row2 = DOM.$('.row');
Expand All @@ -522,6 +503,25 @@ class Renderer implements IRenderer<QuickOpenEntry> {
DOM.addClass(detailContainer, 'quick-open-entry-meta');
const detail = new HighlightedLabel(detailContainer);

// Entry Group
let group: HTMLDivElement;
if (templateId === templateEntryGroup) {
group = document.createElement('div');
DOM.addClass(group, 'results-group');
container.appendChild(group);
}

// Actions
DOM.addClass(container, 'actions');

const actionBarContainer = document.createElement('div');
DOM.addClass(actionBarContainer, 'primary-action-bar');
container.appendChild(actionBarContainer);

const actionBar = new ActionBar(actionBarContainer, {
actionRunner: this.actionRunner
});

return {
container,
entry,
Expand Down
25 changes: 10 additions & 15 deletions src/vs/base/parts/quickopen/browser/quickopen.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@
line-height: 1.8em;
}

.quick-open-widget .quick-open-tree .monaco-tree-row > .content > .sub-content {
overflow: hidden;
}

.quick-open-widget.content-changing .quick-open-tree .monaco-scrollable-element .slider {
display: none; /* scrollbar slider causes some hectic updates when input changes quickly, so hide it while quick open changes */
}
Expand Down Expand Up @@ -90,19 +94,20 @@
}

.quick-open-widget .quick-open-tree .results-group {
float: right;
margin-right: 18px;
}

.quick-open-widget .quick-open-tree .monaco-tree-row.focused > .content.has-actions > .results-group,
.quick-open-widget .quick-open-tree .monaco-tree-row:hover:not(.highlighted) > .content.has-actions > .results-group,
.quick-open-widget .quick-open-tree .focused .monaco-tree-row.focused > .content.has-actions > .results-group {
margin-right: 0px;
}

.vs .quick-open-widget .quick-open-tree .results-group,
.vs-dark .quick-open-widget .quick-open-tree .results-group {
opacity: 0.6;
}

.quick-open-widget .quick-open-tree .content.has-actions .results-group {
margin-right: 34px; /* push more to the right if we have actions */
}

.quick-open-widget .quick-open-tree .results-group-separator {
border-top-width: 1px;
border-top-style: solid;
Expand Down Expand Up @@ -164,14 +169,4 @@
.quick-open-widget .monaco-tree.focused .monaco-tree-rows > .monaco-tree-row.selected.focused {
background: #DCEBFC;
color: inherit;
}

.hc-black .quick-open-widget .monaco-tree.focused .monaco-tree-row.focused:not(.highlighted) > .content.actions > .primary-action-bar,
.hc-black .quick-open-widget .monaco-tree.focused .monaco-tree-row.selected:not(.highlighted) > .content.actions > .primary-action-bar,
.hc-black .quick-open-widget .monaco-tree .monaco-tree-row.focused:not(.highlighted) > .content.actions > .primary-action-bar,
.hc-black .quick-open-widget .monaco-tree .monaco-tree-row.selected:not(.highlighted) > .content.actions > .primary-action-bar,
.hc-black .quick-open-widget .monaco-tree .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) > .content.actions > .primary-action-bar,
.hc-black .quick-open-widget .monaco-tree .monaco-tree-row.drop-target > .content.actions > .primary-action-bar,
.hc-black .quick-open-widget .monaco-tree .monaco-tree-row > .content.actions.more > .primary-action-bar {
background-color: #0C141F;
}
44 changes: 9 additions & 35 deletions src/vs/base/parts/tree/browser/actionsRenderer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@
*--------------------------------------------------------------------------------------------*/
.monaco-tree .monaco-tree-row > .content.actions {
position: relative;
display: flex;
}

.monaco-tree .monaco-tree-row > .content.actions > .sub-content {
flex: 1;
}

.monaco-tree .monaco-tree-row > .content.actions .action-item {
Expand All @@ -17,20 +22,17 @@

.monaco-tree .monaco-tree-row > .content.actions > .primary-action-bar {
display: none;
position: absolute;
right: 0;
top: 0;
padding: 0 0.8em 0 0.4em;
}

.monaco-tree .monaco-tree-row.focused > .content.actions > .primary-action-bar {
.monaco-tree .monaco-tree-row.focused > .content.has-actions > .primary-action-bar {
width: 0; /* in order to support a11y with keyboard, we use width: 0 to hide the actions, which still allows to "Tab" into the actions */
display: block;
}

.monaco-tree .monaco-tree-row:hover:not(.highlighted) > .content.actions > .primary-action-bar,
.monaco-tree.focused .monaco-tree-row.focused > .content.actions > .primary-action-bar,
.monaco-tree .monaco-tree-row > .content.actions.more > .primary-action-bar {
.monaco-tree .monaco-tree-row:hover:not(.highlighted) > .content.has-actions > .primary-action-bar,
.monaco-tree.focused .monaco-tree-row.focused > .content.has-actions > .primary-action-bar,
.monaco-tree .monaco-tree-row > .content.has-actions.more > .primary-action-bar {
width: inherit;
display: block;
}
Expand All @@ -41,32 +43,4 @@
background-repeat: no-repeat;
width: 16px;
height: 16px;
}

/* Default theme */
.monaco-tree.focused .monaco-tree-row.focused:not(.highlighted) > .content.actions > .primary-action-bar { background-color: #DCEBFC; }
.monaco-tree.focused .monaco-tree-row.selected:not(.highlighted) > .content.actions > .primary-action-bar { background-color: #4FA7FF; color: white; }
.monaco-tree.focused .monaco-tree-row.focused.selected:not(.highlighted) > .content.actions > .primary-action-bar { background-color: #3399FF; color: white; }
.monaco-tree .monaco-tree-row.selected:not(.highlighted) > .content.actions > .primary-action-bar { background-color: #CCCEDB; }
.monaco-tree .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) > .content.actions > .primary-action-bar { background-color: #F0F0F0; }
.monaco-tree .monaco-tree-row.drop-target > .content.actions > .primary-action-bar { background-color: #DDECFF; }
.monaco-tree .monaco-tree-row > .content.actions.more > .primary-action-bar { background-color: #F6F6F6; } /* Ugly */

/* VS Dark theme */
.vs-dark .monaco-tree.focused .monaco-tree-row.focused:not(.highlighted) > .content.actions > .primary-action-bar { background-color: #073655; }
.vs-dark .monaco-tree.focused .monaco-tree-row.selected:not(.highlighted) > .content.actions > .primary-action-bar { background-color: #0E639C; color: white; }
.vs-dark .monaco-tree.focused .monaco-tree-row.focused.selected:not(.highlighted) > .content.actions > .primary-action-bar { background-color: #094771; color: white; }
.vs-dark .monaco-tree .monaco-tree-row.selected:not(.highlighted) > .content.actions > .primary-action-bar { background-color: #3F3F46; }
.vs-dark .monaco-tree .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) > .content.actions > .primary-action-bar { background-color: #2A2D2E; }
.vs-dark .monaco-tree .monaco-tree-row.drop-target > .content.actions > .primary-action-bar { background-color: #383B3D; }
.vs-dark .monaco-tree .monaco-tree-row > .content.actions.more > .primary-action-bar { background-color: #252526; } /* Ugly */

/* High Contrast Theming */
.hc-black .monaco-tree.focused .monaco-tree-row.focused:not(.highlighted) > .content.actions > .primary-action-bar,
.hc-black .monaco-tree.focused .monaco-tree-row.selected:not(.highlighted) > .content.actions > .primary-action-bar,
.hc-black .monaco-tree .monaco-tree-row.selected:not(.highlighted) > .content.actions > .primary-action-bar,
.hc-black .monaco-tree .monaco-tree-row:hover:not(.highlighted):not(.selected):not(.focused) > .content.actions > .primary-action-bar,
.hc-black .monaco-tree .monaco-tree-row.drop-target > .content.actions > .primary-action-bar,
.hc-black .monaco-tree .monaco-tree-row > .content.actions.more > .primary-action-bar {
background-color: #000;
}
42 changes: 21 additions & 21 deletions src/vs/workbench/parts/quickopen/browser/gotoLineHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,15 @@ class GotoLineEntry extends EditorQuickOpenEntry {
}

private parseInput(line: string) {
let numbers = line.split(/,|:|#/).map(part => parseInt(part, 10)).filter(part => !isNaN(part));
const numbers = line.split(/,|:|#/).map(part => parseInt(part, 10)).filter(part => !isNaN(part));
this.line = numbers[0];
this.column = numbers[1];
}

public getLabel(): string {

// Inform user about valid range if input is invalid
let maxLineNumber = this.getMaxLineNumber();
const maxLineNumber = this.getMaxLineNumber();
if (this.invalidRange(maxLineNumber)) {
if (maxLineNumber > 0) {
return nls.localize('gotoLineLabelEmptyWithLimit', "Type a line number between 1 and {0} to navigate to", maxLineNumber);
Expand All @@ -69,8 +69,8 @@ class GotoLineEntry extends EditorQuickOpenEntry {
}

private getMaxLineNumber(): number {
let editor = this.editorService.getActiveEditor();
let editorControl = <IEditor>editor.getControl();
const editor = this.editorService.getActiveEditor();
const editorControl = <IEditor>editor.getControl();
let model = editorControl.getModel();
if (model && (<IDiffEditorModel>model).modified && (<IDiffEditorModel>model).original) {
model = (<IDiffEditorModel>model).modified; // Support for diff editor models
Expand Down Expand Up @@ -105,16 +105,16 @@ class GotoLineEntry extends EditorQuickOpenEntry {
}

// Check for sideBySide use
let sideBySide = context.keymods.indexOf(KeyMod.CtrlCmd) >= 0;
const sideBySide = context.keymods.indexOf(KeyMod.CtrlCmd) >= 0;
if (sideBySide) {
this.editorService.openEditor(this.getInput(), this.getOptions(), true).done(null, errors.onUnexpectedError);
}

// Apply selection and focus
let range = this.toSelection();
let activeEditor = this.editorService.getActiveEditor();
const range = this.toSelection();
const activeEditor = this.editorService.getActiveEditor();
if (activeEditor) {
let editor = <IEditor>activeEditor.getControl();
const editor = <IEditor>activeEditor.getControl();
editor.setSelection(range);
editor.revealRangeInCenter(range);
}
Expand All @@ -132,10 +132,10 @@ class GotoLineEntry extends EditorQuickOpenEntry {
}

// Select Line Position
let range = this.toSelection();
let activeEditor = this.editorService.getActiveEditor();
const range = this.toSelection();
const activeEditor = this.editorService.getActiveEditor();
if (activeEditor) {
let editorControl = <IEditor>activeEditor.getControl();
const editorControl = <IEditor>activeEditor.getControl();
editorControl.revealRangeInCenter(range);

// Decorate if possible
Expand Down Expand Up @@ -180,30 +180,30 @@ export class GotoLineHandler extends QuickOpenHandler {

// Remember view state to be able to restore on cancel
if (!this.lastKnownEditorViewState) {
let editor = this.editorService.getActiveEditor();
const editor = this.editorService.getActiveEditor();
this.lastKnownEditorViewState = (<IEditor>editor.getControl()).saveViewState();
}

return TPromise.as(new QuickOpenModel([new GotoLineEntry(searchValue, this.editorService, this)]));
}

public canRun(): boolean | string {
let canRun = getCodeEditor(this.editorService.getActiveEditor()) !== null;
const canRun = getCodeEditor(this.editorService.getActiveEditor()) !== null;

return canRun ? true : nls.localize('cannotRunGotoLine', "Open a text file first to go to a line");
}

public decorateOutline(range: IRange, editor: IEditor, position: Position): void {
editor.changeDecorations((changeAccessor: IModelDecorationsChangeAccessor) => {
let deleteDecorations: string[] = [];
const deleteDecorations: string[] = [];

if (this.rangeHighlightDecorationId) {
deleteDecorations.push(this.rangeHighlightDecorationId.lineDecorationId);
deleteDecorations.push(this.rangeHighlightDecorationId.rangeHighlightId);
this.rangeHighlightDecorationId = null;
}

let newDecorations: IModelDeltaDecoration[] = [
const newDecorations: IModelDeltaDecoration[] = [
// rangeHighlight at index 0
{
range: range,
Expand All @@ -226,9 +226,9 @@ export class GotoLineHandler extends QuickOpenHandler {
}
];

let decorations = changeAccessor.deltaDecorations(deleteDecorations, newDecorations);
let rangeHighlightId = decorations[0];
let lineDecorationId = decorations[1];
const decorations = changeAccessor.deltaDecorations(deleteDecorations, newDecorations);
const rangeHighlightId = decorations[0];
const lineDecorationId = decorations[1];

this.rangeHighlightDecorationId = {
rangeHighlightId: rangeHighlightId,
Expand All @@ -242,7 +242,7 @@ export class GotoLineHandler extends QuickOpenHandler {
if (this.rangeHighlightDecorationId) {
this.editorService.getVisibleEditors().forEach((editor) => {
if (editor.position === this.rangeHighlightDecorationId.position) {
let editorControl = <IEditor>editor.getControl();
const editorControl = <IEditor>editor.getControl();
editorControl.changeDecorations((changeAccessor: IModelDecorationsChangeAccessor) => {
changeAccessor.deltaDecorations([
this.rangeHighlightDecorationId.lineDecorationId,
Expand All @@ -263,9 +263,9 @@ export class GotoLineHandler extends QuickOpenHandler {

// Restore selection if canceled
if (canceled && this.lastKnownEditorViewState) {
let activeEditor = this.editorService.getActiveEditor();
const activeEditor = this.editorService.getActiveEditor();
if (activeEditor) {
let editor = <IEditor>activeEditor.getControl();
const editor = <IEditor>activeEditor.getControl();
editor.restoreViewState(this.lastKnownEditorViewState);
}
}
Expand Down
40 changes: 21 additions & 19 deletions src/vs/workbench/parts/quickopen/browser/helpHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,29 +67,21 @@ class HelpEntry extends QuickOpenEntryItem {
}

public render(tree: ITree, container: HTMLElement, previousCleanupFn: IElementCallback): IElementCallback {
let builder = $(container);
const builder = $(container);

builder.div({ class: 'quick-open-entry' }, builder => {

// Support border
if (this.showBorder()) {
$(container).addClass('results-group-separator');
} else {
$(container).removeClass('results-group-separator');
}

// Add a container for the group
if (this.getGroupLabel()) {
$(container).div((div: Builder) => {
div.addClass('results-group');
div.attr({
text: this.getGroupLabel()
});
});
}

builder.div({ class: 'row' }, builder => {

// Prefix
let label = builder.clone().div({
const label = $(builder).div({
text: this.prefix,
'class': 'quick-open-help-entry-label'
});
Expand All @@ -99,10 +91,20 @@ class HelpEntry extends QuickOpenEntryItem {
}

// Description
builder.span({
$(builder).span({
text: this.description,
'class': 'quick-open-entry-description'
});

// Add a container for the group
if (this.getGroupLabel()) {
$(builder).div((div: Builder) => {
div.addClass('results-group');
div.attr({
text: this.getGroupLabel()
});
});
}
});
});

Expand All @@ -127,16 +129,16 @@ export class HelpHandler extends QuickOpenHandler {
public getResults(searchValue: string): TPromise<QuickOpenModel> {
searchValue = searchValue.trim();

let registry = (<IQuickOpenRegistry>Registry.as(Extensions.Quickopen));
let handlerDescriptors = registry.getQuickOpenHandlers();
const registry = (<IQuickOpenRegistry>Registry.as(Extensions.Quickopen));
const handlerDescriptors = registry.getQuickOpenHandlers();

let defaultHandler = registry.getDefaultQuickOpenHandler();
const defaultHandler = registry.getDefaultQuickOpenHandler();
if (defaultHandler) {
handlerDescriptors.push(defaultHandler);
}

let workbenchScoped: HelpEntry[] = [];
let editorScoped: HelpEntry[] = [];
const workbenchScoped: HelpEntry[] = [];
const editorScoped: HelpEntry[] = [];
let entry: HelpEntry;

handlerDescriptors.sort((h1, h2) => h1.prefix.localeCompare(h2.prefix)).forEach((handlerDescriptor) => {
Expand All @@ -145,7 +147,7 @@ export class HelpHandler extends QuickOpenHandler {
// Descriptor has multiple help entries
if (types.isArray(handlerDescriptor.helpEntries)) {
for (let j = 0; j < handlerDescriptor.helpEntries.length; j++) {
let helpEntry = handlerDescriptor.helpEntries[j];
const helpEntry = handlerDescriptor.helpEntries[j];

if (helpEntry.prefix.indexOf(searchValue) === 0) {
entry = new HelpEntry(helpEntry.prefix, helpEntry.description, this.quickOpenService, searchValue.length > 0);
Expand Down