[royale-asjs] 09/10: finish collapsible renderer finished

[carlosrovira]

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 41ccf01b170a4171bd6e9c3640972ddd39bea584
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Wed May 13 16:48:19 2020 +0200

    finish collapsible renderer finished
---
 .../itemRenderers/NavigationGroupExampleItemRenderer.mxml | 14 +++++++++-----
 frameworks/projects/Jewel/src/main/resources/defaults.css |  1 -
 .../itemRenderers/CollapsibleNavigationSectionRenderer.as | 15 ++++++++++++++-
 .../apache/royale/jewel/itemRenderers/ListItemRenderer.as |  4 ++++
 .../Jewel/src/main/sass/components/_navigation.sass       |  3 +--
 5 files changed, 28 insertions(+), 9 deletions(-)

diff --git 
a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
 
b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
index c7412af..3ea5289 100644
--- 
a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
+++ 
b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
@@ -21,9 +21,10 @@ limitations under the License.
                                         
xmlns:j="library://ns.apache.org/royale/jewel"
                                         
xmlns:js="library://ns.apache.org/royale/basic"
                                         
xmlns:html="library://ns.apache.org/royale/html"
-                                        className="layout vertical"
+                                        
                                         sectionClick="handleNavToggle(event)"
-                                        height="48">
+                                        minHeight="48">
+                                        <!-- using 'minHeight' instead of 
'height' here since collapsible changes heigth of the renderer -->
 
     <fx:Script>
                <![CDATA[
@@ -80,15 +81,18 @@ limitations under the License.
 
     <j:beads>
         <js:ItemRendererDataBinding />
+        <!-- We can't add layout here since this renderer has its own needed 
to work -->
     </j:beads>
 
-    <!-- <j:HGroup gap="8" itemsVerticalAlign="itemsCenter"> -->
+    <!-- if we need to layout items in the render introduce a container like 
the following -->
+    <j:HGroup gap="8" itemsVerticalAlign="itemsCenter" height="48">
         <js:MaterialIcon text="{navlink.icon}"  visible="{navlink.icon != 
null}"/>
 
         <html:Span className="navigation-section-title" text="{text}"/>
         
         <js:MaterialIcon text="{open? MaterialIconType.EXPAND_LESS: 
MaterialIconType.EXPAND_MORE}"  className="hint" 
-                        visible="{navlink.subMenu != null}" />
-    <!-- </j:HGroup> -->
+                        visible="{navlink.subMenu != null}"/>
+    </j:HGroup>
+
 </j:CollapsibleNavigationSectionRenderer>
 
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css 
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index aba279f..9fa93e1 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3286,7 +3286,6 @@ j|NavigationLinkItemRenderer {
 }
 
 j|CollapsibleNavigationSectionRenderer {
-  IBeadLayout: 
ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
   IBeadController: 
ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
 }
 
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/CollapsibleNavigationSectionRenderer.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/CollapsibleNavigationSectionRenderer.as
index 2bb5133..d513935 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/CollapsibleNavigationSectionRenderer.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/CollapsibleNavigationSectionRenderer.as
@@ -28,6 +28,7 @@ package org.apache.royale.jewel.itemRenderers
        import org.apache.royale.events.Event;
        import org.apache.royale.html.elements.A;
        import org.apache.royale.jewel.Navigation;
+       import org.apache.royale.jewel.beads.layouts.VerticalLayout;
        import org.apache.royale.jewel.supportClasses.INavigationRenderer;
        import org.apache.royale.utils.ClassSelectorList;
        import org.apache.royale.utils.MXMLDataInterpreter;
@@ -37,6 +38,9 @@ package org.apache.royale.jewel.itemRenderers
         *  The NavigationLinkItemRenderer defines the basic Item Renderer for 
a Jewel 
      *  Navigation List Component. It handles Objects with "label" and "href" 
data.
         *  Extend this (you can do it in MXML) to support more data like for 
example: icon data.
+        * 
+        *  Note: This render creates a sub list, so we add in this class a 
concrete layout (VerticalLayout). So don't try
+        *  to change layout (adding via CSS, mxml beads, etc...). For layout 
the renderer parts, use a container (i.e: HGroup, VGroup,...)
         *  
         *  @langversion 3.0
         *  @playerversion Flash 10.2
@@ -68,7 +72,9 @@ package org.apache.royale.jewel.itemRenderers
                
                private function onSectionNav(event:Event):void{
                        var navTarget:Object = event.target;
-                       if (event.target == sectionNavItem || 
event.target.parent == sectionNavItem) {
+
+                       // this check should be smarter, check sectionNavItem 
and its childs
+                       if (event.target == sectionNavItem || 
event.target.parent == sectionNavItem || event.target.parent.parent == 
sectionNavItem) {
                                event.stopImmediatePropagation();
                                navTarget = this;
                                //make 'this' the event.target
@@ -262,6 +268,13 @@ package org.apache.royale.jewel.itemRenderers
                        MXMLDataInterpreter.generateMXMLInstances(this, 
sectionNavItem, MXMLDescriptor);
                        MXMLDescriptor.length = 0;
                        super.addedToParent();
+                       addLayoutBead();
+               }
+
+               public function addLayoutBead():void {
+                       var parentLayout:VerticalLayout = new VerticalLayout();
+                       parentLayout.itemsVerticalAlign = "itemsCentered";
+                       addBead(parentLayout);
                }
                
                /**
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
index 9ed7cec..1e44284 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
@@ -153,6 +153,10 @@ package org.apache.royale.jewel.itemRenderers
                override public function addedToParent():void
                {
                        super.addedToParent();
+                       addLayoutBead();
+               }
+
+               public function addLayoutBead():void {
                        loadBeadFromValuesManager(IBeadLayout, "iBeadLayout", 
this);
                }
        }
diff --git 
a/frameworks/projects/Jewel/src/main/sass/components/_navigation.sass 
b/frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
index 906569e..3641081 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
@@ -51,6 +51,5 @@ j|NavigationLinkItemRenderer
 .jewel.navigationgroup
 
 j|CollapsibleNavigationSectionRenderer
-    IBeadLayout: 
ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
     IBeadController: 
ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController")
-    // itemsVerticalAlign: itemsCenter
\ No newline at end of file
+    // don't add IBeadLayout. We add one in code since this render creates 
additional elements
\ No newline at end of file