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: Add Float/Fixed modes to Drawer for responsivenes.
Date Mon, 09 Jul 2018 21:38:34 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 777ce24  Add Float/Fixed modes to Drawer for responsivenes.
777ce24 is described below

commit 777ce24f7c2b2392dd7fb67d16e200f46ef53993
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Mon Jul 9 23:38:30 2018 +0200

    Add Float/Fixed modes to Drawer for responsivenes.
---
 .../src/main/resources/jewel-example-styles.css    |  10 +-
 .../src/main/royale/ListPlayGround.mxml            |   1 +
 .../JewelExample/src/main/royale/MainContent.mxml  |   9 +-
 .../projects/Jewel/src/main/resources/defaults.css |  87 +++++---
 .../royale/jewel/ApplicationResponsiveView.as      |   2 +-
 .../main/royale/org/apache/royale/jewel/Drawer.as  | 227 +++++++++++++++------
 .../royale/jewel/{Drawer.as => DrawerBase.as}      |  90 +++-----
 .../royale/org/apache/royale/jewel/TopAppBar.as    | 120 ++++++++++-
 .../projects/Jewel/src/main/sass/_global.sass      |   9 +
 .../sass/components/_applicationmaincontent.sass   |   2 +-
 .../Jewel/src/main/sass/components/_card.sass      |   1 +
 .../Jewel/src/main/sass/components/_divider.sass   |   5 +-
 .../Jewel/src/main/sass/components/_drawer.sass    | 115 +++++++----
 .../Jewel/src/main/sass/components/_topappbar.sass |  72 +++++--
 .../JewelTheme/src/main/resources/defaults.css     |  35 +++-
 .../JewelTheme/src/main/sass/_variables.sass       |   6 +
 .../main/sass/components-primary}/_divider.sass    |   5 +-
 .../src/main/sass/components-primary/_drawer.sass  |  70 +++++--
 .../main/sass/components-primary/_topappbar.sass   |  31 +--
 .../themes/JewelTheme/src/main/sass/defaults.sass  |   1 +
 20 files changed, 615 insertions(+), 283 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
index 4eb1ae9..57c93c1 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -20,11 +20,18 @@
 */
 
 @namespace "http://www.w3.org/1999/xhtml";
+@namespace j "library://ns.apache.org/royale/jewel";
 
-.mainContent {
+.mainContent 
+{
     padding: 20px;
 }
 
+.jewel.section
+{
+    padding-top: 20px;
+}
+
 .iconListItemRenderer
 {
     IItemRenderer: ClassReference("itemRenderers.IconListItemRenderer");
@@ -47,7 +54,6 @@
 .jewel.drawerheader img
 {
     height: 140px;
-    padding: 16px;
 }
 
 .wrapper {
diff --git a/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
index ea4247c..45b4a54 100644
--- a/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
@@ -56,6 +56,7 @@ limitations under the License.
 
 	<j:beads>
         <js:ContainerDataBinding/>
+		<j:VerticalLayout gap="3"/>
     </j:beads>
 
 	<j:Card>
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index e383a90..9897ee8 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -32,7 +32,8 @@ limitations under the License.
             {
                 var item:NavigationLinkVO = (event.target as Navigation).selectedItem as
NavigationLinkVO;
                 main.showContent(item.href);
-                drawer.close();
+                if(!drawer.fixed)
+                    drawer.close();
             }
 
             private function toggleTopAppBarFixed():void
@@ -51,7 +52,7 @@ limitations under the License.
 		<js:ContainerDataBinding/>
 	</j:beads>
 
-    <j:Drawer id="drawer">
+    <j:Drawer id="drawer" auto="true">
         <j:DrawerHeader>
             <j:Image src="assets/apache-royale-jewel-logo-white.svg"/>
         </j:DrawerHeader>
@@ -79,7 +80,7 @@ limitations under the License.
     <j:TopAppBar id="topappbar" fixed="true">
         <j:TopAppBarRow>
             <j:TopAppBarSection>
-                <j:Button click="drawer.open()">
+                <j:Button click="drawer.isOpen ? drawer.close() : drawer.open()">
                     <j:icon>
                         <js:FontIcon text="{MaterialIconType.MENU}" material="true"/>
                     </j:icon>
@@ -87,7 +88,7 @@ limitations under the License.
                 <j:TopAppBarTitle text="Apache Royale Jewel UI Set Theme Showcase"/>
             </j:TopAppBarSection>
             <j:TopAppBarSection alignRight="true">
-                <j:Button click="topappbar.visible = !topappbar.visible">
+                <j:Button click="drawer.fixed = !drawer.fixed">
                     <j:icon>
                         <js:FontIcon text="{MaterialIconType.VISIBILITY}" material="true"/>
                     </j:icon>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 1a65b89..c810823 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -37,6 +37,15 @@ j|View {
   IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
 }
 
+j|ApplicationResponsiveView {
+  IBeadView: ClassReference("org.apache.royale.core.beads.GroupView");
+}
+
+.applicationResponsiveView {
+  display: inline-flex;
+  width: 100%;
+}
+
 j|ApplicationView {
   IBeadView: ClassReference("org.apache.royale.core.beads.GroupView");
   IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
@@ -105,7 +114,6 @@ j|Alert {
 
 .jewel.main {
   width: 100%;
-  height: 100%;
 }
 
 j|ApplicationMainContent {
@@ -144,6 +152,7 @@ j|ApplicationMainContent {
   flex-direction: column;
   min-width: 320px;
   min-height: 180px;
+  width: 350px;
 }
 
 j|Card {
@@ -230,7 +239,7 @@ j|ControlBar {
     IMeasurementBead: ClassReference("org.apache.royale.html.beads.ControlBarMeasurementBead");
   }
 }
-.jewel.drawer {
+.jewel.drawer.float {
   position: fixed;
   pointer-events: none;
   top: 0;
@@ -241,7 +250,7 @@ j|ControlBar {
   contain: strict;
   z-index: 5;
 }
-.jewel.drawer::before {
+.jewel.drawer.float::before {
   position: absolute;
   display: block;
   top: 0;
@@ -251,7 +260,7 @@ j|ControlBar {
   content: "";
   opacity: 0;
 }
-.jewel.drawer .drawermain {
+.jewel.drawer.float .drawermain {
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -259,12 +268,40 @@ j|ControlBar {
   right: initial;
   height: 100%;
 }
-.jewel.drawer.open {
+.jewel.drawer.float.open {
   pointer-events: auto;
 }
-.jewel.drawer.open::before {
+.jewel.drawer.float.open::before {
   opacity: 1;
 }
+.jewel.drawer.fixed {
+  width: 0;
+}
+.jewel.drawer.fixed .drawermain {
+  display: inline-flex;
+  flex-direction: column;
+  left: 0;
+  right: auto;
+  height: 100%;
+  overflow: hidden;
+  touch-action: none;
+}
+.jewel.drawer.fixed.open {
+  pointer-events: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+  transform: none;
+}
+
+@media (min-width: 768px) {
+  .jewel.drawer.float .drawermain {
+    width: calc(100% - 60px);
+    max-width: 310px;
+  }
+}
+.remove-app-scroll {
+  overflow: hidden;
+}
 
 .jewel.drawerheader {
   position: relative;
@@ -291,23 +328,10 @@ j|ControlBar {
   touch-action: pan-y;
 }
 
-@media (min-width: 768px) {
-  .jewel.drawer .drawermain {
-    width: calc(100% - 60px);
-    max-width: 310px;
-  }
-}
-.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 {
@@ -2718,15 +2742,19 @@ j|TitleBar {
 }
 
 .jewel.topappbar {
+  display: inline-flex;
+  flex: 1 1 auto;
+}
+.jewel.topappbar .topBarAppHeader {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
   z-index: 4;
-}
-.jewel.topappbar.fixed {
   position: fixed;
-  top: 0px;
+}
+.jewel.topappbar .topBarAppHeader.fixed {
+  transition: box-shadow 200ms linear;
 }
 
 .has-topappbar {
@@ -2765,18 +2793,13 @@ j|TitleBar {
   outline: none;
   text-decoration: none;
   cursor: pointer;
+  opacity: 1;
 }
-.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection
button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus
{
-  background: transparent;
-  box-shadow: none;
-  border: none;
-}
-.jewel.topappbarsection button[disabled] {
-  background: transparent;
-  box-shadow: none;
-  border: none;
+.jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection
button:focus {
+  transition: opacity 0.4s 0ms;
+  opacity: 0.5;
 }
-.jewel.topappbarsection button .icon {
+.jewel.topappbarsection button .fonticon {
   margin-left: 0px;
   margin-right: 0px;
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationResponsiveView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationResponsiveView.as
index 80e3f30..b4a0130 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationResponsiveView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationResponsiveView.as
@@ -52,7 +52,7 @@ package org.apache.royale.jewel
 		{
 			super();
 
-            typeNames = "" + VerticalLayout.LAYOUT_TYPE_NAMES;
+            typeNames = "applicationResponsiveView"; //+ VerticalLayout.LAYOUT_TYPE_NAMES;
 		}
         
 		private var _applicationModel:Object;
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 c38b7a8..1f70600 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
@@ -19,34 +19,34 @@
 package org.apache.royale.jewel
 {
 	import org.apache.royale.events.MouseEvent;
+	import org.apache.royale.events.Event;
 	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
-    {
-        import org.apache.royale.core.WrappedHTMLElement;
-		import org.apache.royale.html.util.addElementToWrapper;
-    }
+	import org.apache.royale.utils.StringUtil;
 
 	/**
 	 *  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.
+	 *  can be opened with the menu icon.
+	 * 
+	 *  It can be used in float or fixed modes. 
+	 *  
+	 *  float make the drawer appear over the screen without make anything change size
+	 *  and click outside the drawer will hide it. Usually clicking in some navigation option
+	 *  will hide it as well.
+	 * 
+	 *  fixed will need some place and make the other content shrink. click on navigation option

+	 *  in the drawer usually doesn't hide it.
 	 *
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.9.3
 	 */
-	public class Drawer extends Group
+	public class Drawer extends DrawerBase
 	{
+		public static const FLOAT:String = "float";
+		public static const FIXED:String = "fixed";
+		public static const AUTO:String = "auto";
+
 		/**
 		 *  constructor.
 		 *
@@ -59,11 +59,27 @@ package org.apache.royale.jewel
 		{
 			super();
 
-            typeNames = "jewel drawer";
+			// defaults to float (notice that float or fixed is needed always)
+            typeNames = "jewel drawer " + FLOAT;
 
 			addEventListener(MouseEvent.CLICK, internalMouseHandler);
+
+			// TODO (carlosrovira) handle swipe touch gesture to close drawer in mobile (only on float)
+			// addEventListener("touchstart" handleTouchStart);
+			// addEventListener("touchmove" handleTouchMove);
+			// addEventListener("touchend" handleTouchEnd);
 		}
 
+		// private function handleTouchStart(event:Event):void
+		// {
+		// }
+		// private function handleTouchMove(event:Event):void
+		// {
+		// }
+		// private function handleTouchEnd(event:Event):void
+		// {
+		// }
+
 		private function internalMouseHandler(event:MouseEvent):void
 		{
 			COMPILE::JS
@@ -73,7 +89,6 @@ package org.apache.royale.jewel
 				if (hostClassList.contains("drawer"))
 				{
 					close();
-					//dispatchEvent(new Event("closeDrawer"));
 				}
 			}
 		}
@@ -99,12 +114,26 @@ package org.apache.royale.jewel
                 _isOpen = value;
 
                 toggleClass("open", _isOpen);
+				
+				adjustAppScroll();
 
-				COMPILE::JS
-				{//avoid scroll in html
+				_isOpen ? dispatchEvent(new Event("openDrawer")) : dispatchEvent(new Event("closeDrawer"));
+            }
+		}
+
+		protected function adjustAppScroll():void
+		{
+			COMPILE::JS
+			{
+				//avoid scroll in html
+				if(fixed)
+				{
+					document.body.classList.remove("remove-app-scroll");
+				} else
+				{
 					document.body.classList.toggle("remove-app-scroll", _isOpen);
 				}
-            }
+			}
 		}
 
 		public function open():void
@@ -117,56 +146,124 @@ package org.apache.royale.jewel
             isOpen = false;
 		}
 
-		COMPILE::JS
-		private var nav:HTMLElement;
-
-		/**
-         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
-         */
-        COMPILE::JS
-        override protected function createElement():WrappedHTMLElement
+		protected var _fixed:Boolean = false;
+        /**
+		 *  A boolean flag to switch between "float" and "fixed" effect selector.
+		 *  Optional. Makes the drawer always fixed instead of floating.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get fixed():Boolean
+        {
+            return _fixed;
+        }
+        public function set fixed(value:Boolean):void
         {
-			nav = addElementToWrapper(this,'nav');
-			nav.className = "drawermain";
-			
-			var aside:HTMLElement = document.createElement('aside') as HTMLElement;
-			aside.appendChild(nav);
+            if (_fixed != value)
+            {
+                _fixed = value;
 
-			positioner = aside as WrappedHTMLElement;
-			positioner.royale_wrapper = this;
+				if(_fixed)
+				{
+					typeNames = StringUtil.removeWord(typeNames, " " + FLOAT);
+					typeNames += " " + FIXED;
+				}
+				else
+				{
+					typeNames = StringUtil.removeWord(typeNames, " " + FIXED);
+					typeNames += " " + FLOAT;
+				}
 
-			return element;	
-        }
+				COMPILE::JS
+				{
+					if (parent)
+						setClassName(computeFinalClassNames()); 
 
-		/**
-         *  @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);
+					toggleClass("open", _isOpen);
+				}
             }
-            COMPILE::JS
+        }
+
+		protected var _auto:Boolean = false;
+        /**
+		 *  A boolean flag to activate "auto" effect selector.
+		 *  Optional. Makes the drawer auto adapt using 
+		 *  a float behaviour on mobile and tablets and fixed
+		 *  behaviour on desktop.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get auto():Boolean
+        {
+            return _auto;
+        }
+        public function set auto(value:Boolean):void
+        {
+            if (_auto != value)
             {
-                nav.appendChild(c.positioner);
-                (c as IUIBase).addedToParent();
+                _auto = value;
+
+				COMPILE::JS
+				{
+				if(_auto)
+				{
+					window.addEventListener('resize', autoResizeHandler, false);
+				}
+				else
+				{
+					window.removeEventListener('resize', autoResizeHandler, false);
+				}
+				}
+
+                toggleClass("auto", _auto);
             }
+        }
+
+		/**
+		 *  When set to "auto" this resize handler monitors the width of the app window
+		 *  and switch between fixed and float modes.
+		 * 
+		 *  Note:This could be done with media queries, but since it handles open/close
+		 *  maybe this is the right way
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		private function autoResizeHandler(event:Event = null):void
+        {
+			COMPILE::JS
+			{
+				var outerWidth:Number = window.outerWidth;
+
+				var tmpFixed:Boolean = fixed;
+
+				// Desktop width size
+				if(outerWidth > 992)
+				{
+					fixed = true;
+					if(tmpFixed != fixed)
+					{
+						open();
+					}
+				}
+				else
+				{
+					fixed = false;
+					if(tmpFixed != fixed)
+					{
+						close();
+					}
+				}
+
+			}
 		}
 	}
 }
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/DrawerBase.as
similarity index 69%
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/DrawerBase.as
index c38b7a8..9b5a2b9 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/DrawerBase.as
@@ -36,16 +36,35 @@ package org.apache.royale.jewel
     }
 
 	/**
-	 *  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.
-	 *
+     *  Dispatched when the drawer open
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.3
+     */
+	[Event(name="openDrawer", type="org.apache.royale.events.Event")]
+
+	/**
+     *  Dispatched when the drawer close
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.3
+     */
+	[Event(name="closeDrawer", type="org.apache.royale.events.Event")]
+
+	/**
+	 *  The DrawerBase class is the base class for a container component 
+	 *  used for navigation.
+	 *  
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.9.3
 	 */
-	public class Drawer extends Group
+	public class DrawerBase extends Group
 	{
 		/**
 		 *  constructor.
@@ -55,70 +74,15 @@ package org.apache.royale.jewel
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.3
 		 */
-		public function Drawer()
+		public function DrawerBase()
 		{
 			super();
 
             typeNames = "jewel drawer";
-
-			addEventListener(MouseEvent.CLICK, internalMouseHandler);
-		}
-
-		private function internalMouseHandler(event:MouseEvent):void
-		{
-			COMPILE::JS
-			{
-				var hostComponent:UIBase = event.target as UIBase;
-				var hostClassList:DOMTokenList = hostComponent.positioner.classList;
-				if (hostClassList.contains("drawer"))
-				{
-					close();
-					//dispatchEvent(new Event("closeDrawer"));
-				}
-			}
-		}
-
-		private var _isOpen: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 isOpen():Boolean
-		{
-            return _isOpen;
-		}
-
-		public function set isOpen(value:Boolean):void
-		{
-            if (_isOpen != value)
-            {
-                _isOpen = value;
-
-                toggleClass("open", _isOpen);
-
-				COMPILE::JS
-				{//avoid scroll in html
-					document.body.classList.toggle("remove-app-scroll", _isOpen);
-				}
-            }
-		}
-
-		public function open():void
-		{
-            isOpen = true;
-		}
-
-		public function close():void
-		{
-            isOpen = false;
 		}
 
 		COMPILE::JS
-		private var nav:HTMLElement;
+		protected var nav:HTMLElement;
 
 		/**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
@@ -144,7 +108,7 @@ package org.apache.royale.jewel
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
-         *  @productversion Royale 0.0
+         *  @productversion Royale 0.9.3
 		 *  @royaleignorecoercion org.apache.royale.core.IUIBase
          */
 		override public function addElement(c:IChild, dispatchEvent:Boolean = true):void
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as
index 1733315..976d216 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as
@@ -18,6 +18,15 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
+	import org.apache.royale.core.IChild;
+	import org.apache.royale.core.IUIBase;
+	import org.apache.royale.events.Event;
+
+	COMPILE::SWF
+    {
+		import org.apache.royale.core.IRenderedObject;
+        import flash.display.DisplayObject;
+    }
     COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
@@ -50,9 +59,68 @@ package org.apache.royale.jewel
 			super();
 
             typeNames = "jewel topappbar"
+			setListenersForFixed();
+		}
+
+		COMPILE::JS
+		private var currentOffset:Number = 0;
+		COMPILE::JS
+		private var lastPosition:Number = 0;
+
+		private function setListenersForFixed():void
+        {
+			COMPILE::JS
+			{
+			if(_fixed)
+			{
+				header.classList.add("fixed");
+				window.removeEventListener('scroll', scrollHandler, false);
+			}
+			else
+			{
+				header.classList.remove("fixed");
+				window.addEventListener('scroll', scrollHandler, false);
+			}
+			}
+		}
+
+		/**
+		 *  If not fixed this scroll handler manages that the top bar doesn't get lost above
+		 *  and will get back to screen sooner since only get scroll up by its size
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		private function scrollHandler(event:Event = null):void
+        {
+			COMPILE::JS
+            {
+				var offset:Number;
+				var currentPosition:Number = Math.max(window.pageYOffset, 0);
+				var diff:Number = currentPosition - lastPosition;
+				lastPosition = currentPosition;
+
+				currentOffset -= diff;
+				
+				if (currentOffset > 0) {
+					currentOffset = 0;
+				} else if (Math.abs(currentOffset) > header.clientHeight) {
+					currentOffset = -header.clientHeight;
+				}
+
+				offset = currentOffset;
+				if (Math.abs(offset) >= header.clientHeight) {
+					offset = -128;
+				}
+				
+				header.style.top = offset + "px";
+			}
 		}
 
-		protected var _fixed:Boolean;
+
+		protected var _fixed:Boolean = false;
         /**
 		 *  A boolean flag to activate "fixed" effect selector.
 		 *  Optional. Makes the header always visible.
@@ -72,17 +140,63 @@ package org.apache.royale.jewel
             {
                 _fixed = value;
 
-                toggleClass("fixed", _fixed);
+                //toggleClass("fixed", _fixed);
+				setListenersForFixed();
             }
         }
 
+
+		COMPILE::JS
+		private var header:HTMLElement;
+
 		/**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
          */
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-			return addElementToWrapper(this, 'header');
+			header = addElementToWrapper(this,'header');
+			header.className = "topBarAppHeader";
+			header.style.top = "0px";
+			
+			var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+			div.appendChild(header);
+
+			positioner = div 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.9.3
+		 *  @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
+            {
+                header.appendChild(c.positioner);
+                (c as IUIBase).addedToParent();
+            }
+		}
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 222ab54..75b6c83 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -39,6 +39,15 @@ j|View
 	IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
 	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
 
+j|ApplicationResponsiveView
+	IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
+	//IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+
+.applicationResponsiveView
+	display: inline-flex
+	width: 100%
+	// height: 100%
+
 j|ApplicationView
 	IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
 	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
b/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
index 4ea0450..502ed0c 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
@@ -23,7 +23,7 @@
 
 .jewel.main
     width: 100%
-    height: 100%
+    // height: 100%
     
     // display: inline-block
     // flex-grow: 1
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_card.sass b/frameworks/projects/Jewel/src/main/sass/components/_card.sass
index 22c74d2..a5b3544 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_card.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_card.sass
@@ -29,6 +29,7 @@ $card-height: 180px !default
     min-width: $card-width
     min-height: $card-height
 
+    width: 350px
     //overflow: hidden
     //position: relative
     //z-index: 1
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_divider.sass b/frameworks/projects/Jewel/src/main/sass/components/_divider.sass
index c9c7f69..5a27600 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_divider.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_divider.sass
@@ -21,9 +21,6 @@
     height: 0
     margin: 0
     border: none
-    border-bottom-color: rgba(0, 0, 0, 0.12)
-    border-bottom-width: 1px
-    border-bottom-style: solid
-
+    
 j|Divider
 
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
index fb776d3..bca8b18 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
@@ -20,27 +20,14 @@
 // Jewel Drawer
 
 // Drawer variables
-$drawer-width-offset: 60px
-$drawer-max-width: 310px
+$drawer-float-width-offset: 60px
+$drawer-float-max-width: 310px
 
 .jewel.drawer
-    position: fixed
-    pointer-events: none
-    
-    top: 0
-    left: 0
-    
-    width: 100%
-    height: 100%
-    
-    overflow: hidden
-    contain: strict
-    
-    z-index: 5
 
-    &::before
-        position: absolute
-        display: block
+    &.float
+        position: fixed
+        pointer-events: none
         
         top: 0
         left: 0
@@ -48,35 +35,79 @@ $drawer-max-width: 310px
         width: 100%
         height: 100%
         
-        content: ""
-        opacity: 0
-
-    .drawermain
-        position: absolute
-        
-        display: flex
-        flex-direction: column
-        
-        left: 0
-        right: initial
+        overflow: hidden
+        contain: strict
         
-        height: 100%
-
-    &.open
-        pointer-events: auto
+        z-index: 5
 
         &::before
-            opacity: 1
+            position: absolute
+            display: block
+            
+            top: 0
+            left: 0
+            
+            width: 100%
+            height: 100%
+            
+            content: ""
+            opacity: 0
+
+        .drawermain
+            position: absolute
+            
+            display: flex
+            flex-direction: column
+            
+            left: 0
+            right: initial
+            
+            height: 100%
+
+        &.open
+            pointer-events: auto
+
+            &::before
+                opacity: 1
+
+    &.fixed
+        width: 0
 
+        .drawermain
+            display: inline-flex
+            flex-direction: column
+
+            left: 0
+            right: auto
+            
+            height: 100%
+            
+            overflow: hidden
+            touch-action: none
+  
+        &.open 
+            pointer-events: auto
+            
+            .drawermain
+                transform: none
+
+@media (min-width: $tablet)
+    .jewel.drawer
+        &.float
+            .drawermain
+                width: calc(100% - #{$drawer-float-width-offset})
+                max-width: $drawer-float-max-width
+
+// Used for float
+.remove-app-scroll
+    overflow: hidden
+
+// DrawerHeader
 .jewel.drawerheader
     position: relative
     display: flex
     flex-direction: column
     align-items: center
-    
-    // &::before 
-    //     display: block
-    //     content: ""
 
     div
         display: flex
@@ -87,6 +118,7 @@ $drawer-max-width: 310px
         left: 0
         align-items: flex-end
 
+// DrawerContent
 .jewel.drawercontent
     flex-grow: 1
     margin: 0
@@ -95,14 +127,7 @@ $drawer-max-width: 310px
     -webkit-overflow-scrolling: touch
     touch-action: pan-y
 
-@media (min-width: $tablet)
-    .jewel.drawer
-        .drawermain
-            width: calc(100% - #{$drawer-width-offset})
-            max-width: $drawer-max-width
 
-.remove-app-scroll
-    overflow: hidden
 
 j|Drawer
 
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
index cf34c56..e22157c 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
@@ -24,15 +24,19 @@ $top-app-bar-row-height: 64px
 $top-app-bar-button-size: 48px
 
 .jewel.topappbar
-    display: flex
-    flex-direction: column
-    justify-content: space-between
-    width: 100%
-    z-index: 4
-    
-    &.fixed
+    display: inline-flex
+    flex: 1 1 auto
+
+    .topBarAppHeader
+        display: flex
+        flex-direction: column
+        justify-content: space-between
+        width: 100%
+        z-index: 4
         position: fixed
-        top: 0px
+    
+        &.fixed
+            transition: box-shadow 200ms linear
 
 // this adjust the container declared after TopAppBar and with only one row (most common
case)
 // used by ApplicationMainContent 
@@ -70,18 +74,52 @@ $top-app-bar-button-size: 48px
         outline: none
         text-decoration: none
         cursor: pointer
+        opacity: 1
+
+        &:active, &:active:focus, &:focus
+            transition: opacity 0.4s 0ms
+            opacity: 0.5
+
+        // &:before
+        //     content: ""
+        //     background: #90EE90
+        //     display: block
+        //     position: absolute
+        //     padding-top: 300%
+        //     padding-left: 350%
+        //     margin-left: -20px!important
+        //     margin-top: -120%
+        //     opacity: 0
+        //     transition: all 0.8s
+        // &:after
+        //     content: ""
+        //     background: #90EE90
+        //     display: block
+        //     position: absolute
+        //     padding-top: 300%
+        //     padding-left: 350%
+        //     margin-left: -20px!important
+        //     margin-top: -120%
+        //     opacity: 0
+        //     transition: all 0.8s
+
+        // &:active:after 
+        //     padding: 0
+        //     margin: 0
+        //     opacity: 1
+        //     transition: 0s
 
-        &:hover, &:hover:focus, &:active, &:active:focus, &:focus
-            background: transparent
-            box-shadow: none
-            border: none
+        // &:hover, &:hover:focus, &:active, &:active:focus, &:focus
+        //     background: transparent
+        //     box-shadow: none
+        //     border: none
 
-        &[disabled]
-            background: transparent
-            box-shadow: none
-            border: none
+        // &[disabled]
+        //     background: transparent
+        //     box-shadow: none
+        //     border: none
 
-        .icon
+        .fonticon
             margin-left: 0px
             margin-right: 0px
 
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 5af5691..328cd68 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -229,15 +229,21 @@ j|Card {
   font-size: 16px;
 }
 
-.jewel.drawer {
+.jewel.divider {
+  border-bottom-color: #d9d9d9;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
   color: rgba(0, 0, 0, 0.8);
 }
-.jewel.drawer::before {
+.jewel.drawer.float::before {
   background-color: rgba(0, 0, 0, 0.65);
   will-change: opacity;
   transition: opacity 0.4s 0ms;
 }
-.jewel.drawer .drawermain {
+.jewel.drawer.float .drawermain {
   box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
   transform: translateX(-104%);
   will-change: transform;
@@ -246,10 +252,25 @@ j|Card {
   background-color: white;
   transition: transform 250ms 0ms;
 }
-.jewel.drawer.open .drawermain {
+.jewel.drawer.float.open .drawermain {
   transform: none;
   transition: transform 300ms 0ms;
 }
+.jewel.drawer.fixed .drawermain {
+  width: 240px;
+  transform: translateX(-104%);
+  will-change: transform;
+  transition: transform 250ms 0ms;
+  background-color: white;
+  border-left: 0;
+  border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+  width: 240px;
+}
+.jewel.drawer.fixed.open .drawermain {
+  transition: transform 300ms 0ms;
+}
 
 .jewel.drawerheader {
   background: linear-gradient(#54b7f3, #24a3ef);
@@ -257,6 +278,9 @@ j|Card {
   color: #FFFFFF;
   padding: 16px;
 }
+.jewel.drawerheader::before {
+  padding-top: 56.25%;
+}
 .jewel.drawerheader div {
   padding: 16px;
 }
@@ -521,11 +545,10 @@ j|Card {
   color: silver;
 }
 
-.jewel.topappbar {
+.jewel.topappbar .topBarAppHeader {
   background: linear-gradient(#54b7f3, #24a3ef);
   border-top: 1px solid #83cbf6;
   border-bottom: 1px solid #0d79ba;
-  box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
   color: #FFFFFF;
   text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
 }
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 27b82fd..81c1946 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -17,6 +17,12 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
+// DEVICE DIMENSIONS
+$phone: 0px
+$tablet: 768px
+$desktop: 992px
+$widescreen: 1200px
+
 // TRANSITIONS
 $transitions-enable: false
 $transition-duration: .3s
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_divider.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_divider.sass
similarity index 92%
copy from frameworks/projects/Jewel/src/main/sass/components/_divider.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-primary/_divider.sass
index c9c7f69..5ebc81c 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_divider.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_divider.sass
@@ -18,10 +18,7 @@
 ////////////////////////////////////////////////////////////////////////////////
 
 .jewel.divider
-    height: 0
-    margin: 0
-    border: none
-    border-bottom-color: rgba(0, 0, 0, 0.12)
+    border-bottom-color: $default-color
     border-bottom-width: 1px
     border-bottom-style: solid
 
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 5409cc5..0879a7f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass
@@ -27,30 +27,56 @@ $drawer-transition-open: animation-standard(transform, $drawer-transition-open-t
 $drawer-overlay-color: #000 !default
 $drawer-overlay-opacity: .65 !default
 
+$drawer-fixed-width: 240px
+
 .jewel.drawer
-    color: rgba(0, 0, 0, 0.8)
-    
-    &::before
-        background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity)
-        will-change: opacity
-        transition: animation-standard(opacity, .4s)
-
-
-    .drawermain
-        box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7)
-        transform: translateX(-104%)
-        will-change: transform
-        width: calc(100% - #{$drawer-width-offset})
-        max-width: $drawer-max-width
-        background-color: lighten($default-color, 20%)
-        transition: $drawer-transition-close
-    
-    &.open        
+
+    &.float
+        color: rgba(0, 0, 0, 0.8)
+        
+        &::before
+            background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity)
+            will-change: opacity
+            transition: animation-standard(opacity, .4s)
+
+
         .drawermain
-            transform: none
-            transition: $drawer-transition-open
+            box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7)
+            transform: translateX(-104%)
+            will-change: transform
+            width: calc(100% - #{$drawer-width-offset})
+            max-width: $drawer-max-width
+            background-color: lighten($default-color, 20%)
+            transition: $drawer-transition-close
 
+        &.open        
+            .drawermain
+                transform: none
+                transition: $drawer-transition-open
 
+    &.fixed
+
+        .drawermain
+            width: $drawer-fixed-width
+            transform: translateX(-104%)
+            // transform: translateX(-100%) translateX(-20px)
+            will-change: transform
+            //max-width: $drawer-max-width
+            transition: $drawer-transition-close
+        
+            background-color: lighten($default-color, 20%)
+            border-left: 0
+            border-right: 1px solid $default-color
+
+        &.open
+            width: $drawer-fixed-width
+            
+            .drawermain
+                transition: $drawer-transition-open
+
+    // &.permanent
+
+// DrawerHeader
 .jewel.drawerheader
     @if $flat
         background: $primary-color
@@ -63,14 +89,16 @@ $drawer-overlay-opacity: .65 !default
     padding: $drawer-header-padding
 
     &::before 
-        // padding-top: 9 / 16 * 100%
+        padding-top: 9 / 16 * 100%
 
     div
         padding: $drawer-header-padding
 
+// DrawerContent
 .jewel.drawercontent
 
 
+
 j|Drawer
 
 j|DrawerHeader
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
index 27fbe11..c1b16d6 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
@@ -27,23 +27,24 @@ $top-app-bar-button-padding: 12px
 
 .jewel.topappbar
     
-    @if $flat
-        background: $primary-color
-        border: 0px solid
-    @else
-        background: linear-gradient(lighten($primary-color, 5%), darken($primary-color, 5%))
-        border-top: 1px solid lighten($primary-color, 15%)
-        border-bottom: 1px solid darken($primary-color, 20%)
-        box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7)
-    
-    color: $font-theme-color
+    .topBarAppHeader
+        @if $flat
+            background: $primary-color
+            border: 0px solid
+        @else
+            background: linear-gradient(lighten($primary-color, 5%), darken($primary-color,
5%))
+            border-top: 1px solid lighten($primary-color, 15%)
+            border-bottom: 1px solid darken($primary-color, 20%)
+            // box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7)
+        
+        color: $font-theme-color
 
-    @if not $flat //and $text-color == $font-theme-color
-        text:
-            shadow: 0 -1px 0 rgba(darken($primary-color, 30%), .7)
+        @if not $flat //and $text-color == $font-theme-color
+            text:
+                shadow: 0 -1px 0 rgba(darken($primary-color, 30%), .7)
 
-    &.fixed
-        // transition: box-shadow 200ms linear
+        //&.fixed
+            // transition: box-shadow 200ms linear
 
 .jewel.topappbarrow 
     
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index ea81dd4..3c792ef 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -31,6 +31,7 @@
 @import "components-primary/card"
 @import "components-primary/checkbox"
 @import "components-primary/controlbar"
+@import "components-primary/divider"
 @import "components-primary/drawer"
 @import "components-primary/dropdownlist"
 @import "components-primary/itemRenderer"


Mime
View raw message