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

Trying to fix padding...

Browse Source
This commit is contained in:
Rossen Hristov
2016-12-21 14:29:44 +02:00
parent 432a849d99
commit 4cd3eed1cd
8 changed files with 135 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/package.json
View File

@ -1,4 +1,4 @@
{
"name": "tns-samples-apps",
"main": "cuteness.io/app.js"
"main": "ui-tests-app/app.js"
}

3
apps/app/ui-tests-app/css/main-page.ts
View File

@ -38,7 +38,8 @@ export function pageLoaded(args: EventData) {
examples.set("all-non-uniform-border", "css/all-non-uniform-border");
examples.set("margins-paddings-with-percentage", "css/margins-paddings-with-percentage");
examples.set("list-picker", "css/list-picker");
//examples.set("border-playground", "css/border-playground");
examples.set("padding-and-border", "css/padding-and-border");
examples.set("border-playground", "css/border-playground");
let viewModel = new SubMainPageViewModel(wrapLayout, examples);
page.bindingContext = viewModel;

19
apps/app/ui-tests-app/css/padding-and-border.css Normal file
View File

@ -0,0 +1,19 @@
#padding {
padding: 10;
}
#border {
border-width: 10;
border-color: black;
}
#background-color {
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%;
}*/

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

@ -0,0 +1,27 @@
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";
}

15
apps/app/ui-tests-app/css/padding-and-border.xml Normal file
View File

@ -0,0 +1,15 @@
<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>
</StackLayout>
</Page>

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

@ -4,7 +4,6 @@ import {
ViewCommon, layout, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty, visibilityProperty, opacityProperty, minWidthProperty, minHeightProperty,
widthProperty, heightProperty, marginLeftProperty, marginTopProperty,
marginRightProperty, marginBottomProperty, horizontalAlignmentProperty, verticalAlignmentProperty,
paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty,
rotateProperty, scaleXProperty, scaleYProperty,
translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty,
Background, GestureTypes, GestureEventData, applyNativeSetters, Property,
@ -584,30 +583,6 @@ createNativePercentLengthProperty({
setPercent: ViewHelper.setMarginLeftPercent
});
createNativePercentLengthProperty({
key: paddingTopProperty.native,
getPixels: ViewHelper.getPaddingTop,
setPixels: ViewHelper.setPaddingTop
});
createNativePercentLengthProperty({
key: paddingRightProperty.native,
getPixels: ViewHelper.getPaddingRight,
setPixels: ViewHelper.setPaddingRight
});
createNativePercentLengthProperty({
key: paddingBottomProperty.native,
getPixels: ViewHelper.getPaddingBottom,
setPixels: ViewHelper.setPaddingBottom
});
createNativePercentLengthProperty({
key: paddingLeftProperty.native,
getPixels: ViewHelper.getPaddingLeft,
setPixels: ViewHelper.setPaddingLeft
});
createNativePercentLengthProperty({
key: widthProperty.native,
auto: android.view.ViewGroup.LayoutParams.MATCH_PARENT,

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

@ -1,4 +1,7 @@
import { LayoutBaseCommon, clipToBoundsProperty } from "./layout-base-common";
import {
LayoutBaseCommon, clipToBoundsProperty,
paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length, layout
} from "./layout-base-common";
export * from "./layout-base-common";
@ -21,4 +24,37 @@ export class LayoutBase extends LayoutBaseCommon {
// http://stackoverflow.com/questions/25044085/when-drawing-outside-the-view-clip-bounds-with-android-how-do-i-prevent-underli
console.warn(`clipToBounds with value false is not supported on Android. You can use this.android.getParent().setClipChildren(false) as an alternative`);
}
//PaddingTop
get [paddingTopProperty.native](): Length {
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);
}
//PaddingRight
get [paddingRightProperty.native](): Length {
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);
}
//PaddingBottom
get [paddingBottomProperty.native](): Length {
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);
}
//PaddingLeft
get [paddingLeftProperty.native](): Length {
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);
}
}

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

@ -1,7 +1,8 @@
import {
TextBaseCommon, textProperty, formattedTextProperty, textAlignmentProperty, textDecorationProperty,
textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty, whiteSpaceProperty,
Font, Color, FormattedString, TextDecoration, TextAlignment, TextTransform, WhiteSpace
Font, Color, FormattedString, TextDecoration, TextAlignment, TextTransform, WhiteSpace,
paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length, layout
} from "./text-base-common";
export * from "./text-base-common";
@ -187,6 +188,38 @@ export class TextBase extends TextBaseCommon {
set [letterSpacingProperty.native](value: number) {
org.nativescript.widgets.ViewHelper.setLetterspacing(this._nativeView, value);
}
//PaddingTop
get [paddingTopProperty.native](): Length {
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);
}
//PaddingRight
get [paddingRightProperty.native](): Length {
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);
}
//PaddingBottom
get [paddingBottomProperty.native](): Length {
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);
}
//PaddingLeft
get [paddingLeftProperty.native](): Length {
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);
}
}
@Interfaces([android.text.method.TransformationMethod])