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

Merge pull request #2743 from NativeScript/borders

Browse Source 
Non-uniform borders
This commit is contained in:
Rossen Hristov
2016-09-17 15:02:53 +03:00
committed by GitHub
parent 4aee2c05eb 2d7bbd74dc
commit f2db7cc193
58 changed files with 2644 additions and 674 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
tns-core-modules/color/color-common.ts
View File

@@ -167,6 +167,10 @@ export class Color implements definition.Color {
}
return hexStr;
}
public toString(): string {
return this.hex;
}
}
function isRgbOrRgba(value: string): boolean {

52
tns-core-modules/org.nativescript.widgets.d.ts vendored
View File

@@ -4,10 +4,23 @@
export class BorderDrawable extends android.graphics.drawable.ColorDrawable {
constructor(density: number);
public refresh(
borderWidth: number,
borderColor: number,
borderRadius: number,
borderTopColor: number,
borderRightColor: number,
borderBottomColor: number,
borderLeftColor: number,
borderTopWidth: number,
borderRightWidth: number,
borderBottomWidth: number,
borderLeftWidth: number,
borderTopLeftRadius: number,
borderTopRightRadius: number,
borderBottomRightRadius: number,
borderBottomLeftRadius: number,
clipPath: string,
backgroundColor: number,
backgroundImage: android.graphics.Bitmap,
backgroundRepeat: string,
@@ -16,15 +29,37 @@
backgroundSize: string,
backgroundSizeParsedCSSValues: native.Array<CSSValue>
);
public getBorderWidth(): number;
public getBorderColor(): number;
public getBorderRadius(): number;
public getBorderTopColor(): number;
public getBorderRightColor(): number;
public getBorderBottomColor(): number;
public getBorderLeftColor(): number;
public getUniformBorderColor(): number;
public getBorderTopWidth(): number;
public getBorderRightWidth(): number;
public getBorderBottomWidth(): number;
public getBorderLeftWidth(): number;
public getUniformBorderWidth(): number;
public getBorderTopLeftRadius(): number;
public getBorderTopRightRadius(): number;
public getBorderBottomRightRadius(): number;
public getBorderBottomLeftRadius(): number;
public getUniformBorderRadius(): number;
public getClipPath(): string;
public getBackgroundColor(): number;
public getBackgroundImage(): android.graphics.Bitmap;
public getBackgroundRepeat(): string;
public getBackgroundPosition(): string;
public getBackgroundSize(): string;
public hasUniformBorderColor(): boolean;
public hasUniformBorderWidth(): boolean;
public hasUniformBorderRadius(): boolean;
public hasUniformBorder(): boolean;
}
export class CSSValue {
@@ -183,11 +218,6 @@
export class ImageView extends android.widget.ImageView {
constructor(context: android.content.Context);
getCornerRadius(): number;
setCornerRadius(radius: number): void;
getBorderWidth(): number;
setBorderWidth(width: number): void;
}
export class TabLayout extends android.widget.HorizontalScrollView {

4
tns-core-modules/ui/border/border.d.ts vendored
View File

@@ -17,11 +17,11 @@ declare module "ui/border" {
/**
* Gets or sets the border width of the border component.
*/
borderWidth: number;
borderWidth: string | number;
/**
* Gets or sets the border color of the border component.
*/
borderColor: Color;
borderColor: string | Color;
}
}

18
tns-core-modules/ui/border/border.ts
View File

@@ -2,11 +2,15 @@
import contentView = require("ui/content-view");
import viewModule = require("ui/core/view");
import utils = require("utils/utils");
import types = require("utils/types");
@Deprecated
export class Border extends contentView.ContentView implements definition.Border {
get cornerRadius(): number {
return this.borderRadius;
if (types.isNumber(this.borderRadius)){
return <number>this.borderRadius;
}
return 0;
}
set cornerRadius(value: number) {
this.borderRadius = value;
@@ -20,7 +24,11 @@ export class Border extends contentView.ContentView implements definition.Border
var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
var density = utils.layout.getDisplayDensity();
var borderSize = (2 * this.borderWidth) * density;
let borderWidth = 0;
if (types.isNumber(this.borderWidth)){
borderWidth = <number>this.borderWidth;
}
var borderSize = (2 * borderWidth) * density;
var result = viewModule.View.measureChild(this, this.layoutView,
utils.layout.makeMeasureSpec(width - borderSize, widthMode),
@@ -34,7 +42,11 @@ export class Border extends contentView.ContentView implements definition.Border
public onLayout(left: number, top: number, right: number, bottom: number): void {
var density = utils.layout.getDisplayDensity();
var borderSize = this.borderWidth * density;
let borderWidth = 0;
if (types.isNumber(this.borderWidth)){
borderWidth = <number>this.borderWidth;
}
var borderSize = borderWidth * density;
viewModule.View.layoutChild(this, this.layoutView, borderSize, borderSize, right - left - borderSize, bottom - top - borderSize);
}
}

90
tns-core-modules/ui/button/button.ios.ts
View File

@@ -165,12 +165,81 @@ export class ButtonStyler implements style.Styler {
}
}
// Borders
private static setBorderTopWidthProperty(view: view.View, newValue: number) {
ButtonStyler.setNativeBorderTopWidth(view, newValue);
}
private static resetBorderTopWidthProperty(view: view.View, nativeValue: number) {
ButtonStyler.setNativeBorderTopWidth(view, nativeValue);
}
private static setNativeBorderTopWidth(view: view.View, newValue: number) {
let nativeButton = <UIButton>view._nativeView;
let top = view.style.paddingTop + newValue;
let left = nativeButton.contentEdgeInsets.left;
let bottom = nativeButton.contentEdgeInsets.bottom;
let right = nativeButton.contentEdgeInsets.right;
nativeButton.contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
private static setBorderRightWidthProperty(view: view.View, newValue: number) {
ButtonStyler.setNativeBorderRightWidth(view, newValue);
}
private static resetBorderRightWidthProperty(view: view.View, nativeValue: number) {
ButtonStyler.setNativeBorderRightWidth(view, nativeValue);
}
private static setNativeBorderRightWidth(view: view.View, newValue: number) {
let nativeButton = <UIButton>view._nativeView;
let top = nativeButton.contentEdgeInsets.top;
let left = nativeButton.contentEdgeInsets.left;
let bottom = nativeButton.contentEdgeInsets.bottom;
let right = view.style.paddingRight + newValue;
nativeButton.contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
private static setBorderBottomWidthProperty(view: view.View, newValue: number) {
ButtonStyler.setNativeBorderBottomWidth(view, newValue);
}
private static resetBorderBottomWidthProperty(view: view.View, nativeValue: number) {
ButtonStyler.setNativeBorderBottomWidth(view, nativeValue);
}
private static setNativeBorderBottomWidth(view: view.View, newValue: number) {
let nativeButton = <UIButton>view._nativeView;
let top = nativeButton.contentEdgeInsets.top;
let left = nativeButton.contentEdgeInsets.left;
let bottom = view.style.paddingBottom + newValue;
let right = nativeButton.contentEdgeInsets.right;
nativeButton.contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
private static setBorderLeftWidthProperty(view: view.View, newValue: number) {
ButtonStyler.setNativeBorderLeftWidth(view, newValue);
}
private static resetBorderLeftWidthProperty(view: view.View, nativeValue: number) {
ButtonStyler.setNativeBorderLeftWidth(view, nativeValue);
}
private static setNativeBorderLeftWidth(view: view.View, newValue: number) {
let nativeButton = <UIButton>view._nativeView;
let top = nativeButton.contentEdgeInsets.top;
let left = view.style.paddingLeft + newValue;
let bottom = nativeButton.contentEdgeInsets.bottom;
let right = nativeButton.contentEdgeInsets.right;
nativeButton.contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
// Padding
private static setPaddingProperty(view: view.View, newValue: any) {
var top = newValue.top + view.borderWidth;
var left = newValue.left + view.borderWidth;
var bottom = newValue.bottom + view.borderWidth;
var right = newValue.right + view.borderWidth;
var top = newValue.top + view.borderTopWidth;
var left = newValue.left + view.borderLeftWidth;
var bottom = newValue.bottom + view.borderBottomWidth;
var right = newValue.right + view.borderRightWidth;
(<UIButton>view._nativeView).contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
@@ -230,6 +299,19 @@ export class ButtonStyler implements style.Styler {
ButtonStyler.resetTextAlignmentProperty,
ButtonStyler.getNativeTextAlignmentValue), "Button");
style.registerHandler(style.borderTopWidthProperty, new style.StylePropertyChangedHandler(
ButtonStyler.setBorderTopWidthProperty,
ButtonStyler.resetBorderTopWidthProperty), "Button");
style.registerHandler(style.borderRightWidthProperty, new style.StylePropertyChangedHandler(
ButtonStyler.setBorderRightWidthProperty,
ButtonStyler.resetBorderRightWidthProperty), "Button");
style.registerHandler(style.borderBottomWidthProperty, new style.StylePropertyChangedHandler(
ButtonStyler.setBorderBottomWidthProperty,
ButtonStyler.resetBorderBottomWidthProperty), "Button");
style.registerHandler(style.borderLeftWidthProperty, new style.StylePropertyChangedHandler(
ButtonStyler.setBorderLeftWidthProperty,
ButtonStyler.resetBorderLeftWidthProperty), "Button");
style.registerHandler(style.nativePaddingsProperty, new style.StylePropertyChangedHandler(
ButtonStyler.setPaddingProperty,
ButtonStyler.resetPaddingProperty), "Button");

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

@@ -279,25 +279,109 @@ export class View extends ProxyObject implements definition.View {
}
// START Style property shortcuts
get borderRadius(): number {
return this.style.borderRadius;
get borderColor(): string | color.Color {
return this.style.borderColor;
}
set borderRadius(value: number) {
this.style.borderRadius = value;
set borderColor(value: string | color.Color) {
this.style.borderColor = value;
}
get borderWidth(): number {
get borderTopColor(): color.Color {
return this.style.borderTopColor;
}
set borderTopColor(value: color.Color) {
this.style.borderTopColor = value;
}
get borderRightColor(): color.Color {
return this.style.borderRightColor;
}
set borderRightColor(value: color.Color) {
this.style.borderRightColor = value;
}
get borderBottomColor(): color.Color {
return this.style.borderBottomColor;
}
set borderBottomColor(value: color.Color) {
this.style.borderBottomColor = value;
}
get borderLeftColor(): color.Color {
return this.style.borderLeftColor;
}
set borderLeftColor(value: color.Color) {
this.style.borderLeftColor = value;
}
get borderWidth(): string | number {
return this.style.borderWidth;
}
set borderWidth(value: number) {
set borderWidth(value: string | number) {
this.style.borderWidth = value;
}
get borderColor(): color.Color {
return this.style.borderColor;
get borderTopWidth(): number {
return this.style.borderTopWidth;
}
set borderColor(value: color.Color) {
this.style.borderColor = value;
set borderTopWidth(value: number) {
this.style.borderTopWidth = value;
}
get borderRightWidth(): number {
return this.style.borderRightWidth;
}
set borderRightWidth(value: number) {
this.style.borderRightWidth = value;
}
get borderBottomWidth(): number {
return this.style.borderBottomWidth;
}
set borderBottomWidth(value: number) {
this.style.borderBottomWidth = value;
}
get borderLeftWidth(): number {
return this.style.borderLeftWidth;
}
set borderLeftWidth(value: number) {
this.style.borderLeftWidth = value;
}
get borderRadius(): string | number {
return this.style.borderRadius;
}
set borderRadius(value: string | number) {
this.style.borderRadius = value;
}
get borderTopLeftRadius(): number {
return this.style.borderTopLeftRadius;
}
set borderTopLeftRadius(value: number) {
this.style.borderTopLeftRadius = value;
}
get borderTopRightRadius(): number {
return this.style.borderTopRightRadius;
}
set borderTopRightRadius(value: number) {
this.style.borderTopRightRadius = value;
}
get borderBottomRightRadius(): number {
return this.style.borderBottomRightRadius;
}
set borderBottomRightRadius(value: number) {
this.style.borderBottomRightRadius = value;
}
get borderBottomLeftRadius(): number {
return this.style.borderBottomLeftRadius;
}
set borderBottomLeftRadius(value: number) {
this.style.borderBottomLeftRadius = value;
}
get color(): color.Color {

14
tns-core-modules/ui/core/view.android.ts
View File

@@ -679,7 +679,7 @@ export class ViewStyler implements style.Styler {
private static setNativePaddingLeft(view: View, value: number): void {
let nativeView = view._nativeView;
let density = utils.layout.getDisplayDensity();
let left = (value + view.borderWidth) * density;
let left = (value + view.borderLeftWidth) * density;
let top = nativeView.getPaddingTop();
let right = nativeView.getPaddingRight();
let bottom = nativeView.getPaddingBottom();
@@ -690,7 +690,7 @@ export class ViewStyler implements style.Styler {
let nativeView = view._nativeView;
let density = utils.layout.getDisplayDensity();
let left = nativeView.getPaddingLeft();
let top = (value + view.borderWidth) * density;
let top = (value + view.borderTopWidth) * density;
let right = nativeView.getPaddingRight();
let bottom = nativeView.getPaddingBottom();
nativeView.setPadding(left, top, right, bottom);
@@ -701,7 +701,7 @@ export class ViewStyler implements style.Styler {
let density = utils.layout.getDisplayDensity();
let left = nativeView.getPaddingLeft();
let top = nativeView.getPaddingTop();
let right = (value + view.borderWidth) * density;
let right = (value + view.borderRightWidth) * density;
let bottom = nativeView.getPaddingBottom();
nativeView.setPadding(left, top, right, bottom);
}
@@ -712,7 +712,7 @@ export class ViewStyler implements style.Styler {
let left = nativeView.getPaddingLeft();
let top = nativeView.getPaddingTop();
let right = nativeView.getPaddingRight();
let bottom = (value + view.borderWidth) * density;
let bottom = (value + view.borderBottomWidth) * density;
nativeView.setPadding(left, top, right, bottom);
}
@@ -801,11 +801,9 @@ export class ViewStyler implements style.Styler {
// Use the same handler for all background/border properties
// Note: There is no default value getter - the default value is handled in background.ad.onBackgroundOrBorderPropertyChanged
var backgroundAndBorderHandler = new style.StylePropertyChangedHandler(
style.registerHandler(style.backgroundInternalProperty, new style.StylePropertyChangedHandler(
ViewStyler.setBackgroundAndBorder,
ViewStyler.resetBackgroundAndBorder);
style.registerHandler(style.backgroundInternalProperty, backgroundAndBorderHandler);
ViewStyler.resetBackgroundAndBorder));
style.registerHandler(style.nativeLayoutParamsProperty, new style.StylePropertyChangedHandler(
ViewStyler.setNativeLayoutParamsProperty,

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

@@ -73,19 +73,79 @@ declare module "ui/core/view" {
*/
export class View extends proxy.ProxyObject implements ApplyXmlAttributes {
/**
* Gets or sets the corner radius of the view.
* Gets or sets the border color of the view.
*/
borderRadius: number;
borderColor: string | color.Color;
/**
* Gets or sets the top border color of the view.
*/
borderTopColor: color.Color;
/**
* Gets or sets the right border color of the view.
*/
borderRightColor: color.Color;
/**
* Gets or sets the bottom border color of the view.
*/
borderBottomColor: color.Color;
/**
* Gets or sets the left border color of the view.
*/
borderLeftColor: color.Color;
/**
* Gets or sets the border width of the view.
*/
borderWidth: number;
borderWidth: string | number;
/**
* Gets or sets the border color of the view.
* Gets or sets the top border width of the view.
*/
borderColor: color.Color;
borderTopWidth: number;
/**
* Gets or sets the right border width of the view.
*/
borderRightWidth: number;
/**
* Gets or sets the bottom border width of the view.
*/
borderBottomWidth: number;
/**
* Gets or sets the left border width of the view.
*/
borderLeftWidth: number;
/**
* Gets or sets the border radius of the view.
*/
borderRadius: string | number;
/**
* Gets or sets the top left border radius of the view.
*/
borderTopLeftRadius: number;
/**
* Gets or sets the top right border radius of the view.
*/
borderTopRightRadius: number;
/**
* Gets or sets the bottom right border radius of the view.
*/
borderBottomRightRadius: number;
/**
* Gets or sets the bottom left border radius of the view.
*/
borderBottomLeftRadius: number;
/**
* Gets or sets the automation text of the view.

120
tns-core-modules/ui/core/view.ios.ts
View File

@@ -9,13 +9,6 @@ import style = require("ui/styling/style");
import enums = require("ui/enums");
import * as backgroundModule from "ui/styling/background";
var background: typeof backgroundModule;
function ensureBackground() {
if (!background) {
background = require("ui/styling/background");
}
}
global.moduleMerge(viewCommon, exports);
function onAutomationTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
@@ -382,12 +375,12 @@ export class ViewStyler implements style.Styler {
private static setBackgroundInternalProperty(view: View, newValue: any) {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
ensureBackground();
var updateSuspended = view._isPresentationLayerUpdateSuspeneded();
if (!updateSuspended) {
CATransaction.begin();
}
nativeView.backgroundColor = background.ios.createBackgroundUIColor(view);
nativeView.backgroundColor = backgroundModule.ios.createBackgroundUIColor(view);
if (!updateSuspended) {
CATransaction.commit();
}
@@ -446,68 +439,7 @@ export class ViewStyler implements style.Styler {
return nativeView.alpha = 1.0;
}
}
// Border width methods
private static setBorderWidthProperty(view: View, newValue: any) {
if (view._nativeView instanceof UIView) {
(<UIView>view._nativeView).layer.borderWidth = newValue;
}
}
private static resetBorderWidthProperty(view: View, nativeValue: any) {
if (view._nativeView instanceof UIView) {
(<UIView>view._nativeView).layer.borderWidth = nativeValue;
}
}
private static getBorderWidthProperty(view: View): any {
if (view._nativeView instanceof UIView) {
return (<UIView>view._nativeView).layer.borderWidth;
}
return 0;
}
// Border color methods
private static setBorderColorProperty(view: View, newValue: any) {
if (view._nativeView instanceof UIView && newValue instanceof UIColor) {
(<UIView>view._nativeView).layer.borderColor = (<UIColor>newValue).CGColor;
}
}
private static resetBorderColorProperty(view: View, nativeValue: any) {
if (view._nativeView instanceof UIView && nativeValue instanceof UIColor) {
(<UIView>view._nativeView).layer.borderColor = nativeValue;
}
}
private static getBorderColorProperty(view: View): any {
if (view._nativeView instanceof UIView) {
return (<UIView>view._nativeView).layer.borderColor;
}
return undefined;
}
// Border radius methods
private static setBorderRadiusProperty(view: View, newValue: any) {
if (view._nativeView instanceof UIView) {
(<UIView>view._nativeView).layer.cornerRadius = newValue;
(<UIView>view._nativeView).clipsToBounds = true;
}
}
private static resetBorderRadiusProperty(view: View, nativeValue: any) {
if (view._nativeView instanceof UIView) {
(<UIView>view._nativeView).layer.cornerRadius = nativeValue;
}
}
private static getBorderRadiusProperty(view: View): any {
if (view._nativeView instanceof UIView) {
return (<UIView>view._nativeView).layer.cornerRadius;
}
return 0;
}
// Rotate
private static setRotateProperty(view: View, newValue: any) {
view._updateNativeTransform();
@@ -606,40 +538,12 @@ export class ViewStyler implements style.Styler {
return view.ios.layer.zPosition;
}
// Clip-path methods
private static setClipPathProperty(view: View, newValue: any) {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
ensureBackground();
var updateSuspended = view._isPresentationLayerUpdateSuspeneded();
if (!updateSuspended) {
CATransaction.begin();
}
nativeView.backgroundColor = background.ios.createBackgroundUIColor(view);
if (!updateSuspended) {
CATransaction.commit();
}
}
}
private static resetClipPathProperty(view: View, nativeValue: any) {
var nativeView: UIView = <UIView>view._nativeView;
if (nativeView) {
// TODO: Check how to reset.
}
}
public static registerHandlers() {
style.registerHandler(style.backgroundInternalProperty, new style.StylePropertyChangedHandler(
ViewStyler.setBackgroundInternalProperty,
ViewStyler.resetBackgroundInternalProperty,
ViewStyler.getNativeBackgroundInternalValue));
style.registerHandler(style.clipPathProperty, new style.StylePropertyChangedHandler(
ViewStyler.setClipPathProperty,
ViewStyler.resetClipPathProperty));
style.registerHandler(style.visibilityProperty, new style.StylePropertyChangedHandler(
ViewStyler.setVisibilityProperty,
ViewStyler.resetVisibilityProperty));
@@ -647,22 +551,6 @@ export class ViewStyler implements style.Styler {
style.registerHandler(style.opacityProperty, new style.StylePropertyChangedHandler(
ViewStyler.setOpacityProperty,
ViewStyler.resetOpacityProperty));
style.registerHandler(style.borderWidthProperty, new style.StylePropertyChangedHandler(
ViewStyler.setBorderWidthProperty,
ViewStyler.resetBorderWidthProperty,
ViewStyler.getBorderWidthProperty));
style.registerHandler(style.borderColorProperty, new style.StylePropertyChangedHandler(
ViewStyler.setBorderColorProperty,
ViewStyler.resetBorderColorProperty,
ViewStyler.getBorderColorProperty));
style.registerHandler(style.borderRadiusProperty, new style.StylePropertyChangedHandler(
ViewStyler.setBorderRadiusProperty,
ViewStyler.resetBorderRadiusProperty,
ViewStyler.getBorderRadiusProperty));
style.registerHandler(style.rotateProperty, new style.StylePropertyChangedHandler(
ViewStyler.setRotateProperty,
ViewStyler.resetRotateProperty,
@@ -695,4 +583,4 @@ export class ViewStyler implements style.Styler {
}
}
ViewStyler.registerHandlers();
ViewStyler.registerHandlers();

50
tns-core-modules/ui/image/image.android.ts
View File

@@ -4,8 +4,6 @@ import proxy = require("ui/core/proxy");
import * as enumsModule from "ui/enums";
import style = require("ui/styling/style");
import view = require("ui/core/view");
import background = require("ui/styling/background");
import utils = require("utils/utils");
global.moduleMerge(imageCommon, exports);
@@ -71,43 +69,6 @@ export class Image extends imageCommon.Image {
}
export class ImageStyler implements style.Styler {
// Corner radius
private static setBorderRadiusProperty(v: view.View, newValue: any, defaultValue?: any) {
if (!v._nativeView) {
return;
}
var val = Math.round(newValue * utils.layout.getDisplayDensity());
(<org.nativescript.widgets.ImageView>v._nativeView).setCornerRadius(val);
background.ad.onBackgroundOrBorderPropertyChanged(v);
}
private static resetBorderRadiusProperty(v: view.View, nativeValue: any) {
if (!v._nativeView) {
return;
}
(<org.nativescript.widgets.ImageView>v._nativeView).setCornerRadius(0);
background.ad.onBackgroundOrBorderPropertyChanged(v);
}
// Border width
private static setBorderWidthProperty(v: view.View, newValue: any, defaultValue?: any) {
if (!v._nativeView) {
return;
}
var val = Math.round(newValue * utils.layout.getDisplayDensity());
(<org.nativescript.widgets.ImageView>v._nativeView).setBorderWidth(val);
background.ad.onBackgroundOrBorderPropertyChanged(v);
}
private static resetBorderWidthProperty(v: view.View, nativeValue: any) {
if (!v._nativeView) {
return;
}
(<org.nativescript.widgets.ImageView>v._nativeView).setBorderWidth(0);
background.ad.onBackgroundOrBorderPropertyChanged(v);
}
// tint color
private static setTintColorProperty(view: view.View, newValue: any) {
var imageView = <org.nativescript.widgets.ImageView>view._nativeView;
@@ -120,17 +81,6 @@ export class ImageStyler implements style.Styler {
}
public static registerHandlers() {
// Use the same handler for all background/border properties
// Note: There is no default value getter - the default value is handled in background.ad.onBackgroundOrBorderPropertyChanged
style.registerHandler(style.borderRadiusProperty, new style.StylePropertyChangedHandler(
ImageStyler.setBorderRadiusProperty,
ImageStyler.resetBorderRadiusProperty), "Image");
style.registerHandler(style.borderWidthProperty, new style.StylePropertyChangedHandler(
ImageStyler.setBorderWidthProperty,
ImageStyler.resetBorderWidthProperty), "Image");
style.registerHandler(style.tintColorProperty, new style.StylePropertyChangedHandler(
ImageStyler.setTintColorProperty,
ImageStyler.resetTintColorProperty), "Image");

132
tns-core-modules/ui/label/label.ios.ts
View File

@@ -126,28 +126,114 @@ export class LabelStyler implements style.Styler {
return undefined;
}
private static setBorderWidthProperty(view: View, newValue: number) {
LabelStyler.setNativeBorderWidth(view, newValue);
private static setBorderTopWidthProperty(view: View, newValue: number) {
LabelStyler.setNativeBorderTopWidth(view, newValue);
}
private static resetBorderWidthProperty(view: View, nativeValue: number) {
LabelStyler.setNativeBorderWidth(view, nativeValue);
private static resetBorderTopWidthProperty(view: View, nativeValue: number) {
LabelStyler.setNativeBorderTopWidth(view, nativeValue);
}
private static setNativeBorderWidth(view: View, newValue: number) {
private static setNativeBorderTopWidth(view: View, newValue: number) {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof UIView) {
nativeView.layer.borderWidth = newValue;
}
if (nativeView instanceof TNSLabel) {
nativeView.borderThickness = { top: newValue, left: newValue, bottom: newValue, right: newValue };
nativeView.borderThickness = {
top: newValue,
right: nativeView.borderThickness.right,
bottom: nativeView.borderThickness.bottom,
left: nativeView.borderThickness.left
};
}
}
private static getBorderWidthProperty(view: View): number {
private static getBorderTopWidthProperty(view: View): number {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof UIView) {
return nativeView.layer.borderWidth;
if (nativeView instanceof TNSLabel) {
return nativeView.borderThickness.top;
}
return 0;
}
private static setBorderRightWidthProperty(view: View, newValue: number) {
LabelStyler.setNativeBorderRightWidth(view, newValue);
}
private static resetBorderRightWidthProperty(view: View, nativeValue: number) {
LabelStyler.setNativeBorderRightWidth(view, nativeValue);
}
private static setNativeBorderRightWidth(view: View, newValue: number) {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof TNSLabel) {
nativeView.borderThickness = {
top: nativeView.borderThickness.top,
right: newValue,
bottom: nativeView.borderThickness.bottom,
left: nativeView.borderThickness.left
};
}
}
private static getBorderRightWidthProperty(view: View): number {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof TNSLabel) {
return nativeView.borderThickness.right;
}
return 0;
}
private static setBorderBottomWidthProperty(view: View, newValue: number) {
LabelStyler.setNativeBorderBottomWidth(view, newValue);
}
private static resetBorderBottomWidthProperty(view: View, nativeValue: number) {
LabelStyler.setNativeBorderBottomWidth(view, nativeValue);
}
private static setNativeBorderBottomWidth(view: View, newValue: number) {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof TNSLabel) {
nativeView.borderThickness = {
top: nativeView.borderThickness.top,
right: nativeView.borderThickness.right,
bottom: newValue,
left: nativeView.borderThickness.left
};
}
}
private static getBorderBottomWidthProperty(view: View): number {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof TNSLabel) {
return nativeView.borderThickness.bottom;
}
return 0;
}
private static setBorderLeftWidthProperty(view: View, newValue: number) {
LabelStyler.setNativeBorderLeftWidth(view, newValue);
}
private static resetBorderLeftWidthProperty(view: View, nativeValue: number) {
LabelStyler.setNativeBorderLeftWidth(view, nativeValue);
}
private static setNativeBorderLeftWidth(view: View, newValue: number) {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof TNSLabel) {
nativeView.borderThickness = {
top: nativeView.borderThickness.top,
right: nativeView.borderThickness.right,
bottom: nativeView.borderThickness.bottom,
left: newValue
};
}
}
private static getBorderLeftWidthProperty(view: View): number {
let nativeView = <UIView>view._nativeView;
if (nativeView instanceof TNSLabel) {
return nativeView.borderThickness.left;
}
return 0;
}
@@ -180,10 +266,24 @@ export class LabelStyler implements style.Styler {
LabelStyler.setBackgroundInternalProperty,
LabelStyler.resetBackgroundInternalProperty,
LabelStyler.getNativeBackgroundInternalValue), "Label");
style.registerHandler(style.borderWidthProperty, new style.StylePropertyChangedHandler(
LabelStyler.setBorderWidthProperty,
LabelStyler.resetBorderWidthProperty,
LabelStyler.getBorderWidthProperty), "Label");
style.registerHandler(style.borderTopWidthProperty, new style.StylePropertyChangedHandler(
LabelStyler.setBorderTopWidthProperty,
LabelStyler.resetBorderTopWidthProperty,
LabelStyler.getBorderTopWidthProperty), "Label");
style.registerHandler(style.borderRightWidthProperty, new style.StylePropertyChangedHandler(
LabelStyler.setBorderRightWidthProperty,
LabelStyler.resetBorderRightWidthProperty,
LabelStyler.getBorderRightWidthProperty), "Label");
style.registerHandler(style.borderBottomWidthProperty, new style.StylePropertyChangedHandler(
LabelStyler.setBorderBottomWidthProperty,
LabelStyler.resetBorderBottomWidthProperty,
LabelStyler.getBorderBottomWidthProperty), "Label");
style.registerHandler(style.borderLeftWidthProperty, new style.StylePropertyChangedHandler(
LabelStyler.setBorderLeftWidthProperty,
LabelStyler.resetBorderLeftWidthProperty,
LabelStyler.getBorderLeftWidthProperty), "Label");
style.registerHandler(style.nativePaddingsProperty, new style.StylePropertyChangedHandler(
LabelStyler.setPaddingProperty,
LabelStyler.resetPaddingProperty,

8
tns-core-modules/ui/layouts/absolute-layout/absolute-layout.ios.ts
View File

@@ -36,8 +36,8 @@ export class AbsoluteLayout extends common.AbsoluteLayout {
measureHeight = Math.max(measureHeight, AbsoluteLayout.getTop(child) * density + childSize.measuredHeight);
});
measureWidth += (this.paddingLeft + this.paddingRight) * density;
measureHeight += (this.paddingTop + this.paddingBottom) * density;
measureWidth += (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
measureHeight += (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
measureWidth = Math.max(measureWidth, this.minWidth * density);
measureHeight = Math.max(measureHeight, this.minHeight * density);
@@ -58,8 +58,8 @@ export class AbsoluteLayout extends common.AbsoluteLayout {
let childWidth = child.getMeasuredWidth();
let childHeight = child.getMeasuredHeight();
let childLeft = (this.paddingLeft + AbsoluteLayout.getLeft(child)) * density;
let childTop = (this.paddingTop + AbsoluteLayout.getTop(child)) * density;
let childLeft = (this.borderLeftWidth + this.paddingLeft + AbsoluteLayout.getLeft(child)) * density;
let childTop = (this.borderTopWidth + this.paddingTop + AbsoluteLayout.getTop(child)) * density;
let childRight = childLeft + childWidth + (lp.leftMargin + lp.rightMargin) * density;
let childBottom = childTop + childHeight + (lp.topMargin + lp.bottomMargin) * density;

16
tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts
View File

@@ -27,8 +27,8 @@ export class DockLayout extends common.DockLayout {
var density = utils.layout.getDisplayDensity();
var remainingWidth = widthMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : width - ((this.paddingLeft + this.paddingRight) * density);
var remainingHeight = heightMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : height - ((this.paddingTop + this.paddingBottom) * density);
var remainingWidth = widthMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : width - ((this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density);
var remainingHeight = heightMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : height - ((this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density);
var tempHeight: number = 0;
var tempWidth: number = 0;
@@ -69,8 +69,8 @@ export class DockLayout extends common.DockLayout {
}
});
measureWidth += (this.paddingLeft + this.paddingRight) * density;
measureHeight += (this.paddingTop + this.paddingBottom) * density;
measureWidth += (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
measureHeight += (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
measureWidth = Math.max(measureWidth, this.minWidth * density);
measureHeight = Math.max(measureHeight, this.minHeight * density);
@@ -86,14 +86,14 @@ export class DockLayout extends common.DockLayout {
var density = utils.layout.getDisplayDensity();
var childLeft = this.paddingLeft * density;
var childTop = this.paddingTop * density;
var childLeft = (this.borderLeftWidth + this.paddingLeft) * density;
var childTop = (this.borderTopWidth + this.paddingTop) * density;
var x = childLeft;
var y = childTop;
var remainingWidth = Math.max(0, right - left - ((this.paddingLeft + this.paddingRight) * density));
var remainingHeight = Math.max(0, bottom - top - ((this.paddingTop + this.paddingBottom) * density));
var remainingWidth = Math.max(0, right - left - ((this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density));
var remainingHeight = Math.max(0, bottom - top - ((this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density));
this.eachLayoutChild((child, last) => {
let lp: CommonLayoutParams = child.style._getValue(nativeLayoutParamsProperty);

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

@@ -114,8 +114,8 @@ export class GridLayout extends common.GridLayout {
let heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
let density = utils.layout.getDisplayDensity();
let verticalPadding = (this.paddingTop + this.paddingBottom) * density;
let horizontalPadding = (this.paddingLeft + this.paddingRight) * density;
let verticalPadding = (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
let horizontalPadding = (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
let infinityWidth = widthMode === utils.layout.UNSPECIFIED;
let infinityHeight = heightMode === utils.layout.UNSPECIFIED;
@@ -159,8 +159,8 @@ export class GridLayout extends common.GridLayout {
let density = utils.layout.getDisplayDensity();
let paddingLeft = this.paddingLeft * density;
let paddingTop = this.paddingTop * density;
let paddingLeft = (this.borderLeftWidth + this.paddingLeft) * density;
let paddingTop = (this.borderTopWidth + this.paddingTop) * density;
this.columnOffsets.length = 0;
this.rowOffsets.length = 0;

20
tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts
View File

@@ -24,8 +24,8 @@ export class StackLayout extends common.StackLayout {
var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
var isVertical = this.orientation === Orientation.vertical;
var verticalPadding = (this.paddingTop + this.paddingBottom) * density;
var horizontalPadding = (this.paddingLeft + this.paddingRight) * density;
var verticalPadding = (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
var horizontalPadding = (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
var measureSpec: number;
@@ -100,10 +100,10 @@ export class StackLayout extends common.StackLayout {
private layoutVertical(left: number, top: number, right: number, bottom: number): void {
var density = utils.layout.getDisplayDensity();
var paddingLeft = this.paddingLeft * density;
var paddingRight = this.paddingRight * density;
var paddingTop = this.paddingTop * density;
var paddingBottom = this.paddingBottom * density;
var paddingLeft = (this.borderLeftWidth + this.paddingLeft) * density;
var paddingRight = (this.borderRightWidth + this.paddingRight) * density;
var paddingTop = (this.borderTopWidth + this.paddingTop) * density;
var paddingBottom = (this.borderBottomWidth + this.paddingBottom) * density;
var childTop: number;
var childLeft: number = paddingLeft;
@@ -137,10 +137,10 @@ export class StackLayout extends common.StackLayout {
private layoutHorizontal(left: number, top: number, right: number, bottom: number): void {
var density = utils.layout.getDisplayDensity();
var paddingLeft = this.paddingLeft * density;
var paddingRight = this.paddingRight * density;
var paddingTop = this.paddingTop * density;
var paddingBottom = this.paddingBottom * density;
var paddingLeft = (this.borderLeftWidth + this.paddingLeft) * density;
var paddingRight = (this.borderRightWidth + this.paddingRight) * density;
var paddingTop = (this.borderTopWidth + this.paddingTop) * density;
var paddingBottom = (this.borderBottomWidth + this.paddingBottom) * density;
var childTop: number = paddingTop;
var childLeft: number;

25
tns-core-modules/ui/layouts/wrap-layout/wrap-layout.ios.ts
View File

@@ -33,8 +33,8 @@ export class WrapLayout extends common.WrapLayout {
var density = utils.layout.getDisplayDensity();
var horizontalPadding = (this.paddingLeft + this.paddingRight) * density;
var verticalPadding = (this.paddingTop + this.paddingBottom) * density;
var horizontalPadding = (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
var verticalPadding = (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
var availableWidth = widthMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : utils.layout.getMeasureSpecSize(widthMeasureSpec) - horizontalPadding;
var availableHeight = heightMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : utils.layout.getMeasureSpecSize(heightMeasureSpec) - verticalPadding;
@@ -129,14 +129,19 @@ export class WrapLayout extends common.WrapLayout {
var density = utils.layout.getDisplayDensity();
var childLeft = this.paddingLeft * density;
var childTop = this.paddingTop * density;
const topPadding = (this.borderTopWidth + this.paddingTop) * density;
const leftPadding = (this.borderLeftWidth + this.paddingLeft) * density;
const bottomPadding = (this.paddingBottom + this.borderBottomWidth) * density;
const rightPadding = (this.paddingRight + this.borderRightWidth) * density;
var childLeft = leftPadding;
var childTop = topPadding;
var childrenLength: number;
if (isVertical) {
childrenLength = bottom - top - (this.paddingBottom * density);
childrenLength = bottom - top - bottomPadding;
}
else {
childrenLength = right - left - (this.paddingRight * density);
childrenLength = right - left - rightPadding;
}
var rowOrColumn = 0;
@@ -152,10 +157,10 @@ export class WrapLayout extends common.WrapLayout {
if (isVertical) {
childWidth = length;
childHeight = this.itemHeight > 0 ? this.itemHeight * density : childHeight;
let isFirst = childTop === this.paddingTop * density;
let isFirst = childTop === topPadding;
if (childTop + childHeight > childrenLength) {
// Move to top.
childTop = this.paddingTop * density;
childTop = topPadding;
if (!isFirst) {
// Move to right with current column width.
@@ -172,10 +177,10 @@ export class WrapLayout extends common.WrapLayout {
else {
childWidth = this.itemWidth > 0 ? this.itemWidth * density : childWidth;
childHeight = length;
let isFirst = childLeft === this.paddingLeft * density;
let isFirst = childLeft === leftPadding;
if (childLeft + childWidth > childrenLength) {
// Move to left.
childLeft = this.paddingLeft * density;
childLeft = leftPadding;
if (!isFirst) {
// Move to bottom with current row height.

18
tns-core-modules/ui/progress/progress.android.ts
View File

@@ -78,9 +78,21 @@ export class ProgressStyler implements style.Styler {
ProgressStyler.setBackgroundAndBorderProperty,
ProgressStyler.resetBackgroundAndBorderProperty), "Progress");
style.registerHandler(style.borderWidthProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderColorProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderRadiusProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderTopColorProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderRightColorProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderBottomColorProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderLeftColorProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderTopWidthProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderRightWidthProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderBottomWidthProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderLeftWidthProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderTopLeftRadiusProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderTopRightRadiusProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderBottomRightRadiusProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.borderBottomLeftRadiusProperty, style.ignorePropertyHandler, "Progress");
style.registerHandler(style.backgroundInternalProperty, style.ignorePropertyHandler, "Progress");
}
}

18
tns-core-modules/ui/slider/slider.android.ts
View File

@@ -127,9 +127,21 @@ export class SliderStyler implements style.Styler {
SliderStyler.setBackgroundAndBorderProperty,
SliderStyler.resetBackgroundAndBorderProperty), "Slider");
style.registerHandler(style.borderWidthProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderColorProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderRadiusProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderTopColorProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderRightColorProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderBottomColorProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderLeftColorProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderTopWidthProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderRightWidthProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderBottomWidthProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderLeftWidthProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderTopLeftRadiusProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderTopRightRadiusProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderBottomRightRadiusProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.borderBottomLeftRadiusProperty, style.ignorePropertyHandler, "Slider");
style.registerHandler(style.backgroundInternalProperty, style.ignorePropertyHandler, "Slider");
}
}

293
tns-core-modules/ui/styling/background-common.ts
View File

@@ -4,7 +4,6 @@ import enums = require("ui/enums");
import definition = require("ui/styling/background");
import cssValue = require("css-value");
import utils = require("utils/utils");
import { isAndroid } from "platform";
import * as typesModule from "utils/types";
var types: typeof typesModule;
@@ -22,75 +21,158 @@ interface CSSValue {
}
export class Background implements definition.Background {
public static default = new Background(undefined, undefined, undefined, undefined, undefined, 0, undefined, 0, undefined);
public static default = new Background();
public color: colorModule.Color;
public image: imageSource.ImageSource;
public repeat: string;
public position: string;
public size: string;
public borderTopColor: colorModule.Color;
public borderRightColor: colorModule.Color;
public borderBottomColor: colorModule.Color;
public borderLeftColor: colorModule.Color;
public borderTopWidth: number = 0;
public borderRightWidth: number = 0;
public borderBottomWidth: number = 0;
public borderLeftWidth: number = 0;
public borderTopLeftRadius: number = 0;
public borderTopRightRadius: number = 0;
public borderBottomLeftRadius: number = 0;
public borderBottomRightRadius: number = 0;
public clipPath: string;
color: colorModule.Color;
image: imageSource.ImageSource;
repeat: string;
position: string;
size: string;
// The ones below are used on Android only
borderWidth: number = 0;
borderColor: colorModule.Color;
borderRadius: number = 0;
clipPath: string;
constructor(
color: colorModule.Color,
image: imageSource.ImageSource,
repeat: string,
position: string,
size: string,
borderWidth: number,
borderColor: colorModule.Color,
borderRadius: number,
clipPath: string
) {
this.color = color;
this.image = image;
this.repeat = repeat;
this.position = position;
this.size = size;
this.borderWidth = borderWidth;
this.borderColor = borderColor;
this.borderRadius = borderRadius;
this.clipPath = clipPath;
private clone(): Background{
let clone = new Background();
clone.color = this.color;
clone.image = this.image;
clone.repeat = this.repeat;
clone.position = this.position;
clone.size = this.size;
clone.borderTopColor = this.borderTopColor;
clone.borderRightColor = this.borderRightColor;
clone.borderBottomColor = this.borderBottomColor;
clone.borderLeftColor = this.borderLeftColor;
clone.borderTopWidth = this.borderTopWidth;
clone.borderRightWidth = this.borderRightWidth;
clone.borderBottomWidth = this.borderBottomWidth;
clone.borderLeftWidth = this.borderLeftWidth;
clone.borderTopLeftRadius = this.borderTopLeftRadius;
clone.borderTopRightRadius = this.borderTopRightRadius;
clone.borderBottomRightRadius = this.borderBottomRightRadius;
clone.borderBottomLeftRadius = this.borderBottomLeftRadius;
clone.clipPath = this.clipPath;
return clone;
}
public withColor(value: colorModule.Color): Background {
return new Background(value, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
let clone = this.clone();
clone.color = value;
return clone;
}
public withImage(value: imageSource.ImageSource): Background {
return new Background(this.color, value, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
let clone = this.clone();
clone.image = value;
return clone;
}
public withRepeat(value: string): Background {
return new Background(this.color, this.image, value, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
let clone = this.clone();
clone.repeat = value;
return clone;
}
public withPosition(value: string): Background {
return new Background(this.color, this.image, this.repeat, value, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
let clone = this.clone();
clone.position = value;
return clone;
}
public withSize(value: string): Background {
return new Background(this.color, this.image, this.repeat, this.position, value, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
let clone = this.clone();
clone.size = value;
return clone;
}
public withBorderWidth(value: number): Background {
return new Background(this.color, this.image, this.repeat, this.position, this.size, value, this.borderColor, this.borderRadius, this.clipPath);
public withBorderTopColor(value: colorModule.Color): Background {
let clone = this.clone();
clone.borderTopColor = value;
return clone;
}
public withBorderRightColor(value: colorModule.Color): Background {
let clone = this.clone();
clone.borderRightColor = value;
return clone;
}
public withBorderBottomColor(value: colorModule.Color): Background {
let clone = this.clone();
clone.borderBottomColor = value;
return clone;
}
public withBorderLeftColor(value: colorModule.Color): Background {
let clone = this.clone();
clone.borderLeftColor = value;
return clone;
}
public withBorderColor(value: colorModule.Color): Background {
return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, value, this.borderRadius, this.clipPath);
public withBorderTopWidth(value: number): Background {
let clone = this.clone();
clone.borderTopWidth = value;
return clone;
}
public withBorderRadius(value: number): Background {
return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, value, this.clipPath);
public withBorderRightWidth(value: number): Background {
let clone = this.clone();
clone.borderRightWidth = value;
return clone;
}
public withBorderBottomWidth(value: number): Background {
let clone = this.clone();
clone.borderBottomWidth = value;
return clone;
}
public withBorderLeftWidth(value: number): Background {
let clone = this.clone();
clone.borderLeftWidth = value;
return clone;
}
public withBorderTopLeftRadius(value: number): Background {
let clone = this.clone();
clone.borderTopLeftRadius = value;
return clone;
}
public withBorderTopRightRadius(value: number): Background {
let clone = this.clone();
clone.borderTopRightRadius = value;
return clone;
}
public withBorderBottomRightRadius(value: number): Background {
let clone = this.clone();
clone.borderBottomRightRadius = value;
return clone;
}
public withBorderBottomLeftRadius(value: number): Background {
let clone = this.clone();
clone.borderBottomLeftRadius = value;
return clone;
}
public withClipPath(value: string): Background {
return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, value);
let clone = this.clone();
clone.clipPath = value;
return clone;
}
public getDrawParams(width: number, height: number): definition.BackgroundDrawParams {
@@ -252,17 +334,11 @@ export class Background implements definition.Background {
public isEmpty(): boolean {
ensureTypes();
if (isAndroid){
return types.isNullOrUndefined(this.image)
&& types.isNullOrUndefined(this.color)
&& !this.borderWidth
&& !this.borderRadius
&& !this.clipPath;
}
else {
return types.isNullOrUndefined(this.image)
&& types.isNullOrUndefined(this.color);
}
return types.isNullOrUndefined(this.color)
&& types.isNullOrUndefined(this.image)
&& !this.hasBorderWidth()
&& !this.hasBorderRadius()
&& !this.clipPath;
}
public static equals(value1: Background, value2: Background): boolean {
@@ -276,29 +352,94 @@ export class Background implements definition.Background {
return false;
}
if (isAndroid){
return value1.image === value2.image
&& value1.position === value2.position
&& value1.repeat === value2.repeat
&& value1.size === value2.size
&& colorModule.Color.equals(value1.color, value2.color)
&& value1.borderWidth === value2.borderWidth
&& colorModule.Color.equals(value1.borderColor, value2.borderColor)
&& value1.borderRadius === value2.borderRadius
&& value1.clipPath === value2.clipPath;
}
else {
return value1.image === value2.image
&& value1.position === value2.position
&& value1.repeat === value2.repeat
&& value1.size === value2.size
&& colorModule.Color.equals(value1.color, value2.color);
}
return colorModule.Color.equals(value1.color, value2.color)
&& value1.image === value2.image
&& value1.position === value2.position
&& value1.repeat === value2.repeat
&& value1.size === value2.size
&& colorModule.Color.equals(value1.borderTopColor, value2.borderTopColor)
&& colorModule.Color.equals(value1.borderRightColor, value2.borderRightColor)
&& colorModule.Color.equals(value1.borderBottomColor, value2.borderBottomColor)
&& colorModule.Color.equals(value1.borderLeftColor, value2.borderLeftColor)
&& value1.borderTopWidth === value2.borderTopWidth
&& value1.borderRightWidth === value2.borderRightWidth
&& value1.borderBottomWidth === value2.borderBottomWidth
&& value1.borderLeftWidth === value2.borderLeftWidth
&& value1.borderTopLeftRadius === value2.borderTopLeftRadius
&& value1.borderTopRightRadius === value2.borderTopRightRadius
&& value1.borderBottomRightRadius === value2.borderBottomRightRadius
&& value1.borderBottomLeftRadius === value2.borderBottomLeftRadius
&& value1.clipPath === value2.clipPath;
}
public hasBorderColor(): boolean {
return !types.isNullOrUndefined(this.borderTopColor)
|| !types.isNullOrUndefined(this.borderRightColor)
|| !types.isNullOrUndefined(this.borderBottomColor)
|| !types.isNullOrUndefined(this.borderLeftColor);
}
public hasBorderWidth(): boolean {
return this.borderTopWidth > 0
|| this.borderRightWidth > 0
|| this.borderBottomWidth > 0
|| this.borderLeftWidth > 0
}
public hasBorderRadius(): boolean {
return this.borderTopLeftRadius > 0
|| this.borderTopRightRadius > 0
|| this.borderBottomRightRadius > 0
|| this.borderBottomLeftRadius > 0
}
public hasUniformBorderColor(): boolean {
return colorModule.Color.equals(this.borderTopColor, this.borderRightColor)
&& colorModule.Color.equals(this.borderTopColor, this.borderBottomColor)
&& colorModule.Color.equals(this.borderTopColor, this.borderLeftColor);
}
public hasUniformBorderWidth(): boolean {
return this.borderTopWidth === this.borderRightWidth
&& this.borderTopWidth === this.borderBottomWidth
&& this.borderTopWidth === this.borderLeftWidth;
}
public hasUniformBorderRadius(): boolean {
return this.borderTopLeftRadius === this.borderTopRightRadius
&& this.borderTopLeftRadius === this.borderBottomRightRadius
&& this.borderTopLeftRadius === this.borderBottomLeftRadius;
}
public hasUniformBorder(): boolean {
return this.hasUniformBorderColor()
&& this.hasUniformBorderWidth()
&& this.hasUniformBorderRadius();
}
public getUniformBorderColor(): colorModule.Color {
if (this.hasUniformBorderColor()){
return this.borderTopColor;
}
return undefined;
};
public getUniformBorderWidth(): number {
if (this.hasUniformBorderWidth()){
return this.borderTopWidth;
}
return 0;
};
public getUniformBorderRadius(): number {
if (this.hasUniformBorderRadius()){
return this.borderTopLeftRadius;
}
return 0;
};
public toString(): string {
return `isEmpty: ${this.isEmpty()}; color: ${this.color}; image: ${this.image}; repeat: ${this.repeat}; position: ${this.position}; size: ${this.size}; borderWidth: ${this.borderWidth}; borderColor: ${this.borderColor}; borderRadius: ${this.borderRadius}; clipPath: ${this.clipPath};`;
return `isEmpty: ${this.isEmpty()}; color: ${this.color}; image: ${this.image}; repeat: ${this.repeat}; position: ${this.position}; size: ${this.size}; borderTopColor: ${this.borderTopColor}; borderRightColor: ${this.borderRightColor}; borderBottomColor: ${this.borderBottomColor}; borderLeftColor: ${this.borderLeftColor}; borderTopWidth: ${this.borderTopWidth}; borderRightWidth: ${this.borderRightWidth}; borderBottomWidth: ${this.borderBottomWidth}; borderLeftWidth: ${this.borderLeftWidth}; borderTopLeftRadius: ${this.borderTopLeftRadius}; borderTopRightRadius: ${this.borderTopRightRadius}; borderBottomRightRadius: ${this.borderBottomRightRadius}; borderBottomLeftRadius: ${this.borderBottomLeftRadius}; clipPath: ${this.clipPath};`;
}
}

34
tns-core-modules/ui/styling/background.android.ts
View File

@@ -51,8 +51,8 @@ export module ad {
if (v instanceof button.Button
&& !types.isNullOrUndefined(backgroundDrawable)
&& types.isFunction(backgroundDrawable.setColorFilter)
&& background.borderWidth === 0
&& background.borderRadius === 0
&& !background.hasBorderWidth()
&& !background.hasBorderRadius()
&& !background.clipPath
&& types.isNullOrUndefined(background.image)
&& !types.isNullOrUndefined(background.color)) {
@@ -75,7 +75,7 @@ export module ad {
refreshBorderDrawable(v, <org.nativescript.widgets.BorderDrawable>backgroundDrawable);
}
if ((background.borderWidth || background.borderRadius || background.clipPath) && getSDK() < 18) {
if ((background.hasBorderWidth() || background.hasBorderRadius() || background.clipPath) && getSDK() < 18) {
// Switch to software because of unsupported canvas methods if hardware acceleration is on:
// http://developer.android.com/guide/topics/graphics/hardware-accel.html
cache.layerType = cache.getLayerType();
@@ -107,10 +107,10 @@ export module ad {
let bottomPadding = v.style.paddingBottom ? v.style.paddingBottom : nativeView.getPaddingBottom() / density;
nativeView.setPadding(
Math.round((background.borderWidth + leftPadding) * density),
Math.round((background.borderWidth + topPadding) * density),
Math.round((background.borderWidth + rightPadding) * density),
Math.round((background.borderWidth + bottomPadding) * density)
Math.round((background.borderLeftWidth + leftPadding) * density),
Math.round((background.borderTopWidth + topPadding) * density),
Math.round((background.borderRightWidth + rightPadding) * density),
Math.round((background.borderBottomWidth + bottomPadding) * density)
);
}
}
@@ -128,10 +128,24 @@ function refreshBorderDrawable(view: view.View, borderDrawable: org.nativescript
}
borderDrawable.refresh(
background.borderWidth,
(background.borderColor && background.borderColor.android) ? background.borderColor.android : 0,
background.borderRadius,
(background.borderTopColor && background.borderTopColor.android) ? background.borderTopColor.android : 0,
(background.borderRightColor && background.borderRightColor.android) ? background.borderRightColor.android : 0,
(background.borderBottomColor && background.borderBottomColor.android) ? background.borderBottomColor.android : 0,
(background.borderLeftColor && background.borderLeftColor.android) ? background.borderLeftColor.android : 0,
background.borderTopWidth,
background.borderRightWidth,
background.borderBottomWidth,
background.borderLeftWidth,
background.borderTopLeftRadius,
background.borderTopRightRadius,
background.borderBottomRightRadius,
background.borderBottomLeftRadius,
background.clipPath,
(background.color && background.color.android) ? background.color.android : 0,
(background.image && background.image.android) ? background.image.android : null,
background.repeat,

67
tns-core-modules/ui/styling/background.d.ts vendored
View File

@@ -13,37 +13,43 @@ declare module "ui/styling/background" {
}
export class Background {
static default: Background;
color: colorModule.Color;
image: imageSource.ImageSource;
repeat: string;
position: string;
size: string;
borderWidth: number;
borderColor: colorModule.Color;
borderRadius: number;
clipPath: string;
constructor(
color: colorModule.Color,
image: imageSource.ImageSource,
repeat: string,
position: string,
size: string,
borderWidth: number,
borderColor: colorModule.Color,
borderRadius: number,
clipPath: string
);
public static default: Background;
public color: colorModule.Color;
public image: imageSource.ImageSource;
public repeat: string;
public position: string;
public size: string;
public borderTopColor: colorModule.Color;
public borderRightColor: colorModule.Color;
public borderBottomColor: colorModule.Color;
public borderLeftColor: colorModule.Color;
public borderTopWidth: number;
public borderRightWidth: number;
public borderBottomWidth: number;
public borderLeftWidth: number;
public borderTopLeftRadius: number;
public borderTopRightRadius: number;
public borderBottomRightRadius: number;
public borderBottomLeftRadius: number;
public clipPath: string;
public withColor(value: colorModule.Color): Background;
public withImage(value: imageSource.ImageSource): Background;
public withRepeat(value: string): Background;
public withPosition(value: string): Background;
public withSize(value: string): Background;
public withBorderWidth(value: number): Background;
public withBorderColor(value: colorModule.Color): Background;
public withBorderRadius(value: number): Background;
public withBorderTopColor(value: colorModule.Color): Background;
public withBorderRightColor(value: colorModule.Color): Background;
public withBorderBottomColor(value: colorModule.Color): Background;
public withBorderLeftColor(value: colorModule.Color): Background;
public withBorderTopWidth(value: number): Background;
public withBorderRightWidth(value: number): Background;
public withBorderBottomWidth(value: number): Background;
public withBorderLeftWidth(value: number): Background;
public withBorderTopLeftRadius(value: number): Background;
public withBorderTopRightRadius(value: number): Background;
public withBorderBottomRightRadius(value: number): Background;
public withBorderBottomLeftRadius(value: number): Background;
public withClipPath(value: string): Background;
public getDrawParams(width: number, height: number): BackgroundDrawParams;
@@ -51,6 +57,17 @@ declare module "ui/styling/background" {
public isEmpty(): boolean;
public static equals(value1: Background, value2: Background): boolean;
public hasBorderColor(): boolean;
public hasBorderWidth(): boolean;
public hasBorderRadius(): boolean;
public hasUniformBorderColor(): boolean;
public hasUniformBorderWidth(): boolean;
public hasUniformBorderRadius(): boolean;
public hasUniformBorder(): boolean;
public getUniformBorderColor(): colorModule.Color;
public getUniformBorderWidth(): number;
public getUniformBorderRadius(): number;
}
export module ios {

168
tns-core-modules/ui/styling/background.ios.ts
View File

@@ -1,6 +1,7 @@
import viewModule = require("ui/core/view");
import common = require("./background-common");
import * as styleModule from "./style";
import { Color } from "color";
import * as utils from "utils/utils";
@@ -15,34 +16,160 @@ function ensureStyle() {
export module ios {
export function createBackgroundUIColor(view: viewModule.View, flip?: boolean): UIColor {
if (!view._nativeView) {
let nativeView = <UIView>view._nativeView;
if (!nativeView) {
return undefined;
}
ensureStyle();
if (view.style.clipPath) {
drawClipPath(view);
}
var background = <common.Background>view.style._getValue(style.backgroundInternalProperty);
let background = <common.Background>view.style._getValue(style.backgroundInternalProperty);
if (!background || background.isEmpty()) {
return undefined;
}
if (!background.image) {
return background.color.ios;
// Clip-path
if (background.clipPath) {
drawClipPath(nativeView, background);
}
// We have an image for a background
var frame = (<UIView>view._nativeView).frame;
var boundsWidth = frame.size.width;
var boundsHeight = frame.size.height;
// Borders
if (background.hasUniformBorder()){
let borderColor = background.getUniformBorderColor();
if (borderColor && borderColor.ios){
nativeView.layer.borderColor = borderColor.ios.CGColor;
}
else {
nativeView.layer.borderColor = undefined;
}
nativeView.layer.borderWidth = background.getUniformBorderWidth();
nativeView.layer.cornerRadius = background.getUniformBorderRadius();
nativeView.clipsToBounds = (nativeView.layer.cornerRadius > 0);
}
else { // Draw non-uniform borders
// Clear everything
nativeView.layer.borderColor = undefined;
nativeView.layer.borderWidth = 0;
nativeView.layer.cornerRadius = 0;
nativeView.clipsToBounds = false;
if (nativeView["topBorderLayer"]){
(<CAShapeLayer>nativeView["topBorderLayer"]).removeFromSuperlayer();
}
if (nativeView["rightBorderLayer"]){
(<CAShapeLayer>nativeView["rightBorderLayer"]).removeFromSuperlayer();
}
if (nativeView["bottomBorderLayer"]){
(<CAShapeLayer>nativeView["bottomBorderLayer"]).removeFromSuperlayer();
}
if (nativeView["leftBorderLayer"]){
(<CAShapeLayer>nativeView["leftBorderLayer"]).removeFromSuperlayer();
}
// Draw borders
let nativeViewBounds = {
left: nativeView.bounds.origin.x,
top: nativeView.bounds.origin.y,
bottom: nativeView.bounds.size.height,
right: nativeView.bounds.size.width
};
let top = background.borderTopWidth;
let right = background.borderRightWidth;
let bottom = background.borderBottomWidth;
let left = background.borderLeftWidth;
let lto: viewModule.Point = {x: nativeViewBounds.left, y: nativeViewBounds.top};// left-top-outside
let lti: viewModule.Point = {x: nativeViewBounds.left + left, y: nativeViewBounds.top + top}; // left-top-inside
let rto: viewModule.Point = {x: nativeViewBounds.right, y: nativeViewBounds.top}; // right-top-outside
let rti: viewModule.Point = {x: nativeViewBounds.right - right, y: nativeViewBounds.top + top}; // right-top-inside
let rbo: viewModule.Point = {x: nativeViewBounds.right, y: nativeViewBounds.bottom}; // right-bottom-outside
let rbi: viewModule.Point = {x: nativeViewBounds.right - right, y: nativeViewBounds.bottom - bottom}; // right-bottom-inside
let lbo: viewModule.Point = {x: nativeViewBounds.left, y: nativeViewBounds.bottom}; // left-bottom-outside
let lbi: viewModule.Point = {x: nativeViewBounds.left + left, y: nativeViewBounds.bottom - bottom}; // left-bottom-inside
if (top > 0 && background.borderTopColor && background.borderTopColor.ios){
let topBorderPath = CGPathCreateMutable();
CGPathMoveToPoint(topBorderPath, null, lto.x, lto.y);
CGPathAddLineToPoint(topBorderPath, null, rto.x, rto.y);
CGPathAddLineToPoint(topBorderPath, null, rti.x, rti.y);
CGPathAddLineToPoint(topBorderPath, null, lti.x, lti.y);
CGPathAddLineToPoint(topBorderPath, null, lto.x, lto.y);
let topBorderLayer = CAShapeLayer.layer();
topBorderLayer.fillColor = background.borderTopColor.ios.CGColor;
topBorderLayer.path = topBorderPath;
nativeView.layer.addSublayer(topBorderLayer);
nativeView["topBorderLayer"] = topBorderLayer;
}
if (right > 0 && background.borderRightColor && background.borderRightColor.ios){
let rightBorderPath = CGPathCreateMutable();
CGPathMoveToPoint(rightBorderPath, null, rto.x, rto.y);
CGPathAddLineToPoint(rightBorderPath, null, rbo.x, rbo.y);
CGPathAddLineToPoint(rightBorderPath, null, rbi.x, rbi.y);
CGPathAddLineToPoint(rightBorderPath, null, rti.x, rti.y);
CGPathAddLineToPoint(rightBorderPath, null, rto.x, rto.y);
let rightBorderLayer = CAShapeLayer.layer();
rightBorderLayer.fillColor = background.borderRightColor.ios.CGColor;
rightBorderLayer.path = rightBorderPath;
nativeView.layer.addSublayer(rightBorderLayer);
nativeView["rightBorderLayer"] = rightBorderLayer;
}
if (bottom > 0 && background.borderBottomColor && background.borderBottomColor.ios){
let bottomBorderPath = CGPathCreateMutable();
CGPathMoveToPoint(bottomBorderPath, null, rbo.x, rbo.y);
CGPathAddLineToPoint(bottomBorderPath, null, lbo.x, lbo.y);
CGPathAddLineToPoint(bottomBorderPath, null, lbi.x, lbi.y);
CGPathAddLineToPoint(bottomBorderPath, null, rbi.x, rbi.y);
CGPathAddLineToPoint(bottomBorderPath, null, rbo.x, rbo.y);
let bottomBorderLayer = CAShapeLayer.layer();
bottomBorderLayer.fillColor = background.borderBottomColor.ios.CGColor;
bottomBorderLayer.path = bottomBorderPath;
nativeView.layer.addSublayer(bottomBorderLayer);
nativeView["bottomBorderLayer"] = bottomBorderLayer;
}
if (left > 0 && background.borderLeftColor && background.borderLeftColor.ios){
let leftBorderPath = CGPathCreateMutable();
CGPathMoveToPoint(leftBorderPath, null, lbo.x, lbo.y);
CGPathAddLineToPoint(leftBorderPath, null, lto.x, lto.y);
CGPathAddLineToPoint(leftBorderPath, null, lti.x, lti.y);
CGPathAddLineToPoint(leftBorderPath, null, lbi.x, lbi.y);
CGPathAddLineToPoint(leftBorderPath, null, lbo.x, lbo.y);
let leftBorderLayer = CAShapeLayer.layer();
leftBorderLayer.fillColor = background.borderLeftColor.ios.CGColor;
leftBorderLayer.path = leftBorderPath;
nativeView.layer.addSublayer(leftBorderLayer);
nativeView["leftBorderLayer"] = leftBorderLayer;
}
}
if (!background.image) {
return background.color ? background.color.ios : undefined;
}
let frame = nativeView.frame;
let boundsWidth = frame.size.width;
let boundsHeight = frame.size.height;
if (!boundsWidth || !boundsHeight) {
return undefined;
}
// We have an image for a background
var img = <UIImage>background.image.ios;
var params = background.getDrawParams(boundsWidth, boundsHeight);
@@ -106,10 +233,9 @@ export module ios {
}
}
function drawClipPath(view: viewModule.View) {
function drawClipPath(nativeView: UIView, background: common.Background) {
var path: any;
var nativeView = <UIView>view._nativeView;
var bounds = {
left: nativeView.bounds.origin.x,
top: nativeView.bounds.origin.y,
@@ -121,7 +247,7 @@ function drawClipPath(view: viewModule.View) {
return;
}
var clipPath = view.style.clipPath;
var clipPath = background.clipPath;
var functionName = clipPath.substring(0, clipPath.indexOf("("));
var value = clipPath.replace(`${functionName}(`, "").replace(")", "");
@@ -190,13 +316,15 @@ function drawClipPath(view: viewModule.View) {
nativeView.layer.mask = shape;
nativeView.clipsToBounds = true;
if (view.borderWidth > 0 && view.borderColor) {
let borderWidth = background.getUniformBorderWidth();
let borderColor = background.getUniformBorderColor();
if (borderWidth > 0 && borderColor instanceof Color){
var borderLayer = CAShapeLayer.layer();
borderLayer.path = path;
borderLayer.lineWidth = view.borderWidth * 2;
borderLayer.strokeColor = view.borderColor.ios.CGColor;
borderLayer.lineWidth = borderWidth * 2;
borderLayer.strokeColor = borderColor.ios.CGColor;
borderLayer.fillColor = utils.ios.getter(UIColor, UIColor.clearColor).CGColor;
borderLayer.frame = nativeView.bounds;
nativeView.layer.borderColor = undefined;

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

@@ -13,6 +13,13 @@ declare module "ui/styling/style" {
bottom: number;
}
export interface BorderColor {
top: Color;
right: Color;
bottom: Color;
left: Color;
}
export interface CommonLayoutParams {
width: number;
height: number;
@@ -49,9 +56,21 @@ declare module "ui/styling/style" {
public backgroundSize: string;
public backgroundPosition: string;
public backgroundRepeat: string;
public borderColor: Color;
public borderWidth: number;
public borderRadius: number;
public borderColor: string | Color;
public borderTopColor: Color;
public borderRightColor: Color;
public borderBottomColor: Color;
public borderLeftColor: Color;
public borderWidth: string | number;
public borderTopWidth: number;
public borderRightWidth: number;
public borderBottomWidth: number;
public borderLeftWidth: number;
public borderRadius: string | number;
public borderTopLeftRadius: number;
public borderTopRightRadius: number;
public borderBottomRightRadius: number;
public borderBottomLeftRadius: number;
public fontSize: number;
public fontFamily: string;
public fontStyle: string;
@@ -113,9 +132,22 @@ declare module "ui/styling/style" {
export var backgroundRepeatProperty: styleProperty.Property;
export var backgroundSizeProperty: styleProperty.Property;
export var backgroundPositionProperty: styleProperty.Property;
export var borderColorProperty: styleProperty.Property;
export var borderWidthProperty: styleProperty.Property;
export var borderRadiusProperty: styleProperty.Property;
export var borderTopColorProperty: styleProperty.Property;
export var borderRightColorProperty: styleProperty.Property;
export var borderBottomColorProperty: styleProperty.Property;
export var borderLeftColorProperty: styleProperty.Property;
export var borderTopWidthProperty: styleProperty.Property;
export var borderRightWidthProperty: styleProperty.Property;
export var borderBottomWidthProperty: styleProperty.Property;
export var borderLeftWidthProperty: styleProperty.Property;
export var borderTopLeftRadiusProperty: styleProperty.Property;
export var borderTopRightRadiusProperty: styleProperty.Property;
export var borderBottomRightRadiusProperty: styleProperty.Property;
export var borderBottomLeftRadiusProperty: styleProperty.Property;
export var clipPathProperty: styleProperty.Property;
export var backgroundInternalProperty: styleProperty.Property;
export var fontSizeProperty: styleProperty.Property;

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

@@ -63,6 +63,11 @@ function parseMargin(value: any): ThicknessValue {
top = bottom = arr[0];
right = left = arr[1];
}
else if (arr.length === 3) {
top = arr[0];
right = left = arr[1];
bottom = arr[2];
}
else if (arr.length === 4) {
top = arr[0];
right = arr[1];
@@ -93,37 +98,6 @@ function parseMargin(value: any): ThicknessValue {
}
}
function parseThickness(value: any): definition.Thickness {
var result: definition.Thickness = { top: 0, right: 0, bottom: 0, left: 0 };
if (types.isString(value)) {
var arr = value.split(/[ ,]+/);
var top = parseInt(arr[0]);
top = isNaN(top) ? 0 : top;
var right = parseInt(arr[1]);
right = isNaN(right) ? top : right;
var bottom = parseInt(arr[2]);
bottom = isNaN(bottom) ? top : bottom;
var left = parseInt(arr[3]);
left = isNaN(left) ? right : left;
result.top = top;
result.right = right;
result.bottom = bottom;
result.left = left;
} else if (types.isNumber(value)) {
result.top = result.right = result.bottom = result.left = value;
}
else {
result = value;
}
return result;
}
function layoutParamsComparer(x: definition.CommonLayoutParams, y: definition.CommonLayoutParams): boolean {
return x.width === y.width
&& x.height === y.height
@@ -273,123 +247,6 @@ function isMinWidthHeightValid(value: number): boolean {
return !isNaN(value) && value >= 0.0 && isFinite(value);
}
function onBackgroundColorPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (!Color.equals(currentBackground.color, data.newValue)) {
style._setValue(backgroundInternalProperty, currentBackground.withColor(data.newValue));
}
}
function onBackgroundImagePropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var url: string = data.newValue;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
var isValid = false;
if (types.isString(data.newValue)) {
var pattern: RegExp = /url\(('|")(.*?)\1\)/;
var match = url.match(pattern);
if (match && match[2]) {
url = match[2];
}
ensureImageSource();
if (utils.isDataURI(url)) {
var base64Data = url.split(",")[1];
if (types.isDefined(base64Data)) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromBase64(base64Data)));
isValid = true;
}
}
else if (utils.isFileOrResourcePath(url)) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromFileOrResource(url)));
isValid = true;
}
else if (url.indexOf("http") !== -1) {
style["_url"] = url;
style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
imageSource.fromUrl(url).then((r) => {
if (style && style["_url"] === url) {
// Get the current background again, as it might have changed while doing the request.
currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
style._setValue(backgroundInternalProperty, currentBackground.withImage(r));
}
});
isValid = true;
}
}
if (!isValid) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
}
}
function onBackgroundRepeatPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.repeat) {
style._setValue(backgroundInternalProperty, currentBackground.withRepeat(data.newValue));
}
}
function onBackgroundPositionPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.position) {
style._setValue(backgroundInternalProperty, currentBackground.withPosition(data.newValue));
}
}
function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.size) {
style._setValue(backgroundInternalProperty, currentBackground.withSize(data.newValue));
}
}
function onBorderWidthPropertyChanged(data: PropertyChangeData) {
if (platform.isAndroid) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderWidth) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderWidth(data.newValue));
}
}
}
function onBorderColorPropertyChanged(data: PropertyChangeData) {
if (platform.isAndroid) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderColor) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderColor(data.newValue));
}
}
}
function onBorderRadiusPropertyChanged(data: PropertyChangeData) {
if (platform.isAndroid) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderRadius) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderRadius(data.newValue));
}
}
}
function onClipPathPropertyChanged(data: PropertyChangeData) {
if (platform.isAndroid) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.clipPath) {
style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
}
}
}
function getHandlerInternal(propertyId: number, classInfo: types.ClassInfo): definition.StylePropertyChangedHandler {
var className = classInfo ? classInfo.name : "default";
var handlerKey = className + propertyId;
@@ -632,25 +489,133 @@ export class Style extends DependencyObservable implements styling.Style {
this._setValue(backgroundPositionProperty, value);
}
get borderColor(): Color {
return this._getValue(borderColorProperty);
get borderColor(): string | Color {
if (Color.equals(this.borderTopColor, this.borderRightColor) &&
Color.equals(this.borderTopColor, this.borderBottomColor) &&
Color.equals(this.borderTopColor, this.borderLeftColor)){
return this.borderTopColor;
}
else {
return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`;
}
}
set borderColor(value: Color) {
this._setValue(borderColorProperty, value);
set borderColor(value: string | Color) {
if (value instanceof Color){
value = (<Color>value).hex;
}
this._setShorthandProperty("border-color", value);
}
get borderTopColor(): Color {
return this._getValue(borderTopColorProperty);
}
set borderTopColor(value: Color) {
this._setValue(borderTopColorProperty, value);
}
get borderWidth(): number {
return this._getValue(borderWidthProperty);
get borderRightColor(): Color {
return this._getValue(borderRightColorProperty);
}
set borderWidth(value: number) {
this._setValue(borderWidthProperty, value);
set borderRightColor(value: Color) {
this._setValue(borderRightColorProperty, value);
}
get borderRadius(): number {
return this._getValue(borderRadiusProperty);
get borderBottomColor(): Color {
return this._getValue(borderBottomColorProperty);
}
set borderRadius(value: number) {
this._setValue(borderRadiusProperty, value);
set borderBottomColor(value: Color) {
this._setValue(borderBottomColorProperty, value);
}
get borderLeftColor(): Color {
return this._getValue(borderLeftColorProperty);
}
set borderLeftColor(value: Color) {
this._setValue(borderLeftColorProperty, value);
}
get borderWidth(): string | number {
if (this.borderTopWidth === this.borderRightWidth &&
this.borderTopWidth === this.borderBottomWidth &&
this.borderTopWidth === this.borderLeftWidth){
return this.borderTopWidth;
}
else {
return `${this.borderTopWidth} ${this.borderRightWidth} ${this.borderBottomWidth} ${this.borderLeftWidth}`;
}
}
set borderWidth(value: string | number) {
this._setShorthandProperty("border-width", value.toString());
}
get borderTopWidth(): number {
return this._getValue(borderTopWidthProperty);
}
set borderTopWidth(value: number) {
this._setValue(borderTopWidthProperty, value);
}
get borderRightWidth(): number {
return this._getValue(borderRightWidthProperty);
}
set borderRightWidth(value: number) {
this._setValue(borderRightWidthProperty, value);
}
get borderBottomWidth(): number {
return this._getValue(borderBottomWidthProperty);
}
set borderBottomWidth(value: number) {
this._setValue(borderBottomWidthProperty, value);
}
get borderLeftWidth(): number {
return this._getValue(borderLeftWidthProperty);
}
set borderLeftWidth(value: number) {
this._setValue(borderLeftWidthProperty, value);
}
get borderRadius(): string | number {
if (this.borderTopLeftRadius === this.borderTopRightRadius &&
this.borderTopLeftRadius === this.borderBottomRightRadius &&
this.borderTopLeftRadius === this.borderBottomLeftRadius){
return this.borderTopLeftRadius;
}
else {
return `${this.borderTopLeftRadius} ${this.borderTopRightRadius} ${this.borderBottomRightRadius} ${this.borderBottomLeftRadius}`;
}
}
set borderRadius(value: string | number) {
this._setShorthandProperty("border-radius", value.toString());
}
get borderTopLeftRadius(): number {
return this._getValue(borderTopLeftRadiusProperty);
}
set borderTopLeftRadius(value: number) {
this._setValue(borderTopLeftRadiusProperty, value);
}
get borderTopRightRadius(): number {
return this._getValue(borderTopRightRadiusProperty);
}
set borderTopRightRadius(value: number) {
this._setValue(borderTopRightRadiusProperty, value);
}
get borderBottomRightRadius(): number {
return this._getValue(borderBottomRightRadiusProperty);
}
set borderBottomRightRadius(value: number) {
this._setValue(borderBottomRightRadiusProperty, value);
}
get borderBottomLeftRadius(): number {
return this._getValue(borderBottomLeftRadiusProperty);
}
set borderBottomLeftRadius(value: number) {
this._setValue(borderBottomLeftRadiusProperty, value);
}
get clipPath(): string {
@@ -1076,36 +1041,6 @@ export var placeholderColorProperty = new styleProperty.Property("placeholderCol
new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
converters.colorConverter);
export var backgroundImageProperty = new styleProperty.Property("backgroundImage", "background-image",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundImagePropertyChanged));
export var backgroundColorProperty = new styleProperty.Property("backgroundColor", "background-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var backgroundRepeatProperty = new styleProperty.Property("backgroundRepeat", "background-repeat",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundRepeatPropertyChanged));
export var backgroundSizeProperty = new styleProperty.Property("backgroundSize", "background-size",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundSizePropertyChanged));
export var backgroundPositionProperty = new styleProperty.Property("backgroundPosition", "background-position",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundPositionPropertyChanged));
export var borderWidthProperty = new styleProperty.Property("borderWidth", "border-width",
new PropertyMetadata(0, AffectsLayout, onBorderWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderColorProperty = new styleProperty.Property("borderColor", "border-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var borderRadiusProperty = new styleProperty.Property("borderRadius", "border-radius",
new PropertyMetadata(0, AffectsLayout, onBorderRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var clipPathProperty = new styleProperty.Property("clipPath", "clip-path",
new PropertyMetadata(undefined, AffectsLayout, onClipPathPropertyChanged, isClipPathValid));
export var backgroundInternalProperty = new styleProperty.Property("_backgroundInternal", "_backgroundInternal",
new PropertyMetadata(background.Background.default, PropertyMetadataSettings.None, undefined, undefined, background.Background.equals));
export var fontSizeProperty = new styleProperty.Property("fontSize", "font-size",
new PropertyMetadata(undefined, PropertyMetadataSettings.Inheritable, onFontSizeChanged), converters.fontSizeConverter);
@@ -1385,4 +1320,381 @@ export var ignorePropertyHandler = new StylePropertyChangedHandler(
// empty
});
registerNoStylingClass("Frame");
registerNoStylingClass("Frame");
function onBackgroundColorPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (!Color.equals(currentBackground.color, data.newValue)) {
style._setValue(backgroundInternalProperty, currentBackground.withColor(data.newValue));
}
}
function onBackgroundImagePropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var url: string = data.newValue;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
var isValid = false;
if (types.isString(data.newValue)) {
var pattern: RegExp = /url\(('|")(.*?)\1\)/;
var match = url.match(pattern);
if (match && match[2]) {
url = match[2];
}
ensureImageSource();
if (utils.isDataURI(url)) {
var base64Data = url.split(",")[1];
if (types.isDefined(base64Data)) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromBase64(base64Data)));
isValid = true;
}
}
else if (utils.isFileOrResourcePath(url)) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromFileOrResource(url)));
isValid = true;
}
else if (url.indexOf("http") !== -1) {
style["_url"] = url;
style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
imageSource.fromUrl(url).then((r) => {
if (style && style["_url"] === url) {
// Get the current background again, as it might have changed while doing the request.
currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
style._setValue(backgroundInternalProperty, currentBackground.withImage(r));
}
});
isValid = true;
}
}
if (!isValid) {
style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
}
}
function onBackgroundRepeatPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.repeat) {
style._setValue(backgroundInternalProperty, currentBackground.withRepeat(data.newValue));
}
}
function onBackgroundPositionPropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.position) {
style._setValue(backgroundInternalProperty, currentBackground.withPosition(data.newValue));
}
}
function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.size) {
style._setValue(backgroundInternalProperty, currentBackground.withSize(data.newValue));
}
}
function onBorderTopColorPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderTopColor) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderTopColor(data.newValue));
}
}
function onBorderRightColorPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderRightColor) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderRightColor(data.newValue));
}
}
function onBorderBottomColorPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderBottomColor) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderBottomColor(data.newValue));
}
}
function onBorderLeftColorPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderLeftColor) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderLeftColor(data.newValue));
}
}
function onBorderTopWidthPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderTopWidth) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderTopWidth(data.newValue));
}
}
function onBorderRightWidthPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderRightWidth) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderRightWidth(data.newValue));
}
}
function onBorderBottomWidthPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderBottomWidth) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderBottomWidth(data.newValue));
}
}
function onBorderLeftWidthPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderLeftWidth) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderLeftWidth(data.newValue));
}
}
function onBorderTopLeftRadiusPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderTopLeftRadius) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderTopLeftRadius(data.newValue));
}
}
function onBorderTopRightRadiusPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderTopRightRadius) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderTopRightRadius(data.newValue));
}
}
function onBorderBottomRightRadiusPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderBottomRightRadius) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderBottomRightRadius(data.newValue));
}
}
function onBorderBottomLeftRadiusPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderBottomLeftRadius) {
style._setValue(backgroundInternalProperty, currentBackground.withBorderBottomLeftRadius(data.newValue));
}
}
function onClipPathPropertyChanged(data: PropertyChangeData) {
let style = <Style>data.object;
let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.clipPath) {
style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
}
}
export var backgroundInternalProperty = new styleProperty.Property("_backgroundInternal", "_backgroundInternal",
new PropertyMetadata(background.Background.default, PropertyMetadataSettings.None, undefined, undefined, background.Background.equals));
export var backgroundImageProperty = new styleProperty.Property("backgroundImage", "background-image",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundImagePropertyChanged));
export var backgroundColorProperty = new styleProperty.Property("backgroundColor", "background-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var backgroundRepeatProperty = new styleProperty.Property("backgroundRepeat", "background-repeat",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundRepeatPropertyChanged));
export var backgroundSizeProperty = new styleProperty.Property("backgroundSize", "background-size",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundSizePropertyChanged));
export var backgroundPositionProperty = new styleProperty.Property("backgroundPosition", "background-position",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundPositionPropertyChanged));
export var borderTopColorProperty = new styleProperty.Property("borderTopColor", "border-top-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderTopColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var borderRightColorProperty = new styleProperty.Property("borderRightColor", "border-right-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderRightColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var borderBottomColorProperty = new styleProperty.Property("borderBottomColor", "border-bottom-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderBottomColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var borderLeftColorProperty = new styleProperty.Property("borderLeftColor", "border-left-color",
new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderLeftColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
export var borderTopWidthProperty = new styleProperty.Property("borderTopWidth", "border-top-width",
new PropertyMetadata(0, AffectsLayout, onBorderTopWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderRightWidthProperty = new styleProperty.Property("borderRightWidth", "border-right-width",
new PropertyMetadata(0, AffectsLayout, onBorderRightWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderBottomWidthProperty = new styleProperty.Property("borderBottomWidth", "border-bottom-width",
new PropertyMetadata(0, AffectsLayout, onBorderBottomWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderLeftWidthProperty = new styleProperty.Property("borderLeftWidth", "border-left-width",
new PropertyMetadata(0, AffectsLayout, onBorderLeftWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderTopLeftRadiusProperty = new styleProperty.Property("borderTopLeftRadius", "border-top-left-radius",
new PropertyMetadata(0, AffectsLayout, onBorderTopLeftRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderTopRightRadiusProperty = new styleProperty.Property("borderTopRightRadius", "border-top-right-radius",
new PropertyMetadata(0, AffectsLayout, onBorderTopRightRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderBottomRightRadiusProperty = new styleProperty.Property("borderBottomRightRadius", "border-bottom-right-radius",
new PropertyMetadata(0, AffectsLayout, onBorderBottomRightRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var borderBottomLeftRadiusProperty = new styleProperty.Property("borderBottomLeftRadius", "border-bottom-left-radius",
new PropertyMetadata(0, AffectsLayout, onBorderBottomLeftRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var clipPathProperty = new styleProperty.Property("clipPath", "clip-path",
new PropertyMetadata(undefined, AffectsLayout, onClipPathPropertyChanged, isClipPathValid));
function parseThickness(value: any): definition.Thickness {
let result: definition.Thickness = { top: 0, right: 0, bottom: 0, left: 0 };
if (types.isString(value)) {
let arr = value.split(/[ ,]+/);
if (arr.length === 1){
let arr0 = parseInt(arr[0]);
result.top = arr0;
result.right = arr0;
result.bottom = arr0;
result.left = arr0;
}
else if (arr.length === 2){
let arr0 = parseInt(arr[0]);
let arr1 = parseInt(arr[1]);
result.top = arr0;
result.right = arr1;
result.bottom = arr0;
result.left = arr1;
}
else if (arr.length === 3){
let arr0 = parseInt(arr[0]);
let arr1 = parseInt(arr[1]);
let arr2 = parseInt(arr[2]);
result.top = arr0;
result.right = arr1;
result.bottom = arr2;
result.left = arr1;
}
else if (arr.length === 4){
let arr0 = parseInt(arr[0]);
let arr1 = parseInt(arr[1]);
let arr2 = parseInt(arr[2]);
let arr3 = parseInt(arr[3]);
result.top = arr0;
result.right = arr1;
result.bottom = arr2;
result.left = arr3;
}
}
else if (types.isNumber(value)) {
result.top = result.right = result.bottom = result.left = value;
}
else {
result = value;
}
return result;
}
function parseBorderColor(value: any): definition.BorderColor {
var result: definition.BorderColor = { top: undefined, right: undefined, bottom: undefined, left: undefined };
try {
if (types.isString(value)) {
let arr = value.split(/[ ,]+/);
if (arr.length === 1){
let arr0 = new Color(arr[0]);
result.top = arr0;
result.right = arr0;
result.bottom = arr0;
result.left = arr0;
}
else if (arr.length === 2){
let arr0 = new Color(arr[0]);
let arr1 = new Color(arr[1]);
result.top = arr0;
result.right = arr1;
result.bottom = arr0;
result.left = arr1;
}
else if (arr.length === 3){
let arr0 = new Color(arr[0]);
let arr1 = new Color(arr[1]);
let arr2 = new Color(arr[2]);
result.top = arr0;
result.right = arr1;
result.bottom = arr2;
result.left = arr1;
}
else if (arr.length === 4){
let arr0 = new Color(arr[0]);
let arr1 = new Color(arr[1]);
let arr2 = new Color(arr[2]);
let arr3 = new Color(arr[3]);
result.top = arr0;
result.right = arr1;
result.bottom = arr2;
result.left = arr3;
}
}
else if (value instanceof Color) {
result.top = result.right = result.bottom = result.left = value;
}
else {
result = value;
}
}
catch(ex){
if (trace.enabled) {
trace.write(`Error parsing border color ${value}: ${ex}'`, trace.categories.Style, trace.messageType.error);
}
}
return result;
}
function onBorderColorChanged(value: any): Array<styleProperty.KeyValuePair<styleProperty.Property, any>> {
let fourColors = parseBorderColor(value);
let array = new Array<styleProperty.KeyValuePair<styleProperty.Property, any>>();
array.push({ property: borderTopColorProperty, value: fourColors.top });
array.push({ property: borderRightColorProperty, value: fourColors.right });
array.push({ property: borderBottomColorProperty, value: fourColors.bottom });
array.push({ property: borderLeftColorProperty, value: fourColors.left });
return array;
}
function onBorderWidthChanged(value: any): Array<styleProperty.KeyValuePair<styleProperty.Property, any>> {
var thickness = parseThickness(value);
var array = new Array<styleProperty.KeyValuePair<styleProperty.Property, any>>();
array.push({ property: borderTopWidthProperty, value: thickness.top });
array.push({ property: borderRightWidthProperty, value: thickness.right });
array.push({ property: borderBottomWidthProperty, value: thickness.bottom });
array.push({ property: borderLeftWidthProperty, value: thickness.left });
return array;
}
function onBorderRadiusChanged(value: any): Array<styleProperty.KeyValuePair<styleProperty.Property, any>> {
var thickness = parseThickness(value);
var array = new Array<styleProperty.KeyValuePair<styleProperty.Property, any>>();
array.push({ property: borderTopLeftRadiusProperty, value: thickness.top });
array.push({ property: borderTopRightRadiusProperty, value: thickness.right });
array.push({ property: borderBottomRightRadiusProperty, value: thickness.bottom });
array.push({ property: borderBottomLeftRadiusProperty, value: thickness.left });
return array;
}
styleProperty.registerShorthandCallback("border-color", onBorderColorChanged);
styleProperty.registerShorthandCallback("border-width", onBorderWidthChanged);
styleProperty.registerShorthandCallback("border-radius", onBorderRadiusChanged);

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

@@ -81,18 +81,77 @@
/**
* Gets or sets the border-color style property.
*/
borderColor: color.Color
borderColor: string | color.Color;
/**
* Gets or sets the border-top-color style property.
*/
borderTopColor: color.Color;
/**
* Gets or sets the border-right-color style property.
*/
borderRightColor: color.Color;
/**
* Gets or sets the border-bottom-color style property.
*/
borderBottomColor: color.Color;
/**
* Gets or sets the border-left-color style property.
*/
borderLeftColor: color.Color;
/**
* Gets or sets the border-width style property.
*/
borderWidth: number
borderWidth: string | number
/**
* Gets or sets the border-top-width style property.
*/
borderTopWidth: number
/**
* Gets or sets the border-right-width style property.
*/
borderRightWidth: number
/**
* Gets or sets the border-bottom-width style property.
*/
borderBottomWidth: number
/**
* Gets or sets the border-left-width style property.
*/
borderLeftWidth: number
/**
* Gets or sets the border-radius style property.
*/
borderRadius: number;
borderRadius: string | number;
/**
* Gets or sets the border-top-left-radius style property.
*/
borderTopLeftRadius: number;
/**
* Gets or sets the border-top-right-radius style property.
*/
borderTopRightRadius: number;
/**
* Gets or sets the border-bottm-right-radius style property.
*/
borderBottomRightRadius: number;
/**
* Gets or sets the border-bottom-left-radius style property.
*/
borderBottomLeftRadius: number;
/**
* Gets or sets the clip-path style property.
*/

18
tns-core-modules/ui/switch/switch.android.ts
View File

@@ -81,9 +81,21 @@ export class SwitchStyler implements style.Styler {
SwitchStyler.setBackgroundAndBorderProperty,
SwitchStyler.resetBackgroundAndBorderProperty), "Switch");
style.registerHandler(style.borderWidthProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderColorProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderRadiusProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderTopColorProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderRightColorProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderBottomColorProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderLeftColorProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderTopWidthProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderRightWidthProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderBottomWidthProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderLeftWidthProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderTopLeftRadiusProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderTopRightRadiusProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderBottomRightRadiusProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.borderBottomLeftRadiusProperty, style.ignorePropertyHandler, "Switch");
style.registerHandler(style.backgroundInternalProperty, style.ignorePropertyHandler, "Switch");
}
}

6
tns-core-modules/ui/text-field/text-field.ios.ts
View File

@@ -115,9 +115,9 @@ class UITextFieldImpl extends UITextField {
}
let size = bounds.size;
return CGRectMake(owner.borderWidth + owner.style.paddingLeft, owner.borderWidth + owner.style.paddingTop,
size.width - (owner.borderWidth + owner.style.paddingLeft + owner.style.paddingRight + owner.borderWidth),
size.height - (owner.borderWidth + owner.style.paddingTop + owner.style.paddingBottom + owner.borderWidth)
return CGRectMake(owner.borderLeftWidth + owner.style.paddingLeft, owner.borderTopWidth + owner.style.paddingTop,
size.width - (owner.borderLeftWidth + owner.style.paddingLeft + owner.style.paddingRight + owner.borderRightWidth),
size.height - (owner.borderTopWidth + owner.style.paddingTop + owner.style.paddingBottom + owner.borderBottomWidth)
);
}

90
tns-core-modules/ui/text-view/text-view.ios.ts
View File

@@ -166,12 +166,81 @@ export class TextViewStyler implements style.Styler {
}
}
//Border
private static setBorderTopWidthProperty(view: View, newValue: number) {
TextViewStyler.setNativeBorderTopWidth(view, newValue);
}
private static resetBorderTopWidthProperty(view: View, nativeValue: number) {
TextViewStyler.setNativeBorderTopWidth(view, nativeValue);
}
private static setNativeBorderTopWidth(view: View, newValue: number) {
let nativeTextView = <UITextView>view._nativeView;
let top = view.style.paddingTop + newValue;
let left = nativeTextView.textContainerInset.left;
let bottom = nativeTextView.textContainerInset.bottom;
let right = nativeTextView.textContainerInset.right;
nativeTextView.textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
private static setBorderRightWidthProperty(view: View, newValue: number) {
TextViewStyler.setNativeBorderRightWidth(view, newValue);
}
private static resetBorderRightWidthProperty(view: View, nativeValue: number) {
TextViewStyler.setNativeBorderRightWidth(view, nativeValue);
}
private static setNativeBorderRightWidth(view: View, newValue: number) {
let nativeTextView = <UITextView>view._nativeView;
let top = nativeTextView.textContainerInset.top;
let left = nativeTextView.textContainerInset.left;
let bottom = nativeTextView.textContainerInset.bottom;
let right = view.style.paddingRight + newValue;
nativeTextView.textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
private static setBorderBottomWidthProperty(view: View, newValue: number) {
TextViewStyler.setNativeBorderBottomWidth(view, newValue);
}
private static resetBorderBottomWidthProperty(view: View, nativeValue: number) {
TextViewStyler.setNativeBorderBottomWidth(view, nativeValue);
}
private static setNativeBorderBottomWidth(view: View, newValue: number) {
let nativeTextView = <UITextView>view._nativeView;
let top = nativeTextView.textContainerInset.top;
let left = nativeTextView.textContainerInset.left;
let bottom = view.style.paddingBottom + newValue;
let right = nativeTextView.textContainerInset.right;
nativeTextView.textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
private static setBorderLeftWidthProperty(view: View, newValue: number) {
TextViewStyler.setNativeBorderLeftWidth(view, newValue);
}
private static resetBorderLeftWidthProperty(view: View, nativeValue: number) {
TextViewStyler.setNativeBorderLeftWidth(view, nativeValue);
}
private static setNativeBorderLeftWidth(view: View, newValue: number) {
let nativeTextView = <UITextView>view._nativeView;
let top = nativeTextView.textContainerInset.top;
let left = view.style.paddingLeft + newValue;
let bottom = nativeTextView.textContainerInset.bottom;
let right = nativeTextView.textContainerInset.right;
nativeTextView.textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
// Padding
private static setPaddingProperty(view: View, newValue: any) {
var top = newValue.top + view.borderWidth;
var left = newValue.left + view.borderWidth;
var bottom = newValue.bottom + view.borderWidth;
var right = newValue.right + view.borderWidth;
var top = newValue.top + view.borderTopWidth;
var left = newValue.left + view.borderLeftWidth;
var bottom = newValue.bottom + view.borderBottomWidth;
var right = newValue.right + view.borderRightWidth;
(<UITextView>view._nativeView).textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
}
@@ -185,6 +254,19 @@ export class TextViewStyler implements style.Styler {
TextViewStyler.resetColorProperty,
TextViewStyler.getNativeColorValue), "TextView");
style.registerHandler(style.borderTopWidthProperty, new style.StylePropertyChangedHandler(
TextViewStyler.setBorderTopWidthProperty,
TextViewStyler.resetBorderTopWidthProperty), "TextView");
style.registerHandler(style.borderRightWidthProperty, new style.StylePropertyChangedHandler(
TextViewStyler.setBorderRightWidthProperty,
TextViewStyler.resetBorderRightWidthProperty), "TextView");
style.registerHandler(style.borderBottomWidthProperty, new style.StylePropertyChangedHandler(
TextViewStyler.setBorderBottomWidthProperty,
TextViewStyler.resetBorderBottomWidthProperty), "TextView");
style.registerHandler(style.borderLeftWidthProperty, new style.StylePropertyChangedHandler(
TextViewStyler.setBorderLeftWidthProperty,
TextViewStyler.resetBorderLeftWidthProperty), "TextView");
style.registerHandler(style.nativePaddingsProperty, new style.StylePropertyChangedHandler(
TextViewStyler.setPaddingProperty,
TextViewStyler.resetPaddingProperty), "TextView");