remove builder from taskswidget (#4866)

This commit is contained in:
Anthony Dresser
2019-04-08 13:28:23 -07:00
committed by GitHub
parent 22ec1d5f0a
commit 0975e6834e

View File

@@ -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<ICommandAction> = [];
private _profile: IConnectionProfile;
private _scrollableElement: ScrollableElement;
private $container: Builder;
private _tileContainer: HTMLElement;
static readonly ICON_PATH_TO_CSS_RULES: Map<string /* path*/, string /* CSS rule */> = new Map<string, string>();
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<string | ITask>;
const tasksConfig = this._config.widget[selector] as Array<string | ITask>;
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
});
}
}