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

Make border radii Lengths

Browse Source
This commit is contained in:
Rossen Hristov
2017-01-06 16:03:06 +02:00
parent 899ce1adc8
commit 5a3be4d577
4 changed files with 59 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
tns-core-modules/ui/core/view-common.ts
View File

@ -267,38 +267,38 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
this.style.borderLeftWidth = value; this.style.borderLeftWidth = value;
} }
get borderRadius(): string | number { get borderRadius(): string | Length {
return this.style.borderRadius; return this.style.borderRadius;
} }
set borderRadius(value: string | number) { set borderRadius(value: string | Length) {
this.style.borderRadius = value; this.style.borderRadius = value;
} }
get borderTopLeftRadius(): number { get borderTopLeftRadius(): Length {
return this.style.borderTopLeftRadius; return this.style.borderTopLeftRadius;
} }
set borderTopLeftRadius(value: number) { set borderTopLeftRadius(value: Length) {
this.style.borderTopLeftRadius = value; this.style.borderTopLeftRadius = value;
} }
get borderTopRightRadius(): number { get borderTopRightRadius(): Length {
return this.style.borderTopRightRadius; return this.style.borderTopRightRadius;
} }
set borderTopRightRadius(value: number) { set borderTopRightRadius(value: Length) {
this.style.borderTopRightRadius = value; this.style.borderTopRightRadius = value;
} }
get borderBottomRightRadius(): number { get borderBottomRightRadius(): Length {
return this.style.borderBottomRightRadius; return this.style.borderBottomRightRadius;
} }
set borderBottomRightRadius(value: number) { set borderBottomRightRadius(value: Length) {
this.style.borderBottomRightRadius = value; this.style.borderBottomRightRadius = value;
} }
get borderBottomLeftRadius(): number { get borderBottomLeftRadius(): Length {
return this.style.borderBottomLeftRadius; return this.style.borderBottomLeftRadius;
} }
set borderBottomLeftRadius(value: number) { set borderBottomLeftRadius(value: Length) {
this.style.borderBottomLeftRadius = value; this.style.borderBottomLeftRadius = value;
} }
@ -1566,14 +1566,6 @@ export const backgroundPositionProperty = new CssProperty<Style, string>({
}); });
backgroundPositionProperty.register(Style); 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 } { 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 }; let result: { top: Color, right: Color, bottom: Color, left: Color } = { top: undefined, right: undefined, bottom: undefined, left: undefined };
if (value.indexOf("rgb") === 0) { if (value.indexOf("rgb") === 0) {
@ -1789,7 +1781,7 @@ export const borderLeftWidthProperty = new CssProperty<Style, Length>({
borderLeftWidthProperty.register(Style); borderLeftWidthProperty.register(Style);
// Border Radius properties. // Border Radius properties.
const borderRadiusProperty = new ShorthandProperty<Style, string | number>({ const borderRadiusProperty = new ShorthandProperty<Style, string | Length>({
name: "borderRadius", cssName: "border-radius", name: "borderRadius", cssName: "border-radius",
getter: function (this: Style) { getter: function (this: Style) {
if (this.borderTopLeftRadius === this.borderTopRightRadius && if (this.borderTopLeftRadius === this.borderTopRightRadius &&
@ -1821,35 +1813,51 @@ const borderRadiusProperty = new ShorthandProperty<Style, string | number>({
}) })
borderRadiusProperty.register(Style); borderRadiusProperty.register(Style);
export const borderTopLeftRadiusProperty = new CssProperty<Style, number>({ export const borderTopLeftRadiusProperty = new CssProperty<Style, Length>({
name: "borderTopLeftRadius", cssName: "border-top-left-radius", defaultValue: 0, affectsLayout: isIOS, valueChanged: (target, oldValue, newValue) => { 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; let background = target.backgroundInternal;
target.backgroundInternal = background.withBorderTopLeftRadius(newValue); target.backgroundInternal = background.withBorderTopLeftRadius(value);
}, valueConverter: isNonNegativeFiniteNumberConverter }, valueConverter: Length.parse
}); });
borderTopLeftRadiusProperty.register(Style); borderTopLeftRadiusProperty.register(Style);
export const borderTopRightRadiusProperty = new CssProperty<Style, number>({ export const borderTopRightRadiusProperty = new CssProperty<Style, Length>({
name: "borderTopRightRadius", cssName: "border-top-right-radius", defaultValue: 0, affectsLayout: isIOS, valueChanged: (target, oldValue, newValue) => { 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; let background = target.backgroundInternal;
target.backgroundInternal = background.withBorderTopRightRadius(newValue); target.backgroundInternal = background.withBorderTopRightRadius(value);
}, valueConverter: isNonNegativeFiniteNumberConverter }, valueConverter: Length.parse
}); });
borderTopRightRadiusProperty.register(Style); borderTopRightRadiusProperty.register(Style);
export const borderBottomRightRadiusProperty = new CssProperty<Style, number>({ export const borderBottomRightRadiusProperty = new CssProperty<Style, Length>({
name: "borderBottomRightRadius", cssName: "border-bottom-right-radius", defaultValue: 0, affectsLayout: isIOS, valueChanged: (target, oldValue, newValue) => { 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; let background = target.backgroundInternal;
target.backgroundInternal = background.withBorderBottomLeftRadius(newValue); target.backgroundInternal = background.withBorderBottomRightRadius(value);
}, valueConverter: isNonNegativeFiniteNumberConverter }, valueConverter: Length.parse
}); });
borderBottomRightRadiusProperty.register(Style); borderBottomRightRadiusProperty.register(Style);
export const borderBottomLeftRadiusProperty = new CssProperty<Style, number>({ export const borderBottomLeftRadiusProperty = new CssProperty<Style, Length>({
name: "borderBottomLeftRadius", cssName: "border-bottom-left-radius", defaultValue: 0, affectsLayout: isIOS, valueChanged: (target, oldValue, newValue) => { 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; let background = target.backgroundInternal;
target.backgroundInternal = background.withBorderBottomRightRadius(newValue); target.backgroundInternal = background.withBorderBottomLeftRadius(value);
}, valueConverter: isNonNegativeFiniteNumberConverter }, valueConverter: Length.parse
}); });
borderBottomLeftRadiusProperty.register(Style); borderBottomLeftRadiusProperty.register(Style);

20
tns-core-modules/ui/core/view.d.ts vendored
View File

@ -178,27 +178,27 @@ declare module "ui/core/view" {
/** /**
* Gets or sets the border radius of the 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. * 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. * 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. * 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. * Gets or sets the bottom left border radius of the view.
*/ */
borderBottomLeftRadius: number; borderBottomLeftRadius: Length;
/** /**
* Gets or sets the color of the view. * Gets or sets the color of the view.
@ -733,11 +733,11 @@ declare module "ui/core/view" {
export const borderBottomWidthProperty: CssProperty<Style, Length>; export const borderBottomWidthProperty: CssProperty<Style, Length>;
export const borderLeftWidthProperty: CssProperty<Style, Length>; export const borderLeftWidthProperty: CssProperty<Style, Length>;
export const borderRadiusProperty: ShorthandProperty<Style, string | number>; export const borderRadiusProperty: ShorthandProperty<Style, string | Length>;
export const borderTopLeftRadiusProperty: CssProperty<Style, number>; export const borderTopLeftRadiusProperty: CssProperty<Style, Length>;
export const borderTopRightRadiusProperty: CssProperty<Style, number>; export const borderTopRightRadiusProperty: CssProperty<Style, Length>;
export const borderBottomRightRadiusProperty: CssProperty<Style, number>; export const borderBottomRightRadiusProperty: CssProperty<Style, Length>;
export const borderBottomLeftRadiusProperty: CssProperty<Style, number>; export const borderBottomLeftRadiusProperty: CssProperty<Style, Length>;
export const zIndexProperty: CssProperty<Style, number>; export const zIndexProperty: CssProperty<Style, number>;
export const visibilityProperty: CssProperty<Style, Visibility>; export const visibilityProperty: CssProperty<Style, Visibility>;

10
tns-core-modules/ui/styling/style.d.ts vendored
View File

@ -70,11 +70,11 @@ declare module "ui/styling/style" {
public borderRightWidth: Length; public borderRightWidth: Length;
public borderBottomWidth: Length; public borderBottomWidth: Length;
public borderLeftWidth: Length; public borderLeftWidth: Length;
public borderRadius: string | number; public borderRadius: string | Length;
public borderTopLeftRadius: number; public borderTopLeftRadius: Length;
public borderTopRightRadius: number; public borderTopRightRadius: Length;
public borderBottomRightRadius: number; public borderBottomRightRadius: Length;
public borderBottomLeftRadius: number; public borderBottomLeftRadius: Length;
public fontSize: number; public fontSize: number;
public fontFamily: string; public fontFamily: string;

10
tns-core-modules/ui/styling/style.ts
View File

@ -48,11 +48,11 @@ export class Style extends Observable implements StyleDefinition {
public borderRightWidth: Length; public borderRightWidth: Length;
public borderBottomWidth: Length; public borderBottomWidth: Length;
public borderLeftWidth: Length; public borderLeftWidth: Length;
public borderRadius: string | number; public borderRadius: string | Length;
public borderTopLeftRadius: number; public borderTopLeftRadius: Length;
public borderTopRightRadius: number; public borderTopRightRadius: Length;
public borderBottomRightRadius: number; public borderBottomRightRadius: Length;
public borderBottomLeftRadius: number; public borderBottomLeftRadius: Length;
public fontSize: number; public fontSize: number;
public fontFamily: string; public fontFamily: string;