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/07/20 14:47:17 UTC
[royale-asjs] branch develop updated: tour-de-jewel: show
ResponsiveResizeListener in action. A icon is shown bottom left in TDJ to
show the actual responsive size of the screen and updates accordingly to
screen width changes
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 88b6791 tour-de-jewel: show ResponsiveResizeListener in action. A icon is shown bottom left in TDJ to show the actual responsive size of the screen and updates accordingly to screen width changes
88b6791 is described below
commit 88b6791fc8bbc16c53d8e2bd4b4a7714835d704c
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Jul 20 16:47:08 2020 +0200
tour-de-jewel: show ResponsiveResizeListener in action. A icon is shown bottom left in TDJ to show the actual responsive size of the screen and updates accordingly to screen width changes
---
.../TourDeJewel/src/main/royale/MainContent.mxml | 53 ++++++++++++++++++----
1 file changed, 45 insertions(+), 8 deletions(-)
diff --git a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
index 348f519..32c0beb 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
@@ -28,7 +28,10 @@ limitations under the License.
<fx:Script>
<![CDATA[
+ import org.apache.royale.events.Event;
+ import org.apache.royale.icons.MaterialIcon;
import org.apache.royale.jewel.supportClasses.ISelectableContent;
+ import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
import org.apache.royale.routing.RouteState;
import org.apache.royale.utils.OSUtils;
@@ -47,6 +50,39 @@ limitations under the License.
}
}
+ private function setResponsiveSizeIndicatorListeners():void
+ {
+ responsiveSizeIndicator.addEventListener('phoneResponsiveSize', changeIconToShowResponsiveSizeState);
+ responsiveSizeIndicator.addEventListener('tabletResponsiveSize', changeIconToShowResponsiveSizeState);
+ responsiveSizeIndicator.addEventListener('desktopResponsiveSize', changeIconToShowResponsiveSizeState);
+ responsiveSizeIndicator.addEventListener('widescreenResponsiveSize', changeIconToShowResponsiveSizeState);
+ responsiveSizeIndicator.addEventListener('fullResponsiveSize', changeIconToShowResponsiveSizeState);
+ }
+
+ private function changeIconToShowResponsiveSizeState(event:Event = null):void
+ {
+ if(event.type == 'phoneResponsiveSize') {
+ responsiveSizeIndicator.icon.text = MaterialIconType.PHONE_IPHONE;
+ responsiveSizeIndicatorToolTip.toolTip = ResponsiveSizes.PHONE + " Size";
+ }
+ else if(event.type == 'tabletResponsiveSize') {
+ responsiveSizeIndicator.icon.text = MaterialIconType.TABLET_MAC;
+ responsiveSizeIndicatorToolTip.toolTip = ResponsiveSizes.TABLET + " Size";
+ }
+ else if(event.type == 'desktopResponsiveSize') {
+ responsiveSizeIndicator.icon.text = MaterialIconType.DESKTOP_MAC;
+ responsiveSizeIndicatorToolTip.toolTip = ResponsiveSizes.DESKTOP + " Size";
+ }
+ else if(event.type == 'widescreenResponsiveSize') {
+ responsiveSizeIndicator.icon.text = MaterialIconType.TV;
+ responsiveSizeIndicatorToolTip.toolTip = ResponsiveSizes.WIDESCREEN + " Size";
+ }
+ else if(event.type == 'fullResponsiveSize') {
+ responsiveSizeIndicator.icon.text = MaterialIconType.PANORAMA;
+ responsiveSizeIndicatorToolTip.toolTip = ResponsiveSizes.FULL + " Size";
+ }
+ }
+
private function setNavFromHash(hash:String):void{
var l:uint = mainNavigationModel.containerDrawerNavigation.length;
while(l--) {
@@ -258,14 +294,15 @@ limitations under the License.
<js:MaterialIcon text="{MaterialIconType.ADD_ALARM}" />
</j:icon>
</j:IconButton>
- <j:IconButton>
- <j:beads>
- <j:Badge text="209" emphasis="emphasized" subindex="true" preindex="true" overlap="true"/>
- </j:beads>
- <j:icon>
- <js:MaterialIcon text="{MaterialIconType.ANNOUNCEMENT}" />
- </j:icon>
- </j:IconButton>
+ <j:IconButton localId="responsiveSizeIndicator" beadsAdded="setResponsiveSizeIndicatorListeners()">
+ <j:icon>
+ <js:MaterialIcon localId="responsiveSizeIndicatorIcon"/>
+ </j:icon>
+ <j:beads>
+ <j:ToolTip localId="responsiveSizeIndicatorToolTip"/>
+ <j:ResponsiveResizeListener/>
+ </j:beads>
+ </j:IconButton>
</j:BarSection>
</j:BarRow>
</j:FooterBar>