From 4c0810e4d57a6d685a5b70fc8c104dec226248af Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Thu, 30 Apr 2020 11:42:32 +0200 Subject: [PATCH] home indicator - add a product icon overlay --- package.json | 2 +- .../{parts/titlebar => }/media/code-icon.svg | 0 .../parts/activitybar/activitybarActions.ts | 36 +++++++++++-------- .../parts/activitybar/activitybarPart.ts | 4 +++ .../activitybar/media/activitybarpart.css | 14 ++++++++ .../parts/titlebar/media/titlebarpart.css | 2 +- .../update/browser/media/code-icon.svg | 1 - .../update/browser/releaseNotesEditor.ts | 2 +- .../workbench/contrib/welcome/code-icon.svg | 1 - .../welcome/page/browser/welcomePage.css | 2 +- .../walkThrough/browser/walkThroughPart.css | 2 +- 11 files changed, 45 insertions(+), 21 deletions(-) rename src/vs/workbench/browser/{parts/titlebar => }/media/code-icon.svg (100%) delete mode 100644 src/vs/workbench/contrib/update/browser/media/code-icon.svg delete mode 100644 src/vs/workbench/contrib/welcome/code-icon.svg diff --git a/package.json b/package.json index 0b96b4f70b8..9b1f739894e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "code-oss-dev", "version": "1.45.0", - "distro": "84d234f8633695a96e1f00c6497d0851d588acf9", + "distro": "2b65f8a42198f5bc470b28a01fe84ec8788e6adc", "author": { "name": "Microsoft Corporation" }, diff --git a/src/vs/workbench/browser/parts/titlebar/media/code-icon.svg b/src/vs/workbench/browser/media/code-icon.svg similarity index 100% rename from src/vs/workbench/browser/parts/titlebar/media/code-icon.svg rename to src/vs/workbench/browser/media/code-icon.svg diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts b/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts index 08e9cffba8c..ecee5efd1d6 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts @@ -22,7 +22,7 @@ import { ActivityAction, ActivityActionViewItem, ICompositeBar, ICompositeBarCol import { ViewletDescriptor } from 'vs/workbench/browser/viewlet'; import { Extensions as ActionExtensions, IWorkbenchActionRegistry } from 'vs/workbench/common/actions'; import { IActivity } from 'vs/workbench/common/activity'; -import { ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_ACTIVE_FOCUS_BORDER, ACTIVITY_BAR_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme'; +import { ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_ACTIVE_FOCUS_BORDER, ACTIVITY_BAR_ACTIVE_BACKGROUND, ACTIVITY_BAR_BACKGROUND } from 'vs/workbench/common/theme'; import { IActivityBarService } from 'vs/workbench/services/activityBar/browser/activityBarService'; import { IWorkbenchLayoutService, Parts } from 'vs/workbench/services/layout/browser/layoutService'; import { IViewletService } from 'vs/workbench/services/viewlet/browser/viewlet'; @@ -362,35 +362,43 @@ export class HomeAction extends Action { } registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => { + const activityBarBackgroundColor = theme.getColor(ACTIVITY_BAR_BACKGROUND); + if (activityBarBackgroundColor) { + collector.addRule(` + .monaco-workbench .activitybar > .content > .home-bar > .home-bar-icon-badge { + background-color: ${activityBarBackgroundColor}; + } + `); + } - const activeForegroundColor = theme.getColor(ACTIVITY_BAR_FOREGROUND); - if (activeForegroundColor) { + const activityBarForegroundColor = theme.getColor(ACTIVITY_BAR_FOREGROUND); + if (activityBarForegroundColor) { collector.addRule(` .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label:not(.codicon), .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label:not(.codicon), .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label:not(.codicon) { - background-color: ${activeForegroundColor} !important; + background-color: ${activityBarForegroundColor} !important; } .monaco-workbench .activitybar > .content .home-bar > .monaco-action-bar .action-item .action-label.codicon, .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label.codicon, .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label.codicon, .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label.codicon { - color: ${activeForegroundColor} !important; + color: ${activityBarForegroundColor} !important; } `); } - const activeBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BORDER); - if (activeBorderColor) { + const activityBarActiveBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BORDER); + if (activityBarActiveBorderColor) { collector.addRule(` .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item-indicator:before { - border-left-color: ${activeBorderColor}; + border-left-color: ${activityBarActiveBorderColor}; } `); } - const activeFocusBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_FOCUS_BORDER); - if (activeFocusBorderColor) { + const activityBarActiveFocusBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_FOCUS_BORDER); + if (activityBarActiveFocusBorderColor) { collector.addRule(` .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:focus::before { visibility: hidden; @@ -398,17 +406,17 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) = .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:focus .active-item-indicator:before { visibility: visible; - border-left-color: ${activeFocusBorderColor}; + border-left-color: ${activityBarActiveFocusBorderColor}; } `); } - const activeBackgroundColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BACKGROUND); - if (activeBackgroundColor) { + const activityBarActiveBackgroundColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BACKGROUND); + if (activityBarActiveBackgroundColor) { collector.addRule(` .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item-indicator { z-index: 0; - background-color: ${activeBackgroundColor}; + background-color: ${activityBarActiveBackgroundColor}; } `); } diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts index e29f399308f..0b2a4e8f90a 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts @@ -366,6 +366,10 @@ export class ActivitybarPart extends Part implements IActivityBarService { animated: false })); + const homeBarIconBadge = document.createElement('div'); + addClass(homeBarIconBadge, 'home-bar-icon-badge'); + this.homeBarContainer.appendChild(homeBarIconBadge); + this.homeBar.push(this._register(this.instantiationService.createInstance(HomeAction, command, title, icon)), { icon: true, label: false }); const content = assertIsDefined(this.content); diff --git a/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css b/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css index 83a84fb3091..34502e8c92b 100644 --- a/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css +++ b/src/vs/workbench/browser/parts/activitybar/media/activitybarpart.css @@ -26,6 +26,7 @@ /** Home Bar */ .monaco-workbench .activitybar > .content > .home-bar { + position: relative; width: 100%; height: 48px; display: flex; @@ -34,6 +35,19 @@ order: -1; } +.monaco-workbench .activitybar > .content > .home-bar > .home-bar-icon-badge { + position: absolute; + right: 10px; + bottom: 10px; + width: 16px; + height: 16px; + z-index: 1; /* on top of home indicator */ + background-image: url('../../../media/code-icon.svg'); + background-repeat: no-repeat; + background-position: center center; + background-size: 16px; +} + /** Viewlet Switcher */ .monaco-workbench .activitybar > .content .monaco-action-bar { diff --git a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css index e414da015b0..a4c34e45041 100644 --- a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css +++ b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css @@ -85,7 +85,7 @@ height: 100%; position: relative; z-index: 3000; - background-image: url('code-icon.svg'); + background-image: url('../../../media/code-icon.svg'); background-repeat: no-repeat; background-position: center center; background-size: 16px; diff --git a/src/vs/workbench/contrib/update/browser/media/code-icon.svg b/src/vs/workbench/contrib/update/browser/media/code-icon.svg deleted file mode 100644 index cc61f81ea5a..00000000000 --- a/src/vs/workbench/contrib/update/browser/media/code-icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/contrib/update/browser/releaseNotesEditor.ts b/src/vs/workbench/contrib/update/browser/releaseNotesEditor.ts index d5ba252cc6a..58db1270719 100644 --- a/src/vs/workbench/contrib/update/browser/releaseNotesEditor.ts +++ b/src/vs/workbench/contrib/update/browser/releaseNotesEditor.ts @@ -88,7 +88,7 @@ export class ReleaseNotesManager { this._currentReleaseNotes.webview.onDidClickLink(uri => this.onDidClickLink(URI.parse(uri))); this._currentReleaseNotes.onDispose(() => { this._currentReleaseNotes = undefined; }); - const iconPath = URI.parse(require.toUrl('./media/code-icon.svg')); + const iconPath = URI.parse(require.toUrl('vs/workbench/browser/media/code-icon.svg')); this._currentReleaseNotes.iconPath = { light: iconPath, dark: iconPath diff --git a/src/vs/workbench/contrib/welcome/code-icon.svg b/src/vs/workbench/contrib/welcome/code-icon.svg deleted file mode 100644 index cc61f81ea5a..00000000000 --- a/src/vs/workbench/contrib/welcome/code-icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/contrib/welcome/page/browser/welcomePage.css b/src/vs/workbench/contrib/welcome/page/browser/welcomePage.css index 756182d9e54..e72292ac298 100644 --- a/src/vs/workbench/contrib/welcome/page/browser/welcomePage.css +++ b/src/vs/workbench/contrib/welcome/page/browser/welcomePage.css @@ -220,7 +220,7 @@ .file-icons-enabled .show-file-icons .vs_code_welcome_page-name-file-icon.file-icon::before { content: ' '; - background-image: url('../../code-icon.svg'); + background-image: url('../../../../browser/media/code-icon.svg'); } .monaco-workbench .part.editor > .content .welcomePage .mac-only, diff --git a/src/vs/workbench/contrib/welcome/walkThrough/browser/walkThroughPart.css b/src/vs/workbench/contrib/welcome/walkThrough/browser/walkThroughPart.css index 3ccb4957f44..864ec283803 100644 --- a/src/vs/workbench/contrib/welcome/walkThrough/browser/walkThroughPart.css +++ b/src/vs/workbench/contrib/welcome/walkThrough/browser/walkThroughPart.css @@ -116,7 +116,7 @@ .file-icons-enabled .show-file-icons .vs_code_editor_walkthrough\.md-name-file-icon.md-ext-file-icon.ext-file-icon.markdown-lang-file-icon.file-icon::before { content: ' '; - background-image: url('../../code-icon.svg'); + background-image: url('../../../../browser/media/code-icon.svg'); } .monaco-workbench .part.editor > .content .walkThroughContent .mac-only,