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

fixing the table, form dialog tab layout issues (#1671)

Browse Source
This commit is contained in:
Leila Lali
2018-06-19 10:55:23 -07:00
committed by GitHub
parent 80ab19ac23
commit e686fed209
9 changed files with 52 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/sql/parts/modelComponents/button.component.ts
View File

@@ -93,10 +93,10 @@ export default class ButtonComponent extends ComponentBase implements IComponent
this._button.enabled = this.enabled;
this._button.label = this.label;
if (this.width) {
this._button.setWidth(this.width.toString());
this._button.setWidth(this.convertSize(this.width.toString()));
}
if (this.height) {
this._button.setWidth(this.height.toString());
this._button.setWidth(this.convertSize(this.height.toString()));
}
this.updateIcon();
}

2
src/sql/parts/modelComponents/checkbox.component.ts
View File

@@ -20,7 +20,7 @@ import { attachInputBoxStyler, attachListStyler } from 'vs/platform/theme/common
@Component({
selector: 'modelview-checkbox',
template: `
<div #input style="width: 100%"></div>
<div #input [style.width]="getWidth()"></div>
`
})
export default class CheckBoxComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {

7
src/sql/parts/modelComponents/componentBase.ts
View File

@@ -146,11 +146,12 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
return this.height ? this.convertSize(this.height) : '';
}
protected convertSize(size: number | string): string {
protected convertSize(size: number | string, defaultValue?: string): string {
defaultValue = defaultValue || '';
if (types.isUndefinedOrNull(size)) {
return '100%';
return defaultValue;
}
let convertedSize: string = size ? size.toString() : '100%';
let convertedSize: string = size ? size.toString() : defaultValue;
if (!convertedSize.toLowerCase().endsWith('px') && !convertedSize.toLowerCase().endsWith('%')) {
convertedSize = convertedSize + 'px';
}

24
src/sql/parts/modelComponents/dropdown.component.ts
View File

@@ -145,18 +145,26 @@ export default class DropDownComponent extends ComponentBase implements ICompone
}
private getSelectedValue(): string {
if (this.values && this.valuesHaveDisplayName()) {
let valueCategory = (<sqlops.CategoryValue[]>this.values).find(v => v.name === this.value);
if (this.values && this.values.length > 0 && this.valuesHaveDisplayName()) {
let selectedValue = <sqlops.CategoryValue>this.value || <sqlops.CategoryValue>this.values[0];
if (!this.value) {
this.value = selectedValue;
}
let valueCategory = (<sqlops.CategoryValue[]>this.values).find(v => v.name === selectedValue.name);
return valueCategory && valueCategory.displayName;
} else {
return this.value;
if (!this.value && this.values && this.values.length > 0) {
this.value = <string>this.values[0];
}
return <string>this.value;
}
}
private setSelectedValue(newValue: string): void {
if (this.values && this.valuesHaveDisplayName()) {
let valueCategory = (<sqlops.CategoryValue[]>this.values).find(v => v.displayName === newValue);
this.value = valueCategory && valueCategory.name;
this.value = valueCategory;
} else {
this.value = newValue;
}
@@ -164,8 +172,8 @@ export default class DropDownComponent extends ComponentBase implements ICompone
// CSS-bound properties
private get value(): string {
return this.getPropertyOrDefault<sqlops.DropDownProperties, string>((props) => props.value, '');
private get value(): string | sqlops.CategoryValue {
return this.getPropertyOrDefault<sqlops.DropDownProperties, string | sqlops.CategoryValue>((props) => props.value, '');
}
private get editable(): boolean {
@@ -180,8 +188,8 @@ export default class DropDownComponent extends ComponentBase implements ICompone
return !this.editable ? '' : 'none';
}
private set value(newValue: string) {
this.setPropertyFromUI<sqlops.DropDownProperties, string>(this.setValueProperties, newValue);
private set value(newValue: string | sqlops.CategoryValue) {
this.setPropertyFromUI<sqlops.DropDownProperties, string | sqlops.CategoryValue>(this.setValueProperties, newValue);
}
private get values(): string[] | sqlops.CategoryValue[] {

27
src/sql/parts/modelComponents/formContainer.component.ts
View File

@@ -16,13 +16,15 @@ import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboar
import { ContainerBase } from 'sql/parts/modelComponents/componentBase';
import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
import { getContentHeight, getContentWidth, Dimension } from 'vs/base/browser/dom';
export interface TitledFormItemLayout {
title: string;
actions?: string[];
isFormComponent: Boolean;
horizontal: boolean;
componentWidth: number;
componentWidth?: number | string;
componentHeight?: number | string;
}
export interface FormLayout {
@@ -37,7 +39,7 @@ class FormItem {
template: `
<div #container *ngIf="items" class="form-table" [style.width]="getFormWidth()" [style.height]="getFormHeight()">
<ng-container *ngFor="let item of items">
<div class="form-row" *ngIf="isFormComponent(item)">
<div class="form-row" *ngIf="isFormComponent(item)" [style.height]="getRowHeight(item)">
<ng-container *ngIf="isHorizontal(item)">
<div class="form-cell">{{getItemTitle(item)}}</div>
@@ -56,10 +58,10 @@ class FormItem {
</div>
</div>
</ng-container>
<div class="form-vertical-container" *ngIf="isVertical(item)">
<div class="form-vertical-container" *ngIf="isVertical(item)" [style.height]="getRowHeight(item)">
<div class="form-item-row">{{getItemTitle(item)}}</div>
<div class="form-item-row" [style.width]="getComponentWidth(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)">
<div class="form-item-row" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)">
</model-component-wrapper>
</div>
<div *ngIf="itemHasActions(item)" class="form-item-row form-actions-table form-item-last-row">
@@ -101,6 +103,10 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
ngAfterViewInit(): void {
}
public layout(): void {
super.layout();
}
/// IComponent implementation
public get alignItems(): string {
@@ -112,16 +118,21 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
}
private getFormWidth(): string {
return this.convertSize(this._formLayout && this._formLayout.width);
return this.convertSize(this._formLayout && this._formLayout.width, '100%');
}
private getFormHeight(): string {
return this.convertSize(this._formLayout && this._formLayout.height);
return this.convertSize(this._formLayout && this._formLayout.height, '100%');
}
private getComponentWidth(item: FormItem): string {
let itemConfig = item.config;
return (itemConfig && itemConfig.componentWidth) ? itemConfig.componentWidth + 'px' : '';
return (itemConfig && itemConfig.componentWidth) ? this.convertSize(itemConfig.componentWidth, '') : '';
}
private getRowHeight(item: FormItem): string {
let itemConfig = item.config;
return (itemConfig && itemConfig.componentHeight) ? this.convertSize(itemConfig.componentHeight, '') : '';
}
private getItemTitle(item: FormItem): string {

5
src/sql/parts/modelComponents/table.component.ts
View File

@@ -23,7 +23,7 @@ import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectio
@Component({
selector: 'modelview-table',
template: `
<div #table style="width: 100%"></div>
<div #table style="width: 100%;height:100%"></div>
`
})
export default class TableComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
@@ -92,9 +92,8 @@ export default class TableComponent extends ComponentBase implements IComponent,
let options = <Slick.GridOptions<any>>{
syncColumnCellResize: true,
enableColumnReorder: false,
rowHeight: 45,
enableCellNavigation: true,
forceFitColumns: true
forceFitColumns: true,
};
this._table = new Table<Slick.SlickData>(this._inputContainer.nativeElement, this._tableData, this._tableColumns, options);

3
src/sql/platform/dialog/dialogPane.ts
View File

@@ -67,6 +67,7 @@ export class DialogPane extends Disposable implements IThemable {
this._body.appendChild(tabContainer);
this.initializeModelViewContainer(tabContainer, tab.content, tab);
this._tabbedPanel.onTabChange(e => {
tabContainer.style.height = (this.getTabDimension().height - this._tabbedPanel.headersize) + 'px';
this._onTabChange.fire(tab.content);
});
this._tabbedPanel.pushTab({
@@ -91,7 +92,7 @@ export class DialogPane extends Disposable implements IThemable {
}
private getTabDimension(): DOM.Dimension {
return new DOM.Dimension(DOM.getContentWidth(this._body), DOM.getContentHeight(this._body))
return new DOM.Dimension(DOM.getContentWidth(this._body), DOM.getContentHeight(this._body));
}
public layout(): void {

7
src/sql/sqlops.proposed.d.ts vendored
View File

@@ -232,7 +232,8 @@ declare module 'sqlops' {
export interface FormItemLayout {
horizontal?: boolean;
componentWidth?: number;
componentWidth?: number | string;
componentHeight?: number | string;
}
export interface FormLayout {
@@ -354,7 +355,7 @@ declare module 'sqlops' {
}
export interface DropDownProperties extends ComponentProperties {
value?: string;
value?: string | CategoryValue;
values?: string[] | CategoryValue[];
editable?: boolean;
}
@@ -418,7 +419,7 @@ declare module 'sqlops' {
}
export interface DropDownComponent extends Component, DropDownProperties {
value: string;
value: string | CategoryValue;
values: string[] | CategoryValue[];
onValueChanged: vscode.Event<any>;
}

4
src/sql/workbench/api/node/extHostModelView.ts
View File

@@ -771,10 +771,10 @@ class DropDownWrapper extends ComponentWrapper implements sqlops.DropDownCompone
this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<any>());
}
public get value(): string {
public get value(): string | sqlops.CategoryValue {
return this.properties['value'];
}
public set value(v: string) {
public set value(v: string | sqlops.CategoryValue) {
this.setProperty('value', v);
}