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:24 UTC
[royale-asjs] 23/42: jewel-buttonbar: update layout to have all
buttons same width as default
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 a327415533227f19bf81d7744dbe25d59f58a2f2
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Dec 2 19:58:50 2019 +0100
jewel-buttonbar: update layout to have all buttons same width as default
---
.../src/main/royale/ButtonBarPlayGround.mxml | 6 +-
.../projects/Jewel/src/main/resources/defaults.css | 3 +
.../royale/jewel/beads/layouts/ButtonBarLayout.as | 104 +++++++++++++--------
.../Jewel/src/main/sass/components/_buttonbar.sass | 1 +
.../Jewel/src/main/sass/components/_layout.sass | 4 +
5 files changed, 78 insertions(+), 40 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
index 3b0c965..420f27b 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
@@ -44,7 +44,7 @@ limitations under the License.
</j:ButtonBar>
<j:ButtonBar localId="bb" change="bb_label.text = bb.selectedItem.label"
- emphasis="primary"
+ emphasis="primary" width="100%"
dataProvider="{listModel.suravengers}"/>
<j:Label localId="bb_label"/>
@@ -55,9 +55,9 @@ limitations under the License.
<html:H4 text="ButtonBar"/>
<j:ButtonBar localId="bb2" change="bb2_label.text = bb2.selectedItem as String"
- emphasis="secondary">
+ emphasis="secondary" width="100%">
<j:dataProvider>
- <js:ArrayList source="[Features, Support, Service and Operations, four]" />
+ <js:ArrayList source="[Features, Support, Operations, Service]" />
</j:dataProvider>
</j:ButtonBar>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 0b31caa..415fecc 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -1070,6 +1070,9 @@ j|Label {
.layout.horizontal.gap-10x3px > * {
margin: 0px 0px 0px 30px;
}
+.layout.horizontal.samewidth > * {
+ flex: 1 0;
+}
.layout.vertical {
flex-direction: column;
flex-wrap: nowrap;
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 9ddd3c8..f91fbbf 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
@@ -23,11 +23,14 @@ package org.apache.royale.jewel.beads.layouts
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;
/**
* The ButtonBarLayout class bead sizes and positions the button
- * elements that make up a org.apache.royale.jewel.ButtonBar. This bead arranges the Buttons
- * horizontally and makes them all the same width unless the buttonWidths property has been set in which case
+ * elements that make up a org.apache.royale.jewel.ButtonBar.
+ *
+ * This bead arranges the Buttons horizontally and makes them all the same width
+ * unless the buttonWidths property has been set in which case
* the values stored in that array are used.
*
* @langversion 3.0
@@ -50,6 +53,33 @@ package org.apache.royale.jewel.beads.layouts
super();
}
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout horizontal samewidth";
+
+ /**
+ * Add class selectors when the component is addedToParent
+ * Otherwise component will not get the class selectors when
+ * perform "removeElement" and then "addElement"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function beadsAddedHandler(event:Event = null):void
+ {
+ super.beadsAddedHandler();
+
+ COMPILE::JS
+ {
+ if (hostClassList.contains("samewidth"))
+ hostClassList.remove("samewidth");
+ hostClassList.add("samewidth");
+ }
+ }
+
private var _widthType:Number = ButtonBarModel.PIXEL_WIDTHS;
private var _buttonWidths:Array = null;
@@ -97,48 +127,48 @@ package org.apache.royale.jewel.beads.layouts
if (!(ilc is IStyleableObject)) continue;
COMPILE::SWF {
- if (buttonWidths) {
- var widthValue:* = buttonWidths[i];
+ 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;
+ 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.NATURAL_WIDTHS) {
- IStyleableObject(ilc).style.flexGrow = 1;
}
+ 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.
- if (buttonWidths) {
- var widthValue:* = buttonWidths[i];
+ // COMPILE::JS {
+ // // otherwise let the flexbox layout handle matters on its own.
+ // if (buttonWidths) {
+ // var widthValue:* = buttonWidths[i];
- if (_widthType == ButtonBarModel.PIXEL_WIDTHS) {
- if (widthValue != null) ilc.width = Number(widthValue);
- }
- else if (_widthType == ButtonBarModel.PROPORTIONAL_WIDTHS) {
- if (widthValue != null) ilc.element.style["flex-grow"] = String(widthValue);
- }
- else if (_widthType == ButtonBarModel.PERCENT_WIDTHS) {
- if (widthValue != null) ilc.percentWidth = Number(widthValue);
- }
- } else if (!_widthType == ButtonBarModel.NATURAL_WIDTHS) {
- ilc.element.style["flex-grow"] = "1";
- }
+ // if (_widthType == ButtonBarModel.PIXEL_WIDTHS) {
+ // if (widthValue != null) ilc.width = Number(widthValue);
+ // }
+ // else if (_widthType == ButtonBarModel.PROPORTIONAL_WIDTHS) {
+ // if (widthValue != null) ilc.element.style["flex-grow"] = String(widthValue);
+ // }
+ // else if (_widthType == ButtonBarModel.PERCENT_WIDTHS) {
+ // if (widthValue != null) ilc.percentWidth = Number(widthValue);
+ // }
+ // } else if (!_widthType == ButtonBarModel.NATURAL_WIDTHS) {
+ // ilc.element.style["flex-grow"] = "1";
+ // }
- if (!host.isHeightSizedToContent())
- ilc.height = contentView.height;
- }
+ // if (!host.isHeightSizedToContent())
+ // ilc.height = contentView.height;
+ // }
}
// now let the horizontal layout take care of things.
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
index 7a2bdf7..b0d020c 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
@@ -22,6 +22,7 @@ $border-radius: .25rem
// ButtonVar variables
.jewel.buttonbar
+
.jewel.button
border-radius: 0
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 920978d..6eaf222 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -81,6 +81,10 @@ $gap-size: 10px !default
> *
margin: 0px 0px 0px ($gap + $i * $gap-step)
+ &.samewidth
+ > *
+ flex: 1 0
+
// Vertical
&.vertical
flex-direction: column