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;
}
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<Style, string>({
});
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<Style, Length>({
borderLeftWidthProperty.register(Style);
// Border Radius properties.
const borderRadiusProperty = new ShorthandProperty<Style, string | number>({
const borderRadiusProperty = new ShorthandProperty<Style, string | Length>({
name: "borderRadius", cssName: "border-radius",
getter: function (this: Style) {
if (this.borderTopLeftRadius === this.borderTopRightRadius &&
@ -1821,35 +1813,51 @@ const borderRadiusProperty = new ShorthandProperty<Style, string | number>({
})
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) => {
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<Style, number>({
export const borderTopRightRadiusProperty = new CssProperty<Style, Length>({
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<Style, number>({
export const borderBottomRightRadiusProperty = new CssProperty<Style, Length>({
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<Style, number>({
export const borderBottomLeftRadiusProperty = new CssProperty<Style, Length>({
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);

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.
*/
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<Style, Length>;
export const borderLeftWidthProperty: CssProperty<Style, Length>;
export const borderRadiusProperty: ShorthandProperty<Style, string | number>;
export const borderTopLeftRadiusProperty: CssProperty<Style, number>;
export const borderTopRightRadiusProperty: CssProperty<Style, number>;
export const borderBottomRightRadiusProperty: CssProperty<Style, number>;
export const borderBottomLeftRadiusProperty: CssProperty<Style, number>;
export const borderRadiusProperty: ShorthandProperty<Style, string | Length>;
export const borderTopLeftRadiusProperty: CssProperty<Style, Length>;
export const borderTopRightRadiusProperty: CssProperty<Style, Length>;
export const borderBottomRightRadiusProperty: CssProperty<Style, Length>;
export const borderBottomLeftRadiusProperty: CssProperty<Style, Length>;
export const zIndexProperty: CssProperty<Style, number>;
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 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;

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 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;