ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-18 17:22:45 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix dashboard icons (#15400)

Browse Source 
* Fix dashboard icons

* Split out custom SQL menu items

* Put on same line
This commit is contained in:
Charles Gagnon
2021-05-11 12:41:45 -07:00
committed by GitHub
parent 9cddd91037
commit c015338ed4
4 changed files with 171 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/sql/platform/actions/browser/menuEntryActionViewItem.ts Normal file
View File

@@ -0,0 +1,164 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { asCSSUrl, createCSSRule } from 'vs/base/browser/dom';
import { IdGenerator } from 'vs/base/common/idGenerator';
import { IDisposable, toDisposable, dispose } from 'vs/base/common/lifecycle';
import { ICommandAction, MenuItemAction } from 'vs/platform/actions/common/actions';
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
import { INotificationService } from 'vs/platform/notification/common/notification';
import { ThemeIcon } from 'vs/platform/theme/common/themeService';
import { MenuEntryActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem';
const ids = new IdGenerator('menu-item-action-item-icon-');
const ICON_PATH_TO_CSS_RULES = new Map<string /* path*/, string /* CSS rule */>();
/**
* Always show label for action items, instead of whether they don't have
* an icon/CSS class. Useful for some toolbar scenarios in particular with
* contributed actions from other extensions
*/
export class LabeledMenuItemActionItem 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.${iconClass}`, `background-image: ${asCSSUrl(item.icon.light || item.icon.dark)} !important`);
createCSSRule(`.vs-dark .codicon.${iconClass}, .hc-black .codicon.${iconClass}`, `background-image: ${asCSSUrl(item.icon.dark)} !important`);
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._labeledItemClassDispose = toDisposable(() => {
if (this.label) {
this.label.classList.remove('codicon', ...iconClasses);
}
});
}
}
}
}
dispose(): void {
if (this._labeledItemClassDispose) {
dispose(this._labeledItemClassDispose);
this._labeledItemClassDispose = undefined;
}
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();
}
}