From b045e536c1534683b5f2a836090ecc7c3eef75ed Mon Sep 17 00:00:00 2001 From: Anthony Dresser Date: Sun, 25 Mar 2018 10:48:59 -0700 Subject: [PATCH] Revert "Revert "Results grid options (#962)"" (#982) * Revert "Revert "Results grid options (#962)" (#979)" This reverts commit ab91c88b342543fe213218a07419eacdb0bd9530. * fix angular2-slickgrid compiled files --- extensions-modules/yarn.lock | 6 +- package.json | 2 +- .../grid/views/query/query.component.html | 3 +- .../parts/grid/views/query/query.component.ts | 11 +++ .../parts/query/common/queryResultsInput.ts | 1 + .../parts/query/editor/queryResultsEditor.ts | 80 ++++++++++++++++- .../query/editor/resultsGridContribution.ts | 70 +++++++++++++++ .../modules/angular2-slickgrid/index.d.ts | 85 ++++++++++--------- .../modules/angular2-slickgrid/typings.json | 5 +- src/vs/workbench/workbench.main.ts | 1 + yarn.lock | 6 +- 11 files changed, 219 insertions(+), 51 deletions(-) create mode 100644 src/sql/parts/query/editor/resultsGridContribution.ts diff --git a/extensions-modules/yarn.lock b/extensions-modules/yarn.lock index 42bbfd36af..534df734e0 100644 --- a/extensions-modules/yarn.lock +++ b/extensions-modules/yarn.lock @@ -1941,7 +1941,7 @@ vscode-extension-telemetry@0.0.8: applicationinsights "0.18.0" winreg "1.2.3" -vscode-jsonrpc@3.5.0, vscode-jsonrpc@^3.5.0: +vscode-jsonrpc@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-3.5.0.tgz#87239d9e166b2d7352245b8a813597804c1d63aa" @@ -1951,14 +1951,14 @@ vscode-languageclient@3.5.0: dependencies: vscode-languageserver-protocol "^3.5.0" -vscode-languageserver-protocol@3.5.0, vscode-languageserver-protocol@^3.5.0: +vscode-languageserver-protocol@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.5.0.tgz#067c5cbe27709795398d119692c97ebba1452209" dependencies: vscode-jsonrpc "^3.5.0" vscode-languageserver-types "^3.5.0" -vscode-languageserver-types@3.5.0, vscode-languageserver-types@^3.5.0: +vscode-languageserver-types@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.5.0.tgz#e48d79962f0b8e02de955e3f524908e2b19c0374" diff --git a/package.json b/package.json index 040b0994a0..8e44b4c017 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "@angular/router": "~4.1.3", "@angular/upgrade": "~4.1.3", "angular2-grid": "2.0.6", - "angular2-slickgrid": "git://github.com/Microsoft/angular2-slickgrid.git#1.3.9", + "angular2-slickgrid": "git://github.com/Microsoft/angular2-slickgrid.git#1.3.11", "applicationinsights": "0.17.1", "chart.js": "^2.6.0", "core-js": "^2.4.1", diff --git a/src/sql/parts/grid/views/query/query.component.html b/src/sql/parts/grid/views/query/query.component.html index 96e8c37b51..81e3085794 100644 --- a/src/sql/parts/grid/views/query/query.component.html +++ b/src/sql/parts/grid/views/query/query.component.html @@ -26,7 +26,8 @@ (mousedown)="navigateToGrid(i)" [selectionModel]="selectionModel" [plugins]="slickgridPlugins" - class="boxCol content vertBox slickgrid"> + class="boxCol content vertBox slickgrid" + [rowHeight]="rowHeight">
diff --git a/src/sql/parts/grid/views/query/query.component.ts b/src/sql/parts/grid/views/query/query.component.ts index dbf749dd8b..9e6c1fdd56 100644 --- a/src/sql/parts/grid/views/query/query.component.ts +++ b/src/sql/parts/grid/views/query/query.component.ts @@ -133,6 +133,7 @@ export class QueryComponent extends GridParentComponent implements OnInit, OnDes private resizing = false; private resizeHandleTop: string = '0'; private scrollEnabled = true; + private rowHeight: number; // tslint:disable-next-line:no-unused-variable private firstRender = true; private totalElapsedTimeSpan: number; @@ -157,6 +158,16 @@ export class QueryComponent extends GridParentComponent implements OnInit, OnDes ) { super(el, cd, bootstrapService); this._el.nativeElement.className = 'slickgridContainer'; + this.rowHeight = bootstrapService.configurationService.getValue('resultsGrid').rowHeight; + bootstrapService.configurationService.onDidChangeConfiguration(e => { + if (e.affectsConfiguration('resultsGrid')) { + this.rowHeight = bootstrapService.configurationService.getValue('resultsGrid').rowHeight; + this.slickgrids.forEach(i => { + i.rowHeight = this.rowHeight; + }); + this.resizeGrids(); + } + }); } /** diff --git a/src/sql/parts/query/common/queryResultsInput.ts b/src/sql/parts/query/common/queryResultsInput.ts index c22bf123ae..2a0cb23586 100644 --- a/src/sql/parts/query/common/queryResultsInput.ts +++ b/src/sql/parts/query/common/queryResultsInput.ts @@ -23,6 +23,7 @@ export class QueryResultsInput extends EditorInput { // Holds the HTML content for the editor when the editor discards this input and loads another private _editorContainer: HTMLElement; + public css: HTMLStyleElement; constructor(private _uri: string) { super(); diff --git a/src/sql/parts/query/editor/queryResultsEditor.ts b/src/sql/parts/query/editor/queryResultsEditor.ts index dae64393cb..2822520cbb 100644 --- a/src/sql/parts/query/editor/queryResultsEditor.ts +++ b/src/sql/parts/query/editor/queryResultsEditor.ts @@ -11,16 +11,60 @@ import { EditorOptions } from 'vs/workbench/common/editor'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { RawContextKey } from 'vs/platform/contextkey/common/contextkey'; import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor'; +import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; +import { BareFontInfo } from 'vs/editor/common/config/fontInfo'; +import { getZoomLevel } from 'vs/base/browser/browser'; +import { Configuration } from 'vs/editor/browser/config/configuration'; +import { IThemeService } from 'vs/platform/theme/common/themeService'; +import * as dom from 'vs/base/browser/dom'; +import * as types from 'vs/base/common/types'; + import { QueryResultsInput } from 'sql/parts/query/common/queryResultsInput'; import { IQueryModelService } from 'sql/parts/query/execution/queryModel'; import { IBootstrapService } from 'sql/services/bootstrap/bootstrapService'; import { QueryComponentParams } from 'sql/services/bootstrap/bootstrapParams'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; import { QueryOutputModule } from 'sql/parts/query/views/queryOutput.module'; import { QUERY_OUTPUT_SELECTOR } from 'sql/parts/query/views/queryOutput.component'; +export const RESULTS_GRID_DEFAULTS = { + cellPadding: [6, 10, 5], + rowHeight: 29 +}; + export const TextCompareEditorVisible = new RawContextKey('textCompareEditorVisible', false); +export class BareResultsGridInfo extends BareFontInfo { + + public static createFromRawSettings(opts: { + fontFamily?: string; + fontWeight?: string; + fontSize?: number | string; + lineHeight?: number | string; + letterSpacing?: number | string; + cellPadding?: number | number[]; + }, zoomLevel: number): BareResultsGridInfo { + let cellPadding = !types.isUndefinedOrNull(opts.cellPadding) ? opts.cellPadding : RESULTS_GRID_DEFAULTS.cellPadding; + + return new BareResultsGridInfo(BareFontInfo.createFromRawSettings(opts, zoomLevel), { cellPadding }); + } + + readonly cellPadding: number | number[]; + + protected constructor(fontInfo: BareFontInfo, opts: { + cellPadding: number | number[]; + }) { + super({ + zoomLevel: fontInfo.zoomLevel, + fontFamily: fontInfo.fontFamily, + fontWeight: fontInfo.fontWeight, + fontSize: fontInfo.fontSize, + lineHeight: fontInfo.lineHeight, + letterSpacing: fontInfo.letterSpacing + }); + this.cellPadding = opts.cellPadding; + } +} + /** * Editor associated with viewing and editing the data of a query results grid. */ @@ -28,14 +72,45 @@ export class QueryResultsEditor extends BaseEditor { public static ID: string = 'workbench.editor.queryResultsEditor'; public static AngularSelectorString: string = 'slickgrid-container.slickgridContainer'; + protected _rawOptions: BareResultsGridInfo; + protected _input: QueryResultsInput; constructor( @ITelemetryService telemetryService: ITelemetryService, @IThemeService themeService: IThemeService, @IQueryModelService private _queryModelService: IQueryModelService, - @IBootstrapService private _bootstrapService: IBootstrapService + @IBootstrapService private _bootstrapService: IBootstrapService, + @IConfigurationService private _configurationService: IConfigurationService ) { super(QueryResultsEditor.ID, telemetryService, themeService); + this._rawOptions = BareResultsGridInfo.createFromRawSettings(this._configurationService.getValue('resultsGrid'), getZoomLevel()); + this._configurationService.onDidChangeConfiguration(e => { + if (e.affectsConfiguration('resultsGrid')) { + this._rawOptions = BareResultsGridInfo.createFromRawSettings(this._configurationService.getValue('resultsGrid'), getZoomLevel()); + this.applySettings(); + } + }); + } + + public get input(): QueryResultsInput { + return this._input; + } + + private applySettings() { + if (this.input && this.input.container) { + Configuration.applyFontInfoSlow(this.getContainer().getHTMLElement(), this._rawOptions); + if (!this.input.css) { + this.input.css = dom.createStyleSheet(this.input.container); + } + let cssRuleText = ''; + if (types.isNumber(this._rawOptions.cellPadding)) { + cssRuleText = this._rawOptions.cellPadding + 'px'; + } else { + cssRuleText = this._rawOptions.cellPadding.join('px ') + 'px;'; + } + let content = `.grid .slick-cell { padding: ${cssRuleText}; }`; + this.input.css.innerHTML = content; + } } createEditor(parent: Builder): void { @@ -46,6 +121,7 @@ export class QueryResultsEditor extends BaseEditor { setInput(input: QueryResultsInput, options: EditorOptions): TPromise { super.setInput(input, options); + this.applySettings(); if (!input.hasBootstrapped) { this._bootstrapAngular(); } diff --git a/src/sql/parts/query/editor/resultsGridContribution.ts b/src/sql/parts/query/editor/resultsGridContribution.ts new file mode 100644 index 0000000000..09a715fb30 --- /dev/null +++ b/src/sql/parts/query/editor/resultsGridContribution.ts @@ -0,0 +1,70 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +'use strict'; +import { Extensions, IConfigurationRegistry, IConfigurationNode, ConfigurationScope } from 'vs/platform/configuration/common/configurationRegistry'; +import { Registry } from 'vs/platform/registry/common/platform'; +import * as nls from 'vs/nls'; +import * as editorOptions from 'vs/editor/common/config/editorOptions'; +import EDITOR_DEFAULTS = editorOptions.EDITOR_DEFAULTS; +import EDITOR_FONT_DEFAULTS = editorOptions.EDITOR_FONT_DEFAULTS; +import EDITOR_MODEL_DEFAULTS = editorOptions.EDITOR_MODEL_DEFAULTS; + +import { RESULTS_GRID_DEFAULTS } from 'sql/parts/query/editor/queryResultsEditor'; + +const configurationRegistry = Registry.as(Extensions.Configuration); + +const resultsGridConfiguration: IConfigurationNode = { + id: 'resultsGrid', + type: 'object', + title: nls.localize('resultsGridConfigurationTitle', "Results Grid"), + overridable: true, + scope: ConfigurationScope.RESOURCE, + properties: { + 'resultsGrid.fontFamily': { + type: 'string', + default: EDITOR_FONT_DEFAULTS.fontFamily, + description: nls.localize('fontFamily', "Controls the font family.") + }, + 'resultsGrid.fontWeight': { + type: 'string', + enum: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'], + default: EDITOR_FONT_DEFAULTS.fontWeight, + description: nls.localize('fontWeight', "Controls the font weight.") + }, + 'resultsGrid.fontSize': { + type: 'number', + default: EDITOR_FONT_DEFAULTS.fontSize, + description: nls.localize('fontSize', "Controls the font size in pixels.") + }, + 'resultsGrid.letterSpacing': { + type: 'number', + default: EDITOR_FONT_DEFAULTS.letterSpacing, + description: nls.localize('letterSpacing', "Controls the letter spacing in pixels.") + }, + 'resultsGrid.rowHeight': { + type: 'number', + default: RESULTS_GRID_DEFAULTS.rowHeight, + description: nls.localize('rowHeight', "Controls the row height in pixels") + }, + 'resultsGrid.cellPadding': { + oneOf: [ + { + type: 'number' + }, + { + type: 'array', + items: { + type: 'number' + } + } + ], + default: RESULTS_GRID_DEFAULTS.cellPadding, + description: nls.localize('cellPadding', "Controls the cell padding in pixels") + } + } +}; + +configurationRegistry.registerConfiguration(resultsGridConfiguration); diff --git a/src/typings/modules/angular2-slickgrid/index.d.ts b/src/typings/modules/angular2-slickgrid/index.d.ts index 30a25152d0..ecdbf3b92b 100644 --- a/src/typings/modules/angular2-slickgrid/index.d.ts +++ b/src/typings/modules/angular2-slickgrid/index.d.ts @@ -1,8 +1,8 @@ // Generated by typings -// Source: node_modules/angular2-slickgrid/components/js/gridsync.service.d.ts -declare module '~angular2-slickgrid/components/js/gridsync.service' { +// Source: node_modules/angular2-slickgrid/out/js/gridsync.service.d.ts +declare module '~angular2-slickgrid/out/js/gridsync.service' { import { Observable } from 'rxjs/Rx'; -import { SelectionModel } from '~angular2-slickgrid/components/js/selectionmodel'; +import { SelectionModel } from '~angular2-slickgrid/out/js/selectionModel'; export class GridSyncService { columnMinWidthPX: number; private _scrollLeftPX; @@ -30,13 +30,13 @@ export class GridSyncService { private notifyUpdates(propertyName); } } -declare module 'angular2-slickgrid/components/js/gridsync.service' { -export * from '~angular2-slickgrid/components/js/gridsync.service'; +declare module 'angular2-slickgrid/out/js/gridsync.service' { +export * from '~angular2-slickgrid/out/js/gridsync.service'; } // Generated by typings -// Source: node_modules/angular2-slickgrid/components/js/interfaces.d.ts -declare module '~angular2-slickgrid/components/js/interfaces' { +// Source: node_modules/angular2-slickgrid/out/js/interfaces.d.ts +declare module '~angular2-slickgrid/out/js/interfaces' { import { Observable } from 'rxjs/Rx'; export enum NotificationType { Error = 0, @@ -90,14 +90,14 @@ export interface IGridDataRow { values: any[]; } } -declare module 'angular2-slickgrid/components/js/interfaces' { -export * from '~angular2-slickgrid/components/js/interfaces'; +declare module 'angular2-slickgrid/out/js/interfaces' { +export * from '~angular2-slickgrid/out/js/interfaces'; } // Generated by typings -// Source: node_modules/angular2-slickgrid/components/js/selectionmodel.d.ts -declare module '~angular2-slickgrid/components/js/selectionmodel' { -import { ISelectionRange } from '~angular2-slickgrid/components/js/interfaces'; +// Source: node_modules/angular2-slickgrid/out/js/selectionModel.d.ts +declare module '~angular2-slickgrid/out/js/selectionModel' { +import { ISelectionRange } from '~angular2-slickgrid/out/js/interfaces'; export class SelectionModel implements ISlickSelectionModel { private _rowSelectionModel; private _handler; @@ -156,17 +156,17 @@ export interface ISlickGrid { getDataLength(): number; } } -declare module 'angular2-slickgrid/components/js/selectionmodel' { -export * from '~angular2-slickgrid/components/js/selectionmodel'; +declare module 'angular2-slickgrid/out/js/selectionModel' { +export * from '~angular2-slickgrid/out/js/selectionModel'; } // Generated by typings -// Source: node_modules/angular2-slickgrid/components/js/slickgrid.d.ts -declare module '~angular2-slickgrid/components/js/slickgrid' { +// Source: node_modules/angular2-slickgrid/out/js/slickGrid.d.ts +declare module '~angular2-slickgrid/out/js/slickGrid' { import { OnChanges, OnInit, OnDestroy, SimpleChange, EventEmitter, AfterViewInit } from '@angular/core'; import { Observable } from 'rxjs/Rx'; -import { IObservableCollection, IGridDataRow, IColumnDefinition } from '~angular2-slickgrid/components/js/interfaces'; -import { ISlickRange, ISlickEvent } from '~angular2-slickgrid/components/js/selectionmodel'; +import { IObservableCollection, IGridDataRow, IColumnDefinition } from '~angular2-slickgrid/out/js/interfaces'; +import { ISlickRange } from '~angular2-slickgrid/out/js/selectionModel'; export class SlickGrid implements OnChanges, OnInit, OnDestroy, AfterViewInit { private _el; private _gridSyncService; @@ -184,17 +184,22 @@ export class SlickGrid implements OnChanges, OnInit, OnDestroy, AfterViewInit { showDataTypeIcon: boolean; enableColumnReorder: boolean; enableAsyncPostRender: boolean; - selectionModel: string; - plugins: string[]; + selectionModel: string | Slick.SelectionModel; + plugins: Array>; enableEditing: boolean; topRowNumber: number; overrideCellFn: (rowNumber, columnId, value?, data?) => string; isColumnEditable: (column: number) => boolean; isCellEditValid: (row: number, column: number, newValue: any) => boolean; + private _rowHeight; loadFinished: EventEmitter; editingFinished: EventEmitter; contextMenu: EventEmitter; topRowNumberChange: EventEmitter; + activeCellChanged: EventEmitter<{ + row: number; + column: number; + }>; cellEditBegin: EventEmitter<{ row: number; column: number; @@ -211,11 +216,11 @@ export class SlickGrid implements OnChanges, OnInit, OnDestroy, AfterViewInit { row: number; }>; onFocus(): void; + rowHeight: number; private _grid; private _gridColumns; private _columnNameToIndex; private _gridData; - private _rowHeight; private _resizeSubscription; private _gridSyncSubscription; private _topRow; @@ -231,11 +236,11 @@ export class SlickGrid implements OnChanges, OnInit, OnDestroy, AfterViewInit { ngOnDestroy(): void; enterEditSession(): void; endEditSession(): void; - readonly onSelectedRowsChanged: ISlickEvent; + readonly onSelectedRowsChanged: Slick.Event>; getSelectedRows(): number[]; getColumnIndex(name: string): number; getSelectedRanges(): ISlickRange[]; - registerPlugin(plugin: string): void; + registerPlugin(plugin: Slick.Plugin | string): void; setActive(): void; selection: ISlickRange[] | boolean; subscribeToContextMenu(): void; @@ -258,14 +263,14 @@ export class SlickGrid implements OnChanges, OnInit, OnDestroy, AfterViewInit { private renderGridDataRowsRange(startIndex, count); } } -declare module 'angular2-slickgrid/components/js/slickgrid' { -export * from '~angular2-slickgrid/components/js/slickgrid'; +declare module 'angular2-slickgrid/out/js/slickGrid' { +export * from '~angular2-slickgrid/out/js/slickGrid'; } // Generated by typings -// Source: node_modules/angular2-slickgrid/components/js/virtualizedcollection.d.ts -declare module '~angular2-slickgrid/components/js/virtualizedcollection' { -import { IObservableCollection, CollectionChange } from '~angular2-slickgrid/components/js/interfaces'; +// Source: node_modules/angular2-slickgrid/out/js/virtualizedCollection.d.ts +declare module '~angular2-slickgrid/out/js/virtualizedCollection' { +import { IObservableCollection, CollectionChange } from '~angular2-slickgrid/out/js/interfaces'; export class VirtualizedCollection implements IObservableCollection { private _placeHolderGenerator; private _length; @@ -284,22 +289,22 @@ export class VirtualizedCollection implements IObservableCollection