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 #3346 from NativeScript/padding

Browse Source 
Padding
This commit is contained in:
Rossen Hristov
2016-12-22 15:36:11 +02:00
committed by GitHub
parent 2d05e6ac6f 0ec9950d46
commit a276db4c38
6 changed files with 89 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/app/ui-tests-app/css/padding-and-border.css
View File

@@ -1,19 +1,20 @@
#padding { .padding {
padding: 10; padding: 5;
} }
#border { .border {
border-width: 10; border-width: 5;
border-color: black;
} }
#background-color { .green {
background-color: green;
}
.yellow {
background-color: yellow; background-color: yellow;
} }
/*#background-image { Label, TextField, TextView, Button {
background-image: url('~/ui-tests-app/pages/test2.png'); text-align: left;
background-repeat: no-repeat; margin: 1;
background-position: center center; }
background-size: 100% 100%;
}*/

27
apps/app/ui-tests-app/css/padding-and-border.ts
View File

@@ -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";
}

36
apps/app/ui-tests-app/css/padding-and-border.xml
View File

@@ -1,15 +1,25 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" id="padding-and-border-page"> <Page xmlns="http://schemas.nativescript.org/tns.xsd">
<StackLayout> <StackLayout id="container" class="padding green">
<Button id="changeButton" tap="onChangeCSS"/>
<TextView id="info" isEnabled="false" isUserInteractionEnabled="false"/> <Label text="Label padding" class="padding"/>
<StackLayout id="container" style.backgroundColor="gray"> <TextField text="TextField padding" class="padding"/>
<Label id="label" text="Label"/> <TextView text="TextView padding" class="padding"/>
<TextField id="textField" text="TextField"/> <Button text="Button padding" class="padding"/>
<TextView id="textView" text="TextView"/>
<Button id="button" text="Button"/> <Label text="Label padding yellow" class="padding yellow"/>
<StackLayout id="stack-layout"> <TextField text="TextField padding yellow" class="padding yellow"/>
<StackLayout id="child-of-stack-layout" width="50" height="50" style.backgroundColor="red"></StackLayout> <TextView text="TextView padding yellow" class="padding yellow"/>
</StackLayout> <Button text="Button padding yellow" class="padding yellow"/>
</StackLayout>
<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> </StackLayout>
</Page> </Page>

46
tns-core-modules/ui/button/button.android.ts
View File

@@ -1,6 +1,7 @@
import { import {
ButtonBase, TouchGestureEventData, GestureTypes, TouchAction, ButtonBase, TouchGestureEventData, GestureTypes, TouchAction,
PseudoClassHandler PseudoClassHandler,
paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length
} from "./button-common"; } from "./button-common";
export * 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 { export class Button extends ButtonBase {
_button: android.widget.Button; _button: android.widget.Button;
private _highlightedHandler: (args: TouchGestureEventData) => void; private _highlightedHandler: (args: TouchGestureEventData) => void;
private _defaultNativePadding: android.graphics.Rect;
get android(): android.widget.Button { get android(): android.widget.Button {
return this._button; return this._button;
@@ -32,6 +34,16 @@ export class Button extends ButtonBase {
let weakRef = new WeakRef(this); let weakRef = new WeakRef(this);
this._button = new android.widget.Button(this._context); this._button = new android.widget.Button(this._context);
this._button.setOnClickListener(new ClickListener(weakRef)); 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") @PseudoClassHandler("normal", "highlighted", "pressed", "active")
@@ -52,4 +64,36 @@ export class Button extends ButtonBase {
this.off(GestureTypes.touch, this._highlightedHandler); 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));
}
} }

8
tns-core-modules/ui/layouts/layout-base.android.ts
View File

@@ -30,7 +30,7 @@ export class LayoutBase extends LayoutBaseCommon {
return { value: org.nativescript.widgets.ViewHelper.getPaddingTop(this.nativeView), unit: "px" }; return { value: org.nativescript.widgets.ViewHelper.getPaddingTop(this.nativeView), unit: "px" };
} }
set [paddingTopProperty.native](value: Length) { 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 //PaddingRight
@@ -38,7 +38,7 @@ export class LayoutBase extends LayoutBaseCommon {
return { value: org.nativescript.widgets.ViewHelper.getPaddingRight(this.nativeView), unit: "px" }; return { value: org.nativescript.widgets.ViewHelper.getPaddingRight(this.nativeView), unit: "px" };
} }
set [paddingRightProperty.native](value: Length) { 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 //PaddingBottom
@@ -46,7 +46,7 @@ export class LayoutBase extends LayoutBaseCommon {
return { value: org.nativescript.widgets.ViewHelper.getPaddingBottom(this.nativeView), unit: "px" }; return { value: org.nativescript.widgets.ViewHelper.getPaddingBottom(this.nativeView), unit: "px" };
} }
set [paddingBottomProperty.native](value: Length) { 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 //PaddingLeft
@@ -54,6 +54,6 @@ export class LayoutBase extends LayoutBaseCommon {
return { value: org.nativescript.widgets.ViewHelper.getPaddingLeft(this.nativeView), unit: "px" }; return { value: org.nativescript.widgets.ViewHelper.getPaddingLeft(this.nativeView), unit: "px" };
} }
set [paddingLeftProperty.native](value: Length) { 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));
} }
} }

8
tns-core-modules/ui/text-base/text-base.android.ts
View File

@@ -193,7 +193,7 @@ export class TextBase extends TextBaseCommon {
return { value: org.nativescript.widgets.ViewHelper.getPaddingTop(this.nativeView), unit: "px" }; return { value: org.nativescript.widgets.ViewHelper.getPaddingTop(this.nativeView), unit: "px" };
} }
set [paddingTopProperty.native](value: Length) { 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 //PaddingRight
@@ -201,7 +201,7 @@ export class TextBase extends TextBaseCommon {
return { value: org.nativescript.widgets.ViewHelper.getPaddingRight(this.nativeView), unit: "px" }; return { value: org.nativescript.widgets.ViewHelper.getPaddingRight(this.nativeView), unit: "px" };
} }
set [paddingRightProperty.native](value: Length) { 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 //PaddingBottom
@@ -209,7 +209,7 @@ export class TextBase extends TextBaseCommon {
return { value: org.nativescript.widgets.ViewHelper.getPaddingBottom(this.nativeView), unit: "px" }; return { value: org.nativescript.widgets.ViewHelper.getPaddingBottom(this.nativeView), unit: "px" };
} }
set [paddingBottomProperty.native](value: Length) { 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 //PaddingLeft
@@ -217,7 +217,7 @@ export class TextBase extends TextBaseCommon {
return { value: org.nativescript.widgets.ViewHelper.getPaddingLeft(this.nativeView), unit: "px" }; return { value: org.nativescript.widgets.ViewHelper.getPaddingLeft(this.nativeView), unit: "px" };
} }
set [paddingLeftProperty.native](value: Length) { 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));
} }
} }