diff --git a/src/sql/workbench/contrib/notebook/browser/notebook.component.ts b/src/sql/workbench/contrib/notebook/browser/notebook.component.ts index 0bde6c3371..a174d946d8 100644 --- a/src/sql/workbench/contrib/notebook/browser/notebook.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/notebook.component.ts @@ -41,7 +41,7 @@ import { createErrorWithActions } from 'vs/base/common/errorsWithActions'; import { toErrorMessage } from 'vs/base/common/errorMessage'; import { ILogService } from 'vs/platform/log/common/log'; import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles'; -import { LabeledMenuItemActionItem, fillInActions } from 'vs/platform/actions/browser/menuEntryActionViewItem'; +import { MaskedLabeledMenuItemActionItem, fillInActions } from 'vs/platform/actions/browser/menuEntryActionViewItem'; import { Button } from 'sql/base/browser/ui/button/button'; import { isUndefinedOrNull } from 'vs/base/common/types'; import { IBootstrapParams } from 'sql/workbench/services/bootstrap/common/bootstrapParams'; @@ -509,7 +509,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe action.tooltip = action.label; action.label = ''; } - return new LabeledMenuItemActionItem(action, this.keybindingService, this.notificationService); + return new MaskedLabeledMenuItemActionItem(action, this.keybindingService, this.notificationService); } return undefined; } diff --git a/src/vs/platform/actions/browser/menuEntryActionViewItem.ts b/src/vs/platform/actions/browser/menuEntryActionViewItem.ts index 1f44ae2e09..c08d56b99f 100644 --- a/src/vs/platform/actions/browser/menuEntryActionViewItem.ts +++ b/src/vs/platform/actions/browser/menuEntryActionViewItem.ts @@ -313,4 +313,78 @@ export class LabeledMenuItemActionItem extends MenuEntryActionViewItem { super.dispose(); } } + +/** + * This is a duplicate of LabeledMenuItemActionItem with the following exceptions: + * - Adds CSS class: `masked-icon` to contributed actions label element. + * - Adds style rule for masked-icon. + */ +export class MaskedLabeledMenuItemActionItem extends MenuEntryActionViewItem { + private _labeledItemClassDispose?: IDisposable; + + constructor( + public _action: MenuItemAction, + @IKeybindingService labeledkeybindingService: IKeybindingService, + @INotificationService protected _notificationService: INotificationService, + private readonly _defaultCSSClassToAdd: string = '' + ) { + super(_action, labeledkeybindingService, _notificationService); + } + + updateLabel(): void { + if (this.label) { + this.label.innerText = this._commandAction.label; + } + } + + // Overwrite item class to ensure that we can pass in a CSS class that other items use + // Leverages the _defaultCSSClassToAdd property that's passed into the constructor + protected _updateItemClass(item: ICommandAction): void { + dispose(this._labeledItemClassDispose); + this._labeledItemClassDispose = undefined; + + if (ThemeIcon.isThemeIcon(item.icon)) { + // TODO + } else if (item.icon) { + let iconClass: string; + + + if (item.icon?.dark?.scheme) { + const iconPathMapKey = item.icon.dark.toString(); + + if (ICON_PATH_TO_CSS_RULES.has(iconPathMapKey)) { + iconClass = ICON_PATH_TO_CSS_RULES.get(iconPathMapKey)!; + } else { + iconClass = ids.nextId(); + createCSSRule(`.codicon.masked-icon.${iconClass}::before`, `-webkit-mask-image: ${asCSSUrl(item.icon.light || item.icon.dark)}`); + createCSSRule(`.codicon.masked-icon.${iconClass}::before`, `mask-image: ${asCSSUrl(item.icon.light || item.icon.dark)}`); + ICON_PATH_TO_CSS_RULES.set(iconPathMapKey, iconClass); + } + + if (this.label) { + const iconClasses = iconClass.split(' '); + if (this._defaultCSSClassToAdd) { + iconClasses.push(this._defaultCSSClassToAdd); + } + this.label.classList.add('codicon', ...iconClasses); + this.label.classList.add('masked-icon', ...iconClasses); + this._labeledItemClassDispose = toDisposable(() => { + if (this.label) { + this.label.classList.remove('codicon', ...iconClasses); + } + }); + } + } + } + } + + dispose(): void { + if (this._labeledItemClassDispose) { + dispose(this._labeledItemClassDispose); + this._labeledItemClassDispose = undefined; + } + + super.dispose(); + } +} // {{SQL CARBON EDIT}} - End