royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: Drawer components and partial example in JewelExample
Date Fri, 29 Jun 2018 19:03:30 GMT
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 403b970  Drawer components and partial example in JewelExample
403b970 is described below

commit 403b9701bd1049aeb4e438c3f128a7da752e4a5e
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Fri Jun 29 21:03:24 2018 +0200

    Drawer components and partial example in JewelExample
---
 .../JewelExample/src/main/royale/MainContent.mxml  |  22 +++
 .../projects/Jewel/src/main/resources/defaults.css |  64 ++++++++-
 .../Jewel/src/main/resources/jewel-manifest.xml    |   6 +
 .../apache/royale/jewel/{Drawer.as => Divider.as}  |  63 +-------
 .../main/royale/org/apache/royale/jewel/Drawer.as  |  55 ++++++-
 .../royale/jewel/{Drawer.as => DrawerContent.as}   |  63 +-------
 .../royale/jewel/{Drawer.as => DrawerHeader.as}    |  63 +-------
 .../royale/jewel/{Drawer.as => Navigation.as}      |  64 ++-------
 .../itemRenderers/NavigationLinkItemRenderer.as    | 160 +++++++++++++++++++++
 .../{_itemRenderer.sass => _divider.sass}          |  18 ++-
 .../Jewel/src/main/sass/components/_drawer.sass    |  39 ++++-
 .../src/main/sass/components/_itemRenderer.sass    |  13 +-
 .../Jewel/src/main/sass/components/_list.sass      |  13 ++
 .../{_itemRenderer.sass => _navigation.sass}       |  13 +-
 .../projects/Jewel/src/main/sass/defaults.sass     |   2 +
 .../JewelTheme/src/main/resources/defaults.css     |  19 ++-
 .../src/main/sass/components-primary/_drawer.sass  |  33 +++--
 17 files changed, 443 insertions(+), 267 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index 9b85ab0..d8c215c 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -31,6 +31,28 @@ limitations under the License.
 	</j:beads>
 
     <j:Drawer id="drawer">
+        <j:DrawerHeader>
+            <j:Label text="Header Title"/>
+        </j:DrawerHeader>
+        <j:DrawerContent>
+            <j:Navigation id="nav" click="clickHandler(event);">
+                <j:beads>
+                    <js:ConstantBinding
+                            sourceID="mainNavigationModel"
+                            sourcePropertyName="controlsDrawerNavigation"
+                            destinationPropertyName="dataProvider" />
+                </j:beads>
+            </j:Navigation>
+            <j:Divider/>
+            <j:Navigation id="nav2" click="clickHandler(event);">
+                <j:beads>
+                    <js:ConstantBinding
+                            sourceID="mainNavigationModel"
+                            sourcePropertyName="containerDrawerNavigation"
+                            destinationPropertyName="dataProvider" />
+                </j:beads>
+            </j:Navigation>
+        </j:DrawerContent>
     </j:Drawer>
 
     <j:TopAppBar id="topappbar" fixed="true">
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index de530ac..144929f 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -247,7 +247,7 @@ j|ControlBar {
   content: "";
   opacity: 0;
 }
-.jewel.drawer .jewel.navigation {
+.jewel.drawer .drawermain {
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -262,8 +262,35 @@ j|ControlBar {
   opacity: 1;
 }
 
+.jewel.drawerheader {
+  position: relative;
+}
+.jewel.drawerheader::before {
+  display: block;
+  padding-top: 56.25%;
+  content: "";
+}
+.jewel.drawerheader div {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  align-items: flex-end;
+}
+
+.jewel.drawercontent {
+  flex-grow: 1;
+  margin: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-y;
+}
+
 @media (min-width: 768px) {
-  .jewel.drawer .jewel.navigation {
+  .jewel.drawer .drawermain {
     width: calc(100% - 60px);
     max-width: 310px;
   }
@@ -271,6 +298,16 @@ j|ControlBar {
 .remove-app-scroll {
   overflow: hidden;
 }
+
+.jewel.divider {
+  height: 0;
+  margin: 0;
+  border: none;
+  border-bottom-color: rgba(0, 0, 0, 0.12);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
 @media -royale-swf {
   j|DropDownList {
     IBeadModel: ClassReference("org.apache.royale.core.beads.models.ArraySelectionModel");
@@ -294,6 +331,17 @@ j|ListItemRenderer {
   IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
 }
 
+.jewel.navigationlink {
+  text-decoration: none;
+  margin: 0;
+  padding: 16px 0px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0;
+}
+
 .jewel.label {
   white-space: nowrap;
 }
@@ -2388,6 +2436,18 @@ j|List {
   IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.DataItemRendererFactoryForCollectionView");
 }
 
+j|Navigation {
+  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView");
+  IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
+  IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
+  IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.NavigationLinkItemRenderer");
+  IViewport: ClassReference("org.apache.royale.jewel.supportClasses.ScrollingViewport");
+  IViewportModel: ClassReference("org.apache.royale.core.beads.models.ViewportModel");
+  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SingleSelectionArrayListModel");
+  IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.DataItemRendererFactoryForCollectionView");
+}
+
 @media -royale-swf {
   j|List {
     IContentView: ClassReference("org.apache.royale.core.supportClasses.DataGroup");
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index e5da62e..ce4ee36 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -42,6 +42,9 @@
     <component id="TitleBar" class="org.apache.royale.jewel.TitleBar"/>
     <component id="List" class="org.apache.royale.jewel.List"/>
     <component id="DropDownList" class="org.apache.royale.jewel.DropDownList"/>
+
+    <component id="Navigation" class="org.apache.royale.jewel.Navigation"/>
+    <component id="NavigationLinkItemRenderer" class="org.apache.royale.jewel.itemRenderers.NavigationLinkItemRenderer"/>
     
     <component id="ApplicationResponsiveView" class="org.apache.royale.jewel.ApplicationResponsiveView"/>
     <component id="TopAppBar" class="org.apache.royale.jewel.TopAppBar"/>
@@ -49,6 +52,9 @@
     <component id="TopAppBarSection" class="org.apache.royale.jewel.TopAppBarSection"/>
     <component id="TopAppBarTitle" class="org.apache.royale.jewel.TopAppBarTitle"/>
     <component id="Drawer" class="org.apache.royale.jewel.Drawer"/>
+    <component id="DrawerHeader" class="org.apache.royale.jewel.DrawerHeader"/>
+    <component id="DrawerContent" class="org.apache.royale.jewel.DrawerContent"/>
+    <component id="Divider" class="org.apache.royale.jewel.Divider"/>
     <component id="Card" class="org.apache.royale.jewel.Card"/>
     
     <component id="DropDownListList" class="org.apache.royale.jewel.supportClasses.DropDownListList"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Divider.as
similarity index 52%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Divider.as
index 769aa3b..5e93449 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Divider.as
@@ -18,26 +18,22 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
-	import org.apache.royale.events.MouseEvent;
-	import org.apache.royale.core.UIBase;
-
-	COMPILE::JS
+    COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
     }
 
 	/**
-	 *  The Drawer class is a container component used for navigation
-	 *  can be opened with the menu icon on any screen size.
-	 *  If fixed could serve as sidebar navigation on larger screens.
+	 *  The Divider class is a component that shows a clear separation between
+	 *  two zones
 	 *
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.9.3
 	 */
-	public class Drawer extends Group
+	public class Divider extends Group
 	{
 		/**
 		 *  constructor.
@@ -47,65 +43,20 @@ package org.apache.royale.jewel
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.3
 		 */
-		public function Drawer()
+		public function Divider()
 		{
 			super();
 
-            typeNames = "jewel drawer";
-
-			addEventListener(org.apache.royale.events.MouseEvent.CLICK, internalMouseHandler);
-		}
-
-		private function internalMouseHandler(event:org.apache.royale.events.MouseEvent) : void
-		{
-			COMPILE::JS
-			{
-				var hostComponent:UIBase = event.target as UIBase;
-				var hostClassList:DOMTokenList = hostComponent.positioner.classList;
-				if (hostClassList.contains("drawer"))
-				{
-					open = false;
-					//dispatchEvent(new Event("closeDrawer"));
-				}
-			}
+            typeNames = "jewel divider";
 		}
 
-		private var _open:Boolean;
         /**
-         *  Open or close the drawer
-         *
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion Royale 0.9.3
-         */
-		public function get open():Boolean
-		{
-            return _open;
-		}
-
-		public function set open(value:Boolean):void
-		{
-            if (_open != value)
-            {
-                _open = value;
-
-                toggleClass("open", _open);
-
-				COMPILE::JS
-				{//avoid scroll in html
-					document.body.classList.toggle("remove-app-scroll", _open);
-				}
-            }
-		}
-
-		/**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
          */
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-			return addElementToWrapper(this,'aside');
+			return addElementToWrapper(this,'hr');
         }
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
index 769aa3b..c9f10e1 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
@@ -20,6 +20,14 @@ package org.apache.royale.jewel
 {
 	import org.apache.royale.events.MouseEvent;
 	import org.apache.royale.core.UIBase;
+	import org.apache.royale.core.IChild;
+	import org.apache.royale.core.IUIBase;
+
+	COMPILE::SWF
+    {
+		import org.apache.royale.core.IRenderedObject;
+        import flash.display.DisplayObject;
+    }
 
 	COMPILE::JS
     {
@@ -56,7 +64,7 @@ package org.apache.royale.jewel
 			addEventListener(org.apache.royale.events.MouseEvent.CLICK, internalMouseHandler);
 		}
 
-		private function internalMouseHandler(event:org.apache.royale.events.MouseEvent) : void
+		private function internalMouseHandler(event:org.apache.royale.events.MouseEvent):void
 		{
 			COMPILE::JS
 			{
@@ -99,13 +107,56 @@ package org.apache.royale.jewel
             }
 		}
 
+		COMPILE::JS
+		private var nav:HTMLElement;
+
 		/**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
          */
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-			return addElementToWrapper(this,'aside');
+			nav = addElementToWrapper(this,'nav');
+			nav.className = "drawermain";
+			
+			var aside:HTMLElement = document.createElement('aside') as HTMLElement;
+			aside.appendChild(nav);
+
+			positioner = aside as WrappedHTMLElement;
+			positioner.royale_wrapper = this;
+
+			return element;	
         }
+
+		/**
+         *  @copy org.apache.royale.core.IParent#addElement()
+         * 
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.0
+		 *  @royaleignorecoercion org.apache.royale.core.IUIBase
+         */
+		override public function addElement(c:IChild, dispatchEvent:Boolean = true):void
+		{
+            COMPILE::SWF
+            {
+                if (c is IUIBase)
+                {
+                    if (c is IRenderedObject)
+                        $addChild(IRenderedObject(c).$displayObject);
+                    else
+                        $addChild(c as DisplayObject);                        
+                    IUIBase(c).addedToParent();
+                }
+                else
+                    $addChild(c as DisplayObject);
+            }
+            COMPILE::JS
+            {
+                nav.appendChild(c.positioner);
+                (c as IUIBase).addedToParent();
+            }
+		}
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerContent.as
similarity index 52%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerContent.as
index 769aa3b..322641d 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerContent.as
@@ -18,26 +18,22 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
-	import org.apache.royale.events.MouseEvent;
-	import org.apache.royale.core.UIBase;
-
-	COMPILE::JS
+    COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
     }
 
 	/**
-	 *  The Drawer class is a container component used for navigation
-	 *  can be opened with the menu icon on any screen size.
-	 *  If fixed could serve as sidebar navigation on larger screens.
+	 *  The DrawerContent class is a Container component mainly used in Drawer to hold 
+     *  content like navigation, icons, or text.
 	 *
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.9.3
 	 */
-	public class Drawer extends Group
+	public class DrawerContent extends Group
 	{
 		/**
 		 *  constructor.
@@ -47,65 +43,20 @@ package org.apache.royale.jewel
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.3
 		 */
-		public function Drawer()
+		public function DrawerContent()
 		{
 			super();
 
-            typeNames = "jewel drawer";
-
-			addEventListener(org.apache.royale.events.MouseEvent.CLICK, internalMouseHandler);
-		}
-
-		private function internalMouseHandler(event:org.apache.royale.events.MouseEvent) : void
-		{
-			COMPILE::JS
-			{
-				var hostComponent:UIBase = event.target as UIBase;
-				var hostClassList:DOMTokenList = hostComponent.positioner.classList;
-				if (hostClassList.contains("drawer"))
-				{
-					open = false;
-					//dispatchEvent(new Event("closeDrawer"));
-				}
-			}
+            typeNames = "jewel drawercontent"
 		}
 
-		private var _open:Boolean;
         /**
-         *  Open or close the drawer
-         *
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion Royale 0.9.3
-         */
-		public function get open():Boolean
-		{
-            return _open;
-		}
-
-		public function set open(value:Boolean):void
-		{
-            if (_open != value)
-            {
-                _open = value;
-
-                toggleClass("open", _open);
-
-				COMPILE::JS
-				{//avoid scroll in html
-					document.body.classList.toggle("remove-app-scroll", _open);
-				}
-            }
-		}
-
-		/**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
          */
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-			return addElementToWrapper(this,'aside');
+			return addElementToWrapper(this,'nav');
         }
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerHeader.as
similarity index 52%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerHeader.as
index 769aa3b..9c74832 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerHeader.as
@@ -18,26 +18,22 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
-	import org.apache.royale.events.MouseEvent;
-	import org.apache.royale.core.UIBase;
-
-	COMPILE::JS
+    COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
     }
 
 	/**
-	 *  The Drawer class is a container component used for navigation
-	 *  can be opened with the menu icon on any screen size.
-	 *  If fixed could serve as sidebar navigation on larger screens.
+	 *  The DrawerHeader class is a Container component to hold Drawer Header
+	 *  content, for example a title or an Image icon logo
 	 *
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.9.3
 	 */
-	public class Drawer extends Group
+	public class DrawerHeader extends Group
 	{
 		/**
 		 *  constructor.
@@ -47,65 +43,20 @@ package org.apache.royale.jewel
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.3
 		 */
-		public function Drawer()
+		public function DrawerHeader()
 		{
 			super();
 
-            typeNames = "jewel drawer";
-
-			addEventListener(org.apache.royale.events.MouseEvent.CLICK, internalMouseHandler);
-		}
-
-		private function internalMouseHandler(event:org.apache.royale.events.MouseEvent) : void
-		{
-			COMPILE::JS
-			{
-				var hostComponent:UIBase = event.target as UIBase;
-				var hostClassList:DOMTokenList = hostComponent.positioner.classList;
-				if (hostClassList.contains("drawer"))
-				{
-					open = false;
-					//dispatchEvent(new Event("closeDrawer"));
-				}
-			}
+            typeNames = "jewel drawerheader"
 		}
 
-		private var _open:Boolean;
         /**
-         *  Open or close the drawer
-         *
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion Royale 0.9.3
-         */
-		public function get open():Boolean
-		{
-            return _open;
-		}
-
-		public function set open(value:Boolean):void
-		{
-            if (_open != value)
-            {
-                _open = value;
-
-                toggleClass("open", _open);
-
-				COMPILE::JS
-				{//avoid scroll in html
-					document.body.classList.toggle("remove-app-scroll", _open);
-				}
-            }
-		}
-
-		/**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
          */
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-			return addElementToWrapper(this,'aside');
+			return addElementToWrapper(this,'header');
         }
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Navigation.as
similarity index 52%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Navigation.as
index 769aa3b..581a84e 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Navigation.as
@@ -18,26 +18,23 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
-	import org.apache.royale.events.MouseEvent;
-	import org.apache.royale.core.UIBase;
-
-	COMPILE::JS
+    COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
     }
 
 	/**
-	 *  The Drawer class is a container component used for navigation
-	 *  can be opened with the menu icon on any screen size.
-	 *  If fixed could serve as sidebar navigation on larger screens.
+	 *  The Navigation class is a <nav> tag in HTML. It parents a list of links
+	 *  In Royale Navigation is implemented as a List component and by default
+	 *  it uses NavigationLinkItemRenderer class to define each item.
 	 *
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.9.3
 	 */
-	public class Drawer extends Group
+	public class Navigation extends List
 	{
 		/**
 		 *  constructor.
@@ -47,65 +44,20 @@ package org.apache.royale.jewel
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.3
 		 */
-		public function Drawer()
+		public function Navigation()
 		{
 			super();
 
-            typeNames = "jewel drawer";
-
-			addEventListener(org.apache.royale.events.MouseEvent.CLICK, internalMouseHandler);
-		}
-
-		private function internalMouseHandler(event:org.apache.royale.events.MouseEvent) : void
-		{
-			COMPILE::JS
-			{
-				var hostComponent:UIBase = event.target as UIBase;
-				var hostClassList:DOMTokenList = hostComponent.positioner.classList;
-				if (hostClassList.contains("drawer"))
-				{
-					open = false;
-					//dispatchEvent(new Event("closeDrawer"));
-				}
-			}
+            typeNames = "jewel navigation";
 		}
 
-		private var _open:Boolean;
         /**
-         *  Open or close the drawer
-         *
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion Royale 0.9.3
-         */
-		public function get open():Boolean
-		{
-            return _open;
-		}
-
-		public function set open(value:Boolean):void
-		{
-            if (_open != value)
-            {
-                _open = value;
-
-                toggleClass("open", _open);
-
-				COMPILE::JS
-				{//avoid scroll in html
-					document.body.classList.toggle("remove-app-scroll", _open);
-				}
-            }
-		}
-
-		/**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
          */
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-			return addElementToWrapper(this,'aside');
+			return addElementToWrapper(this,'nav');
         }
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/NavigationLinkItemRenderer.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/NavigationLinkItemRenderer.as
new file mode 100644
index 0000000..b36def5
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/NavigationLinkItemRenderer.as
@@ -0,0 +1,160 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.itemRenderers
+{
+	import org.apache.royale.core.MXMLItemRenderer;
+    
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+		import org.apache.royale.html.util.addElementToWrapper;
+    }
+
+    
+	/**
+	 *  The NavigationLinkItemRenderer defines the basic Item Renderer for a Jewel 
+     *  Navigation List Component.
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.3
+	 */
+	public class NavigationLinkItemRenderer extends MXMLItemRenderer
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function NavigationLinkItemRenderer()
+		{
+			super();
+
+            typeNames = "jewel navigationlink";
+		}
+		
+		private var _href:String = "#";
+        /**
+         *  the navigation link url
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function get href():String
+		{
+            return _href;   
+		}
+		public function set href(value:String):void
+		{
+            _href = value;
+		}
+
+		private var _label:String = "";
+
+        /**
+         *  The label of the navigation link
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function get label():String
+		{
+            return _label;
+		}
+
+		public function set label(value:String):void
+		{
+             _label = value;
+		}
+
+		COMPILE::JS
+        private var textNode:Text;
+
+		/**
+		 *  Sets the data value and uses the String version of the data for display.
+		 * 
+		 *  @param Object data The object being displayed by the itemRenderer instance.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		override public function set data(value:Object):void
+		{
+			super.data = value;
+
+			if(value == null) return;
+
+			if (labelField)
+			{
+                label = String(value[labelField]);
+            }
+			else if(value.label !== undefined)
+			{
+                label = String(value.label);
+			}
+			else
+			{
+				label = String(value);
+			}
+			
+            if(value.href !== undefined)
+			{
+                href = String(value.href);
+			}
+
+			COMPILE::JS
+			{
+				if(textNode != null)
+				{
+					textNode.nodeValue = label;
+                    (element as HTMLElement).setAttribute('href', href);
+				}	
+			}
+		}
+
+        /**
+         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+		 * @royaleignorecoercion Text
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+            var a:WrappedHTMLElement = addElementToWrapper(this,'a');
+            a.setAttribute('href', href);
+
+			if(MXMLDescriptor == null)
+			{
+				textNode = document.createTextNode('') as Text;
+				a.appendChild(textNode);
+			}
+
+            return element;
+        }
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass b/frameworks/projects/Jewel/src/main/sass/components/_divider.sass
similarity index 76%
copy from frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
copy to frameworks/projects/Jewel/src/main/sass/components/_divider.sass
index 4e7a5d7..c9c7f69 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_divider.sass
@@ -17,15 +17,13 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-// Jewel ListItemRenderer
+.jewel.divider
+    height: 0
+    margin: 0
+    border: none
+    border-bottom-color: rgba(0, 0, 0, 0.12)
+    border-bottom-width: 1px
+    border-bottom-style: solid
 
-// ListItemRenderer variables
-$item-min-height: 34px
+j|Divider
 
-.jewel.item
-    display: flex
-    cursor: pointer
-    min-height: $item-min-height
-    
-j|ListItemRenderer
-    IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
index d915921..894198c 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
@@ -50,8 +50,8 @@ $drawer-max-width: 310px
         
         content: ""
         opacity: 0
-        
-    & .jewel.navigation
+
+    .drawermain
         position: absolute
         
         display: flex
@@ -61,20 +61,49 @@ $drawer-max-width: 310px
         right: initial
         
         height: 100%
-        
+
     &.open
         pointer-events: auto
 
         &::before
             opacity: 1
 
+.jewel.drawerheader
+    position: relative
+    
+    &::before 
+        display: block
+        padding-top: 9 / 16 * 100%
+        content: ""
+
+    div
+        display: flex
+        position: absolute
+        top: 0
+        right: 0
+        bottom: 0
+        left: 0
+        align-items: flex-end
+
+.jewel.drawercontent
+    flex-grow: 1
+    margin: 0
+    overflow-x: hidden
+    overflow-y: auto
+    -webkit-overflow-scrolling: touch
+    touch-action: pan-y
+
 @media (min-width: $tablet)
     .jewel.drawer
-        & .jewel.navigation
+        .drawermain
             width: calc(100% - #{$drawer-width-offset})
             max-width: $drawer-max-width
 
 .remove-app-scroll
     overflow: hidden
 
-j|Drawer
\ No newline at end of file
+j|Drawer
+
+j|DrawerHeader
+
+j|DrawerContent
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
index 4e7a5d7..991ed7b 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
@@ -28,4 +28,15 @@ $item-min-height: 34px
     min-height: $item-min-height
     
 j|ListItemRenderer
-    IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
\ No newline at end of file
+    IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
+
+
+.jewel.navigationlink
+    text-decoration: none
+    margin: 0
+    padding: 16px 0px
+    vertical-align: middle
+    font-size: 14px
+    font-weight: 400
+    line-height: 24px
+    letter-spacing: 0
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_list.sass b/frameworks/projects/Jewel/src/main/sass/components/_list.sass
index 6ac43d2..6010eb4 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_list.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_list.sass
@@ -37,6 +37,19 @@ j|List
     //IBeadModel: ClassReference("org.apache.royale.core.beads.models.ArraySelectionModel")
     //IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData")
 
+
+j|Navigation
+    IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView")
+    IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+    IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
+    IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.NavigationLinkItemRenderer")
+    IViewport: ClassReference("org.apache.royale.jewel.supportClasses.ScrollingViewport")
+    IViewportModel: ClassReference("org.apache.royale.core.beads.models.ViewportModel")
+    IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SingleSelectionArrayListModel")
+    IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.DataItemRendererFactoryForCollectionView")
+    // IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData")
+
 @media -royale-swf	
     j|List
         //---iBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass b/frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
similarity index 76%
copy from frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
copy to frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
index 4e7a5d7..0479810 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
@@ -17,15 +17,8 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
-// Jewel ListItemRenderer
 
-// ListItemRenderer variables
-$item-min-height: 34px
+j|Navigation
 
-.jewel.item
-    display: flex
-    cursor: pointer
-    min-height: $item-min-height
-    
-j|ListItemRenderer
-    IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
\ No newline at end of file
+.jewel.navigation
+    
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index 6f041e1..9e3516b 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -29,11 +29,13 @@
 @import "components/checkbox"
 @import "components/controlbar"
 @import "components/drawer"
+@import "components/divider"
 @import "components/dropdownlist"
 @import "components/itemRenderer"
 @import "components/label"
 @import "components/layout"
 @import "components/list"
+@import "components/navigation"
 @import "components/radiobutton"
 @import "components/slider"
 @import "components/textinput"
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 8b43f4f..979440b 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -237,8 +237,7 @@ j|Card {
   will-change: opacity;
   transition: opacity 0.4s 0ms;
 }
-.jewel.drawer .jewel.navigation {
-  border-right: 1px solid #a6a6a6;
+.jewel.drawer .drawermain {
   box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
   transform: translateX(-104%);
   will-change: transform;
@@ -247,12 +246,22 @@ j|Card {
   background-color: #d9d9d9;
   transition: transform 250ms 0ms;
 }
-.jewel.drawer.open .jewel.navigation {
+.jewel.drawer.open .drawermain {
   transform: none;
   transition: transform 300ms 0ms;
 }
-.jewel.drawer > * {
-  padding-left: 40px;
+
+.jewel.drawerheader {
+  background: linear-gradient(#54b7f3, #24a3ef);
+  border-bottom: 1px solid #0d79ba;
+  color: #FFFFFF;
+}
+.jewel.drawerheader div {
+  padding: 16px;
+}
+
+.jewel.drawercontent > * {
+  padding-left: 16px;
 }
 
 .jewel.dropdownlist {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass
index 2a1a63f..10e8971 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass
@@ -19,7 +19,7 @@
 
 $drawer-width-offset: 54px
 $drawer-max-width: 280px
-$drawer-padding-left: 40px
+$drawer-padding-left: 16px
 $drawer-transition-close-time: 250ms
 $drawer-transition-open-time: 300ms
 $drawer-transition-close: animation-standard(transform, $drawer-transition-close-time)
@@ -35,8 +35,8 @@ $drawer-overlay-opacity: .65 !default
         will-change: opacity
         transition: animation-standard(opacity, .4s)
 
-    & .jewel.navigation
-        border-right: 1px solid darken($default-color, 20%)
+
+    .drawermain
         box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7)
         transform: translateX(-104%)
         will-change: transform
@@ -44,15 +44,32 @@ $drawer-overlay-opacity: .65 !default
         max-width: $drawer-max-width
         background-color: $default-color
         transition: $drawer-transition-close
-
-    &.open
-        
-        & .jewel.navigation
+    
+    &.open        
+        .drawermain
             transform: none
             transition: $drawer-transition-open
 
+
+.jewel.drawerheader
+    @if $flat
+        background: $primary-color
+        border: 0px solid
+    @else
+        background: linear-gradient(lighten($primary-color, 5%), darken($primary-color, 5%))
+        border-bottom: 1px solid darken($primary-color, 20%)
+    
+    color: $font-theme-color
+
+    div
+        padding: 16px
+
+.jewel.drawercontent
     > *
         padding-left: $drawer-padding-left
 
+j|Drawer
+
+j|DrawerHeader
 
-j|Drawer
\ No newline at end of file
+j|DrawerContent
\ No newline at end of file


Mime
View raw message