From 0ec9950d4627c7ea23c2fc798031532a4dc16b5e Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Thu, 22 Dec 2016 14:43:31 +0200
Subject: [PATCH] Padding

---
 .../ui-tests-app/css/padding-and-border.css   | 25 +++++-----
 .../ui-tests-app/css/padding-and-border.ts    | 27 -----------
 .../ui-tests-app/css/padding-and-border.xml   | 36 +++++++++------
 tns-core-modules/ui/button/button.android.ts  | 46 ++++++++++++++++++-
 .../ui/layouts/layout-base.android.ts         |  8 ++--
 .../ui/text-base/text-base.android.ts         |  8 ++--
 6 files changed, 89 insertions(+), 61 deletions(-)
 delete mode 100644 apps/app/ui-tests-app/css/padding-and-border.ts

diff --git a/apps/app/ui-tests-app/css/padding-and-border.css b/apps/app/ui-tests-app/css/padding-and-border.css
index 71feb4f82..40c2ab4e1 100644
--- a/apps/app/ui-tests-app/css/padding-and-border.css
+++ b/apps/app/ui-tests-app/css/padding-and-border.css
@@ -1,19 +1,20 @@
-#padding {
-    padding: 10;
+.padding {
+    padding: 5;
 }
 
-#border {
-    border-width: 10;
-    border-color: black;
+.border {
+    border-width: 5;
 }
 
-#background-color {
+.green {
+    background-color: green;
+}
+
+.yellow {
     background-color: yellow;
 }
 
-/*#background-image {
-    background-image: url('~/ui-tests-app/pages/test2.png'); 
-    background-repeat: no-repeat; 
-    background-position: center center; 
-    background-size: 100% 100%;
-}*/
\ No newline at end of file
+Label, TextField, TextView, Button {
+    text-align: left;
+    margin: 1;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/padding-and-border.ts b/apps/app/ui-tests-app/css/padding-and-border.ts
deleted file mode 100644
index a7c071d29..000000000
--- a/apps/app/ui-tests-app/css/padding-and-border.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { EventData, View, TextBase } from "ui/text-base";
-import { LayoutBase } from "ui/layouts/layout-base";
-
-let cssClassNames = [
-    "", 
-    "padding", 
-    "border", 
-    "background-color",
-    "padding border",
-    "padding background-color",
-    "border background-color",
-    "padding border background-color"
-];
-
-let currentIndex = 0;
-
-export function onChangeCSS(args: EventData){
-    let page = (<View>args.object).page;
-    let container = <LayoutBase>page.getViewById<LayoutBase>("container");
-    currentIndex++;
-    let newClassName = cssClassNames[currentIndex % cssClassNames.length];
-    for(let i = 0, length = container.getChildrenCount(); i < length; i++){
-        let child = container.getChildAt(i);
-        child.className = newClassName;
-    }
-    (<TextBase>page.getViewById<TextBase>("info")).text = newClassName || "none";
-}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/padding-and-border.xml b/apps/app/ui-tests-app/css/padding-and-border.xml
index 9f9480a3c..a973ae945 100644
--- a/apps/app/ui-tests-app/css/padding-and-border.xml
+++ b/apps/app/ui-tests-app/css/padding-and-border.xml
@@ -1,15 +1,25 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" id="padding-and-border-page">
-    <StackLayout>
-        <Button id="changeButton" tap="onChangeCSS"/>
-        <TextView id="info" isEnabled="false" isUserInteractionEnabled="false"/>
-        <StackLayout id="container" style.backgroundColor="gray">
-            <Label id="label" text="Label"/>
-            <TextField id="textField" text="TextField"/>
-            <TextView id="textView" text="TextView"/>
-            <Button id="button" text="Button"/>
-            <StackLayout id="stack-layout">
-                <StackLayout id="child-of-stack-layout" width="50" height="50" style.backgroundColor="red"></StackLayout>
-            </StackLayout>
-        </StackLayout>
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+    <StackLayout id="container" class="padding green">
+
+        <Label text="Label padding" class="padding"/>
+        <TextField text="TextField padding" class="padding"/>
+        <TextView text="TextView padding" class="padding"/>
+        <Button text="Button padding" class="padding"/>
+
+        <Label text="Label padding yellow" class="padding yellow"/>
+        <TextField text="TextField padding yellow" class="padding yellow"/>
+        <TextView text="TextView padding yellow" class="padding yellow"/>
+        <Button text="Button padding yellow" class="padding yellow"/>
+
+        <Label text="Label border" class="border"/>
+        <TextField text="TextField border" class="border"/>
+        <TextView text="TextView border" class="border"/>
+        <Button text="Button border" class="border"/>
+
+        <Label text="Label padding border" class="padding border"/>
+        <TextField text="TextField padding border" class="padding border"/>
+        <TextView text="TextView padding border" class="padding border"/>
+        <Button text="Button padding border" class="padding border"/>
+
     </StackLayout>
 </Page>
\ No newline at end of file
diff --git a/tns-core-modules/ui/button/button.android.ts b/tns-core-modules/ui/button/button.android.ts
index 6ac948321..a44d6aacc 100644
--- a/tns-core-modules/ui/button/button.android.ts
+++ b/tns-core-modules/ui/button/button.android.ts
@@ -1,6 +1,7 @@
 import {
     ButtonBase, TouchGestureEventData, GestureTypes, TouchAction,
-    PseudoClassHandler
+    PseudoClassHandler,
+    paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length
 } from "./button-common";
 
 export * from "./button-common";
@@ -23,6 +24,7 @@ class ClickListener extends java.lang.Object implements android.view.View.OnClic
 export class Button extends ButtonBase {
     _button: android.widget.Button;
     private _highlightedHandler: (args: TouchGestureEventData) => void;
+    private _defaultNativePadding: android.graphics.Rect;
 
     get android(): android.widget.Button {
         return this._button;
@@ -32,6 +34,16 @@ export class Button extends ButtonBase {
         let weakRef = new WeakRef(this);
         this._button = new android.widget.Button(this._context);
         this._button.setOnClickListener(new ClickListener(weakRef));
+
+        // Unlike all other widgets, the Button has padding 30 36 30 36 in device pixels.
+        let result = new android.graphics.Rect();
+        this._button.getBackground().getPadding(result);
+        this._defaultNativePadding = result;
+        
+        this.style.effectivePaddingTop = this._defaultNativePadding.top;
+        this.style.effectivePaddingRight = this._defaultNativePadding.right;
+        this.style.effectivePaddingBottom = this._defaultNativePadding.bottom;
+        this.style.effectivePaddingLeft = this._defaultNativePadding.left;
     }
 
     @PseudoClassHandler("normal", "highlighted", "pressed", "active")
@@ -52,4 +64,36 @@ export class Button extends ButtonBase {
             this.off(GestureTypes.touch, this._highlightedHandler);
         }
     }
+
+    //PaddingTop
+    get [paddingTopProperty.native](): Length {
+        return { value: this._defaultNativePadding.top, unit: "px" }    
+    }
+    set [paddingTopProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0));
+    }
+
+    //PaddingRight
+    get [paddingRightProperty.native](): Length {
+        return { value: this._defaultNativePadding.right, unit: "px" }    
+    }
+    set [paddingRightProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0));
+    }
+
+    //PaddingBottom
+    get [paddingBottomProperty.native](): Length {
+        return { value: this._defaultNativePadding.bottom, unit: "px" }    
+    }
+    set [paddingBottomProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0));
+    }
+
+    //PaddingLeft
+    get [paddingLeftProperty.native](): Length {
+        return { value: this._defaultNativePadding.left, unit: "px" }    
+    }
+    set [paddingLeftProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0));
+    }
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/layouts/layout-base.android.ts b/tns-core-modules/ui/layouts/layout-base.android.ts
index 8fbda3e3b..0b9b1d579 100644
--- a/tns-core-modules/ui/layouts/layout-base.android.ts
+++ b/tns-core-modules/ui/layouts/layout-base.android.ts
@@ -30,7 +30,7 @@ export class LayoutBase extends LayoutBaseCommon {
         return { value: org.nativescript.widgets.ViewHelper.getPaddingTop(this.nativeView), unit: "px" };
     }
     set [paddingTopProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderTopWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0));
     }
 
     //PaddingRight
@@ -38,7 +38,7 @@ export class LayoutBase extends LayoutBaseCommon {
         return { value: org.nativescript.widgets.ViewHelper.getPaddingRight(this.nativeView), unit: "px" };
     }
     set [paddingRightProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderRightWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0));
     }
 
     //PaddingBottom
@@ -46,7 +46,7 @@ export class LayoutBase extends LayoutBaseCommon {
         return { value: org.nativescript.widgets.ViewHelper.getPaddingBottom(this.nativeView), unit: "px" };
     }
     set [paddingBottomProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderBottomWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0));
     }
 
     //PaddingLeft
@@ -54,6 +54,6 @@ export class LayoutBase extends LayoutBaseCommon {
         return { value: org.nativescript.widgets.ViewHelper.getPaddingLeft(this.nativeView), unit: "px" };
     }
     set [paddingLeftProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderLeftWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0));
     }
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/text-base/text-base.android.ts b/tns-core-modules/ui/text-base/text-base.android.ts
index 7c692d78e..fa2f2fd69 100644
--- a/tns-core-modules/ui/text-base/text-base.android.ts
+++ b/tns-core-modules/ui/text-base/text-base.android.ts
@@ -193,7 +193,7 @@ export class TextBase extends TextBaseCommon {
         return { value: org.nativescript.widgets.ViewHelper.getPaddingTop(this.nativeView), unit: "px" };
     }
     set [paddingTopProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderTopWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0));
     }
 
     //PaddingRight
@@ -201,7 +201,7 @@ export class TextBase extends TextBaseCommon {
         return { value: org.nativescript.widgets.ViewHelper.getPaddingRight(this.nativeView), unit: "px" };
     }
     set [paddingRightProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderRightWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0));
     }
 
     //PaddingBottom
@@ -209,7 +209,7 @@ export class TextBase extends TextBaseCommon {
         return { value: org.nativescript.widgets.ViewHelper.getPaddingBottom(this.nativeView), unit: "px" };
     }
     set [paddingBottomProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderBottomWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0));
     }
 
     //PaddingLeft
@@ -217,7 +217,7 @@ export class TextBase extends TextBaseCommon {
         return { value: org.nativescript.widgets.ViewHelper.getPaddingLeft(this.nativeView), unit: "px" };
     }
     set [paddingLeftProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderLeftWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0));
     }
 }