ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-17 17:22:42 -05:00
Code Issues Packages Projects Releases Wiki Activity

Move helper functions into DOM (#10051)

Browse Source 
* Move helper functions into DOM

* Add tests and comments
This commit is contained in:
Charles Gagnon
2020-04-17 13:21:35 -07:00
committed by GitHub
parent b02a5f9e49
commit ea310ff15d
17 changed files with 141 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/sql/workbench/browser/modelComponents/button.component.ts
View File

@@ -19,6 +19,7 @@ import { focusBorder, foreground } from 'vs/platform/theme/common/colorRegistry'
import { Button } from 'sql/base/browser/ui/button/button';
import { Color } from 'vs/base/common/color';
import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom';
@Component({
selector: 'modelview-button',
@@ -116,10 +117,10 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC
}
if (this.width) {
this._button.setWidth(this.convertSize(this.width.toString()));
this._button.setWidth(convertSize(this.width.toString()));
}
if (this.height) {
this._button.setHeight(this.convertSize(this.height.toString()));
this._button.setHeight(convertSize(this.height.toString()));
}
this.updateIcon();
this._changeRef.detectChanges();

5
src/sql/workbench/browser/modelComponents/checkbox.component.ts
View File

@@ -16,6 +16,7 @@ import { attachCheckboxStyler } from 'sql/platform/theme/common/styler';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { isNumber } from 'vs/base/common/types';
import { convertSize } from 'sql/base/browser/dom';
@Component({
selector: 'modelview-checkbox',
@@ -84,10 +85,10 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
this._input.disable();
}
if (this.width || isNumber(this.width)) {
this._input.setWidth(this.convertSize(this.width));
this._input.setWidth(convertSize(this.width));
}
if (this.height || isNumber(this.height)) {
this._input.setHeight(this.convertSize(this.height));
this._input.setHeight(convertSize(this.height));
}
if (this.ariaLabel) {
this._input.ariaLabel = this.ariaLabel;

31
src/sql/workbench/browser/modelComponents/componentBase.ts
View File

@@ -18,9 +18,9 @@ import { URI } from 'vs/base/common/uri';
import * as nls from 'vs/nls';
import { EventType, addDisposableListener } from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { endsWith } from 'vs/base/common/strings';
import { firstIndex } from 'vs/base/common/arrays';
import { IComponentDescriptor, IComponent, IModelStore, IComponentEventArgs, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom';
export type IUserFriendlyIcon = string | URI | { light: string | URI; dark: string | URI };
@@ -215,37 +215,12 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
this.setPropertyFromUI<azdata.ComponentProperties, { [key: string]: string }>((properties, CSSStyles) => { properties.CSSStyles = CSSStyles; }, newValue);
}
public convertSizeToNumber(size: number | string): number {
if (size && typeof (size) === 'string') {
if (endsWith(size.toLowerCase(), 'px')) {
return +size.replace('px', '');
} else if (endsWith(size.toLowerCase(), 'em')) {
return +size.replace('em', '') * 11;
}
} else if (!size) {
return 0;
}
return +size;
}
protected getWidth(): string {
return this.width ? this.convertSize(this.width) : '';
return this.width ? convertSize(this.width) : '';
}
protected getHeight(): string {
return this.height ? this.convertSize(this.height) : '';
}
public convertSize(size: number | string, defaultValue?: string): string {
defaultValue = defaultValue || '';
if (types.isUndefinedOrNull(size)) {
return defaultValue;
}
let convertedSize: string = size ? size.toString() : defaultValue;
if (!endsWith(convertedSize.toLowerCase(), 'px') && !endsWith(convertedSize.toLowerCase(), '%')) {
convertedSize = convertedSize + 'px';
}
return convertedSize;
return this.height ? convertSize(this.height) : '';
}
public get valid(): boolean {

5
src/sql/workbench/browser/modelComponents/componentWithIconBase.ts
View File

@@ -10,6 +10,7 @@ import { createIconCssClass, IUserFriendlyIcon } from 'sql/workbench/browser/mod
import { removeCSSRulesContainingSelector } from 'vs/base/browser/dom';
import { URI } from 'vs/base/common/uri';
import { IComponentDescriptor } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom';
export class ItemDescriptor<T> {
constructor(public descriptor: IComponentDescriptor, public config: T) { }
@@ -40,11 +41,11 @@ export abstract class ComponentWithIconBase extends ComponentBase {
}
public getIconWidth(): string {
return this.convertSize(this.iconWidth, '40px');
return convertSize(this.iconWidth, '40px');
}
public getIconHeight(): string {
return this.convertSize(this.iconHeight, '40px');
return convertSize(this.iconHeight, '40px');
}
public get iconPath(): string | URI | { light: string | URI; dark: string | URI } {

3
src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
View File

@@ -16,6 +16,7 @@ import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
import { find } from 'vs/base/common/arrays';
import { localize } from 'vs/nls';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom';
export enum DeclarativeDataType {
string = 'string',
@@ -161,7 +162,7 @@ export default class DeclarativeTableComponent extends ComponentBase implements
public getColumnWidth(col: number | azdata.DeclarativeTableColumn): string {
let column = typeof col === 'number' ? this.columns[col] : col;
return this.convertSize(column.width, '30px');
return convertSize(column.width, '30px');
}
public getOptions(colIdx: number): string[] {

5
src/sql/workbench/browser/modelComponents/diffeditor.component.ts
View File

@@ -26,6 +26,7 @@ import { ServiceCollection } from 'vs/platform/instantiation/common/serviceColle
import { SimpleProgressIndicator } from 'sql/workbench/services/progress/browser/simpleProgressIndicator';
import { IEditorProgressService } from 'vs/platform/progress/common/progress';
import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
import { convertSizeToNumber } from 'sql/base/browser/dom';
@Component({
template: `
@@ -119,8 +120,8 @@ export default class DiffEditorComponent extends ComponentBase implements ICompo
/// IComponent implementation
public layout(): void {
let width: number = this.convertSizeToNumber(this.width);
let height: number = this.convertSizeToNumber(this.height);
let width: number = convertSizeToNumber(this.width);
let height: number = convertSizeToNumber(this.height);
if (this._isAutoResizable) {
height = Math.max(this._editor.maximumHeight, this._minimumHeight ? this._minimumHeight : 0);
}

5
src/sql/workbench/browser/modelComponents/divContainer.component.ts
View File

@@ -16,6 +16,7 @@ import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBa
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom';
class DivItem {
constructor(public descriptor: IComponentDescriptor, public config: azdata.DivItemLayout) { }
@@ -67,8 +68,8 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout> im
/// IComponent implementation
public setLayout(layout: azdata.DivLayout): void {
this._height = this.convertSize(layout.height);
this._width = this.convertSize(layout.width);
this._height = convertSize(layout.height);
this._width = convertSize(layout.width);
this.layout();
}

5
src/sql/workbench/browser/modelComponents/editor.component.ts
View File

@@ -25,6 +25,7 @@ import { IEditorProgressService } from 'vs/platform/progress/common/progress';
import { SimpleProgressIndicator } from 'sql/workbench/services/progress/browser/simpleProgressIndicator';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
import { convertSizeToNumber } from 'sql/base/browser/dom';
@Component({
template: '',
@@ -111,9 +112,9 @@ export default class EditorComponent extends ComponentBase implements IComponent
/// IComponent implementation
public layout(): void {
let width: number = this.convertSizeToNumber(this.width);
let width: number = convertSizeToNumber(this.width);
let height: number = this.convertSizeToNumber(this.height);
let height: number = convertSizeToNumber(this.height);
if (this._isAutoResizable) {
this._editor.setHeightToScrollHeight();
height = Math.max(this._editor.scrollHeight, this._minimumHeight ? this._minimumHeight : 0);

5
src/sql/workbench/browser/modelComponents/flexContainer.component.ts
View File

@@ -13,6 +13,7 @@ import { FlexLayout, FlexItemLayout } from 'azdata';
import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { IComponentDescriptor, IComponent, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom';
export class FlexItem {
constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) { }
@@ -69,8 +70,8 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
this._alignContent = layout.alignContent ? layout.alignContent : '';
this._textAlign = layout.textAlign ? layout.textAlign : '';
this._position = layout.position ? layout.position : '';
this._height = this.convertSize(layout.height);
this._width = this.convertSize(layout.width);
this._height = convertSize(layout.height);
this._width = convertSize(layout.width);
this._flexWrap = layout.flexWrap ? layout.flexWrap : '';
this.layout();

11
src/sql/workbench/browser/modelComponents/formContainer.component.ts
View File

@@ -14,6 +14,7 @@ import { FormLayout, FormItemLayout } from 'azdata';
import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { find } from 'vs/base/common/arrays';
import { IComponentDescriptor, IComponent, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom';
export interface TitledFormItemLayout {
title: string;
@@ -125,7 +126,7 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
}
public getFormWidth(): string {
return this.convertSize(this._formLayout && this._formLayout.width, '');
return convertSize(this._formLayout && this._formLayout.width, '');
}
public getFormPadding(): string {
@@ -133,17 +134,17 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
}
public getFormHeight(): string {
return this.convertSize(this._formLayout && this._formLayout.height, '');
return convertSize(this._formLayout && this._formLayout.height, '');
}
public getComponentWidth(item: FormItem): string {
let itemConfig = item.config;
return (itemConfig && itemConfig.componentWidth) ? this.convertSize(itemConfig.componentWidth, '') : '';
return (itemConfig && itemConfig.componentWidth) ? convertSize(itemConfig.componentWidth, '') : '';
}
public getRowHeight(item: FormItem): string {
let itemConfig = item.config;
return (itemConfig && itemConfig.componentHeight) ? this.convertSize(itemConfig.componentHeight, '') : '';
return (itemConfig && itemConfig.componentHeight) ? convertSize(itemConfig.componentHeight, '') : '';
}
public isItemRequired(item: FormItem): boolean {
@@ -177,7 +178,7 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
defaultFontSize = '12px';
}
let itemConfig = item.config;
return itemConfig && itemConfig.titleFontSize ? this.convertSize(itemConfig.titleFontSize, defaultFontSize) : defaultFontSize;
return itemConfig && itemConfig.titleFontSize ? convertSize(itemConfig.titleFontSize, defaultFontSize) : defaultFontSize;
}
public getActionComponents(item: FormItem): FormItem[] {

5
src/sql/workbench/browser/modelComponents/inputbox.component.ts
View File

@@ -25,6 +25,7 @@ import * as DOM from 'vs/base/browser/dom';
import { assign } from 'vs/base/common/objects';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { isNumber } from 'vs/base/common/types';
import { convertSize, convertSizeToNumber } from 'sql/base/browser/dom';
@Component({
selector: 'modelview-inputBox',
@@ -193,10 +194,10 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
private layoutInputBox(): void {
if (isNumber(this.width) || this.width) {
this.inputElement.width = this.convertSizeToNumber(this.width);
this.inputElement.width = convertSizeToNumber(this.width);
}
if (isNumber(this.height) || this.height) {
this.inputElement.setHeight(this.convertSize(this.height));
this.inputElement.setHeight(convertSize(this.height));
}
}

7
src/sql/workbench/browser/modelComponents/splitviewContainer.component.ts
View File

@@ -13,6 +13,7 @@ import { Event } from 'vs/base/common/event';
import { SplitView, Orientation, Sizing, IView } from 'vs/base/browser/ui/splitview/splitview';
import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
import { ILogService } from 'vs/platform/log/common/log';
import { convertSize, convertSizeToNumber } from 'sql/base/browser/dom';
class SplitPane implements IView {
orientation: Orientation;
@@ -105,10 +106,10 @@ export default class SplitViewContainer extends ContainerBase<FlexItemLayout> im
this._alignContent = layout.alignContent ? layout.alignContent : '';
this._textAlign = layout.textAlign ? layout.textAlign : '';
this._position = layout.position ? layout.position : '';
this._height = this.convertSize(layout.height);
this._width = this.convertSize(layout.width);
this._height = convertSize(layout.height);
this._width = convertSize(layout.width);
this._orientation = layout.orientation.toLowerCase() === 'vertical' ? Orientation.VERTICAL : Orientation.HORIZONTAL;
this._splitViewHeight = this.convertSizeToNumber(layout.splitViewHeight);
this._splitViewHeight = convertSizeToNumber(layout.splitViewHeight);
if (this._componentWrappers) {
this._componentWrappers.forEach(item => {

5
src/sql/workbench/browser/modelComponents/table.component.ts
View File

@@ -26,6 +26,7 @@ import { KeyMod, KeyCode } from 'vs/base/common/keyCodes';
import { slickGridDataItemColumnValueWithNoData, textFormatter } from 'sql/base/browser/ui/table/formatters';
import { isUndefinedOrNull } from 'vs/base/common/types';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { convertSizeToNumber } from 'sql/base/browser/dom';
export enum ColumnSizingMode {
ForceFit = 0, // all columns will be sized to fit in viewable space, no horiz scroll bar
@@ -182,8 +183,8 @@ export default class TableComponent extends ComponentBase implements IComponent,
}
private layoutTable(): void {
let width: number = this.convertSizeToNumber(this.width);
let height: number = this.convertSizeToNumber(this.height);
let width: number = convertSizeToNumber(this.width);
let height: number = convertSizeToNumber(this.height);
let forceFit: boolean = true;
// convert the tri-state viewmodel columnSizingMode to be either true or false for SlickGrid

5
src/sql/workbench/browser/modelComponents/tree.component.ts
View File

@@ -26,6 +26,7 @@ import { KeyCode } from 'vs/base/common/keyCodes';
import { values } from 'vs/base/common/collections';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { IComponentDescriptor, IComponent, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
import { convertSizeToNumber } from 'sql/base/browser/dom';
class Root implements ITreeComponentItem {
label = {
@@ -143,8 +144,8 @@ export default class TreeComponent extends ComponentBase implements IComponent,
}
private layoutTree(): void {
let width: number = this.convertSizeToNumber(this.width);
let height: number = this.convertSizeToNumber(this.height);
let width: number = convertSizeToNumber(this.width);
let height: number = convertSizeToNumber(this.height);
this._tree.layout(
height && height > 0 ? height : DOM.getContentHeight(this._inputContainer.nativeElement),
width && width > 0 ? width : DOM.getContentWidth(this._inputContainer.nativeElement));