From commits-return-3185-archive-asf-public=cust-asf.ponee.io@royale.apache.org Fri Mar 23 08:57:05 2018 Return-Path: X-Original-To: archive-asf-public@cust-asf.ponee.io Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by mx-eu-01.ponee.io (Postfix) with SMTP id 3914C1807AA for ; Fri, 23 Mar 2018 08:57:03 +0100 (CET) Received: (qmail 58645 invoked by uid 500); 23 Mar 2018 07:57:02 -0000 Mailing-List: contact commits-help@royale.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@royale.apache.org Delivered-To: mailing list commits@royale.apache.org Received: (qmail 58591 invoked by uid 99); 23 Mar 2018 07:57:02 -0000 Received: from ec2-52-202-80-70.compute-1.amazonaws.com (HELO gitbox.apache.org) (52.202.80.70) by apache.org (qpsmtpd/0.29) with ESMTP; Fri, 23 Mar 2018 07:57:02 +0000 Received: by gitbox.apache.org (ASF Mail Server at gitbox.apache.org, from userid 33) id 1B0D080AA4; Fri, 23 Mar 2018 07:57:01 +0000 (UTC) Date: Fri, 23 Mar 2018 07:57:11 +0000 To: "commits@royale.apache.org" Subject: [royale-asjs] 11/36: Added HorizontalLayoutWithPaddingAndGap and VerticalLayoutWithPaddingAndGap using CSS, but gaps and padding are still in inline style, what can be ok, but can't be modified at runtime, this must be revisited some time later MIME-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 8bit From: carlosrovira@apache.org In-Reply-To: <152179182074.13353.16921425963154919266@gitbox.apache.org> References: <152179182074.13353.16921425963154919266@gitbox.apache.org> X-Git-Host: gitbox.apache.org X-Git-Repo: royale-asjs X-Git-Refname: refs/heads/feature/jewel-ui-set X-Git-Reftype: branch X-Git-Rev: f1d27105d0bf10fc8618f6263a5a49f8544fdcc3 X-Git-NotificationType: diff X-Git-Multimail-Version: 1.5.dev Auto-Submitted: auto-generated Message-Id: <20180323075701.1B0D080AA4@gitbox.apache.org> This is an automated email from the ASF dual-hosted git repository. carlosrovira pushed a commit to branch feature/jewel-ui-set in repository https://gitbox.apache.org/repos/asf/royale-asjs.git commit f1d27105d0bf10fc8618f6263a5a49f8544fdcc3 Author: Carlos Rovira AuthorDate: Wed Mar 14 16:44:54 2018 +0100 Added HorizontalLayoutWithPaddingAndGap and VerticalLayoutWithPaddingAndGap using CSS, but gaps and padding are still in inline style, what can be ok, but can't be modified at runtime, this must be revisited some time later --- .../src/main/royale/ButtonPlayGround.mxml | 19 +-- frameworks/projects/Jewel/pom.xml | 6 +- .../Jewel/src/main/resources/jewel-manifest.xml | 1 + .../projects/Jewel/src/main/royale/JewelClasses.as | 1 + ...Gap.as => HorizontalLayoutWithPaddingAndGap.as} | 174 +++++++++------------ .../royale/jewel/beads/layouts/VerticalLayout.as | 4 +- .../layouts/VerticalLayoutWithPaddingAndGap.as | 37 +---- 7 files changed, 90 insertions(+), 152 deletions(-) diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml index fd5f879..f89ecaa 100644 --- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml @@ -32,7 +32,7 @@ limitations under the License. - + @@ -41,31 +41,22 @@ limitations under the License. - - - - + - - - - - - - + + + - - diff --git a/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml index 53fb1fc..e7de6c2 100644 --- a/frameworks/projects/Jewel/pom.xml +++ b/frameworks/projects/Jewel/pom.xml @@ -60,10 +60,10 @@ defaults.css ../src/main/resources/defaults.css - + true diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml index 96b6b31..b57f9a2 100644 --- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml +++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml @@ -33,6 +33,7 @@ + diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as index b2dfb99..547acc3 100644 --- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as +++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as @@ -41,6 +41,7 @@ package import org.apache.royale.jewel.beads.layouts.HorizontalLayout; HorizontalLayout; import org.apache.royale.jewel.beads.layouts.VerticalLayout; VerticalLayout; + import org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap; HorizontalLayoutWithPaddingAndGap; import org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap; VerticalLayoutWithPaddingAndGap; } diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as similarity index 62% copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as index f941993..95b689d 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as @@ -21,47 +21,39 @@ package org.apache.royale.jewel.beads.layouts import org.apache.royale.core.LayoutBase; import org.apache.royale.core.IBeadLayout; - import org.apache.royale.core.IBeadModel; import org.apache.royale.core.IBorderPaddingMarginValuesImpl; import org.apache.royale.core.ILayoutChild; import org.apache.royale.core.ILayoutHost; import org.apache.royale.core.ILayoutView; - import org.apache.royale.core.ILayoutParent; import org.apache.royale.core.IParentIUIBase; - import org.apache.royale.core.IStrand; import org.apache.royale.core.IUIBase; import org.apache.royale.core.layout.EdgeData; import org.apache.royale.core.ValuesManager; - COMPILE::JS - { - import org.apache.royale.core.WrappedHTMLElement; - } - import org.apache.royale.events.Event; - import org.apache.royale.events.IEventDispatcher; - import org.apache.royale.geom.Rectangle; - import org.apache.royale.utils.CSSUtils; - - /** - * The VerticalLayoutWithPaddingAndGap class is a simple layout - * bead similar to VerticalLayout, but it adds support for + COMPILE::JS { + import org.apache.royale.core.WrappedHTMLElement; + } + + /** + * The HorizontalLayoutWithPaddingAndGap class is a simple layout + * bead similar to HorizontalLayout, but it adds support for * padding and gap values. - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion Royale 0.0 - */ - public class VerticalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public class HorizontalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout { - /** - * Constructor. - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion Royale 0.0 - */ - public function VerticalLayoutWithPaddingAndGap() + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public function HorizontalLayoutWithPaddingAndGap() { super(); } @@ -196,20 +188,16 @@ package org.apache.royale.jewel.beads.layouts _gap = value; } - /** - * Layout children vertically - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion Royale 0.0 - * @royaleignorecoercion org.apache.royale.core.ILayoutHost - * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement - */ + /** + * @copy org.apache.royale.core.IBeadLayout#layout + * @royaleignorecoercion org.apache.royale.core.ILayoutHost + * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement + * @royaleignorecoercion org.apache.royale.core.IBorderPaddingMarginValuesImpl + */ override public function layout():Boolean { - COMPILE::SWF - { + COMPILE::SWF + { var contentView:ILayoutView = layoutView; var n:Number = contentView.numElements; @@ -228,7 +216,7 @@ package org.apache.royale.jewel.beads.layouts var paddingMetrics:EdgeData = new EdgeData(); paddingMetrics.left = _paddingLeft; - paddingMetrics.top = _paddingTop; + paddingMetrics.top = _paddingTop; paddingMetrics.right = _paddingRight; paddingMetrics.bottom = _paddingBottom; var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host); @@ -250,92 +238,74 @@ package org.apache.royale.jewel.beads.layouts ilc = child as ILayoutChild; - var childXpos:Number = xpos; // default x position + var childYpos:Number = ypos; // default y position - if (!hostWidthSizedToContent) { - var childWidth:Number = child.width; - if (ilc != null && !isNaN(ilc.percentWidth)) { - childWidth = hostWidth * ilc.percentWidth/100.0; - ilc.setWidth(childWidth); + if (!hostHeightSizedToContent) { + var childHeight:Number = child.height; + if (ilc != null && !isNaN(ilc.percentHeight)) { + childHeight = hostHeight * ilc.percentHeight/100.0; + ilc.setHeight(childHeight); } - // the following code center-aligns the child, but since HTML does not - // do this normally, this code is commented. (Use VerticalFlexLayout for - // horizontally centered elements in a vertical column). - // childXpos = hostWidth/2 - (childWidth + ml + mr)/2; + // the following code middle-aligns the child, but since HTML does not + // do this normally, this code is commented. (Use HorizontalFlexLayout for + // vertically centered elements in a horizontal row). +// childYpos = hostHeight/2 - (childHeight + mt + mb)/2; } if (ilc) { - ilc.setX(childXpos); - ilc.setY(ypos); + ilc.setX(xpos); + ilc.setY(childYpos); - if (!hostHeightSizedToContent && !isNaN(ilc.percentHeight)) { - var newHeight:Number = hostHeight * ilc.percentHeight / 100; - ilc.setHeight(newHeight); + if (!hostWidthSizedToContent && !isNaN(ilc.percentWidth)) { + var newWidth:Number = hostWidth * ilc.percentWidth / 100; + ilc.setWidth(newWidth); } } else { - child.x = childXpos; - child.y = ypos; + child.x = xpos; + child.y = childYpos; } - ypos += child.height + _gap; + xpos += child.width + _gap; } return true; - } - COMPILE::JS - { - var children:Array; - var i:int; - var n:int; - var contentView:IParentIUIBase = layoutView as IParentIUIBase; - contentView.element.style["vertical-align"] = "top"; - - children = contentView.internalChildren(); - n = children.length; - for (i = 0; i < n; i++) - { - var child:WrappedHTMLElement = children[i]; - - child.className += " vertical-layout-padding-gap"; + } + COMPILE::JS + { + var contentView:IParentIUIBase = layoutView as IParentIUIBase; + contentView.element.classList.add("layout", "horizontal"); - /*if(i == 0) - { - child.style.marginTop = _paddingTop + 'px'; - } - else - { - child.style.marginTop = _gap + 'px'; - } - child.style.marginRight = _paddingRight + 'px'; + var children:Array = contentView.internalChildren(); + var i:int; + var n:int = children.length; + for (i = 0; i < n; i++) + { + var child:WrappedHTMLElement = children[i] as WrappedHTMLElement; + if (child == null) continue; + child.style.marginTop = _paddingTop + 'px'; if(i === (n - 1)) { - child.style.marginBottom = _paddingBottom + 'px'; + child.style.marginRight = _paddingRight + 'px'; } else { - child.style.marginBottom = '0px'; + child.style.marginRight = '0px'; } - child.style.marginLeft = _paddingLeft + 'px'; - child.royale_wrapper.setDisplayStyleForLayout('block'); - if (child.style.display === 'none') + child.style.marginBottom = _paddingBottom + 'px'; + if(i == 0) { - child.royale_wrapper.setDisplayStyleForLayout('block'); + child.style.marginLeft = _paddingLeft + 'px'; } else { - // block elements don't measure width correctly so set to inline for a second - child.style.display = 'inline-block'; - child.style.display = 'block'; - } - */ - child.royale_wrapper.dispatchEvent('sizeChanged'); + child.style.marginLeft = _gap + 'px'; + } } - return true; - } + return true; + } } - } } diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as index cc217c2..947a7de 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as @@ -153,10 +153,8 @@ package org.apache.royale.jewel.beads.layouts contentView.element.classList.add("layout", "vertical"); var children:Array = contentView.internalChildren(); - n = children.length; - var i:int; - var n:int; + var n:int = children.length; for (i = 0; i < n; i++) { var child:WrappedHTMLElement = children[i] as WrappedHTMLElement; diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as index f941993..ed602a2 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as @@ -21,14 +21,11 @@ package org.apache.royale.jewel.beads.layouts import org.apache.royale.core.LayoutBase; import org.apache.royale.core.IBeadLayout; - import org.apache.royale.core.IBeadModel; import org.apache.royale.core.IBorderPaddingMarginValuesImpl; import org.apache.royale.core.ILayoutChild; import org.apache.royale.core.ILayoutHost; import org.apache.royale.core.ILayoutView; - import org.apache.royale.core.ILayoutParent; import org.apache.royale.core.IParentIUIBase; - import org.apache.royale.core.IStrand; import org.apache.royale.core.IUIBase; import org.apache.royale.core.layout.EdgeData; import org.apache.royale.core.ValuesManager; @@ -36,10 +33,6 @@ package org.apache.royale.jewel.beads.layouts { import org.apache.royale.core.WrappedHTMLElement; } - import org.apache.royale.events.Event; - import org.apache.royale.events.IEventDispatcher; - import org.apache.royale.geom.Rectangle; - import org.apache.royale.utils.CSSUtils; /** * The VerticalLayoutWithPaddingAndGap class is a simple layout @@ -285,22 +278,17 @@ package org.apache.royale.jewel.beads.layouts } COMPILE::JS { - var children:Array; - var i:int; - var n:int; var contentView:IParentIUIBase = layoutView as IParentIUIBase; - contentView.element.style["vertical-align"] = "top"; - - children = contentView.internalChildren(); - n = children.length; + contentView.element.classList.add("layout", "vertical"); + + var children:Array = contentView.internalChildren(); + var i:int; + var n:int = children.length; for (i = 0; i < n; i++) { var child:WrappedHTMLElement = children[i]; - child.className += " vertical-layout-padding-gap"; - - - /*if(i == 0) + if(i == 0) { child.style.marginTop = _paddingTop + 'px'; } @@ -318,18 +306,7 @@ package org.apache.royale.jewel.beads.layouts child.style.marginBottom = '0px'; } child.style.marginLeft = _paddingLeft + 'px'; - child.royale_wrapper.setDisplayStyleForLayout('block'); - if (child.style.display === 'none') - { - child.royale_wrapper.setDisplayStyleForLayout('block'); - } - else - { - // block elements don't measure width correctly so set to inline for a second - child.style.display = 'inline-block'; - child.style.display = 'block'; - } - */ + child.royale_wrapper.dispatchEvent('sizeChanged'); } -- To stop receiving notification emails like this one, please contact carlosrovira@apache.org.