From commits-return-4707-archive-asf-public=cust-asf.ponee.io@royale.apache.org Mon Jul 9 23:38:38 2018 Return-Path: X-Original-To: archive-asf-public@cust-asf.ponee.io Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by mx-eu-01.ponee.io (Postfix) with SMTP id BA578180676 for ; Mon, 9 Jul 2018 23:38:36 +0200 (CEST) Received: (qmail 93978 invoked by uid 500); 9 Jul 2018 21:38:35 -0000 Mailing-List: contact commits-help@royale.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@royale.apache.org Delivered-To: mailing list commits@royale.apache.org Received: (qmail 93788 invoked by uid 99); 9 Jul 2018 21:38:35 -0000 Received: from ec2-52-202-80-70.compute-1.amazonaws.com (HELO gitbox.apache.org) (52.202.80.70) by apache.org (qpsmtpd/0.29) with ESMTP; Mon, 09 Jul 2018 21:38:35 +0000 Received: by gitbox.apache.org (ASF Mail Server at gitbox.apache.org, from userid 33) id 0090A80766; Mon, 9 Jul 2018 21:38:34 +0000 (UTC) Date: Mon, 09 Jul 2018 21:38:34 +0000 To: "commits@royale.apache.org" Subject: [royale-asjs] branch develop updated: Add Float/Fixed modes to Drawer for responsivenes. MIME-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 8bit Message-ID: <153117231491.24277.14475653739161613305@gitbox.apache.org> From: carlosrovira@apache.org X-Git-Host: gitbox.apache.org X-Git-Repo: royale-asjs X-Git-Refname: refs/heads/develop X-Git-Reftype: branch X-Git-Oldrev: b36996d2cd4295518a3aa161cb8b3fd561181a5b X-Git-Newrev: 777ce24f7c2b2392dd7fb67d16e200f46ef53993 X-Git-Rev: 777ce24f7c2b2392dd7fb67d16e200f46ef53993 X-Git-NotificationType: ref_changed_plus_diff X-Git-Multimail-Version: 1.5.dev Auto-Submitted: auto-generated 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 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. + 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. - + @@ -79,7 +80,7 @@ limitations under the License. - + @@ -87,7 +88,7 @@ limitations under the License. - + 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"