overlay gear on profile icon (#193806)

This commit is contained in:
Sandeep Somavarapu
2023-09-22 16:08:24 +02:00
committed by GitHub
parent 537c380c16
commit 20212f2b7b
4 changed files with 37 additions and 10 deletions
@@ -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",
@@ -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);
}
@@ -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),
};
}
@@ -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);
}