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 2019/12/12 23:47:27 UTC
[royale-asjs] 26/42: jewel-buttonbar: add proportional widths in
opposite to same widths
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
commit dc64f67e792bfa377f4da40981c1a3299efb7698
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Dec 3 12:53:15 2019 +0100
jewel-buttonbar: add proportional widths in opposite to same widths
---
.../src/main/royale/ButtonBarPlayGround.mxml | 7 +-
.../projects/Jewel/src/main/resources/defaults.css | 4 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../projects/Jewel/src/main/royale/JewelClasses.as | 1 -
.../royale/jewel/beads/layouts/ButtonBarLayout.as | 97 ++++++++++++++++------
.../Jewel/src/main/sass/components/_layout.sass | 4 +-
6 files changed, 81 insertions(+), 33 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
index b838ac3..2f149a1 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
@@ -76,7 +76,7 @@ limitations under the License.
<j:ButtonBar localId="bb3" change="bb2_label.text = bb3.selectedItem as String"
emphasis="primary">
<j:beads>
- <j:HorizontalLayout/>
+ <j:ButtonBarLayout proportionalWidths="true"/>
</j:beads>
<j:dataProvider>
<js:ArrayList source="[Home, Support, Operations, Service]" />
@@ -88,13 +88,16 @@ limitations under the License.
<j:ButtonBar localId="bb4" change="bb2_label.text = bb4.selectedItem as String"
emphasis="secondary" width="100%">
<j:beads>
- <j:HorizontalLayout gap="3"/>
+ <j:ButtonBarLayout localId="ppw" proportionalWidths="true" gap="3"/>
</j:beads>
<j:dataProvider>
<js:ArrayList source="[Home, Support, Operations, Service]" />
</j:dataProvider>
</j:ButtonBar>
+ <j:CheckBox change="ppw.proportionalWidths = !ppw.proportionalWidths" selected="true"
+ text="Proportional Widths (true) / Same Widths (false)"/>
+
<j:Label localId="bb2_label"/>
</j:Card>
</j:GridCell>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 9236006..90e0c5b 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -1070,10 +1070,10 @@ j|Label {
.layout.horizontal.gap-10x3px > * {
margin: 0px 0px 0px 30px;
}
-.layout.horizontal.samewidth > * {
+.layout.horizontal.sameWidths > * {
flex: 1 0;
}
-.layout.horizontal.nosamewidth > * {
+.layout.horizontal.proportinalWidths > * {
flex: 1 0 auto;
}
.layout.vertical {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 7d7dfc1..4b586d9 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -185,6 +185,7 @@
<component id="GridLayout" class="org.apache.royale.jewel.beads.layouts.GridLayout"/>
<component id="GridCellLayout" class="org.apache.royale.jewel.beads.layouts.GridCellLayout"/>
<component id="TableLayout" class="org.apache.royale.jewel.beads.layouts.TableLayout"/>
+ <component id="ButtonBarLayout" class="org.apache.royale.jewel.beads.layouts.ButtonBarLayout"/>
<component id="StringItemRenderer" class="org.apache.royale.jewel.itemRenderers.StringItemRenderer"/>
<component id="ListItemRenderer" class="org.apache.royale.jewel.itemRenderers.ListItemRenderer"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 4d48f3b..aa2f480 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -118,7 +118,6 @@ package
import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnList; DataGridColumnList;
import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnChangePropagator; DataGridColumnChangePropagator;
import org.apache.royale.jewel.beads.layouts.DataGridLayout; DataGridLayout;
- import org.apache.royale.jewel.beads.layouts.ButtonBarLayout; ButtonBarLayout;
import org.apache.royale.jewel.supportClasses.util.positionInsideBoundingClientRect; positionInsideBoundingClientRect;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ButtonBarLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ButtonBarLayout.as
index f91fbbf..68b5e61 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ButtonBarLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ButtonBarLayout.as
@@ -22,8 +22,8 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.ILayoutView;
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IStyleableObject;
- import org.apache.royale.html.beads.models.ButtonBarModel;
import org.apache.royale.events.Event;
+ import org.apache.royale.html.beads.models.ButtonBarModel;
/**
* The ButtonBarLayout class bead sizes and positions the button
@@ -56,7 +56,7 @@ package org.apache.royale.jewel.beads.layouts
/**
* @royalesuppresspublicvarwarning
*/
- public static const LAYOUT_TYPE_NAMES:String = "layout horizontal samewidth";
+ public static const LAYOUT_TYPE_NAMES:String = "layout horizontal";
/**
* Add class selectors when the component is addedToParent
@@ -66,7 +66,7 @@ package org.apache.royale.jewel.beads.layouts
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.4
+ * @productversion Royale 0.9.7
*/
override public function beadsAddedHandler(event:Event = null):void
{
@@ -74,9 +74,54 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if (hostClassList.contains("samewidth"))
- hostClassList.remove("samewidth");
- hostClassList.add("samewidth");
+ if(proportionalWidths)
+ {
+ hostClassList.add("proportinalWidths");
+ } else
+ {
+ hostClassList.add("sameWidths");
+ }
+ }
+ }
+
+ private var _proportionalWidths:Boolean;
+ /**
+ * Switch between "proportionalWidth" and "sameWidths".
+ * Default is false (sameWidths) and all buttons are has the same width.
+ * True to make all buttons fill all size available proportionally.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get proportionalWidths():Boolean
+ {
+ return _proportionalWidths;
+ }
+
+ public function set proportionalWidths(value:Boolean):void
+ {
+ if (_proportionalWidths != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ {
+ if(value)
+ {
+ if (hostClassList.contains("sameWidths"))
+ hostClassList.remove("sameWidths");
+ hostClassList.add("proportinalWidths");
+ } else
+ {
+ if (hostClassList.contains("proportinalWidths"))
+ hostClassList.remove("proportinalWidths");
+ hostClassList.add("sameWidths");
+ }
+ }
+ }
+ _proportionalWidths = value;
}
}
@@ -126,27 +171,27 @@ package org.apache.royale.jewel.beads.layouts
if (ilc == null || !ilc.visible) continue;
if (!(ilc is IStyleableObject)) continue;
- COMPILE::SWF {
- if (buttonWidths) {
- var widthValue:* = buttonWidths[i];
+ // COMPILE::SWF {
+ // if (buttonWidths) {
+ // var widthValue:* = buttonWidths[i];
- if (_widthType == ButtonBarModel.PIXEL_WIDTHS) {
- if (widthValue != null) ilc.width = Number(widthValue);
- IStyleableObject(ilc).style.flexGrow = 0;
- }
- else if (_widthType == ButtonBarModel.PROPORTIONAL_WIDTHS) {
- if (widthValue != null) {
- IStyleableObject(ilc).style.flexGrow = Number(widthValue);
- }
- }
- else if (_widthType == ButtonBarModel.PERCENT_WIDTHS) {
- if (widthValue != null) ilc.percentWidth = Number(widthValue);
- IStyleableObject(ilc).style.flexGrow = 0;
- }
- } else if (!_widthType == ButtonBarModel.NATURAL_WIDTHS) {
- IStyleableObject(ilc).style.flexGrow = 1;
- }
- }
+ // if (_widthType == ButtonBarModel.PIXEL_WIDTHS) {
+ // if (widthValue != null) ilc.width = Number(widthValue);
+ // IStyleableObject(ilc).style.flexGrow = 0;
+ // }
+ // else if (_widthType == ButtonBarModel.PROPORTIONAL_WIDTHS) {
+ // if (widthValue != null) {
+ // IStyleableObject(ilc).style.flexGrow = Number(widthValue);
+ // }
+ // }
+ // else if (_widthType == ButtonBarModel.PERCENT_WIDTHS) {
+ // if (widthValue != null) ilc.percentWidth = Number(widthValue);
+ // IStyleableObject(ilc).style.flexGrow = 0;
+ // }
+ // } else if (!_widthType == ButtonBarModel.NATURAL_WIDTHS) {
+ // IStyleableObject(ilc).style.flexGrow = 1;
+ // }
+ // }
// COMPILE::JS {
// // otherwise let the flexbox layout handle matters on its own.
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 381f003..5d5bfcd 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -81,10 +81,10 @@ $gap-size: 10px !default
> *
margin: 0px 0px 0px ($gap + $i * $gap-step)
- &.samewidth
+ &.sameWidths
> *
flex: 1 0
- &.nosamewidth
+ &.proportinalWidths
> *
flex: 1 0 auto