development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-08-27 13:00:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Activity bar icons are not being highlighted on mouse over (#178684)

Browse source
This commit is contained in:
Martin Aeschlimann 2023-03-30 15:03:04 +02:00 committed by GitHub
parent 7706103d0e
commit b8f3103f74
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 39 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/vs/workbench/browser/parts/activitybar/activitybarActions.ts
View file

@ -20,7 +20,7 @@ import { IColorTheme, IThemeService, registerThemingParticipant } from 'vs/platf
import { ActivityAction, ActivityActionViewItem, IActivityActionViewItemOptions, IActivityHoverOptions, ICompositeBar, ICompositeBarColors, ToggleCompositeBadgeAction, ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/compositeBarActions';
import { Categories } from 'vs/platform/action/common/actionCommonCategories';
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_ACTIVE_FOCUS_BORDER, ACTIVITY_BAR_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme';
import { IWorkbenchLayoutService, Parts } from 'vs/workbench/services/layout/browser/layoutService';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { createAndFillInActionBarActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
@ -533,7 +533,7 @@ export class PlaceHolderViewContainerActivityAction extends ViewContainerActivit
export class PlaceHolderToggleCompositePinnedAction extends ToggleCompositePinnedAction {
constructor(id: string, compositeBar: ICompositeBar) {
super({ id, name: id, cssClass: undefined }, compositeBar);
super({ id, name: id, classNames: undefined }, compositeBar);
}
setActivity(activity: IActivity): void {
@ -544,7 +544,7 @@ export class PlaceHolderToggleCompositePinnedAction extends ToggleCompositePinne
export class PlaceHolderToggleCompositeBadgeAction extends ToggleCompositeBadgeAction {
constructor(id: string, compositeBar: ICompositeBar) {
super({ id, name: id, cssClass: undefined }, compositeBar);
super({ id, name: id, classNames: undefined }, compositeBar);
}
setActivity(activity: IActivity): void {
@ -627,25 +627,6 @@ registerAction2(
});
registerThemingParticipant((theme, collector) => {
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.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: ${activityBarForegroundColor} !important;
}
`);
}
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: ${activityBarActiveBorderColor};
}
`);
}
const activityBarActiveFocusBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_FOCUS_BORDER);
if (activityBarActiveFocusBorderColor) {

17
src/vs/workbench/browser/parts/activitybar/activitybarPart.ts
View file

@ -525,14 +525,14 @@ export class ActivitybarPart extends Part implements IPaneCompositeSelectorPart
this.globalActivityAction = this._register(new ActivityAction({
id: 'workbench.actions.manage',
name: localize('manage', "Manage"),
cssClass: ThemeIcon.asClassName(ActivitybarPart.GEAR_ICON),
classNames: ThemeIcon.asClassNameArray(ActivitybarPart.GEAR_ICON),
}));
if (this.accountsVisibilityPreference) {
this.accountsActivityAction = this._register(new ActivityAction({
id: 'workbench.actions.accounts',
name: localize('accounts', "Accounts"),
cssClass: ThemeIcon.asClassName(ActivitybarPart.ACCOUNTS_ICON)
classNames: ThemeIcon.asClassNameArray(ActivitybarPart.ACCOUNTS_ICON)
}));
this.globalActivityActionBar.push(this.accountsActivityAction, { index: ActivitybarPart.ACCOUNTS_ACTION_INDEX });
@ -553,7 +553,7 @@ export class ActivitybarPart extends Part implements IPaneCompositeSelectorPart
this.accountsActivityAction = this._register(new ActivityAction({
id: 'workbench.actions.accounts',
name: localize('accounts', "Accounts"),
cssClass: ThemeIcon.asClassName(Codicon.account)
classNames: ThemeIcon.asClassNameArray(Codicon.account)
}));
this.globalActivityActionBar.push(this.accountsActivityAction, { index: ActivitybarPart.ACCOUNTS_ACTION_INDEX });
}
@ -641,15 +641,16 @@ export class ActivitybarPart extends Part implements IPaneCompositeSelectorPart
}
private static toActivity(id: string, name: string, icon: URI | ThemeIcon | undefined, keybindingId: string | undefined): IActivity {
let cssClass: string | undefined = undefined;
let classNames: string[] | undefined = undefined;
let iconUrl: URI | undefined = undefined;
if (URI.isUri(icon)) {
iconUrl = icon;
const cssUrl = asCSSUrl(icon);
const hash = new StringSHA1();
hash.update(cssUrl);
cssClass = `activity-${id.replace(/\./g, '-')}-${hash.digest()}`;
const iconClass = `.monaco-workbench .activitybar .monaco-action-bar .action-label.${cssClass}`;
const iconId = `activity-${id.replace(/\./g, '-')}-${hash.digest()}`;
const iconClass = `.monaco-workbench .activitybar .monaco-action-bar .action-label.${iconId}`;
classNames = [iconId, 'uri-icon'];
createCSSRule(iconClass, `
mask: ${cssUrl} no-repeat 50% 50%;
mask-size: 24px;
@ -657,10 +658,10 @@ export class ActivitybarPart extends Part implements IPaneCompositeSelectorPart
-webkit-mask-size: 24px;
`);
} else if (ThemeIcon.isThemeIcon(icon)) {
cssClass = ThemeIcon.asClassName(icon);
classNames = ThemeIcon.asClassNameArray(icon);
}
return { id, name, cssClass, iconUrl, keybindingId };
return { id, name, classNames, iconUrl, keybindingId };
}
private showOrHideViewContainer(viewContainer: ViewContainer): void {

15
src/vs/workbench/browser/parts/activitybar/media/activityaction.css
View file

@ -85,6 +85,21 @@
justify-content: center;
}
.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: var(--vscode-activityBar-foreground) !important;
}
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label.uri-icon,
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label.uri-icon,
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label.uri-icon {
background-color: var(--vscode-activityBar-foreground) !important;
}
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item-indicator:before {
border-left-color: var(--vscode-activityBar-activeBorder);
}
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item-indicator:before,
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .active-item-indicator:before {
content: "";

12
src/vs/workbench/browser/parts/compositeBarActions.ts
View file

@ -80,7 +80,7 @@ export class ActivityAction extends Action {
private clazz: string | undefined;
constructor(private _activity: IActivity) {
super(_activity.id, _activity.name, _activity.cssClass);
super(_activity.id, _activity.name, _activity.classNames?.join(' '), true);
}
get activity(): IActivity {
@ -360,12 +360,8 @@ export class ActivityActionViewItem extends BaseActionViewItem {
protected override updateLabel(): void {
this.label.className = 'action-label';
if (this.activity.cssClass) {
this.label.classList.add(...this.activity.cssClass.split(' '));
}
if (this.options.icon && !this.activity.iconUrl) {
this.label.classList.add('codicon'); // Only apply codicon class to activity bar icon items without iconUrl
if (this.activity.classNames) {
this.label.classList.add(...this.activity.classNames);
}
if (!this.options.icon) {
@ -466,7 +462,7 @@ export class CompositeOverflowActivityAction extends ActivityAction {
super({
id: 'additionalComposites.action',
name: localize('additionalViews', "Additional Views"),
cssClass: ThemeIcon.asClassName(Codicon.more)
classNames: ThemeIcon.asClassNameArray(Codicon.more)
});
}

2
src/vs/workbench/browser/parts/panel/panelActions.ts
View file

@ -256,7 +256,7 @@ export class PlaceHolderPanelActivityAction extends PanelActivityAction {
export class PlaceHolderToggleCompositePinnedAction extends ToggleCompositePinnedAction {
constructor(id: string, compositeBar: ICompositeBar) {
super({ id, name: id, cssClass: undefined }, compositeBar);
super({ id, name: id, classNames: undefined }, compositeBar);
}
setActivity(activity: IActivity): void {

11
src/vs/workbench/browser/parts/panel/panelPart.ts
View file

@ -340,15 +340,16 @@ export abstract class BasePanelPart extends CompositePart<PaneComposite> impleme
}
private static toActivity(id: string, name: string, icon: URI | ThemeIcon | undefined, keybindingId: string | undefined): IActivity {
let cssClass: string | undefined = undefined;
let classNames: string[] | undefined = undefined;
let iconUrl: URI | undefined = undefined;
if (URI.isUri(icon)) {
iconUrl = icon;
const cssUrl = asCSSUrl(icon);
const hash = new StringSHA1();
hash.update(cssUrl);
cssClass = `activity-${id.replace(/\./g, '-')}-${hash.digest()}`;
const iconClass = `.monaco-workbench .basepanel .monaco-action-bar .action-label.${cssClass}`;
const iconId = `activity-${id.replace(/\./g, '-')}-${hash.digest()}`;
classNames = [iconId, 'uri-icon'];
const iconClass = `.monaco-workbench .basepanel .monaco-action-bar .action-label.${iconId}`;
createCSSRule(iconClass, `
mask: ${cssUrl} no-repeat 50% 50%;
mask-size: 16px;
@ -358,10 +359,10 @@ export abstract class BasePanelPart extends CompositePart<PaneComposite> impleme
-webkit-mask-origin: padding;
`);
} else if (ThemeIcon.isThemeIcon(icon)) {
cssClass = ThemeIcon.asClassName(icon);
classNames = ThemeIcon.asClassNameArray(icon);
}
return { id, name, cssClass, iconUrl, keybindingId };
return { id, name, classNames, iconUrl, keybindingId };
}
private showOrHideViewContainer(viewContainer: ViewContainer, viewContainerModel: IViewContainerModel): void {

2
src/vs/workbench/common/activity.ts
View file

@ -9,7 +9,7 @@ export interface IActivity {
id: string;
name: string;
keybindingId?: string;
cssClass?: string;
classNames?: string[];
iconUrl?: URI;
}