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 2018/07/20 16:48:53 UTC
[royale-asjs] branch develop updated: Grid and GridLayout
itemsAlign to make all items in a Grid align vertical to top, center,
bottom and make all equal height
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 e42f747 Grid and GridLayout itemsAlign to make all items in a Grid align vertical to top, center, bottom and make all equal height
e42f747 is described below
commit e42f747179f06cfc55c09349a7e8066cb8fdf317
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Jul 20 18:48:49 2018 +0200
Grid and GridLayout itemsAlign to make all items in a Grid align vertical to top, center, bottom and make all equal height
---
.../src/main/royale/ButtonPlayGround.mxml | 2 +-
.../src/main/royale/GridPlayGround.mxml | 83 ++++++++++++++++++++++
.../src/main/royale/TextInputPlayGround.mxml | 2 +-
.../projects/Jewel/src/main/resources/defaults.css | 13 +++-
.../main/royale/org/apache/royale/jewel/Grid.as | 32 +++++++++
.../royale/jewel/beads/layouts/GridCellLayout.as | 30 ++++----
.../royale/jewel/beads/layouts/GridLayout.as | 40 +++++++++++
.../Jewel/src/main/sass/components/_layout.sass | 18 +++--
8 files changed, 197 insertions(+), 23 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 4b098b4..afcb0ca 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -34,7 +34,7 @@ limitations under the License.
<js:ContainerDataBinding/>
</j:beads>
- <j:Grid gap="true">
+ <j:Grid gap="true" itemsAlign="itemsSameHeight">
<j:GridCell desktopNumerator="1" desktopDenominator="3"
tabletNumerator="1" tabletDenominator="1"
phoneNumerator="1" phoneDenominator="1">
diff --git a/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
index 7075521..b38a8b5 100644
--- a/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
@@ -523,5 +523,88 @@ limitations under the License.
<html:Div className="box" text="4d"/>
</j:GridCell>
</j:Grid>
+
+ <html:H3 text="Grids Horizontal Align"/>
+
+ <html:H4 text=" itemsTop"/>
+
+ <j:Grid className="wrapper" gap="true" itemsAlign="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>
+
+ <html:H4 text=" itemsBottom"/>
+
+ <j:Grid className="wrapper" gap="true" itemsAlign="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>
+
+ <html:H4 text=" itemsCentered"/>
+
+ <j:Grid className="wrapper" gap="true" itemsAlign="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>
+
+ <html:H4 text=" itemsSameHeight"/>
+
+ <j:Grid className="wrapper" gap="true" itemsAlign="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:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index f87fac6..602666e 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -26,7 +26,7 @@ limitations under the License.
<js:ContainerDataBinding/>
</j:beads>
- <j:Grid gap="true">
+ <j:Grid gap="true" itemsAlign="itemsSameHeight">
<j:GridCell desktopNumerator="1" desktopDenominator="3"
tabletNumerator="1" tabletDenominator="1"
phoneNumerator="1" phoneDenominator="1">
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 00060b5..f67da75 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -572,7 +572,6 @@ j|Label {
/* Grid */
.layout.grid {
flex-flow: row wrap;
- align-items: stretch;
width: 100%;
height: 100%;
}
@@ -2472,6 +2471,18 @@ j|Label {
width: calc(100% - 10px);
}
}
+.layout.grid.itemsSameHeight > * > * {
+ min-height: 100%;
+}
+.layout.grid.itemsCentered {
+ align-items: center;
+}
+.layout.grid.itemsTop {
+ align-items: flex-start;
+}
+.layout.grid.itemsBottom {
+ align-items: flex-end;
+}
@media (max-width: 767px) {
.visible-phone {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
index bb9199d..dfa50a1 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
@@ -81,6 +81,38 @@ package org.apache.royale.jewel
layout.gap = value;
}
+
+ /**
+ * Distribute all items horizontaly
+ * Possible values are:
+ * - itemsSameHeight
+ * - itemsCentered
+ * - itemsTop
+ * - itemsBottom
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get itemsAlign():String
+ {
+ return layout.itemsAlign;
+ }
+
+ public function set itemsAlign(value:String):void
+ {
+ typeNames = StringUtil.removeWord(typeNames, " " + layout.itemsAlign);
+ layout.itemsAlign = value;
+ typeNames += " " + layout.itemsAlign;
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+ }
+
// public function get gap():Number
// {
// return layout.gap;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as
index c389748..6948e46 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as
@@ -115,8 +115,8 @@ package org.apache.royale.jewel.beads.layouts
{
if(hostComponent)
setFractionForScreen(DESKTOP, value, _desktopDenominator);
- _desktopNumerator = value;
}
+ _desktopNumerator = value;
}
}
@@ -144,8 +144,8 @@ package org.apache.royale.jewel.beads.layouts
{
if(hostComponent)
setFractionForScreen(DESKTOP, _desktopNumerator, value);
- _desktopDenominator = value;
}
+ _desktopDenominator = value;
}
}
@@ -173,8 +173,8 @@ package org.apache.royale.jewel.beads.layouts
{
if(hostComponent)
setFractionForScreen(TABLET, value, _tabletDenominator);
- _tabletNumerator = value;
}
+ _tabletNumerator = value;
}
}
@@ -202,8 +202,8 @@ package org.apache.royale.jewel.beads.layouts
{
if(hostComponent)
setFractionForScreen(TABLET, _tabletNumerator, value);
- _tabletDenominator = value;
}
+ _tabletDenominator = value;
}
}
@@ -231,8 +231,8 @@ package org.apache.royale.jewel.beads.layouts
{
if(hostComponent)
setFractionForScreen(PHONE, value, _phoneDenominator);
- _phoneNumerator = value;
}
+ _phoneNumerator = value;
}
}
@@ -260,8 +260,8 @@ package org.apache.royale.jewel.beads.layouts
{
if(hostComponent)
setFractionForScreen(PHONE, _phoneNumerator, value);
- _phoneDenominator = value;
}
+ _phoneDenominator = value;
}
}
@@ -300,10 +300,10 @@ package org.apache.royale.jewel.beads.layouts
{
if (_phoneVisible != value)
{
+ _phoneVisible = value;
+
COMPILE::JS
{
- _phoneVisible = value;
-
if(hostComponent)
{
if(_phoneVisible)
@@ -341,10 +341,10 @@ package org.apache.royale.jewel.beads.layouts
{
if (_tabletVisible != value)
{
+ _tabletVisible = value;
+
COMPILE::JS
{
- _tabletVisible = value;
-
if(hostComponent)
{
if(_tabletVisible)
@@ -382,10 +382,10 @@ package org.apache.royale.jewel.beads.layouts
{
if (_desktopVisible != value)
{
- COMPILE::JS
+ _desktopVisible = value;
+
+ COMPILE::JS
{
- _desktopVisible = value;
-
if(hostComponent)
{
if(_desktopVisible)
@@ -423,10 +423,10 @@ package org.apache.royale.jewel.beads.layouts
{
if (_wideScreenVisible != value)
{
+ _wideScreenVisible = value;
+
COMPILE::JS
{
- _wideScreenVisible = value;
-
if(hostComponent)
{
if(_wideScreenVisible)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
index 6f323f8..64580e5 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
@@ -130,6 +130,46 @@ package org.apache.royale.jewel.beads.layouts
{
hostClassList.toggle("gap", value);
}
+
+ private var _itemsAlign:String;
+ /**
+ * Distribute all items horizontaly
+ * Possible values are:
+ * - itemsSameHeight
+ * - itemsCentered
+ * - itemsTop
+ * - itemsBottom
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get itemsAlign():String
+ {
+ return _itemsAlign;
+ }
+
+ public function set itemsAlign(value:String):void
+ {
+ if (_itemsAlign != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ {
+ if (hostClassList.contains(_itemsAlign))
+ hostClassList.remove(_itemsAlign);
+ }
+ _itemsAlign = value;
+ COMPILE::JS
+ {
+ hostClassList.add(_itemsAlign);
+ }
+ }
+ }
+ }
+
// protected var _gap:Number = 0;
// /**
// * Assigns variable gap to grid from 1 to 20
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 28ead6b..a5abcce 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -113,13 +113,8 @@ $gap-size: 10px !default
.layout.grid
flex-flow: row wrap
- align-items: stretch
width: 100%
height: 100%
- // align-content: stretch
-
- // &.itemsFullHeight
- // align-items: stretch
> *
flex: 0 0 auto // flex-grow, flex-shrink and flex-basis
@@ -143,6 +138,19 @@ $gap-size: 10px !default
.#{$size}-col-#{$j}-#{$i}
width: calc(#{percentage($j / $i)} - #{$gap-size})
+ &.itemsSameHeight
+ //align-items: stretch --> this doen't seems to work as expected
+
+ > *
+ > *
+ min-height: 100%
+ &.itemsCentered
+ align-items: center
+ &.itemsTop
+ align-items: flex-start
+ &.itemsBottom
+ align-items: flex-end
+
@each $size in $size-names
@if index($size-names, $size) == 1
@media (max-width: nth(nth($sizes, 2), 2) - 1)