mirror of
https://github.com/Microsoft/vscode
synced 2024-09-13 13:46:13 +00:00
Activity bar icons are not being highlighted on mouse over (#178684)
This commit is contained in:
parent
7706103d0e
commit
b8f3103f74
|
@ -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) {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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: "";
|
||||
|
|
|
@ -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)
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -9,7 +9,7 @@ export interface IActivity {
|
|||
id: string;
|
||||
name: string;
|
||||
keybindingId?: string;
|
||||
cssClass?: string;
|
||||
classNames?: string[];
|
||||
iconUrl?: URI;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue