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 9a5363e8326b336d4103e3d671f4a246bdeb3776 Author: Carlos Rovira <[email protected]> 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. </fx:Script> <js:beads> - <js:VerticalLayoutWithPaddingAndGap gap="10"/> + <j:VerticalLayoutWithPaddingAndGap gap="10"/> </js:beads> <j:Label text="Basic"/> @@ -41,31 +41,22 @@ limitations under the License. <j:Label text="Jewel Button"/> <j:Button primary="true"/> - <j:Label text="Jewel TextButton"/> - - <j:TextButton text="DEFAULT"/> - + <j:TextButton text="Default"/> <j:TextButton text="Button With More Text"/> - - <j:TextButton text="PRIMARY" primary="true"/> - - <j:TextButton text="SECONDARY" secondary="true"/> - - <j:TextButton text="EMPHASIZED" emphasized="true"/> - + <j:TextButton text="Primary" primary="true"/> + <j:TextButton text="Secondary" secondary="true"/> + <j:TextButton text="Emphasized" emphasized="true"/> <j:TextButton text="Disabled" primary="true"> <j:beads> <j:Disabled/> </j:beads> </j:TextButton> - <j:Label text="Jewel Button Sizing (respect min values)"/> <j:Slider id="slider" width="250" value="100" minimum="0" maximum="500" valueChange="onValueChange(event)"/> <j:Slider id="slider_v" width="250" value="40" minimum="0" maximum="300" valueChange="onValueChange(event)"/> - <j:TextButton id="button" text="Button" width="100" height="40" primary="true"/> </js:Group> 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 @@ <name>defaults.css</name> <path>../src/main/resources/defaults.css</path> </include-file> - <!-- <include-file> - <name>jewel.css</name> + <include-file> + <name>jewel-framework.css</name> <path>../src/main/resources/jewel-framework.css</path> - </include-file> --> + </include-file> </includeFiles> <includeLookupOnly>true</includeLookupOnly> <!--<allowSubclassOverrides>true</allowSubclassOverrides>--> 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 @@ <component id="HorizontalLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalLayout"/> <component id="VerticalLayout" class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/> + <component id="HorizontalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap"/> <component id="VerticalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap"/> </componentPackage> 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 [email protected].
