From 6254814d850e43303c85702120a523a5030483ce Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Wed, 10 May 2017 07:51:35 +0200 Subject: [PATCH] theming - progress bar --- .../theme-abyss/themes/abyss-color-theme.json | 1 + .../themes/kimbie-dark-color-theme.json | 3 +- .../themes/monokai-color-theme.json | 1 + .../themes/quietlight-color-theme.json | 3 +- .../theme-red/themes/Red-color-theme.json | 3 +- .../themes/solarized-dark-color-theme.json | 1 + .../themes/solarized-light-color-theme.json | 1 + .../themes/tomorrow-night-blue-theme.json | 1 + .../ui/keybindingLabel/keybindingLabel.css | 14 +++---- .../browser/ui/progressbar/progressbar.css | 3 +- .../browser/ui/progressbar/progressbar.ts | 39 ++++++++++++++++++- .../quickopen/browser/quickOpenWidget.ts | 12 +++++- src/vs/platform/theme/common/colorRegistry.ts | 2 + src/vs/platform/theme/common/styler.ts | 10 ++++- .../workbench/browser/parts/compositePart.ts | 2 + .../parts/editor/editorGroupsControl.ts | 2 + 16 files changed, 81 insertions(+), 17 deletions(-) diff --git a/extensions/theme-abyss/themes/abyss-color-theme.json b/extensions/theme-abyss/themes/abyss-color-theme.json index d45846b0d16..b244eb1cd6a 100644 --- a/extensions/theme-abyss/themes/abyss-color-theme.json +++ b/extensions/theme-abyss/themes/abyss-color-theme.json @@ -271,6 +271,7 @@ "inputValidation.errorBorder": "#AB395B", "badge.background": "#0063a5", + "progressBar.background": "#0063a5", "dropdown.background": "#181f2f", // "dropdown.foreground": "", diff --git a/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json b/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json index 2a9958948d8..2d5e0fadb31 100644 --- a/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json +++ b/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json @@ -43,7 +43,8 @@ // "inputValidation.warningBorder": "#5B7E7A", "inputValidation.errorBackground": "#5f0d0d", "inputValidation.errorBorder": "#9d2f23", - "badge.background": "#7f5d38" + "badge.background": "#7f5d38", + "progressBar.background": "#7f5d38" }, "tokenColors": [ { diff --git a/extensions/theme-monokai/themes/monokai-color-theme.json b/extensions/theme-monokai/themes/monokai-color-theme.json index b2ec0a432b1..439bf32d607 100644 --- a/extensions/theme-monokai/themes/monokai-color-theme.json +++ b/extensions/theme-monokai/themes/monokai-color-theme.json @@ -28,6 +28,7 @@ "tab.border": "#1e1f1c", "tab.inactiveForeground": "#ccccc7", // needs to be bright so it's readable when another editor group is focused "widget.shadow": "#1e1f1c", + "progressBar.background": "#75715E", "badge.background": "#75715E", "badge.foreground": "#f8f8f2", "editorLineNumber.foreground": "#90908a", diff --git a/extensions/theme-quietlight/themes/quietlight-color-theme.json b/extensions/theme-quietlight/themes/quietlight-color-theme.json index 4edbd8c1871..db8f30e0db2 100644 --- a/extensions/theme-quietlight/themes/quietlight-color-theme.json +++ b/extensions/theme-quietlight/themes/quietlight-color-theme.json @@ -496,6 +496,7 @@ "inputValidation.warningBorder": "#ffe055", "inputValidation.errorBackground": "#ffeaea", "inputValidation.errorBorder": "#f1897f", - "badge.background": "#705697AA" + "badge.background": "#705697AA", + "progressBar.background": "#705697" } } \ No newline at end of file diff --git a/extensions/theme-red/themes/Red-color-theme.json b/extensions/theme-red/themes/Red-color-theme.json index 19e66f7bea3..a35bfe0938b 100644 --- a/extensions/theme-red/themes/Red-color-theme.json +++ b/extensions/theme-red/themes/Red-color-theme.json @@ -50,7 +50,8 @@ "notification.background": "#662222", "pickerGroup.foreground": "#cc9999", "pickerGroup.border": "#ff000033", - "badge.background": "#cc3333" + "badge.background": "#cc3333", + "progressBar.background": "#cc3333" }, "name": "Red" } \ No newline at end of file diff --git a/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json b/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json index b1e0133a628..c89667099de 100644 --- a/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json +++ b/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json @@ -315,6 +315,7 @@ "inputValidation.errorBorder": "#a92049", "badge.background": "#047aa6", + "progressBar.background": "#047aa6", "dropdown.background": "#00212B", "dropdown.border": "#2AA19899", diff --git a/extensions/theme-solarized-light/themes/solarized-light-color-theme.json b/extensions/theme-solarized-light/themes/solarized-light-color-theme.json index 71b344458d1..0c3123614c0 100644 --- a/extensions/theme-solarized-light/themes/solarized-light-color-theme.json +++ b/extensions/theme-solarized-light/themes/solarized-light-color-theme.json @@ -314,6 +314,7 @@ // "inputValidation.errorBorder": "", "badge.background": "#B58900AA", + "progressBar.background": "#B58900", "dropdown.background": "#EEE8D5", // "dropdown.foreground": "", diff --git a/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json b/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json index 4ba744d26ba..319f8be0a61 100644 --- a/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json +++ b/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json @@ -31,6 +31,7 @@ "statusBar.noFolderBackground": "#001126", "statusBar.debuggingBackground": "#001126", "activityBar.background": "#001733", + "progressBar.background": "#bbdaffcc", "badge.background": "#bbdaffcc", "badge.foreground": "#001733", "sideBar.background": "#001c40", diff --git a/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.css b/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.css index 6c7d094804a..bb681b3a863 100644 --- a/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.css +++ b/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.css @@ -9,11 +9,11 @@ .monaco-kbkey { display: inline-block; - border: solid 1px #ccc; - border-bottom-color: #bbb; + border: solid 1px rgba(204, 204, 204, 0.4); + border-bottom-color: rgba(187, 187, 187, 0.4); border-radius: 3px; - box-shadow: inset 0 -1px 0 #bbb; - background-color: #ddd; + box-shadow: inset 0 -1px 0 rgba(187, 187, 187, 0.4); + background-color: rgba(221, 221, 221, 0.4); vertical-align: middle; color: #555; line-height: 10px; @@ -25,7 +25,7 @@ .vs-dark .monaco-kbkey { background-color: rgba(128, 128, 128, 0.17); color: #ccc; - border: solid 1px #333; - border-bottom-color: #444; - box-shadow: inset 0 -1px 0 #444; + border: solid 1px rgba(51, 51, 51, 0.6); + border-bottom-color: rgba(68, 68, 68, 0.6); + box-shadow: inset 0 -1px 0 rgba(68, 68, 68, 0.6); } \ No newline at end of file diff --git a/src/vs/base/browser/ui/progressbar/progressbar.css b/src/vs/base/browser/ui/progressbar/progressbar.css index b067d6edefb..511f186b224 100644 --- a/src/vs/base/browser/ui/progressbar/progressbar.css +++ b/src/vs/base/browser/ui/progressbar/progressbar.css @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ .progress-container { width: 100%; - height: 5px; + height: 5px; } .progress-container .progress-bit { @@ -13,7 +13,6 @@ position: absolute; left: 0; display: none; - background-color: #0E70C0; } .progress-container.active .progress-bit { diff --git a/src/vs/base/browser/ui/progressbar/progressbar.ts b/src/vs/base/browser/ui/progressbar/progressbar.ts index 70fb8421bc6..cbd7de00da0 100644 --- a/src/vs/base/browser/ui/progressbar/progressbar.ts +++ b/src/vs/base/browser/ui/progressbar/progressbar.ts @@ -11,6 +11,8 @@ import assert = require('vs/base/common/assert'); import { Builder, $ } from 'vs/base/browser/builder'; import DOM = require('vs/base/browser/dom'); import { IDisposable, dispose } from 'vs/base/common/lifecycle'; +import { Color } from "vs/base/common/color"; +import { mixin } from "vs/base/common/objects"; const css_done = 'done'; const css_active = 'active'; @@ -19,11 +21,22 @@ const css_discrete = 'discrete'; const css_progress_container = 'progress-container'; const css_progress_bit = 'progress-bit'; +export interface IProgressBarOptions extends IProgressBarStyles { +} + +export interface IProgressBarStyles { + progressBarBackground?: Color; +} + +const defaultOpts = { + progressBarBackground: Color.fromHex('#0E70C0') +}; + /** * A progress bar with support for infinite or discrete progress. */ export class ProgressBar { - + private options: IProgressBarOptions; private toUnbind: IDisposable[]; private workedVal: number; private element: Builder; @@ -31,11 +44,17 @@ export class ProgressBar { private bit: HTMLElement; private totalWork: number; private animationStopToken: ValueCallback; + private progressBarBackground: Color; + + constructor(builder: Builder, options?: IProgressBarOptions) { + this.options = options || Object.create(null); + mixin(this.options, defaultOpts, false); - constructor(builder: Builder) { this.toUnbind = []; this.workedVal = 0; + this.progressBarBackground = this.options.progressBarBackground; + this.create(builder); } @@ -61,6 +80,8 @@ export class ProgressBar { this.bit = builder.getHTMLElement(); }); + + this.applyStyles(); } private off(): void { @@ -189,6 +210,20 @@ export class ProgressBar { return $(this.element); } + public style(styles: IProgressBarStyles): void { + this.progressBarBackground = styles.progressBarBackground; + + this.applyStyles(); + } + + protected applyStyles(): void { + if (this.element) { + const background = this.progressBarBackground ? this.progressBarBackground.toString() : null; + + this.element.style('background-color', background); + } + } + public dispose(): void { this.toUnbind = dispose(this.toUnbind); } diff --git a/src/vs/base/parts/quickopen/browser/quickOpenWidget.ts b/src/vs/base/parts/quickopen/browser/quickOpenWidget.ts index d83ef8e8380..035dbca0d27 100644 --- a/src/vs/base/parts/quickopen/browser/quickOpenWidget.ts +++ b/src/vs/base/parts/quickopen/browser/quickOpenWidget.ts @@ -53,6 +53,7 @@ export interface IQuickOpenStyles extends IInputBoxStyles, ITreeStyles { pickerGroupForeground?: Color; pickerGroupBorder?: Color; widgetShadow?: Color; + progressBarBackground?: Color; } export interface IShowOptions { @@ -86,7 +87,8 @@ const defaultStyles = { foreground: Color.fromHex('#CCCCCC'), pickerGroupForeground: Color.fromHex('#0097FB'), pickerGroupBorder: Color.fromHex('#3F3F46'), - widgetShadow: Color.fromHex('#000000') + widgetShadow: Color.fromHex('#000000'), + progressBarBackground: Color.fromHex('#0E70C0') }; const DEFAULT_INPUT_ARIA_LABEL = nls.localize('quickOpenAriaLabel', "Quick picker. Type to narrow down results."); @@ -159,7 +161,7 @@ export class QuickOpenWidget implements IModelProvider { .on(DOM.EventType.BLUR, (e: Event) => this.loosingFocus(e), null, true); // Progress Bar - this.progressBar = new ProgressBar(div.clone()); + this.progressBar = new ProgressBar(div.clone(), { progressBarBackground: this.styles.progressBarBackground }); this.progressBar.getContainer().hide(); // Input Field @@ -352,6 +354,12 @@ export class QuickOpenWidget implements IModelProvider { this.builder.style('box-shadow', widgetShadow ? `0 5px 8px ${widgetShadow}` : null); } + if (this.progressBar) { + this.progressBar.style({ + progressBarBackground: this.styles.progressBarBackground + }); + } + if (this.inputBox) { this.inputBox.style({ inputBackground: this.styles.inputBackground, diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index 314e9a861a2..4a597b87fd1 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -194,6 +194,8 @@ export const scrollbarSliderBackground = registerColor('scrollbarSlider.backgrou export const scrollbarSliderHoverBackground = registerColor('scrollbarSlider.hoverBackground', { dark: Color.fromHex('#646464').transparent(0.7), light: Color.fromHex('#646464').transparent(0.7), hc: transparent(contrastBorder, 0.8) }, nls.localize('scrollbarSliderHoverBackground', "Slider background color when hovering.")); export const scrollbarSliderActiveBackground = registerColor('scrollbarSlider.activeBackground', { dark: Color.fromHex('#BFBFBF').transparent(0.4), light: Color.fromHex('#000000').transparent(0.6), hc: contrastBorder }, nls.localize('scrollbarSliderActiveBackground', "Slider background color when active.")); +export const progressBarBackground = registerColor('progressBar.background', { dark: Color.fromHex('#0E70C0'), light: Color.fromHex('#0E70C0'), hc: contrastBorder }, nls.localize('progressBarBackground', "Background color of the progress bar that can show for long running operations.")); + /** * Editor background color. * Because of bug https://monacotools.visualstudio.com/DefaultCollection/Monaco/_workitems/edit/13254 diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index ec9ad4240dd..3d560356676 100644 --- a/src/vs/platform/theme/common/styler.ts +++ b/src/vs/platform/theme/common/styler.ts @@ -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, contrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, lighten, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry'; +import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, lighten, badgeBackground, badgeForeground, progressBarBackground } from 'vs/platform/theme/common/colorRegistry'; import { IDisposable } from 'vs/base/common/lifecycle'; import { SIDE_BAR_SECTION_HEADER_BACKGROUND } from 'vs/workbench/common/theme'; @@ -123,6 +123,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer background?: ColorIdentifier, borderColor?: ColorIdentifier, widgetShadow?: ColorIdentifier, + progressBarBackground?: ColorIdentifier, inputBackground?: ColorIdentifier, inputForeground?: ColorIdentifier, inputBorder?: ColorIdentifier, @@ -152,6 +153,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer background: (style && style.background) || editorBackground, borderColor: style && style.borderColor || contrastBorder, widgetShadow: style && style.widgetShadow || widgetShadow, + progressBarBackground: style && style.progressBarBackground || progressBarBackground, pickerGroupForeground: style && style.pickerGroupForeground || pickerGroupForeground, pickerGroupBorder: style && style.pickerGroupBorder || pickerGroupBorder, inputBackground: (style && style.inputBackground) || inputBackground, @@ -228,6 +230,12 @@ export function attachButtonStyler(widget: IThemable, themeService: IThemeServic }, widget); } +export function attachProgressBarStyler(widget: IThemable, themeService: IThemeService, style?: { progressBarBackground?: ColorIdentifier }): IDisposable { + return doAttachStyler(themeService, { + progressBarBackground: (style && style.progressBarBackground) || progressBarBackground + }, widget); +} + export function attachStylerCallback(themeService: IThemeService, colors: { [name: string]: ColorIdentifier }, callback: styleFn): IDisposable { return doAttachStyler(themeService, colors, callback); } \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/compositePart.ts b/src/vs/workbench/browser/parts/compositePart.ts index 6579242059a..bb92039a1f0 100644 --- a/src/vs/workbench/browser/parts/compositePart.ts +++ b/src/vs/workbench/browser/parts/compositePart.ts @@ -36,6 +36,7 @@ import { IProgressService } from 'vs/platform/progress/common/progress'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { IThemeService } from 'vs/platform/theme/common/themeService'; +import { attachProgressBarStyler } from "vs/platform/theme/common/styler"; export interface ICompositeTitleLabel { @@ -487,6 +488,7 @@ export abstract class CompositePart extends Part { 'class': 'content' }, (div: Builder) => { this.progressBar = new ProgressBar(div); + this.toUnbind.push(attachProgressBarStyler(this.progressBar, this.themeService)); this.progressBar.getContainer().hide(); }); } diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index 898e5b288e8..0a9a2dd62d4 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -36,6 +36,7 @@ import { getCodeEditor } from 'vs/editor/common/services/codeEditorService'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { editorBackground, contrastBorder, activeContrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { Themable, TABS_CONTAINER_BACKGROUND, EDITOR_GROUP_HEADER_BACKGROUND, EDITOR_GROUP_BORDER_COLOR, EDITOR_DRAG_AND_DROP_BACKGROUND, EDITOR_GROUP_BACKGROUND } from 'vs/workbench/common/theme'; +import { attachProgressBarStyler } from "vs/platform/theme/common/styler"; export enum Rochade { NONE, @@ -991,6 +992,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro // Progress Bar const progressBar = new ProgressBar($(container)); + this.toUnbind.push(attachProgressBarStyler(progressBar, this.themeService)); progressBar.getContainer().hide(); container.setProperty(EditorGroupsControl.PROGRESS_BAR_CONTROL_KEY, progressBar); // associate with container });