development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-08-27 21:09:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

theming - quick open group label and separator

Browse source
This commit is contained in:
Benjamin Pasero 2017-04-19 14:48:58 +02:00
parent 3860b1b79a
commit 4fc164cf9d
8 changed files with 54 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json
View file

@ -325,6 +325,8 @@
"debugToolBarBackground": "#00212B",
"dropdownBackground": "#00212B",
"dropdownBorder": "#2AA19899",
"pickerGroupForeground": "#2AA19899",
"pickerGroupBorder": "#2AA19899",
"peekViewResultsBackground": "#00212B",
"peekViewTitleBackground": "#00212B",

15
src/vs/base/parts/quickopen/browser/quickOpenModel.ts
View file

@ -20,6 +20,7 @@ import { compareAnything, compareByScore as doCompareByScore } from 'vs/base/com
import { ActionBar, IActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
import { HighlightedLabel } from 'vs/base/browser/ui/highlightedlabel/highlightedLabel';
import DOM = require('vs/base/browser/dom');
import { IQuickOpenStyles } from "vs/base/parts/quickopen/browser/quickOpenWidget";
export interface IContext {
event: any;
@ -424,7 +425,7 @@ class Renderer implements IRenderer<QuickOpenEntry> {
return templateEntry;
}
public renderTemplate(templateId: string, container: HTMLElement): IQuickOpenEntryGroupTemplateData {
public renderTemplate(templateId: string, container: HTMLElement, styles: IQuickOpenStyles): IQuickOpenEntryGroupTemplateData {
const entryContainer = document.createElement('div');
DOM.addClass(entryContainer, 'sub-content');
container.appendChild(entryContainer);
@ -485,7 +486,7 @@ class Renderer implements IRenderer<QuickOpenEntry> {
};
}
public renderElement(entry: QuickOpenEntry, templateId: string, templateData: any): void {
public renderElement(entry: QuickOpenEntry, templateId: string, templateData: any, styles: IQuickOpenStyles): void {
const data: IQuickOpenEntryTemplateData = templateData;
// Action Bar
@ -510,17 +511,21 @@ class Renderer implements IRenderer<QuickOpenEntry> {
// Entry group
if (entry instanceof QuickOpenEntryGroup) {
const group = <QuickOpenEntryGroup>entry;
const groupData = <IQuickOpenEntryGroupTemplateData>templateData;
// Border
if (group.showBorder()) {
DOM.addClass(data.container, 'results-group-separator');
DOM.addClass(groupData.container, 'results-group-separator');
groupData.container.style.borderTopColor = styles.pickerGroupBorder.toString();
} else {
DOM.removeClass(data.container, 'results-group-separator');
DOM.removeClass(groupData.container, 'results-group-separator');
groupData.container.style.borderTopColor = null;
}
// Group Label
const groupLabel = group.getGroupLabel() || '';
(<IQuickOpenEntryGroupTemplateData>templateData).group.textContent = groupLabel;
groupData.group.textContent = groupLabel;
groupData.group.style.color = styles.pickerGroupForeground.toString();
}
// Normal Entry

34
src/vs/base/parts/quickopen/browser/quickOpenViewer.ts
View file

@ -7,6 +7,7 @@ import { TPromise } from 'vs/base/common/winjs.base';
import { isFunction } from 'vs/base/common/types';
import { ITree, IRenderer, IFilter, IDataSource, IAccessibilityProvider } from 'vs/base/parts/tree/browser/tree';
import { IModel } from 'vs/base/parts/quickopen/common/quickOpen';
import { IQuickOpenStyles } from "vs/base/parts/quickopen/browser/quickOpenWidget";
export interface IModelProvider {
getModel<T>(): IModel<T>;
@ -22,7 +23,7 @@ export class DataSource implements IDataSource {
this.modelProvider = isFunction(arg.getModel) ? arg : { getModel: () => arg };
}
getId(tree: ITree, element: any): string {
public getId(tree: ITree, element: any): string {
if (!element) {
return null;
}
@ -31,17 +32,17 @@ export class DataSource implements IDataSource {
return model === element ? '__root__' : model.dataSource.getId(element);
}
hasChildren(tree: ITree, element: any): boolean {
public hasChildren(tree: ITree, element: any): boolean {
const model = this.modelProvider.getModel();
return model && model === element && model.entries.length > 0;
}
getChildren(tree: ITree, element: any): TPromise<any[]> {
public getChildren(tree: ITree, element: any): TPromise<any[]> {
const model = this.modelProvider.getModel();
return TPromise.as(model === element ? model.entries : []);
}
getParent(tree: ITree, element: any): TPromise<any> {
public getParent(tree: ITree, element: any): TPromise<any> {
return TPromise.as(null);
}
}
@ -60,7 +61,7 @@ export class Filter implements IFilter {
constructor(private modelProvider: IModelProvider) { }
isVisible(tree: ITree, element: any): boolean {
public isVisible(tree: ITree, element: any): boolean {
const model = this.modelProvider.getModel();
if (!model.filter) {
@ -72,30 +73,37 @@ export class Filter implements IFilter {
}
export class Renderer implements IRenderer {
private styles: IQuickOpenStyles;
constructor(private modelProvider: IModelProvider) { }
constructor(private modelProvider: IModelProvider, styles: IQuickOpenStyles) {
this.styles = styles;
}
getHeight(tree: ITree, element: any): number {
public updateStyles(styles: IQuickOpenStyles): void {
this.styles = styles;
}
public getHeight(tree: ITree, element: any): number {
const model = this.modelProvider.getModel();
return model.renderer.getHeight(element);
}
getTemplateId(tree: ITree, element: any): string {
public getTemplateId(tree: ITree, element: any): string {
const model = this.modelProvider.getModel();
return model.renderer.getTemplateId(element);
}
renderTemplate(tree: ITree, templateId: string, container: HTMLElement): any {
public renderTemplate(tree: ITree, templateId: string, container: HTMLElement): any {
const model = this.modelProvider.getModel();
return model.renderer.renderTemplate(templateId, container);
return model.renderer.renderTemplate(templateId, container, this.styles);
}
renderElement(tree: ITree, element: any, templateId: string, templateData: any): void {
public renderElement(tree: ITree, element: any, templateId: string, templateData: any): void {
const model = this.modelProvider.getModel();
model.renderer.renderElement(element, templateId, templateData);
model.renderer.renderElement(element, templateId, templateData, this.styles);
}
disposeTemplate(tree: ITree, templateId: string, templateData: any): void {
public disposeTemplate(tree: ITree, templateId: string, templateData: any): void {
const model = this.modelProvider.getModel();
model.renderer.disposeTemplate(templateId, templateData);
}

13
src/vs/base/parts/quickopen/browser/quickOpenWidget.ts
View file

@ -50,6 +50,8 @@ export interface IQuickOpenStyles extends IInputBoxStyles, ITreeStyles {
background?: Color;
foreground?: Color;
borderColor?: Color;
pickerGroupForeground?: Color;
pickerGroupBorder?: Color;
}
export interface IShowOptions {
@ -80,7 +82,9 @@ export enum HideReason {
const defaultStyles = {
background: Color.fromHex('#1E1E1E'),
foreground: Color.fromHex('#CCCCCC')
foreground: Color.fromHex('#CCCCCC'),
pickerGroupForeground: Color.fromHex('#0097FB'),
pickerGroupBorder: Color.fromHex('#3F3F46')
};
const DEFAULT_INPUT_ARIA_LABEL = nls.localize('quickOpenAriaLabel', "Quick picker. Type to narrow down results.");
@ -111,6 +115,7 @@ export class QuickOpenWidget implements IModelProvider {
private model: IModel<any>;
private inputChangingTimeoutHandle: number;
private styles: IQuickOpenStyles;
private renderer: Renderer;
constructor(container: HTMLElement, callbacks: IQuickOpenCallbacks, options: IQuickOpenOptions, usageLogger?: IQuickOpenUsageLogger) {
this.toUnbind = [];
@ -214,7 +219,7 @@ export class QuickOpenWidget implements IModelProvider {
this.tree = new Tree(div.getHTMLElement(), {
dataSource: new DataSource(this),
controller: new QuickOpenController({ clickBehavior: ClickBehavior.ON_MOUSE_UP, keyboardSupport: this.options.keyboardSupport }),
renderer: new Renderer(this),
renderer: (this.renderer = new Renderer(this, this.styles)),
filter: new Filter(this),
accessibilityProvider: new AccessibilityProvider(this)
}, {
@ -347,6 +352,10 @@ export class QuickOpenWidget implements IModelProvider {
if (this.tree) {
this.tree.style(this.styles);
}
if (this.renderer) {
this.renderer.updateStyles(this.styles);
}
}
private shouldOpenInBackground(e: StandardKeyboardEvent): boolean {

37
src/vs/base/parts/quickopen/browser/quickopen.css
View file

@ -69,12 +69,6 @@
flex-shrink: 0;
}
.quick-open-widget .quick-open-tree .quick-open-entry .quick-open-help-entry-label {
float: left;
min-width: 16px;
text-align: center;
}
.quick-open-widget .quick-open-tree .quick-open-entry .monaco-highlighted-label span {
opacity: 1;
}
@ -103,11 +97,6 @@
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 .results-group-separator {
border-top-width: 1px;
border-top-style: solid;
@ -174,32 +163,6 @@
box-shadow: none;
}
.quick-open-widget .quick-open-tree .results-group,
.quick-open-widget .quick-open-tree .quick-open-entry .quick-open-help-entry-label {
color: #007ACC;
}
.vs-dark .quick-open-widget .quick-open-tree .results-group,
.vs-dark .quick-open-widget .quick-open-tree .quick-open-entry .quick-open-help-entry-label {
color: #0097FB;
}
.hc-black .quick-open-widget .quick-open-tree .results-group {
color: white;
}
.quick-open-widget .quick-open-tree .results-group-separator {
border-top-color: #CCCEDB;
}
.vs-dark .quick-open-widget .quick-open-tree .results-group-separator {
border-top-color: #3F3F46;
}
.hc-black .quick-open-widget .quick-open-tree .results-group-separator {
border-top-color: white;
}
.quick-open-widget .quick-open-tree .monaco-highlighted-label .highlight {
color: #007ACC;
font-weight: bold;

4
src/vs/base/parts/quickopen/common/quickOpen.ts
View file

@ -64,8 +64,8 @@ export interface IDataSource<T> {
export interface IRenderer<T> {
getHeight(entry: T): number;
getTemplateId(entry: T): string;
renderTemplate(templateId: string, container: HTMLElement): any;
renderElement(entry: T, templateId: string, templateData: any): void;
renderTemplate(templateId: string, container: HTMLElement, styles: any): any;
renderElement(entry: T, templateId: string, templateData: any, styles: any): void;
disposeTemplate(templateId: string, templateData: any): void;
}

3
src/vs/platform/theme/common/colorRegistry.ts
View file

@ -159,6 +159,9 @@ export const listInactiveFocusOutline = registerColor('listInactiveFocusOutline'
export const listSelectionOutline = registerColor('listSelectionOutline', { dark: null, light: null, hc: highContrastOutline }, nls.localize('listSelectionOutline', "List/Tree selection outline color."));
export const listHoverOutline = registerColor('listHoverOutline', { dark: null, light: null, hc: highContrastOutline }, nls.localize('listHoverOutline', "List/Tree hover outline color."));
export const pickerGroupForeground = registerColor('pickerGroupForeground', { dark: Color.fromHex('#0097FB').transparent(0.6), light: Color.fromHex('#007ACC').transparent(0.6), hc: Color.white }, nls.localize('pickerGroupForeground', "Quick picker color for grouping labels."));
export const pickerGroupBorder = registerColor('pickerGroupBorder', { dark: '#3F3F46', light: '#CCCEDB', hc: Color.white }, nls.localize('pickerGroupBorder', "Quick picker color for grouping borders."));
/**
* Editor background color.
* Because of bug https://monacotools.visualstudio.com/DefaultCollection/Monaco/_workitems/edit/13254

6
src/vs/platform/theme/common/styler.ts
View file

@ -6,7 +6,7 @@
'use strict';
import { ITheme, IThemeService } from 'vs/platform/theme/common/themeService';
import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder, foreground, editorBackground, highContrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listFocusAndSelectionBackground, listFocusAndSelectionForeground, listInactiveFocusBackground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, listHoverOutline, listSelectionOutline, listFocusOutline, listInactiveFocusOutline } from 'vs/platform/theme/common/colorRegistry';
import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder, foreground, editorBackground, highContrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listFocusAndSelectionBackground, listFocusAndSelectionForeground, listInactiveFocusBackground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, listHoverOutline, listSelectionOutline, listFocusOutline, listInactiveFocusOutline, pickerGroupBorder, pickerGroupForeground } from 'vs/platform/theme/common/colorRegistry';
import { IDisposable } from "vs/base/common/lifecycle";
export interface IThemable {
@ -66,6 +66,8 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer
inputBackground?: ColorIdentifier,
inputForeground?: ColorIdentifier,
inputBorder?: ColorIdentifier,
pickerGroupForeground?: ColorIdentifier,
pickerGroupBorder?: ColorIdentifier,
listFocusBackground?: ColorIdentifier,
listActiveSelectionBackground?: ColorIdentifier,
listActiveSelectionForeground?: ColorIdentifier,
@ -82,6 +84,8 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer
foreground: (style && style.foreground) || foreground,
background: (style && style.background) || editorBackground,
borderColor: style && style.borderColor || highContrastBorder,
pickerGroupForeground: style && style.pickerGroupForeground || pickerGroupForeground,
pickerGroupBorder: style && style.pickerGroupBorder || pickerGroupBorder,
inputBackground: (style && style.inputBackground) || inputBackground,
inputForeground: (style && style.inputForeground) || inputForeground,
inputBorder: (style && style.inputBorder) || inputBorder,