mirror of
https://github.com/Microsoft/vscode
synced 2024-08-27 21:09:43 +00:00
theming - quick open group label and separator
This commit is contained in:
parent
3860b1b79a
commit
4fc164cf9d
|
@ -325,6 +325,8 @@
|
|||
"debugToolBarBackground": "#00212B",
|
||||
"dropdownBackground": "#00212B",
|
||||
"dropdownBorder": "#2AA19899",
|
||||
"pickerGroupForeground": "#2AA19899",
|
||||
"pickerGroupBorder": "#2AA19899",
|
||||
|
||||
"peekViewResultsBackground": "#00212B",
|
||||
"peekViewTitleBackground": "#00212B",
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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,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,
|
||||
|
|
Loading…
Reference in a new issue