From 2e6b041b575f7c4302a6f9508653bb1b185ee8f6 Mon Sep 17 00:00:00 2001 From: vakrilov Date: Fri, 6 Mar 2015 14:46:12 +0200 Subject: [PATCH 1/4] Padding fix for stack-layout and tests --- CrossPlatformModules.csproj | 4 +-- apps/tests/layouts/absolute-layout-tests.ts | 1 + apps/tests/layouts/dock-layout-tests.ts | 1 + apps/tests/layouts/grid-layout-tests.ts | 1 + apps/tests/layouts/layout-helper.ts | 9 +++++++ apps/tests/layouts/stack-layout-tests.ts | 6 +++++ apps/tests/layouts/wrap-layout-tests.ts | 6 +++++ ui/layouts/stack-layout/stack-layout.ts | 29 ++++++++++++++++----- 8 files changed, 48 insertions(+), 9 deletions(-) diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj index c6db0b1f4..3e8692a87 100644 --- a/CrossPlatformModules.csproj +++ b/CrossPlatformModules.csproj @@ -1450,7 +1450,7 @@ True 0 / - http://localhost:7260/ + http://localhost:3128/ False False @@ -1458,7 +1458,7 @@ False - + \ No newline at end of file diff --git a/apps/tests/layouts/absolute-layout-tests.ts b/apps/tests/layouts/absolute-layout-tests.ts index 4031a1118..829ffa617 100644 --- a/apps/tests/layouts/absolute-layout-tests.ts +++ b/apps/tests/layouts/absolute-layout-tests.ts @@ -73,6 +73,7 @@ export function test_padding() { return absoluteLayout.isLayoutValid; }, 1); + layoutHelper.assertMeasure(btn, 100, 100); layoutHelper.assertLayout(btn, 25, 35, 100, 100); }); } diff --git a/apps/tests/layouts/dock-layout-tests.ts b/apps/tests/layouts/dock-layout-tests.ts index 9bb0f3d86..01ead78c4 100644 --- a/apps/tests/layouts/dock-layout-tests.ts +++ b/apps/tests/layouts/dock-layout-tests.ts @@ -191,6 +191,7 @@ export function test_padding() { TKUnit.waitUntilReady(() => { return rootLayout.isLayoutValid; }); + helper.assertMeasure(testBtn, 260, 240); helper.assertLayout(testBtn, 10, 20, 260, 240); } diff --git a/apps/tests/layouts/grid-layout-tests.ts b/apps/tests/layouts/grid-layout-tests.ts index 2bd9e018c..c356ed370 100644 --- a/apps/tests/layouts/grid-layout-tests.ts +++ b/apps/tests/layouts/grid-layout-tests.ts @@ -492,6 +492,7 @@ export function test_GridLayout_padding() { TKUnit.waitUntilReady(() => { return btn.isLayoutValid }); + helper.assertMeasure(btn, 260, 240); helper.assertLayout(btn, 10, 20, 260, 240); } diff --git a/apps/tests/layouts/layout-helper.ts b/apps/tests/layouts/layout-helper.ts index 35441c0b2..06dcac9ab 100644 --- a/apps/tests/layouts/layout-helper.ts +++ b/apps/tests/layouts/layout-helper.ts @@ -66,6 +66,15 @@ export class MyButton extends button.Button { } } +export function assertMeasure(btn: MyButton, width: number, height: number, name?: string) { + var density = utils.layout.getDisplayDensity(); + + name = name ? "[" + name + "]" : ""; + + TKUnit.assertAreClose(btn.measureWidth / density, width, DELTA, name + "width"); + TKUnit.assertAreClose(btn.measureHeight / density, height, DELTA, name + "height"); +} + export function assertLayout(btn: MyButton, left: number, top: number, width: number, height: number, name?: string): void { var density = utils.layout.getDisplayDensity(); diff --git a/apps/tests/layouts/stack-layout-tests.ts b/apps/tests/layouts/stack-layout-tests.ts index acf1cbc40..88289d61a 100644 --- a/apps/tests/layouts/stack-layout-tests.ts +++ b/apps/tests/layouts/stack-layout-tests.ts @@ -175,6 +175,9 @@ export function test_StackLayout_Padding_Vertical() { return btn2.arranged; }, ASYNC); + helper.assertMeasure(btn1, 260, 50); + helper.assertMeasure(btn1, 260, 50); + helper.assertLayout(btn1, 10, 20, 260, 50, "btn1"); helper.assertLayout(btn2, 10, 70, 260, 50, "btn2"); } @@ -196,6 +199,9 @@ export function test_StackLayout_Padding_Horizontal() { return btn2.arranged; }, ASYNC); + helper.assertMeasure(btn1, 50, 240); + helper.assertMeasure(btn1, 50, 240); + helper.assertLayout(btn1, 10, 20, 50, 240, "btn1"); helper.assertLayout(btn2, 60, 20, 50, 240, "btn2"); } diff --git a/apps/tests/layouts/wrap-layout-tests.ts b/apps/tests/layouts/wrap-layout-tests.ts index c135b8037..35878f3c1 100644 --- a/apps/tests/layouts/wrap-layout-tests.ts +++ b/apps/tests/layouts/wrap-layout-tests.ts @@ -230,6 +230,9 @@ export function testPaddingRight() { return wrapLayout.isLayoutValid; }); + layoutHelper.assertMeasure(btn1, 100, 50); + layoutHelper.assertMeasure(btn2, 80, 50); + // There should be no space left for the button on the first row, // because fo the padding (200 - 100 - 30) = 70 button wants 80 layoutHelper.assertLayout(btn1, 0, 0, 100, 50, "button1"); @@ -258,6 +261,9 @@ export function testPaddingBottom() { return wrapLayout.isLayoutValid; }); + layoutHelper.assertMeasure(btn1, 50, 100); + layoutHelper.assertMeasure(btn2, 50, 80); + // There should be no space left for the button on the first row, // because fo the padding (200 - 100 - 30) = 70 button wants 80 layoutHelper.assertLayout(btn1, 0, 0, 50, 100, "button1"); diff --git a/ui/layouts/stack-layout/stack-layout.ts b/ui/layouts/stack-layout/stack-layout.ts index 7932bc31d..0da139aa0 100644 --- a/ui/layouts/stack-layout/stack-layout.ts +++ b/ui/layouts/stack-layout/stack-layout.ts @@ -12,7 +12,7 @@ function validateOrientation(value: any): boolean { export var orientationProperty = new dependencyObservable.Property( "orientation", - "LinearLayout", + "StackLayout", new proxy.PropertyMetadata(enums.Orientation.vertical, dependencyObservable.PropertyMetadataSettings.AffectsLayout, undefined, @@ -32,6 +32,7 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void { super.onMeasure(widthMeasureSpec, heightMeasureSpec); + var density = utils.layout.getDisplayDensity(); var measureWidth = 0; var measureHeight = 0; @@ -43,6 +44,9 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec); var isVertical = this.orientation === enums.Orientation.vertical; + var verticalPadding = (this.paddingTop + this.paddingBottom) * density; + var horizontalPadding = (this.paddingLeft + this.paddingRight) * density; + var count = this.getChildrenCount(); var measureSpec: number; @@ -56,7 +60,19 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou } else { measureSpec = utils.layout.AT_MOST; - remainingLength = isVertical ? height : width; + remainingLength = isVertical ? height - verticalPadding : width - horizontalPadding; + } + + var childMeasureSpec: number; + if (isVertical) { + var childWidth = (widthMode === utils.layout.UNSPECIFIED) ? 0 : width - horizontalPadding; + childWidth = Math.max(0, childWidth); + childMeasureSpec = utils.layout.makeMeasureSpec(childWidth, widthMode) + } + else { + var childHeight = (heightMode === utils.layout.UNSPECIFIED) ? 0 : height - verticalPadding; + childHeight = Math.max(0, childHeight); + childMeasureSpec = utils.layout.makeMeasureSpec(childHeight, heightMode) } var childSize: { measuredWidth: number; measuredHeight: number }; @@ -67,14 +83,14 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou } if (isVertical) { - childSize = view.View.measureChild(this, child, widthMeasureSpec, utils.layout.makeMeasureSpec(remainingLength, measureSpec)); + childSize = view.View.measureChild(this, child, childMeasureSpec, utils.layout.makeMeasureSpec(remainingLength, measureSpec)); measureWidth = Math.max(measureWidth, childSize.measuredWidth); var viewHeight = childSize.measuredHeight; measureHeight += viewHeight; remainingLength = Math.max(0, remainingLength - viewHeight); } else { - childSize = view.View.measureChild(this, child, utils.layout.makeMeasureSpec(remainingLength, measureSpec), heightMeasureSpec); + childSize = view.View.measureChild(this, child, utils.layout.makeMeasureSpec(remainingLength, measureSpec), childMeasureSpec); measureHeight = Math.max(measureHeight, childSize.measuredHeight); var viewWidth = childSize.measuredWidth; measureWidth += viewWidth; @@ -82,9 +98,8 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou } } - var density = utils.layout.getDisplayDensity(); - measureWidth += (this.paddingLeft + this.paddingRight) * density; - measureHeight += (this.paddingTop + this.paddingBottom) * density; + measureWidth += horizontalPadding; + measureHeight += verticalPadding; measureWidth = Math.max(measureWidth, this.minWidth * density); measureHeight = Math.max(measureHeight, this.minHeight * density); From 4e5d3822804333ae6ff231d456c4dadf0652cbf7 Mon Sep 17 00:00:00 2001 From: vakrilov Date: Fri, 6 Mar 2015 14:51:50 +0200 Subject: [PATCH 2/4] Settings app - improved --- apps/template-settings/app.css | 2 +- apps/template-settings/main-page.xml | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/template-settings/app.css b/apps/template-settings/app.css index f0742c740..5eaf8df78 100644 --- a/apps/template-settings/app.css +++ b/apps/template-settings/app.css @@ -1,5 +1,5 @@ .content { - margin: 10; + padding: 10; background-color: white; } diff --git a/apps/template-settings/main-page.xml b/apps/template-settings/main-page.xml index 3f09696ba..2ba1a5284 100644 --- a/apps/template-settings/main-page.xml +++ b/apps/template-settings/main-page.xml @@ -2,7 +2,7 @@