From 5a3be4d577b295afffd07b5086274703aba5b37e Mon Sep 17 00:00:00 2001 From: Rossen Hristov Date: Fri, 6 Jan 2017 16:03:06 +0200 Subject: [PATCH] Make border radii Lengths --- tns-core-modules/ui/core/view-common.ts | 70 ++++++++++++++----------- tns-core-modules/ui/core/view.d.ts | 20 +++---- tns-core-modules/ui/styling/style.d.ts | 10 ++-- tns-core-modules/ui/styling/style.ts | 10 ++-- 4 files changed, 59 insertions(+), 51 deletions(-) diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts index fd7e9f80b..fb40e7215 100644 --- a/tns-core-modules/ui/core/view-common.ts +++ b/tns-core-modules/ui/core/view-common.ts @@ -267,38 +267,38 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition { this.style.borderLeftWidth = value; } - get borderRadius(): string | number { + get borderRadius(): string | Length { return this.style.borderRadius; } - set borderRadius(value: string | number) { + set borderRadius(value: string | Length) { this.style.borderRadius = value; } - get borderTopLeftRadius(): number { + get borderTopLeftRadius(): Length { return this.style.borderTopLeftRadius; } - set borderTopLeftRadius(value: number) { + set borderTopLeftRadius(value: Length) { this.style.borderTopLeftRadius = value; } - get borderTopRightRadius(): number { + get borderTopRightRadius(): Length { return this.style.borderTopRightRadius; } - set borderTopRightRadius(value: number) { + set borderTopRightRadius(value: Length) { this.style.borderTopRightRadius = value; } - get borderBottomRightRadius(): number { + get borderBottomRightRadius(): Length { return this.style.borderBottomRightRadius; } - set borderBottomRightRadius(value: number) { + set borderBottomRightRadius(value: Length) { this.style.borderBottomRightRadius = value; } - get borderBottomLeftRadius(): number { + get borderBottomLeftRadius(): Length { return this.style.borderBottomLeftRadius; } - set borderBottomLeftRadius(value: number) { + set borderBottomLeftRadius(value: Length) { this.style.borderBottomLeftRadius = value; } @@ -1566,14 +1566,6 @@ export const backgroundPositionProperty = new CssProperty({ }); backgroundPositionProperty.register(Style); -function isNonNegativeFiniteNumberConverter(value: string): number { - let number = parseFloat(value); - if (!isNonNegativeFiniteNumber(number)) { - throw new Error("border-width should be Non-Negative Finite number."); - } - return number; -} - function parseBorderColor(value: string): { top: Color, right: Color, bottom: Color, left: Color } { let result: { top: Color, right: Color, bottom: Color, left: Color } = { top: undefined, right: undefined, bottom: undefined, left: undefined }; if (value.indexOf("rgb") === 0) { @@ -1789,7 +1781,7 @@ export const borderLeftWidthProperty = new CssProperty({ borderLeftWidthProperty.register(Style); // Border Radius properties. -const borderRadiusProperty = new ShorthandProperty({ +const borderRadiusProperty = new ShorthandProperty({ name: "borderRadius", cssName: "border-radius", getter: function (this: Style) { if (this.borderTopLeftRadius === this.borderTopRightRadius && @@ -1821,35 +1813,51 @@ const borderRadiusProperty = new ShorthandProperty({ }) borderRadiusProperty.register(Style); -export const borderTopLeftRadiusProperty = new CssProperty({ +export const borderTopLeftRadiusProperty = new CssProperty({ name: "borderTopLeftRadius", cssName: "border-top-left-radius", defaultValue: 0, affectsLayout: isIOS, valueChanged: (target, oldValue, newValue) => { + let value = Length.toDevicePixels(newValue, 0); + if (!isNonNegativeFiniteNumber(value)) { + throw new Error(`border-top-left-radius should be Non-Negative Finite number. Value: ${value}`); + } let background = target.backgroundInternal; - target.backgroundInternal = background.withBorderTopLeftRadius(newValue); - }, valueConverter: isNonNegativeFiniteNumberConverter + target.backgroundInternal = background.withBorderTopLeftRadius(value); + }, valueConverter: Length.parse }); borderTopLeftRadiusProperty.register(Style); -export const borderTopRightRadiusProperty = new CssProperty({ +export const borderTopRightRadiusProperty = new CssProperty({ name: "borderTopRightRadius", cssName: "border-top-right-radius", defaultValue: 0, affectsLayout: isIOS, valueChanged: (target, oldValue, newValue) => { + let value = Length.toDevicePixels(newValue, 0); + if (!isNonNegativeFiniteNumber(value)) { + throw new Error(`border-top-right-radius should be Non-Negative Finite number. Value: ${value}`); + } let background = target.backgroundInternal; - target.backgroundInternal = background.withBorderTopRightRadius(newValue); - }, valueConverter: isNonNegativeFiniteNumberConverter + target.backgroundInternal = background.withBorderTopRightRadius(value); + }, valueConverter: Length.parse }); borderTopRightRadiusProperty.register(Style); -export const borderBottomRightRadiusProperty = new CssProperty({ +export const borderBottomRightRadiusProperty = new CssProperty({ name: "borderBottomRightRadius", cssName: "border-bottom-right-radius", defaultValue: 0, affectsLayout: isIOS, valueChanged: (target, oldValue, newValue) => { + let value = Length.toDevicePixels(newValue, 0); + if (!isNonNegativeFiniteNumber(value)) { + throw new Error(`border-bottom-right-radius should be Non-Negative Finite number. Value: ${value}`); + } let background = target.backgroundInternal; - target.backgroundInternal = background.withBorderBottomLeftRadius(newValue); - }, valueConverter: isNonNegativeFiniteNumberConverter + target.backgroundInternal = background.withBorderBottomRightRadius(value); + }, valueConverter: Length.parse }); borderBottomRightRadiusProperty.register(Style); -export const borderBottomLeftRadiusProperty = new CssProperty({ +export const borderBottomLeftRadiusProperty = new CssProperty({ name: "borderBottomLeftRadius", cssName: "border-bottom-left-radius", defaultValue: 0, affectsLayout: isIOS, valueChanged: (target, oldValue, newValue) => { + let value = Length.toDevicePixels(newValue, 0); + if (!isNonNegativeFiniteNumber(value)) { + throw new Error(`border-bottom-left-radius should be Non-Negative Finite number. Value: ${value}`); + } let background = target.backgroundInternal; - target.backgroundInternal = background.withBorderBottomRightRadius(newValue); - }, valueConverter: isNonNegativeFiniteNumberConverter + target.backgroundInternal = background.withBorderBottomLeftRadius(value); + }, valueConverter: Length.parse }); borderBottomLeftRadiusProperty.register(Style); diff --git a/tns-core-modules/ui/core/view.d.ts b/tns-core-modules/ui/core/view.d.ts index cb42d6959..7a485462f 100644 --- a/tns-core-modules/ui/core/view.d.ts +++ b/tns-core-modules/ui/core/view.d.ts @@ -178,27 +178,27 @@ declare module "ui/core/view" { /** * Gets or sets the border radius of the view. */ - borderRadius: string | number; + borderRadius: string | Length; /** * Gets or sets the top left border radius of the view. */ - borderTopLeftRadius: number; + borderTopLeftRadius: Length; /** * Gets or sets the top right border radius of the view. */ - borderTopRightRadius: number; + borderTopRightRadius: Length; /** * Gets or sets the bottom right border radius of the view. */ - borderBottomRightRadius: number; + borderBottomRightRadius: Length; /** * Gets or sets the bottom left border radius of the view. */ - borderBottomLeftRadius: number; + borderBottomLeftRadius: Length; /** * Gets or sets the color of the view. @@ -733,11 +733,11 @@ declare module "ui/core/view" { export const borderBottomWidthProperty: CssProperty; export const borderLeftWidthProperty: CssProperty; - export const borderRadiusProperty: ShorthandProperty; - export const borderTopLeftRadiusProperty: CssProperty; - export const borderTopRightRadiusProperty: CssProperty; - export const borderBottomRightRadiusProperty: CssProperty; - export const borderBottomLeftRadiusProperty: CssProperty; + export const borderRadiusProperty: ShorthandProperty; + export const borderTopLeftRadiusProperty: CssProperty; + export const borderTopRightRadiusProperty: CssProperty; + export const borderBottomRightRadiusProperty: CssProperty; + export const borderBottomLeftRadiusProperty: CssProperty; export const zIndexProperty: CssProperty; export const visibilityProperty: CssProperty; diff --git a/tns-core-modules/ui/styling/style.d.ts b/tns-core-modules/ui/styling/style.d.ts index 7f859c117..0abf452d6 100644 --- a/tns-core-modules/ui/styling/style.d.ts +++ b/tns-core-modules/ui/styling/style.d.ts @@ -70,11 +70,11 @@ declare module "ui/styling/style" { public borderRightWidth: Length; public borderBottomWidth: Length; public borderLeftWidth: Length; - public borderRadius: string | number; - public borderTopLeftRadius: number; - public borderTopRightRadius: number; - public borderBottomRightRadius: number; - public borderBottomLeftRadius: number; + public borderRadius: string | Length; + public borderTopLeftRadius: Length; + public borderTopRightRadius: Length; + public borderBottomRightRadius: Length; + public borderBottomLeftRadius: Length; public fontSize: number; public fontFamily: string; diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts index 7db7606b3..225917dde 100644 --- a/tns-core-modules/ui/styling/style.ts +++ b/tns-core-modules/ui/styling/style.ts @@ -48,11 +48,11 @@ export class Style extends Observable implements StyleDefinition { public borderRightWidth: Length; public borderBottomWidth: Length; public borderLeftWidth: Length; - public borderRadius: string | number; - public borderTopLeftRadius: number; - public borderTopRightRadius: number; - public borderBottomRightRadius: number; - public borderBottomLeftRadius: number; + public borderRadius: string | Length; + public borderTopLeftRadius: Length; + public borderTopRightRadius: Length; + public borderBottomRightRadius: Length; + public borderBottomLeftRadius: Length; public fontSize: number; public fontFamily: string;