From 1de45560f1ff7f59ac99fb8d69de1d9d536c6561 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Wed, 19 Apr 2017 10:14:01 +0200 Subject: [PATCH] Activity bar: need dark/light icons (fixes #23693) --- .../browser/parts/activitybar/activitybarPart.ts | 14 ++++++++++++-- src/vs/workbench/common/theme.ts | 7 ++++++- .../parts/debug/browser/media/debug-dark.svg | 1 + .../parts/debug/browser/media/debug-light.svg | 1 + .../debug/browser/media/debug.contribution.css | 6 +++++- .../workbench/parts/debug/browser/media/debug.svg | 1 - .../{extensions-status.svg => extensions-dark.svg} | 8 +------- .../electron-browser/media/extensions-light.svg | 6 ++++++ .../electron-browser/media/extensions.css | 6 +++++- .../parts/files/browser/media/explorerviewlet.css | 4 ++++ .../parts/files/browser/media/files-light.svg | 1 + .../parts/git/browser/media/git-light.svg | 1 + .../parts/git/browser/media/git.contribution.css | 10 +++++++++- .../media/{icon.svg => icon-dark.svg} | 0 .../scm/electron-browser/media/icon-light.svg | 12 ++++++++++++ .../scm/electron-browser/media/scmViewlet.css | 6 +++++- .../parts/search/browser/media/search-light.svg | 1 + .../search/browser/media/search.contribution.css | 4 ++++ 18 files changed, 74 insertions(+), 15 deletions(-) create mode 100644 src/vs/workbench/parts/debug/browser/media/debug-dark.svg create mode 100644 src/vs/workbench/parts/debug/browser/media/debug-light.svg delete mode 100644 src/vs/workbench/parts/debug/browser/media/debug.svg rename src/vs/workbench/parts/extensions/electron-browser/media/{extensions-status.svg => extensions-dark.svg} (61%) create mode 100644 src/vs/workbench/parts/extensions/electron-browser/media/extensions-light.svg create mode 100644 src/vs/workbench/parts/files/browser/media/files-light.svg create mode 100644 src/vs/workbench/parts/git/browser/media/git-light.svg rename src/vs/workbench/parts/scm/electron-browser/media/{icon.svg => icon-dark.svg} (100%) create mode 100644 src/vs/workbench/parts/scm/electron-browser/media/icon-light.svg create mode 100644 src/vs/workbench/parts/search/browser/media/search-light.svg diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts index d188ce0ec9a..75a26d04003 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts @@ -31,7 +31,7 @@ import { dispose, IDisposable } from 'vs/base/common/lifecycle'; import { ToggleActivityBarVisibilityAction } from 'vs/workbench/browser/actions/toggleActivityBarVisibility'; import SCMPreview from 'vs/workbench/parts/scm/browser/scmPreview'; import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; -import { ACTIVITY_BAR_BACKGROUND } from 'vs/workbench/common/theme'; +import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BACKGROUND_LIGHT_DEFAULT } from 'vs/workbench/common/theme'; import { highContrastBorder, highContrastOutline, focus } from 'vs/platform/theme/common/colorRegistry'; interface IViewletActivity { @@ -219,7 +219,8 @@ export class ActivitybarPart extends Part implements IActivityBarService { // Part container const container = this.getContainer(); - container.style('background-color', this.getColor(ACTIVITY_BAR_BACKGROUND)); + const background = this.getColor(ACTIVITY_BAR_BACKGROUND); + container.style('background-color', background); const useBorder = this.isHighContrastTheme; const isPositionLeft = this.partService.getSideBarPosition() === SideBarPosition.LEFT; @@ -230,6 +231,15 @@ export class ActivitybarPart extends Part implements IActivityBarService { container.style('border-left-width', useBorder && !isPositionLeft ? '1px' : null); container.style('border-left-style', useBorder && !isPositionLeft ? 'solid' : null); container.style('border-left-color', useBorder && !isPositionLeft ? this.getColor(highContrastBorder) : null); + + // Toggle 'light' class if we are in light theme and the background color does not match our default + // so that viewlet icons can provide a light version of the view icon. We do this because our default + // light activity bar background is actually dark. If we have the default color, we do not want light icons. + if (this.isLightTheme && background && background.toLowerCase() !== ACTIVITY_BAR_BACKGROUND_LIGHT_DEFAULT.toLowerCase()) { + container.addClass('light'); + } else { + container.removeClass('light'); + } } private showContextMenu(e: MouseEvent): void { diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 5eb370b286d..9b45d568e1b 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -176,9 +176,10 @@ export const STATUS_BAR_INFO_ITEM_HOVER_BACKGROUND = registerColor('statusBarInf // < --- Activity Bar --- > +export const ACTIVITY_BAR_BACKGROUND_LIGHT_DEFAULT = '#2C2C2C'; export const ACTIVITY_BAR_BACKGROUND = registerColor('activityBarBackground', { dark: '#333333', - light: '#2C2C2C', + light: ACTIVITY_BAR_BACKGROUND_LIGHT_DEFAULT, hc: '#000000' }, nls.localize('activityBarBackground', "Activity bar background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar.")); @@ -267,6 +268,10 @@ export class Themable extends Disposable { return this.theme.type === 'hc'; } + protected get isLightTheme(): boolean { + return this.theme.type === 'light'; + } + protected get toUnbind() { return this._toUnbind; } diff --git a/src/vs/workbench/parts/debug/browser/media/debug-dark.svg b/src/vs/workbench/parts/debug/browser/media/debug-dark.svg new file mode 100644 index 00000000000..9a969fb3589 --- /dev/null +++ b/src/vs/workbench/parts/debug/browser/media/debug-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/parts/debug/browser/media/debug-light.svg b/src/vs/workbench/parts/debug/browser/media/debug-light.svg new file mode 100644 index 00000000000..f19d46a2517 --- /dev/null +++ b/src/vs/workbench/parts/debug/browser/media/debug-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/parts/debug/browser/media/debug.contribution.css b/src/vs/workbench/parts/debug/browser/media/debug.contribution.css index f9cbd4fb7e0..91f3774f0a1 100644 --- a/src/vs/workbench/parts/debug/browser/media/debug.contribution.css +++ b/src/vs/workbench/parts/debug/browser/media/debug.contribution.css @@ -5,7 +5,11 @@ /* Activity Bar */ .monaco-workbench > .activitybar .monaco-action-bar .action-label.debug { - background-image: url('debug.svg'); + background-image: url('debug-dark.svg'); +} + +.monaco-workbench > .activitybar.light .monaco-action-bar .action-label.debug { + background-image: url('debug-light.svg'); } .monaco-editor .debug-top-stack-frame-line, diff --git a/src/vs/workbench/parts/debug/browser/media/debug.svg b/src/vs/workbench/parts/debug/browser/media/debug.svg deleted file mode 100644 index 8819b24a640..00000000000 --- a/src/vs/workbench/parts/debug/browser/media/debug.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensions-status.svg b/src/vs/workbench/parts/extensions/electron-browser/media/extensions-dark.svg similarity index 61% rename from src/vs/workbench/parts/extensions/electron-browser/media/extensions-status.svg rename to src/vs/workbench/parts/extensions/electron-browser/media/extensions-dark.svg index c4b591d0d3e..d413b56be32 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensions-status.svg +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensions-dark.svg @@ -1,12 +1,6 @@ - - - - + h-4.3V30H60V0H30z M47.1,47.1H34.3V60H60V34.3H47.1V47.1z" fill="#fff"/> diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensions-light.svg b/src/vs/workbench/parts/extensions/electron-browser/media/extensions-light.svg new file mode 100644 index 00000000000..77b1b585169 --- /dev/null +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensions-light.svg @@ -0,0 +1,6 @@ + + + + diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensions.css b/src/vs/workbench/parts/extensions/electron-browser/media/extensions.css index 8acfffe0567..dc552d34fa5 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensions.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensions.css @@ -4,5 +4,9 @@ *--------------------------------------------------------------------------------------------*/ .monaco-workbench > .activitybar > .content .monaco-action-bar .action-label.extensions { - background: url('extensions-status.svg') center center/22px no-repeat; + background: url('extensions-dark.svg') center center/22px no-repeat; +} + +.monaco-workbench > .activitybar.light > .content .monaco-action-bar .action-label.extensions { + background: url('extensions-light.svg') center center/22px no-repeat; } \ No newline at end of file diff --git a/src/vs/workbench/parts/files/browser/media/explorerviewlet.css b/src/vs/workbench/parts/files/browser/media/explorerviewlet.css index 4c5a7e6f4c5..2a6a66b6d18 100644 --- a/src/vs/workbench/parts/files/browser/media/explorerviewlet.css +++ b/src/vs/workbench/parts/files/browser/media/explorerviewlet.css @@ -8,6 +8,10 @@ background-image: url('files-dark.svg'); } +.monaco-workbench > .activitybar.light .monaco-action-bar .action-label.explore { + background-image: url('files-light.svg'); +} + /* --- Explorer viewlet --- */ .explorer-viewlet { height: 100%; diff --git a/src/vs/workbench/parts/files/browser/media/files-light.svg b/src/vs/workbench/parts/files/browser/media/files-light.svg new file mode 100644 index 00000000000..19e6658a50f --- /dev/null +++ b/src/vs/workbench/parts/files/browser/media/files-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/parts/git/browser/media/git-light.svg b/src/vs/workbench/parts/git/browser/media/git-light.svg new file mode 100644 index 00000000000..96b712cb98f --- /dev/null +++ b/src/vs/workbench/parts/git/browser/media/git-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/parts/git/browser/media/git.contribution.css b/src/vs/workbench/parts/git/browser/media/git.contribution.css index 48a983ffd30..fe29fa5ef26 100644 --- a/src/vs/workbench/parts/git/browser/media/git.contribution.css +++ b/src/vs/workbench/parts/git/browser/media/git.contribution.css @@ -24,7 +24,15 @@ } /* Activity Bar */ -.monaco-workbench > .activitybar .monaco-action-bar .action-label.git, +.monaco-workbench > .activitybar .monaco-action-bar .action-label.git { + background-image: url('git-dark.svg'); +} + +.monaco-workbench > .activitybar.light .monaco-action-bar .action-label.git { + background-image: url('git-light.svg'); +} + +/* Status / Quick Open */ .monaco-shell .git-statusbar-group > .git-statusbar-branch-item, .vs-dark .monaco-workbench .quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.git { background-image: url('git-dark.svg'); diff --git a/src/vs/workbench/parts/scm/electron-browser/media/icon.svg b/src/vs/workbench/parts/scm/electron-browser/media/icon-dark.svg similarity index 100% rename from src/vs/workbench/parts/scm/electron-browser/media/icon.svg rename to src/vs/workbench/parts/scm/electron-browser/media/icon-dark.svg diff --git a/src/vs/workbench/parts/scm/electron-browser/media/icon-light.svg b/src/vs/workbench/parts/scm/electron-browser/media/icon-light.svg new file mode 100644 index 00000000000..97e9f8a8936 --- /dev/null +++ b/src/vs/workbench/parts/scm/electron-browser/media/icon-light.svg @@ -0,0 +1,12 @@ + + + + repo-forked + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css b/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css index 5bd6e4b1ecd..0a3edfc1ccf 100644 --- a/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css +++ b/src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css @@ -4,11 +4,15 @@ *--------------------------------------------------------------------------------------------*/ .monaco-workbench > .activitybar > .content .monaco-action-bar .action-label.scm { - background-image: url('icon.svg'); + background-image: url('icon-dark.svg'); background-size: 19px; background-position: center; } +.monaco-workbench > .activitybar.light > .content .monaco-action-bar .action-label.scm { + background-image: url('icon-light.svg'); +} + .scm-viewlet .monaco-list-row { padding: 0 12px 0 20px; line-height: 22px; diff --git a/src/vs/workbench/parts/search/browser/media/search-light.svg b/src/vs/workbench/parts/search/browser/media/search-light.svg new file mode 100644 index 00000000000..f1ed8284108 --- /dev/null +++ b/src/vs/workbench/parts/search/browser/media/search-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/parts/search/browser/media/search.contribution.css b/src/vs/workbench/parts/search/browser/media/search.contribution.css index e0b787ff3ba..caa107c3a8b 100644 --- a/src/vs/workbench/parts/search/browser/media/search.contribution.css +++ b/src/vs/workbench/parts/search/browser/media/search.contribution.css @@ -6,4 +6,8 @@ /* Activity Bar */ .monaco-workbench > .activitybar .monaco-action-bar .action-label.search { background-image: url('search-dark.svg'); +} + +.monaco-workbench > .activitybar.light .monaco-action-bar .action-label.search { + background-image: url('search-light.svg'); } \ No newline at end of file