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/03/13 15:45:57 UTC
[royale-asjs] branch develop updated: jewel-layouts: add
variableRowHeight to Horizontal and Vertical Layouts. Defaults to false.
List defaults to true
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 137b7f7 jewel-layouts: add variableRowHeight to Horizontal and Vertical Layouts. Defaults to false. List defaults to true
137b7f7 is described below
commit 137b7f7eda60fa9a15cdc6d1d26d1062621f6dd5
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Mar 13 16:45:48 2020 +0100
jewel-layouts: add variableRowHeight to Horizontal and Vertical Layouts. Defaults to false. List defaults to true
---
.../projects/Jewel/src/main/resources/defaults.css | 6 +++
.../main/royale/org/apache/royale/jewel/VGroup.as | 28 ++++++++++-
.../royale/jewel/beads/layouts/HorizontalLayout.as | 48 +++++++++++++++++-
.../royale/jewel/beads/layouts/VerticalLayout.as | 57 +++++++++++++++++++++-
.../Jewel/src/main/sass/components/_layout.sass | 8 +++
.../JewelTheme/src/main/resources/defaults.css | 4 ++
.../src/main/sass/components-primary/_list.sass | 4 +-
7 files changed, 150 insertions(+), 5 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index aa75a97..089e0bb 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -1026,6 +1026,9 @@ j|Label {
.layout.horizontal > * {
flex: 0 1 auto;
}
+.layout.horizontal.variableRowHeight > * {
+ flex: 0 0 auto;
+}
.layout.horizontal.flow {
flex-wrap: wrap;
max-width: 100%;
@@ -1125,6 +1128,9 @@ j|Label {
.layout.vertical > * {
flex: 0 1 auto;
}
+.layout.vertical.variableRowHeight > * {
+ flex: 0 0 auto;
+}
.layout.vertical.flow {
flex-wrap: wrap;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
index 4b3dcd7..1e97a83 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
@@ -74,7 +74,6 @@ package org.apache.royale.jewel
{
return layout.gap;
}
-
public function set gap(value:Number):void
{
typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "x" + VerticalLayout.GAP_STEP + "px");
@@ -89,5 +88,32 @@ package org.apache.royale.jewel
layout.gap = value;
}
+
+ /**
+ *
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get variableRowHeight():Boolean
+ {
+ return layout.variableRowHeight;
+ }
+ public function set variableRowHeight(value:Boolean):void
+ {
+ typeNames = StringUtil.removeWord(typeNames, " variableRowHeight");
+ if(value)
+ typeNames += " variableRowHeight";
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.variableRowHeight = value;
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
index 9e03829..8ba50f6 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
@@ -77,10 +77,11 @@ package org.apache.royale.jewel.beads.layouts
{
applyStyleToLayout(hostComponent, "gap");
setGap(_gap);
+ applyStyleToLayout(hostComponent, "variableRowHeight");
+ setVariableRowHeight(_variableRowHeight);
}
}
- private var gapInitialized:Boolean;
// private var _gap:Boolean;
/**
* Assigns variable gap to grid from 1 to 20
@@ -137,6 +138,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
+ COMPILE::JS
public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
{
var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
@@ -156,6 +158,10 @@ package org.apache.royale.jewel.beads.layouts
if(!itemsHorizontalAlignInitialized)
itemsHorizontalAlign = cssValue;
break;
+ case "variableRowHeight":
+ if(!variableRowHeightInitialized)
+ variableRowHeight = Boolean(cssValue);
+ break;
default:
break;
}
@@ -167,6 +173,7 @@ package org.apache.royale.jewel.beads.layouts
// gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
public static const GAP_STEP:Number = 3;
+ private var gapInitialized:Boolean;
protected var _gap:Number = 0;
/**
* Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
@@ -213,6 +220,45 @@ package org.apache.royale.jewel.beads.layouts
} else
throw new Error("Gap needs to be between 0 and " + GAPS*GAP_STEP);
}
+
+ private var variableRowHeightInitialized:Boolean;
+ private var _variableRowHeight:Boolean = false;
+ /**
+ * Specifies whether layout elements are allocated their preferred height.
+ * Setting this property to false specifies fixed height rows.
+ *
+ * If false, the actual height of each layout element is the value of rowHeight.
+ * The default value is true.
+ *
+ * Note: From Flex but we should see what to do in Royale -> Setting this property to false causes the layout to ignore the layout elements' percentHeight property.
+ */
+ public function get variableRowHeight():Boolean
+ {
+ return _variableRowHeight;
+ }
+ public function set variableRowHeight(value:Boolean):void
+ {
+ if(_variableRowHeight != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setVariableRowHeight(value);
+
+ _variableRowHeight = value;
+ variableRowHeightInitialized = true;
+ }
+ }
+ }
+
+ COMPILE::JS
+ private function setVariableRowHeight(value:Boolean):void
+ {
+ if (value)
+ hostClassList.add("variableRowHeight");
+ else
+ hostClassList.remove("variableRowHeight");
+ }
/**
* Layout children horizontally
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 7ae0111..97fe5b1 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
@@ -77,10 +77,11 @@ package org.apache.royale.jewel.beads.layouts
{
applyStyleToLayout(hostComponent, "gap");
setGap(_gap);
+ applyStyleToLayout(hostComponent, "variableRowHeight");
+ setVariableRowHeight(_variableRowHeight);
}
}
- private var gapInitialized:Boolean;
// private var _gap:Boolean;
/**
* Assigns variable gap to grid from 1 to 20
@@ -137,6 +138,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
+ COMPILE::JS
public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
{
var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
@@ -148,18 +150,30 @@ package org.apache.royale.jewel.beads.layouts
if(!gapInitialized)
gap = Number(cssValue);
break;
+ case "itemsVerticalAlign":
+ if(!itemsVerticalAlignInitialized)
+ itemsVerticalAlign = cssValue;
+ break;
+ case "itemsHorizontalAlign":
+ if(!itemsHorizontalAlignInitialized)
+ itemsHorizontalAlign = cssValue;
+ break;
+ case "variableRowHeight":
+ if(!variableRowHeightInitialized)
+ variableRowHeight = Boolean(cssValue);
+ break;
default:
break;
}
}
}
-
// number of gap styles available in CSS @see $gaps variable in _layout.sass
public static const GAPS:Number = 10;
// gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
public static const GAP_STEP:Number = 3;
+ private var gapInitialized:Boolean;
protected var _gap:Number = 0;
/**
* Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
@@ -207,6 +221,45 @@ package org.apache.royale.jewel.beads.layouts
throw new Error("Gap needs to be between 0 and " + GAPS*GAP_STEP);
}
+ private var variableRowHeightInitialized:Boolean;
+ private var _variableRowHeight:Boolean = false;
+ /**
+ * Specifies whether layout elements are allocated their preferred height.
+ * Setting this property to false specifies fixed height rows.
+ *
+ * If false, the actual height of each layout element is the value of rowHeight.
+ * The default value is true.
+ *
+ * Note: From Flex but we should see what to do in Royale -> Setting this property to false causes the layout to ignore the layout elements' percentHeight property.
+ */
+ public function get variableRowHeight():Boolean
+ {
+ return _variableRowHeight;
+ }
+ public function set variableRowHeight(value:Boolean):void
+ {
+ if(_variableRowHeight != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setVariableRowHeight(value);
+
+ _variableRowHeight = value;
+ variableRowHeightInitialized = true;
+ }
+ }
+ }
+
+ COMPILE::JS
+ private function setVariableRowHeight(value:Boolean):void
+ {
+ if (value)
+ hostClassList.add("variableRowHeight");
+ else
+ hostClassList.remove("variableRowHeight");
+ }
+
/**
* Layout children vertically
*
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 549043c..1b2738d 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -54,6 +54,10 @@ $gap-size: 10px !default
> *
flex: 0 1 auto
+ &.variableRowHeight
+ > *
+ flex: 0 0 auto
+
&.flow
flex-wrap: wrap
max-width: 100%
@@ -104,6 +108,10 @@ $gap-size: 10px !default
> *
flex: 0 1 auto
+ &.variableRowHeight
+ > *
+ flex: 0 0 auto
+
&.flow
flex-wrap: wrap
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 324d5af..b2236de 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -840,6 +840,10 @@ j|FormItem {
background: #cccccc !important;
}
+j|List {
+ variableRowHeight: true;
+}
+
.jewel.navigation {
background-color: #ffffff;
}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
index 2f7dd18..c26e473 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
@@ -50,7 +50,9 @@ $list-border-radius: 3px
.jewel.item
&.selected, &.selectable:active
background: darken($disabled-color, 15%) !important
-
+
+j|List
+ variableRowHeight: true
// &:focus
// @if $flat