diff --git a/src/sql/parts/dashboard/widgets/tasks/tasksWidget.component.ts b/src/sql/parts/dashboard/widgets/tasks/tasksWidget.component.ts index ae6e91f1fa..c0a0efc874 100644 --- a/src/sql/parts/dashboard/widgets/tasks/tasksWidget.component.ts +++ b/src/sql/parts/dashboard/widgets/tasks/tasksWidget.component.ts @@ -2,34 +2,28 @@ * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ + import 'vs/css!sql/media/icons/common-icons'; import 'vs/css!./media/taskWidget'; /* Node Modules */ -import { Component, Inject, forwardRef, ChangeDetectorRef, ViewChild, OnInit, ElementRef } from '@angular/core'; -import { DomSanitizer } from '@angular/platform-browser'; +import { Component, Inject, forwardRef, ViewChild, OnInit, ElementRef } from '@angular/core'; /* SQL imports */ import { DashboardWidget, IDashboardWidget, WidgetConfig, WIDGET_CONFIG } from 'sql/parts/dashboard/common/dashboardWidget'; -import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service'; import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service'; import { TaskRegistry } from 'sql/platform/tasks/common/tasks'; import { IConnectionProfile } from 'sql/platform/connection/common/interfaces'; -import { BaseActionContext } from 'sql/workbench/common/actions'; /* VS imports */ import * as themeColors from 'vs/workbench/common/theme'; import * as colors from 'vs/platform/theme/common/colorRegistry'; import { registerThemingParticipant, ICssStyleCollector, ITheme } from 'vs/platform/theme/common/themeService'; -import { Action } from 'vs/base/common/actions'; -import Severity from 'vs/base/common/severity'; -import * as nls from 'vs/nls'; import * as types from 'vs/base/common/types'; import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement'; import { ScrollbarVisibility } from 'vs/base/common/scrollable'; -import { $, Builder } from 'sql/base/browser/builder'; import * as DOM from 'vs/base/browser/dom'; -import { CommandsRegistry, ICommand, ICommandService } from 'vs/platform/commands/common/commands'; +import { ICommandService } from 'vs/platform/commands/common/commands'; import { MenuRegistry, ICommandAction } from 'vs/platform/actions/common/actions'; import { ContextKeyExpr, IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; @@ -51,7 +45,7 @@ export class TasksWidget extends DashboardWidget implements IDashboardWidget, On private _tasks: Array = []; private _profile: IConnectionProfile; private _scrollableElement: ScrollableElement; - private $container: Builder; + private _tileContainer: HTMLElement; static readonly ICON_PATH_TO_CSS_RULES: Map = new Map(); private _inited = false; @@ -59,16 +53,14 @@ export class TasksWidget extends DashboardWidget implements IDashboardWidget, On @ViewChild('container', { read: ElementRef }) private _container: ElementRef; constructor( - @Inject(forwardRef(() => CommonServiceInterface)) private _bootstrap: CommonServiceInterface, - @Inject(forwardRef(() => DomSanitizer)) private _sanitizer: DomSanitizer, - @Inject(forwardRef(() => ChangeDetectorRef)) private _changeref: ChangeDetectorRef, - @Inject(ICommandService) private commandService: ICommandService, @Inject(WIDGET_CONFIG) protected _config: WidgetConfig, - @Inject(IContextKeyService) contextKeyService: IContextKeyService + @Inject(forwardRef(() => CommonServiceInterface)) private readonly _bootstrap: CommonServiceInterface, + @Inject(ICommandService) private readonly commandService: ICommandService, + @Inject(IContextKeyService) readonly contextKeyService: IContextKeyService ) { super(); this._profile = this._bootstrap.connectionManagementService.connectionInfo.connectionProfile; - let tasksConfig = this._config.widget[selector] as Array; + const tasksConfig = this._config.widget[selector] as Array; let tasks = TaskRegistry.getTasks(); if (types.isArray(tasksConfig) && tasksConfig.length > 0) { @@ -95,10 +87,10 @@ export class TasksWidget extends DashboardWidget implements IDashboardWidget, On this._computeContainer(); this._tasks.map(a => { - this.$container.append(this._createTile(a)); + this._tileContainer.append(this._createTile(a)); }); - this._scrollableElement = this._register(new ScrollableElement(this.$container.getHTMLElement(), { + this._scrollableElement = this._register(new ScrollableElement(this._tileContainer, { horizontal: ScrollbarVisibility.Auto, vertical: ScrollbarVisibility.Hidden, scrollYToX: true, @@ -106,7 +98,7 @@ export class TasksWidget extends DashboardWidget implements IDashboardWidget, On })); this._scrollableElement.onScroll(e => { - this.$container.getHTMLElement().style.right = e.scrollLeft + 'px'; + this._tileContainer.style.right = e.scrollLeft + 'px'; }); (this._container.nativeElement as HTMLElement).appendChild(this._scrollableElement.getDomNode()); @@ -114,43 +106,47 @@ export class TasksWidget extends DashboardWidget implements IDashboardWidget, On // Update scrollbar this._scrollableElement.setScrollDimensions({ width: DOM.getContentWidth(this._container.nativeElement), - scrollWidth: DOM.getContentWidth(this.$container.getHTMLElement()) + 18 // right padding + scrollWidth: DOM.getContentWidth(this._tileContainer) + 18 // right padding }); } private _computeContainer(): void { - let height = DOM.getContentHeight(this._container.nativeElement); - let tilesHeight = Math.floor(height / (this._size + 10)); - let width = (this._size + 18) * Math.ceil(this._tasks.length / tilesHeight); - if (!this.$container) { - this.$container = $('.tile-container'); - this._register(this.$container); + const height = DOM.getContentHeight(this._container.nativeElement); + const tilesHeight = Math.floor(height / (this._size + 10)); + const width = (this._size + 18) * Math.ceil(this._tasks.length / tilesHeight); + if (!this._tileContainer) { + this._tileContainer = DOM.$('.tile-container'); } - this.$container.style('height', height + 'px').style('width', width + 'px'); + this._tileContainer.style.height = height + 'px'; + this._tileContainer.style.width = width + 'px'; } private _createTile(action: ICommandAction): HTMLElement { - let label = $('div').safeInnerHtml(types.isString(action.title) ? action.title : action.title.value); - let tile = $('div.task-tile').style('height', this._size + 'px').style('width', this._size + 'px'); - let innerTile = $('div'); + const label = DOM.$('div'); + label.innerText = types.isString(action.title) ? action.title : action.title.value; + const tile = DOM.$('.task-tile'); + tile.style.height = this._size + 'px'; + tile.style.width = this._size + 'px'; + const innerTile = DOM.$('div'); - let iconClassName = TaskRegistry.getOrCreateTaskIconClassName(action); + const iconClassName = TaskRegistry.getOrCreateTaskIconClassName(action); if (iconClassName) { - let icon = $('span.icon').addClass(iconClassName); + const icon = DOM.$('span.icon'); + DOM.addClass(icon, iconClassName); innerTile.append(icon); } innerTile.append(label); tile.append(innerTile); - tile.attr('tabindex', '0'); - tile.on(DOM.EventType.CLICK, () => this.runTask(action)); - tile.on(DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => { - let event = new StandardKeyboardEvent(e); + tile.setAttribute('tabindex', '0'); + this._register(DOM.addDisposableListener(tile, DOM.EventType.CLICK, () => this.runTask(action))); + this._register(DOM.addDisposableListener(tile, DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => { + const event = new StandardKeyboardEvent(e); if (event.equals(KeyCode.Enter)) { this.runTask(action); e.stopImmediatePropagation(); } - }); - return tile.getHTMLElement(); + })); + return tile; } private registerThemeing(theme: ITheme, collector: ICssStyleCollector) { @@ -175,7 +171,7 @@ export class TasksWidget extends DashboardWidget implements IDashboardWidget, On // Update scrollbar this._scrollableElement.setScrollDimensions({ width: DOM.getContentWidth(this._container.nativeElement), - scrollWidth: DOM.getContentWidth(this.$container.getHTMLElement()) + 18 // right padding + scrollWidth: DOM.getContentWidth(this._tileContainer) + 18 // right padding }); } }