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 cabda5a tour-de-jewel: update for FW icons to use "text" instead of
"type". Also show example of a ToggleButtonBar using FW icons instead of
material
cabda5a is described below
commit cabda5ab3fee5831eabe2833ba50081f91d0f752
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon May 18 15:34:07 2020 +0200
tour-de-jewel: update for FW icons to use "text" instead of "type". Also
show example of a ToggleButtonBar using FW icons instead of material
---
.../src/main/resources/jewel-example-styles.css | 5 ++
.../src/main/royale/ButtonBarPlayGround.mxml | 4 +-
.../src/main/royale/MiscelaneaPlayGound.mxml | 70 +++++++++++-----------
.../src/main/royale/models/ListsModel.as | 16 +++++
4 files changed, 58 insertions(+), 37 deletions(-)
diff --git
a/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
b/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
index a1febdb..a15a1cb 100644
--- a/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
+++ b/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
@@ -27,6 +27,11 @@ j|IconButtonBar
iconClass: ClassReference("org.apache.royale.icons.MaterialIcon")
}
+.iconButtonBarFontAwesomeIcon
+{
+ iconClass: ClassReference("org.apache.royale.icons.FontAwesomeIcon")
+}
+
.tableStyle
{
IItemRenderer: ClassReference("itemRenderers.TableStyleListItemRenderer");
diff --git
a/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
b/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
index 0c75493..e02bac4 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
@@ -149,11 +149,11 @@ limitations under the License.
<html:H4 text="Width 100% and emphasized color,
selectedIndex is 2"/>
- <j:ToggleButtonBar localId="tbb"
+ <j:ToggleButtonBar localId="tbb"
className="iconButtonBarFontAwesomeIcon"
change="tbbChangeHandler(event)"
selectedIndex="2"
emphasis="primary" width="100%"
-
dataProvider="{listModel.iconButtonData}"/>
+
dataProvider="{listModel.iconButtonDataFW}"/>
<html:H4 text="No Width and icons to the right,
selectedIndex is 0"/>
diff --git
a/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
b/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
index 415acf9..964291c 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/MiscelaneaPlayGound.mxml
@@ -95,57 +95,57 @@ limitations under the License.
<j:VGroup gap="3">
<html:H3 text="Sizes"
className="secondary-normal"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"/>
<j:Label text="normal"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_LG}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_LG}"/>
<j:Label text="lg"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X2}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X2}"/>
<j:Label text="2x"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}"/>
<j:Label text="3x"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X4}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X4}"/>
<j:Label text="4x"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X5}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X5}"/>
<j:Label text="5x"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
size="48"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
size="48"/>
<j:Label text="size=48"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" fixedWidth="true"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" fixedWidth="true"/>
<j:Label text="fixed width"/>
</j:VGroup>
<j:VGroup gap="3">
<html:H3 text="Rotations"
className="secondary-normal"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}"
rotation="{FontAwesomeIcon.ROTATE_90}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}"
rotation="{FontAwesomeIcon.ROTATE_90}"/>
<j:Label text="rotation 90º"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}"
rotation="{FontAwesomeIcon.ROTATE_180}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}"
rotation="{FontAwesomeIcon.ROTATE_180}"/>
<j:Label text="rotation 180º"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}"
rotation="{FontAwesomeIcon.ROTATE_270}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}"
rotation="{FontAwesomeIcon.ROTATE_270}"/>
<j:Label text="rotation 270º"/>
<html:H3 text="Flips"
className="secondary-normal"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" flipHorizontal="true"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" flipHorizontal="true"/>
<j:Label text="flipHorizontal"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" flipVertical="true"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" flipVertical="true"/>
<j:Label text="flipVertical"/>
<html:H3 text="Animations"
className="secondary-normal"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" spin="true"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" spin="true"/>
<j:Label text="spin"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" pulse="true"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" pulse="true"/>
<j:Label text="pulse"/>
</j:VGroup>
@@ -153,12 +153,12 @@ limitations under the License.
<j:VGroup gap="3">
<html:H3 text="Borders"
className="secondary-normal"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" border="true"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.ANGELLIST}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" border="true"/>
<j:Label text="with border"/>
<html:Div width="250">
<html:P>
- <js:FontAwesomeIcon
className="primary-normal" type="{FontAwesome5IconType.ANGELLIST}"
faStyle="{FontAwesomeIcon.BRANDS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
border="true" pullRight="true"/>
+ <js:FontAwesomeIcon
className="primary-normal" text="{FontAwesome5IconType.ANGELLIST}"
faStyle="{FontAwesomeIcon.BRANDS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
border="true" pullRight="true"/>
<js:TextNode text="Lorem ipsum dolor si
amet, consectetur adipiscing incidunt ut labore et dolore magna aliquam erat
nostrud exercitation ullamcorper suscipit laboris nis duis autem vel eum irure
dolor in reprehenderit i, dolore eu fugiat nulla pariatur."/>
</html:P>
</html:Div>
@@ -167,7 +167,7 @@ limitations under the License.
<html:Div width="250">
<html:P>
- <js:FontAwesomeIcon
className="primary-normal" type="{FontAwesome5IconType.ANGELLIST}"
faStyle="{FontAwesomeIcon.BRANDS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
border="true" pullLeft="true"/>
+ <js:FontAwesomeIcon
className="primary-normal" text="{FontAwesome5IconType.ANGELLIST}"
faStyle="{FontAwesomeIcon.BRANDS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
border="true" pullLeft="true"/>
<js:TextNode text="Lorem ipsum dolor si
amet, consectetur adipiscing incidunt ut labore et dolore magna aliquam erat
nostrud exercitation ullamcorper suscipit laboris nis duis autem vel eum irure
dolor in reprehenderit i, dolore eu fugiat nulla pariatur."/>
</html:P>
</html:Div>
@@ -176,7 +176,7 @@ limitations under the License.
<html:Div width="250">
<html:P>
- <js:FontAwesomeIcon
className="primary-normal" type="{FontAwesome5IconType.ANGELLIST}"
faStyle="{FontAwesomeIcon.BRANDS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
pullRight="true"/>
+ <js:FontAwesomeIcon
className="primary-normal" text="{FontAwesome5IconType.ANGELLIST}"
faStyle="{FontAwesomeIcon.BRANDS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
pullRight="true"/>
<js:TextNode text="Lorem ipsum dolor si
amet, consectetur adipiscing incidunt ut labore et dolore magna aliquam erat
nostrud exercitation ullamcorper suscipit laboris nis duis autem vel eum irure
dolor in reprehenderit i, dolore eu fugiat nulla pariatur."/>
</html:P>
</html:Div>
@@ -188,31 +188,31 @@ limitations under the License.
<html:H3 text="Styles (FAv5.0)"
className="secondary-normal"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.VIRUS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
faStyle="{FontAwesomeIcon.SOLID}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.VIRUS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
faStyle="{FontAwesomeIcon.SOLID}"/>
<j:Label text="Solid Style"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.VIRUS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.VIRUS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"/>
<j:Label text="Regular Style"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.VIRUS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
faStyle="{FontAwesomeIcon.LIGHT}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.VIRUS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
faStyle="{FontAwesomeIcon.LIGHT}"/>
<j:Label text="Light Style"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.VIRUS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
faStyle="{FontAwesomeIcon.DUOTONE}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.VIRUS}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
faStyle="{FontAwesomeIcon.DUOTONE}"/>
<j:Label text="Duotone Style"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.TWITTER_SQUARE}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" faStyle="{FontAwesomeIcon.BRANDS}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.TWITTER_SQUARE}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" faStyle="{FontAwesomeIcon.BRANDS}"/>
<j:Label text="Brands Style"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.PUMP_SOAP}"
relativeSize="{FontAwesomeIcon.SIZE_X3}"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.BACTERIA}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
faStyle="{FontAwesomeIcon.LIGHT}"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.VIRUS_SLASH}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" faStyle="{FontAwesomeIcon.DUOTONE}"/>
- <js:FontAwesomeIcon className="primary-normal"
type="{FontAwesome5IconType.FINGERPRINT}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" faStyle="{FontAwesomeIcon.DUOTONE}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.PUMP_SOAP}"
relativeSize="{FontAwesomeIcon.SIZE_X3}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.BACTERIA}" relativeSize="{FontAwesomeIcon.SIZE_X3}"
faStyle="{FontAwesomeIcon.LIGHT}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.VIRUS_SLASH}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" faStyle="{FontAwesomeIcon.DUOTONE}"/>
+ <js:FontAwesomeIcon className="primary-normal"
text="{FontAwesome5IconType.FINGERPRINT}"
relativeSize="{FontAwesomeIcon.SIZE_X3}" faStyle="{FontAwesomeIcon.DUOTONE}"/>
<html:H3 text="IconButton"
className="secondary-normal"/>
<j:IconButton emphasis="primary" text="Twitter">
<j:icon>
- <js:FontAwesomeIcon
type="{FontAwesome5IconType.TWITTER}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X2}"/>
+ <js:FontAwesomeIcon
text="{FontAwesome5IconType.TWITTER}" faStyle="{FontAwesomeIcon.BRANDS}"
relativeSize="{FontAwesomeIcon.SIZE_X2}"/>
</j:icon>
</j:IconButton>
@@ -220,7 +220,7 @@ limitations under the License.
<j:ToggleButton emphasis="primary" text="Black
Book" selectedText="White Book">
<j:icon>
- <js:FontAwesomeToggleIcon
type="{FontAwesome5IconType.ADDRESS_BOOK}"
+ <js:FontAwesomeToggleIcon
text="{FontAwesome5IconType.ADDRESS_BOOK}"
relativeSize="{FontAwesomeIcon.SIZE_X2}"/>
</j:icon>
</j:ToggleButton>
@@ -229,7 +229,7 @@ limitations under the License.
<j:ToggleButton emphasis="secondary" text="Black
Book" selectedText="White Book">
<j:icon>
- <js:FontAwesomeToggleIcon
type="{FontAwesome5IconType.ADDRESS_BOOK}" faStyle="{FontAwesomeIcon.SOLID}"
+ <js:FontAwesomeToggleIcon
text="{FontAwesome5IconType.ADDRESS_BOOK}" faStyle="{FontAwesomeIcon.SOLID}"
faSelectedStyle="{FontAwesomeIcon.REGULAR}"
relativeSize="{FontAwesomeIcon.SIZE_X2}"/>
</j:icon>
@@ -239,8 +239,8 @@ limitations under the License.
<j:ToggleButton emphasis="emphasized" text="Go
Down" selectedText="Go Up">
<j:icon>
- <js:FontAwesomeToggleIcon
type="{FontAwesome5IconType.ANGLE_DOUBLE_DOWN}"
faStyle="{FontAwesomeIcon.LIGHT}"
-
selectedType="{FontAwesome5IconType.ANGLE_DOUBLE_UP}"
faSelectedStyle="{FontAwesomeIcon.DUOTONE}"
+ <js:FontAwesomeToggleIcon
text="{FontAwesome5IconType.ANGLE_DOUBLE_DOWN}"
faStyle="{FontAwesomeIcon.LIGHT}"
+
selectedText="{FontAwesome5IconType.ANGLE_DOUBLE_UP}"
faSelectedStyle="{FontAwesomeIcon.DUOTONE}"
relativeSize="{FontAwesomeIcon.SIZE_X2}"/>
</j:icon>
</j:ToggleButton>
@@ -249,8 +249,8 @@ limitations under the License.
<j:ToggleButton text="Go Down" selectedText="Go
Up" selected="true">
<j:icon>
- <js:FontAwesomeToggleIcon
type="{FontAwesome5IconType.CHEVRON_CIRCLE_DOWN}"
-
selectedType="{FontAwesome5IconType.CHEVRON_CIRCLE_UP}"
+ <js:FontAwesomeToggleIcon
text="{FontAwesome5IconType.CHEVRON_CIRCLE_DOWN}"
+
selectedText="{FontAwesome5IconType.CHEVRON_CIRCLE_UP}"
relativeSize="{FontAwesomeIcon.SIZE_X2}"/>
</j:icon>
</j:ToggleButton>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/models/ListsModel.as
b/examples/jewel/TourDeJewel/src/main/royale/models/ListsModel.as
index 2964b3c..6d19515 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/models/ListsModel.as
+++ b/examples/jewel/TourDeJewel/src/main/royale/models/ListsModel.as
@@ -166,6 +166,22 @@ package models
{
return _iconButtonData;
}
+
+ /**
+ * Used in the IconButtonBar example. This one uses
FontAwesomeIcons
+ */
+ private var _iconButtonDataFW:ArrayList = new ArrayList([
+ new IconListVO("Card", FontAwesome5IconType.ADDRESS_CARD),
+ new IconListVO("Back", FontAwesome5IconType.BACKWARD),
+ new IconListVO("Cloud", FontAwesome5IconType.CLOUD),
+ new IconListVO("File", FontAwesome5IconType.FILE),
+ new IconListVO("Mobile", FontAwesome5IconType.MOBILE)
+ ]);
+
+ public function get iconButtonDataFW():ArrayList
+ {
+ return _iconButtonDataFW;
+ }
/**
* Used in the Virtual List example example.
