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