From 3207ab91ed4e182d44fdfd25c1c0c5d663e535cb Mon Sep 17 00:00:00 2001 From: isidor Date: Thu, 19 Oct 2017 16:21:53 +0200 Subject: [PATCH] CompositeBar: colors --- .../parts/activitybar/activitybarActions.ts | 6 +-- .../parts/activitybar/activitybarPart.ts | 12 ++++-- .../parts/compositebar/compositeBar.ts | 8 ++-- .../parts/compositebar/compositeBarActions.ts | 32 ++++++++------ .../browser/parts/panel/panelPart.ts | 9 +++- src/vs/workbench/common/theme.ts | 42 ++++++++++++------- 6 files changed, 69 insertions(+), 40 deletions(-) diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts b/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts index e02a364582f..6b40f9a0937 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts @@ -21,8 +21,7 @@ import { activeContrastBorder, focusBorder } from 'vs/platform/theme/common/colo import { StandardMouseEvent } from 'vs/base/browser/mouseEvent'; import { KeyCode } from 'vs/base/common/keyCodes'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; -import { ACTIVITY_BAR_FOREGROUND } from 'vs/workbench/common/theme'; -import { ActivityAction, ActivityActionItem } from 'vs/workbench/browser/parts/compositebar/compositeBarActions'; +import { ActivityAction, ActivityActionItem, ICompositeBarColors } from 'vs/workbench/browser/parts/compositebar/compositeBarActions'; export class ViewletActivityAction extends ActivityAction { @@ -96,10 +95,11 @@ export class GlobalActivityActionItem extends ActivityActionItem { constructor( action: GlobalActivityAction, + colors: ICompositeBarColors, @IThemeService themeService: IThemeService, @IContextMenuService protected contextMenuService: IContextMenuService ) { - super(action, { draggable: false, backgroundColor: ACTIVITY_BAR_FOREGROUND }, themeService); + super(action, { draggable: false, colors }, themeService); } public render(container: HTMLElement): void { diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts index 13674e9edd6..efa7e390e64 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts @@ -27,7 +27,7 @@ import { StandardMouseEvent } from 'vs/base/browser/mouseEvent'; import { dispose, IDisposable, toDisposable } from 'vs/base/common/lifecycle'; import { ToggleActivityBarVisibilityAction } from 'vs/workbench/browser/actions/toggleActivityBarVisibility'; import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND } from 'vs/workbench/common/theme'; +import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme'; import { contrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { CompositeBar } from 'vs/workbench/browser/parts/compositebar/compositeBar'; import { ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/compositebar/compositeBarActions'; @@ -35,6 +35,12 @@ import { ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/composit export class ActivitybarPart extends Part { private static readonly PINNED_VIEWLETS = 'workbench.activity.pinnedViewlets'; + private static COLORS = { + backgroundColor: ACTIVITY_BAR_FOREGROUND, + badgeBackground: ACTIVITY_BAR_BADGE_BACKGROUND, + badgeForeground: ACTIVITY_BAR_BADGE_FOREGROUND, + dragAndDropBackground: ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND + }; public _serviceBrand: any; @@ -69,7 +75,7 @@ export class ActivitybarPart extends Part { getOnCompositeClickAction: (compositeId: string) => this.instantiationService.createInstance(ToggleViewletAction, this.viewletService.getViewlet(compositeId)), getDefaultCompositeId: () => this.viewletService.getDefaultViewletId(), hidePart: () => this.partService.setSideBarHidden(true), - backgroundColor: ACTIVITY_BAR_FOREGROUND + colors: ActivitybarPart.COLORS }); this.registerListeners(); } @@ -161,7 +167,7 @@ export class ActivitybarPart extends Part { .map(a => new GlobalActivityAction(a)); this.globalActionBar = new ActionBar(container, { - actionItemProvider: a => this.instantiationService.createInstance(GlobalActivityActionItem, a), + actionItemProvider: a => this.instantiationService.createInstance(GlobalActivityActionItem, a, ActivitybarPart.COLORS), orientation: ActionsOrientation.VERTICAL, ariaLabel: nls.localize('globalActions', "Global Actions"), animated: false diff --git a/src/vs/workbench/browser/parts/compositebar/compositeBar.ts b/src/vs/workbench/browser/parts/compositebar/compositeBar.ts index 43afc0d47bf..6f0ca9a6f33 100644 --- a/src/vs/workbench/browser/parts/compositebar/compositeBar.ts +++ b/src/vs/workbench/browser/parts/compositebar/compositeBar.ts @@ -17,7 +17,7 @@ import { IStorageService, StorageScope } from 'vs/platform/storage/common/storag import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { ActionBar, IActionItem, ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar'; import Event, { Emitter } from 'vs/base/common/event'; -import { CompositeActionItem, CompositeOverflowActivityAction, ICompositeActivity, CompositeOverflowActivityActionItem, ActivityAction, ICompositeBar } from 'vs/workbench/browser/parts/compositebar/compositeBarActions'; +import { CompositeActionItem, CompositeOverflowActivityAction, ICompositeActivity, CompositeOverflowActivityActionItem, ActivityAction, ICompositeBar, ICompositeBarColors } from 'vs/workbench/browser/parts/compositebar/compositeBarActions'; import { TPromise } from 'vs/base/common/winjs.base'; export interface ICompositeBarOptions { @@ -25,7 +25,7 @@ export interface ICompositeBarOptions { storageId: string; orientation: ActionsOrientation; composites: { id: string, name: string }[]; - backgroundColor: string; + colors: ICompositeBarColors; getActivityAction: (compositeId: string) => ActivityAction; getCompositePinnedAction: (compositeId: string) => Action; getOnCompositeClickAction: (compositeId: string) => Action; @@ -283,7 +283,7 @@ export class CompositeBar implements ICompositeBar { () => this.activeCompositeId, (compositeId: string) => this.compositeIdToActivityStack[compositeId] && this.compositeIdToActivityStack[compositeId][0].badge, this.options.getOnCompositeClickAction, - this.options.backgroundColor + this.options.colors ); this.compositeSwitcherBar.push(this.compositeOverflowAction, { label: false, icon: true }); @@ -327,7 +327,7 @@ export class CompositeBar implements ICompositeBar { const compositeActivityAction = this.options.getActivityAction(compositeId); const pinnedAction = this.options.getCompositePinnedAction(compositeId); - this.compositeIdToActionItems[compositeId] = this.instantiationService.createInstance(CompositeActionItem, compositeActivityAction, pinnedAction, this, this.options.backgroundColor); + this.compositeIdToActionItems[compositeId] = this.instantiationService.createInstance(CompositeActionItem, compositeActivityAction, pinnedAction, this.options.colors, this); this.compositeIdToActions[compositeId] = compositeActivityAction; return compositeActivityAction; diff --git a/src/vs/workbench/browser/parts/compositebar/compositeBarActions.ts b/src/vs/workbench/browser/parts/compositebar/compositeBarActions.ts index d01442ab9e4..415f8c9daa1 100644 --- a/src/vs/workbench/browser/parts/compositebar/compositeBarActions.ts +++ b/src/vs/workbench/browser/parts/compositebar/compositeBarActions.ts @@ -18,7 +18,6 @@ import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService'; import { TextBadge, NumberBadge, IBadge, IconBadge, ProgressBadge } from 'vs/workbench/services/activity/common/activity'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { contrastBorder } from 'vs/platform/theme/common/colorRegistry'; -import { ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_BADGE_BACKGROUND } from 'vs/workbench/common/theme'; import { DelayedDragHandler } from 'vs/base/browser/dnd'; import { IActivity } from 'vs/workbench/common/activity'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; @@ -31,17 +30,17 @@ export interface ICompositeActivity { export interface ICompositeBar { /** - * Unpins a composite from the activitybar. + * Unpins a composite from the composite bar. */ unpin(compositeId: string): void; /** - * Pin a composite inside the activity bar. + * Pin a composite inside the composite bar. */ pin(compositeId: string): void; /** - * Find out if a composite is pinned in the activity bar. + * Find out if a composite is pinned in the composite bar. */ isPinned(compositeId: string): boolean; @@ -91,9 +90,16 @@ export class ActivityAction extends Action { } } +export interface ICompositeBarColors { + backgroundColor: string; + badgeBackground: string; + badgeForeground: string; + dragAndDropBackground: string; +} + export interface IActivityActionItemOptions extends IBaseActionItemOptions { icon?: boolean; - backgroundColor: string; + colors: ICompositeBarColors; } export class ActivityActionItem extends BaseActionItem { @@ -125,15 +131,15 @@ export class ActivityActionItem extends BaseActionItem { // Label if (this.$label) { - const background = theme.getColor(this.options.backgroundColor); + const background = theme.getColor(this.options.colors.backgroundColor); this.$label.style('background-color', background ? background.toString() : null); } // Badge if (this.$badgeContent) { - const badgeForeground = theme.getColor(ACTIVITY_BAR_BADGE_FOREGROUND); - const badgeBackground = theme.getColor(ACTIVITY_BAR_BADGE_BACKGROUND); + const badgeForeground = theme.getColor(this.options.colors.badgeForeground); + const badgeBackground = theme.getColor(this.options.colors.badgeBackground); const contrastBorderColor = theme.getColor(contrastBorder); this.$badgeContent.style('color', badgeForeground ? badgeForeground.toString() : null); @@ -295,12 +301,12 @@ export class CompositeOverflowActivityActionItem extends ActivityActionItem { private getActiveCompositeId: () => string, private getBadge: (compositeId: string) => IBadge, private getCompositeOpenAction: (compositeId: string) => Action, - backgroundColor: string, + colors: ICompositeBarColors, @IInstantiationService private instantiationService: IInstantiationService, @IContextMenuService private contextMenuService: IContextMenuService, @IThemeService themeService: IThemeService ) { - super(action, { icon: true, backgroundColor }, themeService); + super(action, { icon: true, colors }, themeService); this.cssClass = action.class; this.name = action.label; @@ -374,14 +380,14 @@ export class CompositeActionItem extends ActivityActionItem { constructor( private compositeActivityAction: ActivityAction, private toggleCompositePinnedAction: Action, + colors: ICompositeBarColors, private compositeBar: ICompositeBar, - backgroundColor: string, @IContextMenuService private contextMenuService: IContextMenuService, @IKeybindingService private keybindingService: IKeybindingService, @IInstantiationService instantiationService: IInstantiationService, @IThemeService themeService: IThemeService ) { - super(compositeActivityAction, { draggable: true, backgroundColor }, themeService); + super(compositeActivityAction, { draggable: true, colors }, themeService); this.cssClass = compositeActivityAction.class; @@ -497,7 +503,7 @@ export class CompositeActionItem extends ActivityActionItem { private updateFromDragging(element: HTMLElement, isDragging: boolean): void { const theme = this.themeService.getTheme(); - const dragBackground = theme.getColor(ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND); + const dragBackground = theme.getColor(this.options.colors.dragAndDropBackground); element.style.backgroundColor = isDragging && dragBackground ? dragBackground.toString() : null; } diff --git a/src/vs/workbench/browser/parts/panel/panelPart.ts b/src/vs/workbench/browser/parts/panel/panelPart.ts index 29984f1f377..7f8862e0dd8 100644 --- a/src/vs/workbench/browser/parts/panel/panelPart.ts +++ b/src/vs/workbench/browser/parts/panel/panelPart.ts @@ -24,7 +24,7 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { ClosePanelAction, ToggleMaximizedPanelAction, PanelActivityAction, OpenPanelAction } from 'vs/workbench/browser/parts/panel/panelActions'; import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; -import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER } from 'vs/workbench/common/theme'; +import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_BADGE_BACKGROUND, PANEL_BADGE_FOREGROUND, PANEL_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme'; import { activeContrastBorder, focusBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry'; import { CompositeBar } from 'vs/workbench/browser/parts/compositebar/compositeBar'; import { ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/compositebar/compositeBarActions'; @@ -84,7 +84,12 @@ export class PanelPart extends CompositePart implements IPanelService { getOnCompositeClickAction: (compositeId: string) => this.instantiationService.createInstance(OpenPanelAction, this.getPanel(compositeId)), getDefaultCompositeId: () => Registry.as(PanelExtensions.Panels).getDefaultPanelId(), hidePart: () => this.partService.setPanelHidden(true), - backgroundColor: PANEL_BACKGROUND + colors: { + backgroundColor: PANEL_BACKGROUND, + badgeBackground: PANEL_BADGE_BACKGROUND, + badgeForeground: PANEL_BADGE_FOREGROUND, + dragAndDropBackground: PANEL_DRAG_AND_DROP_BACKGROUND + } }); this.toUnbind.push(this.compositeBar); diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 5097ff16f1c..449f39e74fd 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -108,6 +108,24 @@ export const EDITOR_DRAG_AND_DROP_BACKGROUND = registerColor('editorGroup.dropBa // < --- Panels --- > +const DRAG_AND_DROP_BACKGROUND = { + dark: Color.white.transparent(0.12), + light: Color.white.transparent(0.12), + hc: Color.white.transparent(0.12), +}; + +const BADGE_BACKGROUND = { + dark: '#007ACC', + light: '#007ACC', + hc: '#000000' +}; + +const BADGE_FOREGROUND = { + dark: Color.white, + light: Color.white, + hc: Color.white +}; + export const PANEL_BACKGROUND = registerColor('panel.background', { dark: editorBackground, light: editorBackground, @@ -138,6 +156,12 @@ export const PANEL_ACTIVE_TITLE_BORDER = registerColor('panelTitle.activeBorder' hc: contrastBorder }, nls.localize('panelActiveTitleBorder', "Border color for the active panel title. Panels are shown below the editor area and contain views like output and integrated terminal.")); +export const PANEL_DRAG_AND_DROP_BACKGROUND = registerColor('panel.dropBackground', DRAG_AND_DROP_BACKGROUND, nls.localize('panelDragAndDropBackground', "Drag and drop feedback color for the panel title items. The color should have transparency so that the panel entries can still shine through. Panels are shown below the editor area and contain views like output and integrated terminal.")); + +export const PANEL_BADGE_BACKGROUND = registerColor('panelBadge.background', BADGE_BACKGROUND, nls.localize('panelBadgeBackground', "Activity notification badge background color. Panels are shown below the editor area and contain views like output and integrated terminal.")); + +export const PANEL_BADGE_FOREGROUND = registerColor('panelBadge.foreground', BADGE_FOREGROUND, nls.localize('panelBadgeForeground', "Activity notification badge foreground color. Panels are shown below the editor area and contain views like output and integrated terminal.")); + // < --- Status --- > @@ -224,24 +248,12 @@ export const ACTIVITY_BAR_BORDER = registerColor('activityBar.border', { hc: contrastBorder }, nls.localize('activityBarBorder', "Activity bar border color separating to the side bar. The activity bar is showing on the far left or right and allows to switch between views of the side bar.")); -export const ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND = registerColor('activityBar.dropBackground', { - dark: Color.white.transparent(0.12), - light: Color.white.transparent(0.12), - hc: Color.white.transparent(0.12), -}, nls.localize('activityBarDragAndDropBackground', "Drag and drop feedback color for the activity bar items. The color should have transparency so that the activity bar entries can still shine through. The activity bar is showing on the far left or right and allows to switch between views of the side bar.")); -export const ACTIVITY_BAR_BADGE_BACKGROUND = registerColor('activityBarBadge.background', { - dark: '#007ACC', - light: '#007ACC', - hc: '#000000' -}, nls.localize('activityBarBadgeBackground', "Activity notification badge background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.")); +export const ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND = registerColor('activityBar.dropBackground', DRAG_AND_DROP_BACKGROUND, nls.localize('activityBarDragAndDropBackground', "Drag and drop feedback color for the activity bar items. The color should have transparency so that the activity bar entries can still shine through. The activity bar is showing on the far left or right and allows to switch between views of the side bar.")); -export const ACTIVITY_BAR_BADGE_FOREGROUND = registerColor('activityBarBadge.foreground', { - dark: Color.white, - light: Color.white, - hc: Color.white -}, nls.localize('activityBarBadgeForeground', "Activity notification badge foreground color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.")); +export const ACTIVITY_BAR_BADGE_BACKGROUND = registerColor('activityBarBadge.background', BADGE_BACKGROUND, nls.localize('activityBarBadgeBackground', "Activity notification badge background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.")); +export const ACTIVITY_BAR_BADGE_FOREGROUND = registerColor('activityBarBadge.foreground', BADGE_FOREGROUND, nls.localize('activityBarBadgeForeground', "Activity notification badge foreground color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.")); // < --- Side Bar --- > -- GitLab