Use pickerGroupForeground for decoratorRight color

This commit is contained in:
Christopher Leidigh 2018-12-11 23:43:47 -05:00
parent c8f368baa7
commit 7cdd536bf3
5 changed files with 16 additions and 9 deletions

View file

@ -44,7 +44,7 @@ export interface ISelectBoxOptions {
// Utilize optionItem interface to capture all option parameters
export interface ISelectOptionItem {
text: string;
decorationRight?: string;
decoratorRight?: string;
description?: string;
descriptionIsMarkdown?: boolean;
isDisabled?: boolean;
@ -54,6 +54,7 @@ export interface ISelectBoxStyles extends IListStyles {
selectBackground?: Color;
selectListBackground?: Color;
selectForeground?: Color;
decoratorRightForeground?: Color;
selectBorder?: Color;
selectListBorder?: Color;
focusBorder?: Color;

View file

@ -83,7 +83,7 @@
float: left;
}
.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-decoration-right {
.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-decorator-right {
text-overflow: ellipsis;
overflow: hidden;
padding-right: 10px;

View file

@ -28,7 +28,7 @@ interface ISelectListTemplateData {
root: HTMLElement;
text: HTMLElement;
itemDescription: HTMLElement;
decorationRight: HTMLElement;
decoratorRight: HTMLElement;
disposables: IDisposable[];
}
@ -43,7 +43,7 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
data.disposables = [];
data.root = container;
data.text = dom.append(container, $('.option-text'));
data.decorationRight = dom.append(container, $('.option-decoration-right'));
data.decoratorRight = dom.append(container, $('.option-decorator-right'));
data.itemDescription = dom.append(container, $('.option-text-description'));
dom.addClass(data.itemDescription, 'visually-hidden');
@ -53,11 +53,11 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
renderElement(element: ISelectOptionItem, index: number, templateData: ISelectListTemplateData): void {
const data = <ISelectListTemplateData>templateData;
const text = (<ISelectOptionItem>element).text;
const decorationRight = (<ISelectOptionItem>element).decorationRight;
const decoratorRight = (<ISelectOptionItem>element).decoratorRight;
const isDisabled = (<ISelectOptionItem>element).isDisabled;
data.text.textContent = text;
data.decorationRight.innerText = (!!decorationRight ? decorationRight : '');
data.decoratorRight.innerText = (!!decoratorRight ? decoratorRight : '');
if (typeof element.description === 'string') {
const itemDescriptionId = (text.replace(/ /g, '_').toLowerCase() + '_description_' + data.root.id);
@ -329,6 +329,10 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.focused:not(:hover) { color: ${this.styles.listFocusForeground} !important; }`);
}
if (this.styles.decoratorRightForeground) {
content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row .option-decorator-right { color: ${this.styles.decoratorRightForeground} !important; }`);
}
if (this.styles.selectBackground && this.styles.selectBorder && !this.styles.selectBorder.equals(this.styles.selectBackground)) {
content.push(`.monaco-select-box-dropdown-container { border: 1px solid ${this.styles.selectBorder} } `);
content.push(`.monaco-select-box-dropdown-container > .select-box-details-pane.border-top { border-top: 1px solid ${this.styles.selectBorder} } `);
@ -690,7 +694,7 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
let longestLength = 0;
this.options.forEach((option, index) => {
const len = option.text.length + (!!option.decorationRight ? option.decorationRight.length : 0);
const len = option.text.length + (!!option.decoratorRight ? option.decoratorRight.length : 0);
if (len > longestLength) {
longest = index;
longestLength = len;
@ -698,7 +702,7 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
});
container.innerHTML = this.options[longest].text + (!!this.options[longest].decorationRight ? (this.options[longest].decorationRight + ' ') : '');
container.innerHTML = this.options[longest].text + (!!this.options[longest].decoratorRight ? (this.options[longest].decoratorRight + ' ') : '');
elementWidth = dom.getTotalWidth(container);
}

View file

@ -117,6 +117,7 @@ export interface ISelectBoxStyleOverrides extends IStyleOverrides, IListStyleOve
selectBackground?: ColorIdentifier;
selectListBackground?: ColorIdentifier;
selectForeground?: ColorIdentifier;
decoratorRightForeground?: ColorIdentifier;
selectBorder?: ColorIdentifier;
focusBorder?: ColorIdentifier;
}
@ -126,6 +127,7 @@ export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeSer
selectBackground: (style && style.selectBackground) || selectBackground,
selectListBackground: (style && style.selectListBackground) || selectListBackground,
selectForeground: (style && style.selectForeground) || selectForeground,
decoratorRightForeground: (style && style.pickerGroupForeground) || pickerGroupForeground,
selectBorder: (style && style.selectBorder) || selectBorder,
focusBorder: (style && style.focusBorder) || focusBorder,
listFocusBackground: (style && style.listFocusBackground) || listFocusBackground,

View file

@ -1174,7 +1174,7 @@ export class SettingsRenderer implements ITreeRenderer {
text: data,
description: (enumDescriptions && enumDescriptions[index] && (enumDescriptionsAreMarkdown ? fixSettingLinks(enumDescriptions[index], false) : enumDescriptions[index])),
descriptionIsMarkdown: enumDescriptionsAreMarkdown,
decorationRight: (data === dataElement.defaultValue ? localize('settings.Default', "({0})", 'default') : '')
decoratorRight: (data === dataElement.defaultValue ? localize('settings.Default', "{0}", 'default') : '')
});
template.selectBox.setOptions(displayOptions);