You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/02/24 22:12:58 UTC
[royale-asjs] branch develop updated: tour-de-jewel: fix some
examples broken in a recent refactor
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 3674145 tour-de-jewel: fix some examples broken in a recent refactor
3674145 is described below
commit 367414525031c2c89e60b877f3e49d3b10a6f88d
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Feb 24 23:12:44 2020 +0100
tour-de-jewel: fix some examples broken in a recent refactor
---
.../src/main/royale/GridPlayGround.mxml | 157 ++++++++++-----------
1 file changed, 72 insertions(+), 85 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/GridPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/GridPlayGround.mxml
index 2f9a6dd..11c224d 100644
--- a/examples/royale/TourDeJewel/src/main/royale/GridPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/GridPlayGround.mxml
@@ -34,14 +34,14 @@ limitations under the License.
<js:ContainerDataBinding/>
</c:beads>
- <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:Grid gap="true">
<j:beads>
<j:Paddings paddingTop="0" paddingLeft="50" paddingRight="50" paddingBottom="50"/>
</j:beads>
<c:ExampleHeader title="Jewel Grid">
<c:description>
- <![CDATA[<strong>Jewel Grid</strong> examples.]]>
+ <![CDATA[<b>Jewel Grid</b> examples. Notice that unlike other pages, this one doesn't use <b>itemsVerticalAlign</b> set to "itemsSameHeight" in order to show how different alignemnts works through this page.]]>
</c:description>
</c:ExampleHeader>
@@ -49,18 +49,14 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
<html:Div className="box" text="1"/>
</j:GridCell>
- </j:Grid>
-
- <j:Grid gap="{useGap}">
+
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="2">
<html:Div className="box" text="2"/>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="2">
<html:Div className="box" text="2"/>
</j:GridCell>
- </j:Grid>
-
- <j:Grid gap="{useGap}">
+
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
<html:Div className="box" text="3"/>
</j:GridCell>
@@ -70,9 +66,7 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
<html:Div className="box" text="3"/>
</j:GridCell>
- </j:Grid>
-
- <j:Grid gap="{useGap}">
+
<j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<html:Div className="box" text="4"/>
</j:GridCell>
@@ -85,8 +79,7 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<html:Div className="box" text="4"/>
</j:GridCell>
- </j:Grid>
- <j:Grid gap="{useGap}">
+
<j:GridCell desktopNumerator="1" desktopDenominator="5" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
<html:Div className="box" text="5"/>
</j:GridCell>
@@ -102,9 +95,7 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="5" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
<html:Div className="box" text="5"/>
</j:GridCell>
- </j:Grid>
-
- <j:Grid gap="{useGap}">
+
<j:GridCell desktopNumerator="1" desktopDenominator="6" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
<html:Div className="box" text="6"/>
</j:GridCell>
@@ -124,9 +115,6 @@ limitations under the License.
<html:Div className="box" text="6"/>
</j:GridCell>
- </j:Grid>
-
- <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
<html:Div className="box" text="7"/>
</j:GridCell>
@@ -149,9 +137,6 @@ limitations under the License.
<html:Div className="box" text="7"/>
</j:GridCell>
- </j:Grid>
-
- <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
<html:Div className="box" text="8"/>
</j:GridCell>
@@ -176,9 +161,7 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
<html:Div className="box" text="8"/>
</j:GridCell>
- </j:Grid>
- <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
<html:Div className="box" text="9"/>
</j:GridCell>
@@ -206,9 +189,7 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
<html:Div className="box" text="9"/>
</j:GridCell>
- </j:Grid>
- <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
<html:Div className="box" text="10"/>
</j:GridCell>
@@ -239,9 +220,7 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
<html:Div className="box" text="10"/>
</j:GridCell>
- </j:Grid>
- <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
<html:Div className="box" text="11"/>
</j:GridCell>
@@ -275,9 +254,7 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
<html:Div className="box" text="11"/>
</j:GridCell>
- </j:Grid>
- <j:Grid id="g" gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
<html:Div className="box" text="12"/>
</j:GridCell>
@@ -314,20 +291,20 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
<html:Div className="box" text="12"/>
</j:GridCell>
- </j:Grid>
-
- <html:H3 text="Grids Responsive Visibility"/>
+
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <html:H3 text="Grids Responsive Visibility"/>
+ </j:GridCell>
- <j:Grid gap="true">
+
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="2">
<html:Div className="box" text="2a"/>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="2" wideScreenVisible="false">
<html:Div className="box" text="2b - Hidden in WideScreen"/>
</j:GridCell>
- </j:Grid>
- <j:Grid gap="true">
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3" phoneVisible="false">
<html:Div className="box" text="3a - Hidden in Phones"/>
</j:GridCell>
@@ -337,9 +314,7 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
<html:Div className="box" text="3c"/>
</j:GridCell>
- </j:Grid>
- <j:Grid gap="true">
<j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<html:Div className="box" text="4a"/>
</j:GridCell>
@@ -352,64 +327,76 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<html:Div className="box" text="4d"/>
</j:GridCell>
- </j:Grid>
-
- <html:H3 text="Grids Horizontal Align"/>
-
- <html:H4 text=" itemsTop"/>
+
- <j:Grid gap="true" itemsVerticalAlign="itemsTop">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 100px" height="100"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 200px" height="200"/>
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <html:H3 text="Grids Horizontal Align"/>
</j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 300px" height="300"/>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <html:H4 text="itemsTop"/>
</j:GridCell>
- </j:Grid>
- <html:H4 text=" itemsBottom"/>
- <j:Grid gap="true" itemsVerticalAlign="itemsBottom">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 100px" height="100"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 200px" height="200"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 300px" height="300"/>
+ <j:Grid gap="true" itemsVerticalAlign="itemsTop">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 100px" height="100"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 200px" height="200"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 300px" height="300"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <html:H4 text="itemsBottom"/>
</j:GridCell>
- </j:Grid>
- <html:H4 text=" itemsCentered"/>
+ <j:Grid gap="true" itemsVerticalAlign="itemsBottom">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 100px" height="100"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 200px" height="200"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 300px" height="300"/>
+ </j:GridCell>
+ </j:Grid>
- <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 100px" height="100"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 200px" height="200"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 300px" height="300"/>
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <html:H4 text="itemsCentered"/>
</j:GridCell>
- </j:Grid>
- <html:H4 text=" itemsSameHeight"/>
+ <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 100px" height="100"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 200px" height="200"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 300px" height="300"/>
+ </j:GridCell>
+ </j:Grid>
- <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight" height="200">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="Same Height"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="Same Height"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="Same Height"/>
- </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <html:H4 text=" itemsSameHeight"/>
+ </j:GridCell>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight" height="200">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="Same Height"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="Same Height"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="Same Height"/>
+ </j:GridCell>
+ </j:Grid>
</j:Grid>
</j:Grid>