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