Merge pull request #559 from NativeScript/padding

Padding

CrossPlatformModules.csproj

@@ -107,6 +107,9 @@
     <Content Include="apps\action-bar-demo\pages\center-view-segmented.xml" />
     <Content Include="apps\action-bar-demo\pages\center-view.xml" />
     <Content Include="apps\action-bar-demo\pages\data-binding.xml" />
+    <Content Include="apps\editable-text-demo\main-page.css">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
     <Content Include="apps\gallery-app\content\html-view.xml" />
     <Content Include="apps\orientation-demo\main-page.port.xml">
       <SubType>Designer</SubType>
@@ -1921,7 +1924,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>

apps/editable-text-demo/main-page.css

@@ -0,0 +1,14 @@
+Button, Label, TextView, TextField {
+    border-color: black;
+    border-width: 10;
+    border-radius: 3;
+    padding: 10;
+    /*padding-left: 20;
+    padding-top: 20;
+    padding-right: 20;
+    padding-bottom: 20;*/
+    margin: 10;
+    font-size: 24;
+    text-align: left;
+    color: black;
+}

apps/editable-text-demo/main-page.ts

@@ -1,51 +1,51 @@
-import observableModule = require("data/observable");
+//import observableModule = require("data/observable");
-import pagesModule = require("ui/page");
+//import pagesModule = require("ui/page");
-import textFieldModule = require("ui/text-field");
+//import textFieldModule = require("ui/text-field");
-import textViewModule = require("ui/text-view");
+//import textViewModule = require("ui/text-view");
-import buttonModule = require("ui/button");
+//import buttonModule = require("ui/button");
-import labelModule = require("ui/label");
+//import labelModule = require("ui/label");
-import model = require("./model");
+//import model = require("./model");
-import colorModule = require("color");
+//import colorModule = require("color");
-import stackLayoutModule = require("ui/layouts/stack-layout");
+//import stackLayoutModule = require("ui/layouts/stack-layout");
-import enums = require("ui/enums");
+//import enums = require("ui/enums");
 
-var stackLayout: stackLayoutModule.StackLayout;
+//var stackLayout: stackLayoutModule.StackLayout;
-var textField: textFieldModule.TextField;
+//var textField: textFieldModule.TextField;
-var textView: textViewModule.TextView;
+//var textView: textViewModule.TextView;
-var button: buttonModule.Button;
+//var button: buttonModule.Button;
-var label: labelModule.Label;
+//var label: labelModule.Label;
 
-export function onPageLoaded(args: observableModule.EventData) {
+//export function onPageLoaded(args: observableModule.EventData) {
-    var page = <pagesModule.Page>args.object;
+//    var page = <pagesModule.Page>args.object;
 
-    stackLayout = page.getViewById<stackLayoutModule.StackLayout>("stack");
+//    stackLayout = page.getViewById<stackLayoutModule.StackLayout>("stack");
-    button = page.getViewById<buttonModule.Button>("button");
+//    button = page.getViewById<buttonModule.Button>("button");
-    label = page.getViewById<labelModule.Label>("label");
+//    label = page.getViewById<labelModule.Label>("label");
 
-    if (stackLayout.android) {
+//    if (stackLayout.android) {
-        stackLayout.android.setClickable(true);
+//        stackLayout.android.setClickable(true);
-        stackLayout.android.setFocusableInTouchMode(true);
+//        stackLayout.android.setFocusableInTouchMode(true);
-    }
+//    }
 
-    textField = page.getViewById<textFieldModule.TextField>("textField");
+//    textField = page.getViewById<textFieldModule.TextField>("textField");
-    textField.style.backgroundColor = new colorModule.Color("LightGray");
+//    textField.style.backgroundColor = new colorModule.Color("LightGray");
 
-    textView = page.getViewById<textViewModule.TextView>("textView");
+//    textView = page.getViewById<textViewModule.TextView>("textView");
-    textView.style.backgroundColor = new colorModule.Color("BlanchedAlmond");
+//    textView.style.backgroundColor = new colorModule.Color("BlanchedAlmond");
 
-    var viewModel = new model.WebViewModel();
+//    var viewModel = new model.WebViewModel();
-    page.bindingContext = viewModel;
+//    page.bindingContext = viewModel;
-}
+//}
 
-export function onTap(args: observableModule.EventData) {
+//export function onTap(args: observableModule.EventData) {
-    if (textField.updateTextTrigger === enums.UpdateTextTrigger.focusLost) {
+//    if (textField.updateTextTrigger === enums.UpdateTextTrigger.focusLost) {
-        textField.updateTextTrigger = enums.UpdateTextTrigger.textChanged;
+//        textField.updateTextTrigger = enums.UpdateTextTrigger.textChanged;
-        textView.updateTextTrigger = enums.UpdateTextTrigger.textChanged;
+//        textView.updateTextTrigger = enums.UpdateTextTrigger.textChanged;
-        button.text = "textChanged";
+//        button.text = "textChanged";
-    }
+//    }
-    else {
+//    else {
-        textField.updateTextTrigger = enums.UpdateTextTrigger.focusLost;
+//        textField.updateTextTrigger = enums.UpdateTextTrigger.focusLost;
-        textView.updateTextTrigger = enums.UpdateTextTrigger.focusLost;
+//        textView.updateTextTrigger = enums.UpdateTextTrigger.focusLost;
-        button.text = "focusLost";
+//        button.text = "focusLost";
-    }
+//    }
-}
+//}

apps/editable-text-demo/main-page.xml

@@ -1,8 +1,8 @@
-<Page loaded="onPageLoaded">
+<Page>
-  <StackLayout id="stack">
+  <StackLayout id="stack" backgroundColor="LightGray">
-    <Button id="button" text="textChanged" height="100" margin="20" tap="onTap" backgroundColor="Red"/>
+    <Button id="button" text="button" backgroundColor="Green" />
-    <Label id="label" text="{{ text }}" height="100" margin="20"/>
+    <Label id="label" text="label"  backgroundColor="Yellow"/>
-    <TextField id="textField" text="{{ text }}" margin="20" autocapitalizationType="none" autocorrect="false"/>
+    <TextField id="textField" text="text-field" hint="hint" backgroundColor="Red"/>
-    <TextView id="textView" text="{{ text }}" height="100" margin="20" autocapitalizationType="none" autocorrect="false"/>
+    <TextView id="textView" text="text-view" backgroundColor="Blue"/>
   </StackLayout>
 </Page>

ui/core/view-common.ts

@@ -752,10 +752,6 @@ export class View extends proxy.ProxyObject implements definition.View {
     //@endandroid
 
     // TODO: We need to implement some kind of build step that includes these members only when building for iOS
-    //@ios
-    public _prepareNativeView(view: UIView) {
-        //
-    }
 
     //@endios
     get _childrenCount(): number {

ui/core/view.d.ts

@@ -418,8 +418,6 @@ declare module "ui/core/view" {
         _onDetached(force?: boolean): void;
         _createUI(): void;
 
-        _prepareNativeView(view: UIView);
-
         _checkMetadataOnPropertyChanged(metadata: dependencyObservable.PropertyMetadata);
 
         _updateLayout(): void;

ui/core/view.ios.ts

@@ -82,11 +82,6 @@ export class View extends viewCommon.View {
         return this.ios;
     }
 
-    public _prepareNativeView(view: UIView) {
-        // For UILabel and UIImage.
-        view.userInteractionEnabled = true;
-    }
-    
     get isLayoutRequested(): boolean {
         return (this._privateFlags & PFLAG_FORCE_LAYOUT) === PFLAG_FORCE_LAYOUT;
     }
@@ -257,7 +252,7 @@ export class CustomLayoutView extends View {
 
         if (this._nativeView && child._nativeView) {
             if (types.isNullOrUndefined(atIndex) || atIndex >= this._nativeView.subviews.count) {
-                this._nativeView.addSubview(child._nativeView);
+            this._nativeView.addSubview(child._nativeView);
             }
             else {
                 this._nativeView.insertSubviewAtIndex(child._nativeView, atIndex);

ui/html-view/html-view.ios.ts

@@ -33,7 +33,7 @@ export class HtmlView extends common.HtmlView {
         super(options);
 
         this._ios = new UILabel();
-        super._prepareNativeView(this._ios);
+        this._ios.userInteractionEnabled = true;
     }
 
     get ios(): UILabel {

ui/image/image.ios.ts

@@ -48,7 +48,7 @@ export class Image extends imageCommon.Image {
         this._ios = new UIImageView();
         this._ios.contentMode = UIViewContentMode.UIViewContentModeScaleAspectFit;
         this._ios.clipsToBounds = true;
-        super._prepareNativeView(this._ios);
+        this._ios.userInteractionEnabled = true;
     }
 
     get ios(): UIImageView {

ui/label/label.ios.ts

@@ -24,14 +24,49 @@ function onTextWrapPropertyChanged(data: dependencyObservable.PropertyChangeData
 
 global.moduleMerge(common, exports);
 
+class UILabelImpl extends UILabel {
+    static new(): UILabelImpl {
+        return <UILabelImpl>super.new();
+    }
+
+    private _owner: Label;
+
+    public initWithOwner(owner: Label): UILabelImpl {
+        this._owner = owner;
+        return this;
+    }
+
+    public textRectForBoundsLimitedToNumberOfLines(bounds: CGRect, numberOfLines: number): CGRect {
+        var rect = super.textRectForBoundsLimitedToNumberOfLines(bounds, numberOfLines);
+        var textRect = CGRectMake(
+            - (this._owner.borderWidth + this._owner.style.paddingLeft),
+            - (this._owner.borderWidth + this._owner.style.paddingTop),
+            rect.size.width + (this._owner.borderWidth + this._owner.style.paddingLeft + this._owner.style.paddingRight + this._owner.borderWidth),
+            rect.size.height + (this._owner.borderWidth + this._owner.style.paddingTop + this._owner.style.paddingBottom + this._owner.borderWidth)
+            );
+        return textRect;
+    }
+
+    public drawTextInRect(rect: CGRect): void {
+        var textRect = CGRectMake(
+            (this._owner.borderWidth + this._owner.style.paddingLeft),
+            (this._owner.borderWidth + this._owner.style.paddingTop),
+            rect.size.width - (this._owner.borderWidth + this._owner.style.paddingLeft + this._owner.style.paddingRight + this._owner.borderWidth),
+            rect.size.height - (this._owner.borderWidth + this._owner.style.paddingTop + this._owner.style.paddingBottom + this._owner.borderWidth)
+            );
+        super.drawTextInRect(textRect);
+    }
+}
+
 export class Label extends common.Label {
     private _ios: UILabel;
 
     constructor(options?: definition.Options) {
         super(options);
 
-        this._ios = new UILabel();
+        //this._ios = new UILabel();
-        super._prepareNativeView(this._ios);
+        this._ios = UILabelImpl.new().initWithOwner(this);
+        this._ios.userInteractionEnabled = true;
     }
 
     get ios(): UILabel {

ui/styling/style.ts

@@ -847,8 +847,7 @@ export var marginTopProperty = new styleProperty.Property("marginTop", "margin-t
 export var marginBottomProperty = new styleProperty.Property("marginBottom", "margin-bottom",
     new observable.PropertyMetadata(0, AffectsLayout, onLayoutParamsChanged, isMarginValid), converters.numberConverter);
 
-export var paddingProperty = new styleProperty.Property("padding", "padding",
+export var paddingProperty = new styleProperty.Property("padding", "padding", new observable.PropertyMetadata(null, null, onPaddingChanged));
-    new observable.PropertyMetadata(null, null, onPaddingChanged));
 
 export var paddingLeftProperty = new styleProperty.Property("paddingLeft", "padding-left",
     new observable.PropertyMetadata(0, AffectsLayout, onPaddingValueChanged, isPaddingValid), converters.numberConverter);

ui/styling/stylers.android.ts

@@ -34,9 +34,13 @@ function onBackgroundOrBorderPropertyChanged(v: view.View) {
             nativeView.setBackground(bkg);
         }
 
-        var padding = v.borderWidth * utils.layout.getDisplayDensity();
+        var density = utils.layout.getDisplayDensity();
-
+        nativeView.setPadding(
-        nativeView.setPadding(padding, padding, padding, padding);
+            (v.borderWidth + v.style.paddingLeft) * density,
+            (v.borderWidth + v.style.paddingTop) * density,
+            (v.borderWidth + v.style.paddingRight) * density,
+            (v.borderWidth + v.style.paddingBottom) * density
+            );
 
         bkg.borderWidth = v.borderWidth;
         bkg.cornerRadius = v.borderRadius;
@@ -202,6 +206,24 @@ export class DefaultStyler implements definition.stylers.Styler {
         nativeView.setLayoutParams(lp);
     }
 
+    private static setPaddingProperty(view: view.View, newValue: any) {
+        var density = utils.layout.getDisplayDensity();
+        var left = (newValue.left + view.borderWidth) * density;
+        var top = (newValue.top + view.borderWidth) * density;
+        var right = (newValue.right + view.borderWidth) * density;
+        var bottom = (newValue.bottom + view.borderWidth) * density;
+        (<android.view.View>view._nativeView).setPadding(left, top, right, bottom);
+    }
+
+    private static resetPaddingProperty(view: view.View, nativeValue: any) {
+        var density = utils.layout.getDisplayDensity();
+        var left = view.borderWidth * density;
+        var top = view.borderWidth * density;
+        var right = view.borderWidth * density;
+        var bottom = view.borderWidth * density;
+        (<android.view.View>view._nativeView).setPadding(left, top, right, bottom);
+    }
+
     public static registerHandlers() {
         style.registerHandler(style.visibilityProperty, new stylersCommon.StylePropertyChangedHandler(
             DefaultStyler.setVisibilityProperty,
@@ -233,6 +255,18 @@ export class DefaultStyler implements definition.stylers.Styler {
         style.registerHandler(style.nativeLayoutParamsProperty, new stylersCommon.StylePropertyChangedHandler(
             DefaultStyler.setNativeLayoutParamsProperty,
             DefaultStyler.resetNativeLayoutParamsProperty));
+
+        style.registerHandler(style.nativePaddingsProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setPaddingProperty,
+            DefaultStyler.resetPaddingProperty), "TextBase");
+
+        style.registerHandler(style.nativePaddingsProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setPaddingProperty,
+            DefaultStyler.resetPaddingProperty), "Button");
+
+        style.registerHandler(style.nativePaddingsProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setPaddingProperty,
+            DefaultStyler.resetPaddingProperty), "LayoutBase");
     }
 }
 
@@ -343,7 +377,6 @@ export class TextViewStyler implements definition.stylers.Styler {
             TextViewStyler.setTextAlignmentProperty,
             TextViewStyler.resetTextAlignmentProperty,
             TextViewStyler.getNativeTextAlignmentValue), "Button");
-
     }
 }
 
@@ -475,28 +508,6 @@ export class SearchBarStyler implements definition.stylers.Styler {
     }
 }
 
-export class LayoutBaseStyler implements definition.stylers.Styler {
-    
-    //nativePadding methods
-    private static setPaddingNativeProperty(view: view.View, newValue: style.Thickness): void {
-        var left = (newValue.left * utils.layout.getDisplayDensity());
-        var top = (newValue.top * utils.layout.getDisplayDensity());
-        var right = (newValue.right * utils.layout.getDisplayDensity());
-        var bottom = (newValue.bottom * utils.layout.getDisplayDensity());
-        (<android.view.View>view._nativeView).setPadding(left, top, right, bottom);
-    }
-
-    private static resetPaddingNativeProperty(view: view.View, nativeValue: any): void {
-        (<android.view.View>view._nativeView).setPadding(0, 0, 0, 0);
-    }
-
-    public static registerHandlers() {
-        style.registerHandler(style.nativePaddingsProperty, new stylersCommon.StylePropertyChangedHandler(
-            LayoutBaseStyler.setPaddingNativeProperty,
-            LayoutBaseStyler.resetPaddingNativeProperty), "LayoutBase");
-    }
-}
-
 // Register all styler at the end.
 export function _registerDefaultStylers() {
     style.registerNoStylingClass("Frame");
@@ -505,5 +516,4 @@ export function _registerDefaultStylers() {
     ActivityIndicatorStyler.registerHandlers();
     SegmentedBarStyler.registerHandlers();
     SearchBarStyler.registerHandlers();
-    LayoutBaseStyler.registerHandlers();
 }

ui/styling/stylers.ios.ts

@@ -227,6 +227,19 @@ export class ButtonStyler implements definition.stylers.Styler {
         }
     }
 
+    // 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;
+        (<UIButton>view._nativeView).contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
+    }
+
+    private static resetPaddingProperty(view: view.View, nativeValue: any) {
+        (<UIButton>view._nativeView).contentEdgeInsets = UIEdgeInsetsFromString("{0,0,0,0}");
+    }
+
     public static registerHandlers() {
         style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
             ButtonStyler.setColorProperty,
@@ -242,6 +255,10 @@ export class ButtonStyler implements definition.stylers.Styler {
             ButtonStyler.setTextAlignmentProperty,
             ButtonStyler.resetTextAlignmentProperty,
             ButtonStyler.getNativeTextAlignmentValue), "Button");
+
+        style.registerHandler(style.nativePaddingsProperty, new stylersCommon.StylePropertyChangedHandler(
+            ButtonStyler.setPaddingProperty,
+            ButtonStyler.resetPaddingProperty), "Button");
     }
 }
 

ui/text-field/text-field.ios.ts

@@ -69,15 +69,48 @@ class UITextFieldDelegateImpl extends NSObject implements UITextFieldDelegate {
     }
 }
 
+class UITextFieldImpl extends UITextField {
+    static new(): UITextFieldImpl {
+        return <UITextFieldImpl>super.new();
+    }
+
+    private _owner: TextField;
+
+    public initWithOwner(owner: TextField): UITextFieldImpl {
+        this._owner = owner;
+        return this;
+    }
+
+    private _getTextRectForBounds(bounds: CGRect): CGRect {
+        if (!this._owner) {
+            return bounds;
+        }
+
+        return CGRectMake(
+            this._owner.borderWidth + this._owner.style.paddingLeft,
+            this._owner.borderWidth + this._owner.style.paddingTop,
+            bounds.size.width - (this._owner.borderWidth + this._owner.style.paddingLeft + this._owner.style.paddingRight + this._owner.borderWidth),
+            bounds.size.height - (this._owner.borderWidth + this._owner.style.paddingTop + this._owner.style.paddingBottom + this._owner.borderWidth)
+            );
+    }
+    
+    public textRectForBounds(bounds: CGRect): CGRect {
+        return this._getTextRectForBounds(bounds);
+    }
+
+    public editingRectForBounds(bounds: CGRect): CGRect {
+        return this._getTextRectForBounds(bounds);
+    }
+}
+
 export class TextField extends common.TextField {
     private _ios: UITextField;
-    private _delegate: any;
+    private _delegate: UITextFieldDelegateImpl;
 
     constructor() {
         super();
 
-        this._ios = new UITextField();
+        this._ios = UITextFieldImpl.new().initWithOwner(this);
-
         this._delegate = UITextFieldDelegateImpl.new().initWithOwner(this);
     }
 

ui/text-view/text-view.ios.ts

@@ -42,17 +42,15 @@ class UITextViewDelegateImpl extends NSObject implements UITextViewDelegate {
 
 export class TextView extends common.TextView {
     private _ios: UITextView;
-    private _delegate: any;
+    private _delegate: UITextViewDelegateImpl;
 
     constructor() {
         super();
 
-        this._ios = UITextView.new();
+        this._ios = new UITextView();
         if (!this._ios.font) {
-            // For some reason font is null, not like stated in the docs.
             this._ios.font = UIFont.systemFontOfSize(12);
         }
-
         this._delegate = UITextViewDelegateImpl.new().initWithOwner(this);
     }