javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-26 11:17:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

GridUnitType enum + fixes

Browse Source
This commit is contained in:
Rossen Hristov
2016-12-20 11:21:31 +02:00
parent 00c0760d91
commit 9236517fcb
7 changed files with 85 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/app/ui-tests-app/layouts-percent/grid.ts
View File

@ -1,38 +1,38 @@
import * as buttonModule from "ui/button";
import * as pageModule from "ui/page";
import * as gridLayoutModule from "ui/layouts/grid-layout";
import * as model from "./myview";
import * as model from "./myview";
import { Button } from "ui/button";
import { Page } from "ui/page";
import { GridLayout, ItemSpec, GridUnitType } from "ui/layouts/grid-layout";
export function onLoaded(args: { eventName: string, object: any }) {
var page = <pageModule.Page>args.object;
var page = <Page>args.object;
page.bindingContext = new model.ViewModel();
}
export function onAddRowColumn(args: { eventName: string, object: any }) {
var layout = <gridLayoutModule.GridLayout>args.object.parent.parent;
var row = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto);
var column = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto);
var layout = <GridLayout>args.object.parent.parent;
var row = new ItemSpec(1, GridUnitType.AUTO);
var column = new ItemSpec(1, GridUnitType.AUTO);
layout.addRow(row);
layout.addColumn(column);
var btn0 = new buttonModule.Button();
var btn1 = new buttonModule.Button();
var btn0 = new Button();
var btn1 = new Button();
btn0.id = "b0";
btn1.id = "b1";
btn0.text = "b0";
btn1.text = "b1";
layout.addChild(btn0);
layout.addChild(btn1);
gridLayoutModule.GridLayout.setRow(btn0, 0);
gridLayoutModule.GridLayout.setColumn(btn0, 4);
gridLayoutModule.GridLayout.setRow(btn1, 4);
gridLayoutModule.GridLayout.setColumn(btn1, 0);
gridLayoutModule.GridLayout.setColumnSpan(btn1, 2);
gridLayoutModule.GridLayout.setRowSpan(btn0, 3);
GridLayout.setRow(btn0, 0);
GridLayout.setColumn(btn0, 4);
GridLayout.setRow(btn1, 4);
GridLayout.setColumn(btn1, 0);
GridLayout.setColumnSpan(btn1, 2);
GridLayout.setRowSpan(btn0, 3);
}
export function onRemoveRowColumn(args: { eventName: string, object: any }) {
var layout = <gridLayoutModule.GridLayout>args.object.parent.parent;
var layout = <GridLayout>args.object.parent.parent;
var itemSpecs, count;
itemSpecs = layout.getRows();
count = itemSpecs.length;

34
apps/app/ui-tests-app/layouts/grid.ts
View File

@ -1,38 +1,38 @@
import * as buttonModule from "ui/button";
import * as pageModule from "ui/page";
import * as gridLayoutModule from "ui/layouts/grid-layout";
import * as model from "./myview";
import * as model from "./myview";
import { Button } from "ui/button";
import { Page } from "ui/page";
import { GridLayout, ItemSpec, GridUnitType } from "ui/layouts/grid-layout";
export function onLoaded(args: { eventName: string, object: any }) {
var page = <pageModule.Page>args.object;
var page = <Page>args.object;
page.bindingContext = new model.ViewModel();
}
export function onAddRowColumn(args: { eventName: string, object: any }) {
var layout = <gridLayoutModule.GridLayout>args.object.parent.parent;
var row = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto);
var column = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto);
var layout = <GridLayout>args.object.parent.parent;
var row = new ItemSpec(1, GridUnitType.AUTO);
var column = new ItemSpec(1, GridUnitType.AUTO);
layout.addRow(row);
layout.addColumn(column);
var btn0 = new buttonModule.Button();
var btn1 = new buttonModule.Button();
var btn0 = new Button();
var btn1 = new Button();
btn0.id = "b0";
btn1.id = "b1";
btn0.text = "b0";
btn1.text = "b1";
layout.addChild(btn0);
layout.addChild(btn1);
gridLayoutModule.GridLayout.setRow(btn0, 0);
gridLayoutModule.GridLayout.setColumn(btn0, 4);
gridLayoutModule.GridLayout.setRow(btn1, 4);
gridLayoutModule.GridLayout.setColumn(btn1, 0);
gridLayoutModule.GridLayout.setColumnSpan(btn1, 2);
gridLayoutModule.GridLayout.setRowSpan(btn0, 3);
GridLayout.setRow(btn0, 0);
GridLayout.setColumn(btn0, 4);
GridLayout.setRow(btn1, 4);
GridLayout.setColumn(btn1, 0);
GridLayout.setColumnSpan(btn1, 2);
GridLayout.setRowSpan(btn0, 3);
}
export function onRemoveRowColumn(args: { eventName: string, object: any }) {
var layout = <gridLayoutModule.GridLayout>args.object.parent.parent;
var layout = <GridLayout>args.object.parent.parent;
var itemSpecs, count;
itemSpecs = layout.getRows();
count = itemSpecs.length;

25
apps/app/ui-tests-app/page/page-status-bar-css.ts
View File

@ -1,10 +1,9 @@
import * as color from "color";
import * as page from "ui/page";
import * as style from "ui/styling/style";
import * as view from "ui/core/view";
import { Color } from "color";
import { Page } from "ui/page";
import { View, unsetValue } from "ui/core/view";
export function applyTap(args) {
let page = <page.Page>(<view.View>args.object).page;
let page = <Page>(<View>args.object).page;
reset(page);
@ -13,17 +12,17 @@ export function applyTap(args) {
}
export function applyTapOnStyledActionBar(args) {
let page = <page.Page>(<view.View>args.object).page;
let page = <Page>(<View>args.object).page;
reset(page);
page.actionBar.backgroundColor = new color.Color("#5DFC0A");
page.actionBar.backgroundColor = new Color("#5DFC0A");
var css = "#test-element { " + args.object.tag + " }";
page.css = css;
}
export function applyTapWithHiddenActionBar(args) {
let page = <page.Page>(<view.View>args.object).page;
let page = <Page>(<View>args.object).page;
reset(page);
@ -33,7 +32,7 @@ export function applyTapWithHiddenActionBar(args) {
}
export function applyTapWithSpan(args) {
let page = <page.Page>(<view.View>args.object).page;
let page = <Page>(<View>args.object).page;
reset(page);
@ -43,18 +42,18 @@ export function applyTapWithSpan(args) {
}
export function applyTapOnStyledActionBarAndSpan(args) {
let page = <page.Page>(<view.View>args.object).page;
let page = <Page>(<View>args.object).page;
reset(page);
page.backgroundSpanUnderStatusBar = true;
page.actionBar.backgroundColor = new color.Color("#E0115F");
page.actionBar.backgroundColor = new Color("#E0115F");
var css = "#test-element { " + args.object.tag + " }";
page.css = css;
}
export function applyTapWithActionBarHiddenAndSpan(args) {
let page = <page.Page>(<view.View>args.object).page;
let page = <Page>(<View>args.object).page;
reset(page);
@ -64,7 +63,7 @@ export function applyTapWithActionBarHiddenAndSpan(args) {
page.css = css;
}
function reset(page: page.Page) {
function reset(page: Page) {
page.css = "";
page.actionBarHidden = false;
page.backgroundSpanUnderStatusBar = false;

2
apps/app/ui-tests-app/pages/pan-event.ts
View File

@ -7,7 +7,7 @@ import { TextView } from "ui/text-view";
var view: View;
export function navigatingTo(args: EventData) {
var page = <Page>args.object;
view = page.getViewById("target");
view = <View>page.getViewById("target");
}
export function onPan(data: PanGestureEventData) {

43
tns-core-modules/ui/layouts/grid-layout/grid-layout-common.ts
View File

@ -1,5 +1,5 @@
import { GridLayout as GridLayoutDefinition, ItemSpec as ItemSpecDefinition } from "ui/layouts/grid-layout";
import { LayoutBase, View, Observable, Property } from "ui/layouts/layout-base";
import { LayoutBase, View, Observable, Property, makeParser, makeValidator } from "ui/layouts/layout-base";
export * from "ui/layouts/layout-base";
@ -24,14 +24,6 @@ View.prototype.col = 0;
View.prototype.rowSpan = 1;
View.prototype.colSpan = 1;
function convertUnitType(value: string): "pixel" | "star" | "auto" {
if (value === "pixel" || value === "star" || value === "auto") {
return <"pixel" | "star" | "auto">value;
}
throw new Error(`Invalid value for unitType: ${value}`);
}
function validateItemSpec(itemSpec: ItemSpec): void {
if (!itemSpec) {
throw new Error("Value cannot be undefined.");
@ -43,15 +35,15 @@ function validateItemSpec(itemSpec: ItemSpec): void {
}
function convertGridLength(value: string): ItemSpec {
if (value === "auto") {
return ItemSpec.create(1, "auto");
if (value === GridUnitType.AUTO) {
return ItemSpec.create(1, GridUnitType.AUTO);
}
else if (value.indexOf("*") !== -1) {
const starCount = parseInt(value.replace("*", "") || "1");
return ItemSpec.create(starCount, "star");
return ItemSpec.create(starCount, GridUnitType.STAR);
}
else if (!isNaN(parseInt(value))) {
return ItemSpec.create(parseInt(value), "pixel");
return ItemSpec.create(parseInt(value), GridUnitType.PIXEL);
}
else {
throw new Error(`Cannot parse item spec from string: ${value}`);
@ -70,14 +62,14 @@ function parseAndAddItemSpecs(value: string, func: (itemSpec: ItemSpec) => void)
export class ItemSpec extends Observable implements ItemSpecDefinition {
private _value: number;
private _unitType: "pixel" | "star" | "auto";
private _unitType: GridUnitType;
constructor() {
super();
if (arguments.length === 0) {
this._value = 1;
this._unitType = "star";
this._unitType = GridUnitType.STAR;
}
else if (arguments.length === 2) {
@ -89,7 +81,7 @@ export class ItemSpec extends Observable implements ItemSpecDefinition {
}
this._value = value;
this._unitType = convertUnitType(type);
this._unitType = GridUnitType.parse(type);
}
else {
throw new Error("First argument should be number, second argument should be string.");
@ -106,7 +98,7 @@ export class ItemSpec extends Observable implements ItemSpecDefinition {
public index: number;
public _actualLength: number = 0;
public static create(value: number, type: "pixel" | "star" | "auto"): ItemSpec {
public static create(value: number, type: GridUnitType): ItemSpec {
let spec = new ItemSpec();
spec._value = value;
spec._unitType = type;
@ -121,20 +113,20 @@ export class ItemSpec extends Observable implements ItemSpecDefinition {
return (value1.gridUnitType === value2.gridUnitType) && (value1.value === value2.value) && (value1.owner === value2.owner) && (value1.index === value2.index);
}
get gridUnitType(): "pixel" | "star" | "auto" {
get gridUnitType(): GridUnitType {
return this._unitType;
}
get isAbsolute(): boolean {
return this._unitType === "pixel";
return this._unitType === GridUnitType.PIXEL;
}
get isAuto(): boolean {
return this._unitType === "auto";
return this._unitType === GridUnitType.AUTO;
}
get isStar(): boolean {
return this._unitType === "star";
return this._unitType === GridUnitType.STAR;
}
get value(): number {
@ -369,3 +361,12 @@ export const rowSpanProperty = new Property<View, number>({
valueConverter: (v) => Math.max(1, parseInt(v))
});
rowSpanProperty.register(View);
export type GridUnitType = "pixel" | "star" | "auto";
export namespace GridUnitType {
export const PIXEL: "pixel" = "pixel";
export const STAR: "star" = "star";
export const AUTO: "auto" = "auto";
export const isValid = makeValidator<GridUnitType>(PIXEL, STAR, AUTO);
export const parse = makeParser(isValid, undefined);
}

8
tns-core-modules/ui/layouts/grid-layout/grid-layout.android.ts
View File

@ -1,6 +1,6 @@
import {
GridLayoutBase, ItemSpec as ItemSpecBase, View, layout,
rowProperty, columnProperty, rowSpanProperty, columnSpanProperty
rowProperty, columnProperty, rowSpanProperty, columnSpanProperty, GridUnitType
} from "./grid-layout-common";
export * from "./grid-layout-common";
@ -64,13 +64,13 @@ Object.defineProperties(View.prototype, {
function createNativeSpec(itemSpec: ItemSpec): org.nativescript.widgets.ItemSpec {
switch (itemSpec.gridUnitType) {
case "auto":
case GridUnitType.AUTO:
return new org.nativescript.widgets.ItemSpec(itemSpec.value, org.nativescript.widgets.GridUnitType.auto);
case "star":
case GridUnitType.STAR:
return new org.nativescript.widgets.ItemSpec(itemSpec.value, org.nativescript.widgets.GridUnitType.star);
case "pixel":
case GridUnitType.PIXEL:
return new org.nativescript.widgets.ItemSpec(itemSpec.value * layout.getDisplayDensity(), org.nativescript.widgets.GridUnitType.pixel);
default:

13
tns-core-modules/ui/layouts/grid-layout/grid-layout.d.ts vendored
View File

@ -7,7 +7,7 @@
export class ItemSpec {
constructor();
constructor(value: number, type: "pixel" | "star" | "auto");
constructor(value: number, type: GridUnitType);
/**
* Gets the actual length of an ItemSpec.
@ -17,7 +17,7 @@
/**
* Returns unit type of this ItemSpec instance.
*/
gridUnitType: "pixel" | "star" | "auto";
gridUnitType: GridUnitType;
/**
* Returns true if this ItemSpec instance holds
@ -155,4 +155,13 @@
* Represents the observable property backing the rowSpan property.
*/
export const rowSpanProperty: Property<GridLayout, number>;
export type GridUnitType = "pixel" | "star" | "auto";
export namespace GridUnitType {
export const PIXEL: "pixel";
export const STAR: "star";
export const AUTO: "auto";
export function isValid(value: any): boolean;
export function parse(value: string): GridUnitType;
}
}