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 <[email protected]>
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"
