From 5cf8f61b51d56028f9f14e0beb7bc0036d251b5c Mon Sep 17 00:00:00 2001 From: Rob Lourens Date: Thu, 16 Aug 2018 17:56:33 -0700 Subject: [PATCH] Fix #56612 - use blue indicator bar instead of 'Modified' text --- .../browser/media/settingsEditor2.css | 17 ++++++++++------- .../parts/preferences/browser/settingsTree.ts | 19 ++++++++----------- .../preferences/browser/settingsWidgets.ts | 17 +++++++++++------ 3 files changed, 29 insertions(+), 24 deletions(-) diff --git a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css index 084ed88990e..abd326ee581 100644 --- a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css +++ b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css @@ -212,15 +212,18 @@ text-overflow: ellipsis; } -.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-is-configured-label { - font-style: italic; - opacity: 0.8; - margin-right: 7px; - display: none; +.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured::after { + display: block; + content: ' '; + position: absolute; + width: 2px; + left: 0px; + top: 15px; + bottom: 16px; } -.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-title .setting-item-is-configured-label { - display: inline-block; +.settings-editor > .settings-body > .settings-tree-container .setting-item-bool.setting-item.is-configured::after { + bottom: 23px; } .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-overrides { diff --git a/src/vs/workbench/parts/preferences/browser/settingsTree.ts b/src/vs/workbench/parts/preferences/browser/settingsTree.ts index 7505ddd24f0..480a73351c9 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsTree.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsTree.ts @@ -201,7 +201,6 @@ interface ISettingItemTemplate extends IDisposableTemplate { descriptionElement: HTMLElement; controlElement: HTMLElement; deprecationWarningElement: HTMLElement; - isConfiguredElement: HTMLElement; otherOverridesElement: HTMLElement; } @@ -471,8 +470,6 @@ export class SettingsRenderer implements ITreeRenderer { const labelCategoryContainer = DOM.append(titleElement, $('.setting-item-cat-label-container')); const categoryElement = DOM.append(labelCategoryContainer, $('span.setting-item-category')); const labelElement = DOM.append(labelCategoryContainer, $('span.setting-item-label')); - const isConfiguredElement = DOM.append(titleElement, $('span.setting-item-is-configured-label')); - isConfiguredElement.textContent = localize('configured', "Modified"); const otherOverridesElement = DOM.append(titleElement, $('span.setting-item-overrides')); const descriptionElement = DOM.append(container, $('.setting-item-description')); @@ -491,7 +488,6 @@ export class SettingsRenderer implements ITreeRenderer { descriptionElement, controlElement, deprecationWarningElement, - isConfiguredElement, otherOverridesElement }; @@ -585,8 +581,6 @@ export class SettingsRenderer implements ITreeRenderer { const titleElement = DOM.append(container, $('.setting-item-title')); const categoryElement = DOM.append(titleElement, $('span.setting-item-category')); const labelElement = DOM.append(titleElement, $('span.setting-item-label')); - const isConfiguredElement = DOM.append(titleElement, $('span.setting-item-is-configured-label')); - isConfiguredElement.textContent = localize('configured', "Modified"); const otherOverridesElement = DOM.append(titleElement, $('span.setting-item-overrides')); const descriptionAndValueElement = DOM.append(container, $('.setting-item-value-description')); @@ -616,7 +610,6 @@ export class SettingsRenderer implements ITreeRenderer { checkbox, descriptionElement, deprecationWarningElement, - isConfiguredElement, otherOverridesElement }; @@ -900,7 +893,8 @@ export class SettingsRenderer implements ITreeRenderer { // Setup and add ARIA attributes // Create id and label for control/input element - parent is wrapper div const id = (dataElement.displayCategory + '_' + dataElement.displayLabel).replace(/ /g, '_'); - const label = ' ' + dataElement.displayCategory + ' ' + dataElement.displayLabel + ' checkbox ' + (dataElement.value ? 'checked ' : 'unchecked ') + template.isConfiguredElement.textContent; + const modifiedText = dataElement.isConfigured ? 'Modified' : ''; + const label = ' ' + dataElement.displayCategory + ' ' + dataElement.displayLabel + ' checkbox ' + (dataElement.value ? 'checked ' : 'unchecked ') + modifiedText; // We use the parent control div for the aria-labelledby target // Does not appear you can use the direct label on the element itself within a tree @@ -920,7 +914,8 @@ export class SettingsRenderer implements ITreeRenderer { const displayOptions = getDisplayEnumOptions(dataElement.setting); template.selectBox.setOptions(displayOptions); - const label = ' ' + dataElement.displayCategory + ' ' + dataElement.displayLabel + ' combobox ' + template.isConfiguredElement.textContent; + const modifiedText = dataElement.isConfigured ? 'Modified' : ''; + const label = ' ' + dataElement.displayCategory + ' ' + dataElement.displayLabel + ' combobox ' + modifiedText; template.selectBox.setAriaLabel(label); @@ -956,7 +951,8 @@ export class SettingsRenderer implements ITreeRenderer { } private renderText(dataElement: SettingsTreeSettingElement, template: ISettingTextItemTemplate, onChange: (value: string) => void): void { - const label = ' ' + dataElement.displayCategory + ' ' + dataElement.displayLabel + ' ' + template.isConfiguredElement.textContent; + const modifiedText = dataElement.isConfigured ? 'Modified' : ''; + const label = ' ' + dataElement.displayCategory + ' ' + dataElement.displayLabel + ' ' + modifiedText; template.onChange = null; template.inputBox.value = dataElement.value; template.onChange = value => { renderValidations(dataElement, template, false, label); onChange(value); }; @@ -982,7 +978,8 @@ export class SettingsRenderer implements ITreeRenderer { private renderNumber(dataElement: SettingsTreeSettingElement, template: ISettingTextItemTemplate, onChange: (value: number) => void): void { - const label = ' ' + dataElement.displayCategory + ' ' + dataElement.displayLabel + ' number ' + template.isConfiguredElement.textContent; + const modifiedText = dataElement.isConfigured ? 'Modified' : ''; + const label = ' ' + dataElement.displayCategory + ' ' + dataElement.displayLabel + ' number ' + modifiedText; const numParseFn = (dataElement.valueType === 'integer' || dataElement.valueType === 'nullable-integer') ? parseInt : parseFloat; diff --git a/src/vs/workbench/parts/preferences/browser/settingsWidgets.ts b/src/vs/workbench/parts/preferences/browser/settingsWidgets.ts index 862ec4dde3b..2209276a406 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsWidgets.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsWidgets.ts @@ -9,6 +9,7 @@ import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar'; import { Button } from 'vs/base/browser/ui/button/button'; import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox'; import { IAction } from 'vs/base/common/actions'; +import { Color, RGBA } from 'vs/base/common/color'; import { Emitter, Event } from 'vs/base/common/event'; import { KeyCode } from 'vs/base/common/keyCodes'; import { Disposable, dispose, IDisposable } from 'vs/base/common/lifecycle'; @@ -21,7 +22,11 @@ import { ICssStyleCollector, ITheme, IThemeService, registerThemingParticipant } const $ = DOM.$; export const settingsHeaderForeground = registerColor('settings.headerForeground', { light: '#444444', dark: '#e7e7e7', hc: '#ffffff' }, localize('headerForeground', "(For settings editor preview) The foreground color for a section header or active title.")); -export const modifiedItemForeground = registerColor('settings.modifiedItemForeground', { light: '#018101', dark: '#73C991', hc: '#73C991' }, localize('modifiedItemForeground', "(For settings editor preview) The foreground color for a the modified setting indicator.")); +export const modifiedItemIndicator = registerColor('settings.modifiedItemIndicator', { + light: new Color(new RGBA(102, 175, 224)), + dark: new Color(new RGBA(12, 125, 157)), + hc: new Color(new RGBA(0, 73, 122)) +}, localize('modifiedItemForeground', "(For settings editor preview) The color of the modified setting indicator.")); // Enum control colors export const settingsSelectBackground = registerColor('settings.dropdownBackground', { dark: selectBackground, light: selectBackground, hc: selectBackground }, localize('settingsDropdownBackground', "(For settings editor preview) Settings editor dropdown background.")); @@ -44,11 +49,6 @@ export const settingsNumberInputForeground = registerColor('settings.numberInput export const settingsNumberInputBorder = registerColor('settings.numberInputBorder', { dark: inputBorder, light: inputBorder, hc: inputBorder }, localize('numberInputBoxBorder', "(For settings editor preview) Settings editor number input box border.")); registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { - const modifiedItemForegroundColor = theme.getColor(modifiedItemForeground); - if (modifiedItemForegroundColor) { - collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-is-configured-label { color: ${modifiedItemForegroundColor}; }`); - } - const checkboxBackgroundColor = theme.getColor(settingsCheckboxBackground); if (checkboxBackgroundColor) { collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-value-checkbox { background-color: ${checkboxBackgroundColor} !important; }`); @@ -110,6 +110,11 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { if (codeTextForegroundColor) { collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description-markdown code { color: ${codeTextForegroundColor} }`); } + + const modifiedItemIndicatorColor = theme.getColor(modifiedItemIndicator); + if (modifiedItemIndicatorColor) { + collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured::after { background-color: ${modifiedItemIndicatorColor}; }`); + } }); export class ExcludeSettingListModel { -- GitLab