development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-09-19 18:48:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #64267 from cleidigh/selectbox-decorator/add

Browse source 
Selectbox: Add decoratorRight parameter - Default indicator for settingsEditor. Addresses: #58724
This commit is contained in:
Rob Lourens 2018-12-12 16:29:30 -08:00 committed by GitHub
parent 2025198e44 7cdd536bf3
commit 36546fef79
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 35 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/vs/base/browser/ui/selectBox/selectBox.ts
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;

10
src/vs/base/browser/ui/selectBox/selectBoxCustom.css
View file

@ -80,8 +80,18 @@
overflow: hidden;
padding-left: 3.5px;
white-space: nowrap;
float: left;
}
.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;
white-space: nowrap;
float: right;
}
/* Accepted CSS hiding technique for accessibility reader text */
/* https://webaim.org/techniques/css/invisiblecontent/ */

25
src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
View file

@ -28,6 +28,7 @@ interface ISelectListTemplateData {
root: HTMLElement;
text: HTMLElement;
itemDescription: HTMLElement;
decoratorRight: HTMLElement;
disposables: IDisposable[];
}
@ -42,6 +43,7 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
data.disposables = [];
data.root = container;
data.text = dom.append(container, $('.option-text'));
data.decoratorRight = dom.append(container, $('.option-decorator-right'));
data.itemDescription = dom.append(container, $('.option-text-description'));
dom.addClass(data.itemDescription, 'visually-hidden');
@ -51,9 +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 decoratorRight = (<ISelectOptionItem>element).decoratorRight;
const isDisabled = (<ISelectOptionItem>element).isDisabled;
data.text.textContent = text;
data.decoratorRight.innerText = (!!decoratorRight ? decoratorRight : '');
if (typeof element.description === 'string') {
const itemDescriptionId = (text.replace(/ /g, '_').toLowerCase() + '_description_' + data.root.id);
@ -325,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} } `);
@ -683,14 +691,18 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
if (container && !!this.options) {
let longest = 0;
let longestLength = 0;
for (let index = 0; index < this.options.length; index++) {
if (this.options[index].text.length > this.options[longest].text.length) {
this.options.forEach((option, index) => {
const len = option.text.length + (!!option.decoratorRight ? option.decoratorRight.length : 0);
if (len > longestLength) {
longest = index;
longestLength = len;
}
}
});
container.innerHTML = this.options[longest].text;
container.innerHTML = this.options[longest].text + (!!this.options[longest].decoratorRight ? (this.options[longest].decoratorRight + ' ') : '');
elementWidth = dom.getTotalWidth(container);
}
@ -766,11 +778,12 @@ export class SelectBoxList implements ISelectBoxDelegate, IListVirtualDelegate<I
dom.EventHelper.stop(e);
// Check our mouse event is on an option (not scrollbar)
if (!e.toElement.classList.contains('option-text')) {
if (!!e.toElement.classList.contains('slider')) {
return;
}
const listRowElement = e.toElement.parentElement;
const listRowElement = e.toElement.closest('.monaco-list-row');
if (!listRowElement) {
return;
}

2
src/vs/platform/theme/common/styler.ts
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,

3
src/vs/workbench/parts/preferences/browser/settingsTree.ts
View file

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