Update more CSS url use (#7341)

* Update more CSS urls

* URI with resources (#7348)

* URI with resources

* Remove logs
This commit is contained in:
Charles Gagnon
2019-09-24 18:07:23 -07:00
committed by GitHub
parent 49851daf0d
commit 82b19614e1
4 changed files with 32 additions and 33 deletions

View File

@@ -9,7 +9,7 @@ import { IComponentDescriptor } from 'sql/workbench/browser/modelComponents/inte
import * as azdata from 'azdata';
import { URI } from 'vs/base/common/uri';
import { IdGenerator } from 'vs/base/common/idGenerator';
import { createCSSRule, removeCSSRulesContainingSelector } from 'vs/base/browser/dom';
import { createCSSRule, removeCSSRulesContainingSelector, asCSSUrl } from 'vs/base/browser/dom';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
@@ -45,35 +45,34 @@ export abstract class ComponentWithIconBase extends ComponentBase {
}
removeCSSRulesContainingSelector(this._iconClass);
const icon = this.getLightIconPath(this.iconPath);
const iconDark = this.getDarkIconPath(this.iconPath) || icon;
createCSSRule(`.icon.${this._iconClass}`, `background-image: url("${icon}")`);
createCSSRule(`.vs-dark .icon.${this._iconClass}, .hc-black .icon.${this._iconClass}`, `background-image: url("${iconDark}")`);
const icon = this.getLightIconUri(this.iconPath);
const iconDark = this.getDarkIconUri(this.iconPath) || icon;
createCSSRule(`.icon.${this._iconClass}`, `background-image: ${asCSSUrl(icon)}`);
createCSSRule(`.vs-dark .icon.${this._iconClass}, .hc-black .icon.${this._iconClass}`, `background-image: ${asCSSUrl(iconDark)}`);
this._changeRef.detectChanges();
}
}
private getLightIconPath(iconPath: IUserFriendlyIcon): string {
private getLightIconUri(iconPath: IUserFriendlyIcon): URI {
if (iconPath && iconPath['light']) {
return this.getIconPath(iconPath['light']);
return this.getIconUri(iconPath['light']);
} else {
return this.getIconPath(<string | URI>iconPath);
return this.getIconUri(<string | URI>iconPath);
}
}
private getDarkIconPath(iconPath: IUserFriendlyIcon): string {
private getDarkIconUri(iconPath: IUserFriendlyIcon): URI {
if (iconPath && iconPath['dark']) {
return this.getIconPath(iconPath['dark']);
return this.getIconUri(iconPath['dark']);
}
return null;
}
private getIconPath(iconPath: string | URI): string {
private getIconUri(iconPath: string | URI): URI {
if (typeof iconPath === 'string') {
return URI.file(iconPath).toString();
return URI.file(iconPath);
} else {
let uri = URI.revive(iconPath);
return uri.toString();
return URI.revive(iconPath);
}
}

View File

@@ -7,9 +7,10 @@ import { IExtensionPointUser } from 'vs/workbench/services/extensions/common/ext
import { IJSONSchema } from 'vs/base/common/jsonSchema';
import * as nls from 'vs/nls';
import { join } from 'vs/base/common/path';
import { createCSSRule } from 'vs/base/browser/dom';
import { createCSSRule, asCSSUrl } from 'vs/base/browser/dom';
import { URI } from 'vs/base/common/uri';
import { IdGenerator } from 'vs/base/common/idGenerator';
import * as resources from 'vs/base/common/resources';
import { NavSectionConfig, IUserFriendlyIcon } from 'sql/workbench/parts/dashboard/browser/core/dashboardWidget';
import { registerContainerType, generateNavSectionContainerTypeSchemaProperties } from 'sql/platform/dashboard/common/dashboardContainerRegistry';
@@ -84,13 +85,13 @@ function createCSSRuleForIcon(icon: IUserFriendlyIcon, extension: IExtensionPoin
if (icon) {
iconClass = ids.nextId();
if (typeof icon === 'string') {
const path = join(extension.description.extensionLocation.fsPath, icon);
createCSSRule(`.icon.${iconClass}`, `background-image: url("${URI.file(path).toString()}")`);
const path = resources.joinPath(extension.description.extensionLocation, icon);
createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(path)}`);
} else {
const light = join(extension.description.extensionLocation.fsPath, icon.light);
const dark = join(extension.description.extensionLocation.fsPath, icon.dark);
createCSSRule(`.icon.${iconClass}`, `background-image: url("${URI.file(light).toString()}")`);
createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: url("${URI.file(dark).toString()}")`);
const light = resources.joinPath(extension.description.extensionLocation, icon.light);
const dark = resources.joinPath(extension.description.extensionLocation, icon.dark);
createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(light)}`);
createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(dark)}`);
}
}
return iconClass;