From 20212f2b7be53fb0da86f297cd37f2cc9be969dc Mon Sep 17 00:00:00 2001 From: Sandeep Somavarapu Date: Fri, 22 Sep 2023 16:08:24 +0200 Subject: [PATCH] overlay gear on profile icon (#193806) --- .../lib/stylelint/vscode-known-variables.json | 1 + .../parts/activitybar/activitybarActions.ts | 13 +++++++++- .../parts/activitybar/activitybarPart.ts | 9 ++++--- .../activitybar/media/activityaction.css | 24 +++++++++++++++---- 4 files changed, 37 insertions(+), 10 deletions(-) diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index 301b01e45c7..222e6f941ef 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -9,6 +9,7 @@ "--vscode-activityBar-dropBorder", "--vscode-activityBar-foreground", "--vscode-activityBar-inactiveForeground", + "--vscode-activityBar-activeForeground", "--vscode-activityBarBadge-background", "--vscode-activityBarBadge-foreground", "--vscode-badge-background", diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts b/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts index 72be1131bda..c3cc305979c 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts @@ -43,6 +43,8 @@ import { ISecretStorageService } from 'vs/platform/secrets/common/secrets'; import { ILifecycleService, LifecyclePhase } from 'vs/workbench/services/lifecycle/common/lifecycle'; import { runWhenIdle } from 'vs/base/common/async'; import { Lazy } from 'vs/base/common/lazy'; +import { DEFAULT_ICON } from 'vs/workbench/services/userDataProfile/common/userDataProfileIcons'; +import { ThemeIcon } from 'vs/base/common/themables'; export class ViewContainerActivityAction extends ActivityAction { @@ -519,7 +521,16 @@ export class GlobalActivityActionViewItem extends MenuActivityActionViewItem { return; } - this.profileBadgeContent.textContent = this.userDataProfileService.currentProfile.name.substring(0, 2).toUpperCase(); + if (this.userDataProfileService.currentProfile.icon && this.userDataProfileService.currentProfile.icon !== DEFAULT_ICON.id) { + this.profileBadgeContent.classList.toggle('profile-icon-overlay', true); + this.profileBadgeContent.classList.toggle('profile-text-overlay', false); + append(this.profileBadgeContent, $(ThemeIcon.asCSSSelector(DEFAULT_ICON))); + } else { + this.profileBadgeContent.classList.toggle('profile-text-overlay', true); + this.profileBadgeContent.classList.toggle('profile-icon-overlay', false); + this.profileBadgeContent.textContent = this.userDataProfileService.currentProfile.name.substring(0, 2).toUpperCase(); + } + show(this.profileBadge); } diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts index 007ef5fc790..93e78a0849d 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts @@ -44,7 +44,6 @@ import { HoverPosition } from 'vs/base/browser/ui/hover/hoverWidget'; import { GestureEvent } from 'vs/base/browser/touch'; import { IPaneCompositePart, IPaneCompositeSelectorPart } from 'vs/workbench/browser/parts/paneCompositePart'; import { IUserDataProfileService } from 'vs/workbench/services/userDataProfile/common/userDataProfile'; -import { IUserDataProfile } from 'vs/platform/userDataProfile/common/userDataProfile'; interface IPlaceholderViewContainer { readonly id: string; @@ -526,10 +525,10 @@ export class ActivitybarPart extends Part implements IPaneCompositeSelectorPart preventLoopNavigation: true })); - this.globalActivityAction = this._register(new ActivityAction(this.createGlobalActivity(this.userDataProfileService.currentProfile))); + this.globalActivityAction = this._register(new ActivityAction(this.createGlobalActivity())); this._register(this.userDataProfileService.onDidChangeCurrentProfile(e => { if (this.globalActivityAction) { - this.globalActivityAction.activity = this.createGlobalActivity(e.profile); + this.globalActivityAction.activity = this.createGlobalActivity(); } })); @@ -546,11 +545,11 @@ export class ActivitybarPart extends Part implements IPaneCompositeSelectorPart this.globalActivityActionBar.push(this.globalActivityAction); } - private createGlobalActivity(profile: IUserDataProfile): IActivity { + private createGlobalActivity(): IActivity { return { id: 'workbench.actions.manage', name: localize('manage', "Manage"), - classNames: ThemeIcon.asClassNameArray(profile.icon ? ThemeIcon.fromId(profile.icon) : ActivitybarPart.GEAR_ICON), + classNames: ThemeIcon.asClassNameArray(this.userDataProfileService.currentProfile.icon ? ThemeIcon.fromId(this.userDataProfileService.currentProfile.icon) : ActivitybarPart.GEAR_ICON), }; } diff --git a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css index a63412b56cb..449487b420f 100644 --- a/src/vs/workbench/browser/parts/activitybar/media/activityaction.css +++ b/src/vs/workbench/browser/parts/activitybar/media/activityaction.css @@ -183,7 +183,23 @@ text-align: center; } -.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .profile-badge .profile-badge-content { +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .profile-badge .profile-icon-overlay { + position: absolute; + top: 27px; + right: 6px; + background-color: var(--vscode-activityBar-background); +} + +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .profile-badge .profile-icon-overlay .codicon { + color: var(--vscode-activityBar-inactiveForeground); +} + +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .profile-badge .profile-icon-overlay .codicon, +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .profile-badge .profile-icon-overlay .codicon { + color: var(--vscode-activityBar-activeForeground); +} + +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .profile-badge .profile-text-overlay { position: absolute; font-weight: 600; font-size: 9px; @@ -197,9 +213,9 @@ border: 2px solid var(--vscode-activityBar-background); } -.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:active .profile-badge-content, -.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .profile-badge-content, -.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .profile-badge-content { +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:active .profile-text-overlay, +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .profile-text-overlay, +.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .profile-text-overlay { color: var(--vscode-activityBar-foreground); }