ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Support icons in panel (#895)

Browse Source 
* support icons in panel

* formatting

* address Smitha comments

* address comments
This commit is contained in:
Abbie Petchtes
2018-03-13 13:48:17 -07:00
committed by GitHub
parent 383d74ceb4
commit f3c7b2416b
10 changed files with 96 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/sql/parts/dashboard/containers/dashboardContainer.contribution.ts
View File

@@ -10,7 +10,7 @@ import { createCSSRule } from 'vs/base/browser/dom';
import URI from 'vs/base/common/uri';
import { registerContainer, generateContainerTypeSchemaProperties } from 'sql/platform/dashboard/common/dashboardContainerRegistry';
import { NAV_SECTION, validateNavSectionContribution } from 'sql/parts/dashboard/containers/dashboardNavSection.contribution';
import { NAV_SECTION, validateNavSectionContributionAndRegisterIcon } from 'sql/parts/dashboard/containers/dashboardNavSection.contribution';
import { WIDGETS_CONTAINER, validateWidgetContainerContribution } from 'sql/parts/dashboard/containers/dashboardWidgetContainer.contribution';
import { GRID_CONTAINER, validateGridContainerContribution } from 'sql/parts/dashboard/containers/dashboardGridContainer.contribution';
import { WEBVIEW_CONTAINER } from 'sql/parts/dashboard/containers/dashboardWebviewContainer.contribution';
@@ -91,7 +91,7 @@ ExtensionsRegistry.registerExtensionPoint<IDashboardContainerContrib | IDashboar
result = validateGridContainerContribution(extension, containerValue);
break;
case NAV_SECTION:
result = validateNavSectionContribution(extension, containerValue);
result = validateNavSectionContributionAndRegisterIcon(extension, containerValue);
break;
}

3
src/sql/parts/dashboard/containers/dashboardNavSection.component.html
View File

@@ -5,7 +5,8 @@
*--------------------------------------------------------------------------------------------*/
-->
<panel [options]="panelOpt" style="flex: 1 1 auto;" class="dashboard-panel" (onTabChange)="handleTabChange($event)">
<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize" [identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions">
<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize"
[identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions" [iconClass]="tab.iconClass">
<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
</dashboard-webview-container>
<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">

13
src/sql/parts/dashboard/containers/dashboardNavSection.component.ts
View File

@@ -64,6 +64,13 @@ export class DashboardNavSection extends DashboardTab implements OnDestroy, OnCh
let navSectionContainers: NavSectionConfig[] = [];
if (this.tab.container) {
navSectionContainers = Object.values(this.tab.container)[0];
let hasIcon = true;
navSectionContainers.forEach(navSection => {
if (!navSection.iconClass) {
hasIcon = false;
}
});
this.panelOpt.showIcon = hasIcon;
this.loadNewTabs(navSectionContainers);
}
}
@@ -101,13 +108,13 @@ export class DashboardNavSection extends DashboardTab implements OnDestroy, OnCh
configs = cb.apply(this, [configs]);
});
if (key === WIDGETS_CONTAINER) {
return { id: v.id, title: v.title, container: { 'widgets-container': configs } };
return { id: v.id, title: v.title, container: { 'widgets-container': configs }, iconClass: v.iconClass };
} else {
return { id: v.id, title: v.title, container: { 'grid-container': configs } };
return { id: v.id, title: v.title, container: { 'grid-container': configs }, iconClass: v.iconClass };
}
}
return { id: v.id, title: v.title, container: containerResult.container };
return { id: v.id, title: v.title, container: containerResult.container, iconClass: v.iconClass };
}).map(v => {
let config = v as TabConfig;
config.context = this.tab.context;

45
src/sql/parts/dashboard/containers/dashboardNavSection.contribution.ts
View File

@@ -5,8 +5,12 @@
import { IExtensionPointUser } from 'vs/platform/extensions/common/extensionsRegistry';
import { IJSONSchema } from 'vs/base/common/jsonSchema';
import * as nls from 'vs/nls';
import { join } from 'path';
import { createCSSRule } from 'vs/base/browser/dom';
import URI from 'vs/base/common/uri';
import { IdGenerator } from 'vs/base/common/idGenerator';
import { NavSectionConfig } from 'sql/parts/dashboard/common/dashboardWidget';
import { NavSectionConfig, IUserFriendlyIcon } from 'sql/parts/dashboard/common/dashboardWidget';
import { registerContainerType, generateNavSectionContainerTypeSchemaProperties } from 'sql/platform/dashboard/common/dashboardContainerRegistry';
import { WIDGETS_CONTAINER, validateWidgetContainerContribution } from 'sql/parts/dashboard/containers/dashboardWidgetContainer.contribution';
import { WEBVIEW_CONTAINER } from 'sql/parts/dashboard/containers/dashboardWebviewContainer.contribution';
@@ -60,7 +64,39 @@ let NavSectionSchema: IJSONSchema = {
registerContainerType(NAV_SECTION, NavSectionSchema);
export function validateNavSectionContribution(extension: IExtensionPointUser<any>, navSectionConfigs: NavSectionConfig[]): boolean {
function isValidIcon(icon: IUserFriendlyIcon, extension: IExtensionPointUser<any>): boolean {
if (typeof icon === 'undefined') {
return false;
}
if (typeof icon === 'string') {
return true;
} else if (typeof icon.dark === 'string' && typeof icon.light === 'string') {
return true;
}
extension.collector.error(nls.localize('opticon', "property `icon` can be omitted or must be either a string or a literal like `{dark, light}`"));
return false;
}
const ids = new IdGenerator('contrib-dashboardNavSection-icon-');
function createCSSRuleForIcon(icon: IUserFriendlyIcon, extension: IExtensionPointUser<any>): string {
let iconClass: string;
if (icon) {
iconClass = ids.nextId();
if (typeof icon === 'string') {
const path = join(extension.description.extensionFolderPath, icon);
createCSSRule(`.icon.${iconClass}`, `background-image: url("${URI.file(path).toString()}")`);
} else {
const light = join(extension.description.extensionFolderPath, icon.light);
const dark = join(extension.description.extensionFolderPath, 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()}")`);
}
}
return iconClass;
}
export function validateNavSectionContributionAndRegisterIcon(extension: IExtensionPointUser<any>, navSectionConfigs: NavSectionConfig[]): boolean {
let result = true;
navSectionConfigs.forEach(section => {
if (!section.title) {
@@ -78,6 +114,10 @@ export function validateNavSectionContribution(extension: IExtensionPointUser<an
extension.collector.error(nls.localize('navSection.moreThanOneDashboardContainersError', 'Exactly 1 dashboard container must be defined per space.'));
}
if (isValidIcon(section.icon, extension)) {
section.iconClass = createCSSRuleForIcon(section.icon, extension);
}
let containerKey = Object.keys(section.container)[0];
let containerValue = Object.values(section.container)[0];
@@ -93,6 +133,7 @@ export function validateNavSectionContribution(extension: IExtensionPointUser<an
extension.collector.error(nls.localize('navSection.invalidContainer_error', 'NAV_SECTION within NAV_SECTION is an invalid container for extension.'));
break;
}
});
return result;
}