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 2021/01/31 17:31:04 UTC
[royale-asjs] branch develop updated: jewel-layouts: implement
"itemsReverse" to invert order of items,
in vertical or horizontal align. Gap is not considered in this
implementation and will require more improvements. This is for first
question in #1070
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 1c53cd8 jewel-layouts: implement "itemsReverse" to invert order of items, in vertical or horizontal align. Gap is not considered in this implementation and will require more improvements. This is for first question in #1070
1c53cd8 is described below
commit 1c53cd884470578d788165360e604b2981fe1cf6
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Jan 31 18:30:50 2021 +0100
jewel-layouts: implement "itemsReverse" to invert order of items, in vertical or horizontal align. Gap is not considered in this implementation and will require more improvements. This is for first question in #1070
---
.../projects/Jewel/src/main/resources/defaults.css | 6 ++++
.../royale/jewel/beads/layouts/StyledLayoutBase.as | 37 ++++++++++++++++++-
.../container/AlignmentItemsContainer.as | 42 ++++++++++++++++++----
.../supportClasses/group/AlignmentItemsGroup.as | 30 ++++++++++++++++
.../Jewel/src/main/sass/components/_layout.sass | 6 ++++
5 files changed, 114 insertions(+), 7 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index e8da502..0ee8dcb 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3192,6 +3192,9 @@ j|Label {
.layout.horizontal.itemsRight, .layout.grid.itemsRight {
justify-content: flex-end;
}
+.layout.horizontal.itemsReverse, .layout.grid.itemsReverse {
+ flex-direction: row-reverse;
+}
.layout.vertical.itemsCentered {
justify-content: center;
}
@@ -3210,6 +3213,9 @@ j|Label {
.layout.vertical.itemsRight {
align-items: flex-end;
}
+.layout.vertical.itemsReverse {
+ flex-direction: column-reverse;
+}
.layout.table table {
display: table;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
index a14b340..9afc37f 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
@@ -97,6 +97,9 @@ package org.apache.royale.jewel.beads.layouts
{
applyStyleToLayout(hostComponent, "itemsExpand");
setHostComponentClass("itemsExpand", _itemsExpand ? "itemsExpand":"");
+
+ applyStyleToLayout(hostComponent, "itemsReverse");
+ setHostComponentClass("itemsReverse", _itemsReverse ? "itemsReverse":"");
applyStyleToLayout(hostComponent, "itemsHorizontalAlign");
setHostComponentClass(_itemsHorizontalAlign, _itemsHorizontalAlign);
@@ -128,6 +131,10 @@ package org.apache.royale.jewel.beads.layouts
if(!itemsExpandInitialized)
itemsExpand = "true" == cssValue;
break;
+ case "itemsReverse":
+ if(!itemsReverseInitialized)
+ itemsReverse = "true" == cssValue;
+ break;
case "itemsHorizontalAlign":
if (!itemsHorizontalAlign)
itemsHorizontalAlign = String(cssValue);
@@ -232,7 +239,6 @@ package org.apache.royale.jewel.beads.layouts
{
if (_itemsExpand != value)
{
-
COMPILE::JS
{
setHostComponentClass("itemsExpand", value ? "itemsExpand" : "");
@@ -241,6 +247,35 @@ package org.apache.royale.jewel.beads.layouts
}
}
}
+
+ private var itemsReverseInitialized:Boolean;
+ private var _itemsReverse:Boolean = false;
+ /**
+ * A boolean flag to activate "itemsReverse" effect selector.
+ * Make items to invert its order
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ public function get itemsReverse():Boolean
+ {
+ return _itemsReverse;
+ }
+
+ public function set itemsReverse(value:Boolean):void
+ {
+ if (_itemsReverse != value)
+ {
+ COMPILE::JS
+ {
+ setHostComponentClass("itemsReverse", value ? "itemsReverse" : "");
+ _itemsReverse = value;
+ itemsReverseInitialized = true;
+ }
+ }
+ }
COMPILE::JS
protected function setHostComponentClass(oldValue:String, newValue:String):void {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/container/AlignmentItemsContainer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/container/AlignmentItemsContainer.as
index 85c56f1..64b8476 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/container/AlignmentItemsContainer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/container/AlignmentItemsContainer.as
@@ -81,8 +81,8 @@ package org.apache.royale.jewel.supportClasses.container
COMPILE::JS
{
- if (parent)
- setClassName(computeFinalClassNames());
+ if (parent)
+ setClassName(computeFinalClassNames());
}
}
@@ -114,8 +114,8 @@ package org.apache.royale.jewel.supportClasses.container
COMPILE::JS
{
- if (parent)
- setClassName(computeFinalClassNames());
+ if (parent)
+ setClassName(computeFinalClassNames());
}
}
@@ -144,8 +144,38 @@ package org.apache.royale.jewel.supportClasses.container
COMPILE::JS
{
- if (parent)
- setClassName(computeFinalClassNames());
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+ }
+
+ /**
+ * A boolean flag to activate "itemsReverse" effect selector.
+ * Make items to invert its order.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ public function get itemsReverse():Boolean
+ {
+ return _layout.itemsReverse;
+ }
+
+ public function set itemsReverse(value:Boolean):void
+ {
+ typeNames = StringUtil.removeWord(typeNames, " itemsReverse");
+ _layout.itemsReverse = value;
+ if(_layout.itemsReverse)
+ {
+ typeNames += " itemsReverse";
+ }
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/group/AlignmentItemsGroup.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/group/AlignmentItemsGroup.as
index aeb2415..2d103da 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/group/AlignmentItemsGroup.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/group/AlignmentItemsGroup.as
@@ -148,5 +148,35 @@ package org.apache.royale.jewel.supportClasses.group
setClassName(computeFinalClassNames());
}
}
+
+ /**
+ * A boolean flag to activate "itemsReverse" effect selector.
+ * Make items to invert its order.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ public function get itemsReverse():Boolean
+ {
+ return _layout.itemsReverse;
+ }
+
+ public function set itemsReverse(value:Boolean):void
+ {
+ typeNames = StringUtil.removeWord(typeNames, " itemsReverse");
+ _layout.itemsReverse = value;
+ if(_layout.itemsReverse)
+ {
+ typeNames += " itemsReverse";
+ }
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 4ef7be2..221fb41 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -219,6 +219,9 @@ $gap-size: 10px !default
&.itemsRight
justify-content: flex-end
+ &.itemsReverse
+ flex-direction: row-reverse
+
&.vertical
// Vertical Items Align
&.itemsCentered
@@ -236,6 +239,9 @@ $gap-size: 10px !default
&.itemsRight
align-items: flex-end
+ &.itemsReverse
+ flex-direction: column-reverse
+
&.table
table
display: table