You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/09/15 21:39:00 UTC
[royale-asjs] branch develop updated: Jewel TabBar first version
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 ecefae5 Jewel TabBar first version
ecefae5 is described below
commit ecefae5c4112dcdca2a0c4abd54d4f1315205d70
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Sep 15 23:38:52 2018 +0200
Jewel TabBar first version
---
.../JewelExample/src/main/royale/MainContent.mxml | 1 +
.../src/main/royale/TabBarPlayGround.mxml | 73 ++++++++++++++++++++++
.../src/main/royale/models/MainNavigationModel.as | 11 ++--
.../src/main/royale/vos/TabBarButtonVO.as | 21 +++++--
.../projects/Jewel/src/main/resources/defaults.css | 60 ++++++++++++------
.../Jewel/src/main/resources/jewel-manifest.xml | 2 +
.../main/royale/org/apache/royale/jewel/TabBar.as | 68 ++++++++++++++++++++
.../itemRenderers/NavigationLinkItemRenderer.as | 2 +-
...ItemRenderer.as => TabBarButtonItemRenderer.as} | 14 +++--
.../src/main/sass/components/_itemRenderer.sass | 9 +--
.../Jewel/src/main/sass/components/_list.sass | 15 +----
.../src/main/sass/components/_navigation.sass | 27 +++++++-
.../sass/components/{_list.sass => _tabbar.sass} | 54 +++++++---------
.../projects/Jewel/src/main/sass/defaults.sass | 1 +
.../JewelTheme/src/main/resources/defaults.css | 40 ++++++++----
.../sass/components-primary/_itemRenderer.sass | 18 ------
.../main/sass/components-primary/_navigation.sass | 28 ++++++++-
.../{_itemRenderer.sass => _tabbar.sass} | 28 ++++-----
.../themes/JewelTheme/src/main/sass/defaults.sass | 1 +
19 files changed, 334 insertions(+), 139 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index 4398472..d9276f2 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -135,6 +135,7 @@ limitations under the License.
<local:FormsValidationPlayGround id="form_validation_panel"/>
<local:DropDownListPlayGround id="dropdownlist_panel"/>
<local:SnackbarPlayGround id="snackbar_panel"/>
+ <local:TabBarPlayGround id="tabbar_panel"/>
</j:ApplicationMainContent>
</j:ApplicationResponsiveView>
diff --git a/examples/royale/JewelExample/src/main/royale/TabBarPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TabBarPlayGround.mxml
new file mode 100644
index 0000000..61a5531
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/TabBarPlayGround.mxml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+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.
+
+-->
+<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:html="library://ns.apache.org/royale/html"
+ xmlns:js="library://ns.apache.org/royale/basic">
+
+ <fx:Script>
+ <![CDATA[
+ import org.apache.royale.collections.ArrayList;
+ import vos.TabBarButtonVO;
+
+ private function changeHandler(event:Event):void
+ {
+ // var item:TabBarButtonVO = (event.target as TabBar).selectedItem as TabBarButtonVO;
+ //main.showContent(item.href);
+ }
+
+ private var _tabBarNavigation:ArrayList = new ArrayList([
+ new TabBarButtonVO("Tab1", "#", null),
+ new TabBarButtonVO("Tab2", "#", null),
+ new TabBarButtonVO("Tab3", "#", null),
+ new TabBarButtonVO("Tab4", "#", null)
+ ]);
+
+ public function get tabBarNavigation():ArrayList
+ {
+ return _tabBarNavigation;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel TabBar"/>
+
+ <j:TabBar id="tabbar">
+ <j:beads>
+ <js:ConstantBinding
+ sourcePropertyName="tabBarNavigation"
+ destinationPropertyName="dataProvider"/>
+ </j:beads>
+ </j:TabBar>
+ </j:Card>
+ </j:GridCell>
+
+ </j:Grid>
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
index 41b2627..68874be 100644
--- a/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
+++ b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
@@ -42,10 +42,8 @@ package models
new NavigationLinkVO("Forms & Validation", "form_validation_panel", MaterialIconType.ASSIGNMENT_TURNED_IN),
new NavigationLinkVO("DropDownList", "dropdownlist_panel", MaterialIconType.CREDIT_CARD),
new NavigationLinkVO("Snackbar", "snackbar_panel", MaterialIconType.VIDEO_LABEL)
-
// new NavigationLinkVO("Menu", "menus_panel"),
// new NavigationLinkVO("Loading", "loading_panel")
-
]);
public function get controlsDrawerNavigation():ArrayList
{
@@ -53,12 +51,11 @@ package models
}
private var _containerDrawerNavigation:ArrayList = new ArrayList([
- new NavigationLinkVO("Card", "card_panel", "web_asset"),
- new NavigationLinkVO("Grid", "grid_panel", "grid_on"),
- new NavigationLinkVO("Tables", "tables_panel", "view_quilt")
-
+ new NavigationLinkVO("Card", "card_panel", MaterialIconType.WEB_ASSET),
+ new NavigationLinkVO("Grid", "grid_panel", MaterialIconType.GRID_ON),
+ new NavigationLinkVO("Tables", "tables_panel", MaterialIconType.VIEW_QUILT),
+ new NavigationLinkVO("TabBar", "tabbar_panel", MaterialIconType.TAB)
// new NavigationLinkVO("Tabs", "tabs_panel")
-
]);
public function get containerDrawerNavigation():ArrayList
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_navigation.sass b/examples/royale/JewelExample/src/main/royale/vos/TabBarButtonVO.as
similarity index 72%
copy from frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
copy to examples/royale/JewelExample/src/main/royale/vos/TabBarButtonVO.as
index 0479810..a859f89 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
+++ b/examples/royale/JewelExample/src/main/royale/vos/TabBarButtonVO.as
@@ -16,9 +16,20 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
+package vos
+{
+ [Bindable]
+ public class TabBarButtonVO
+ {
+ public var label:String;
+ public var href:String;
+ public var icon:String;
-
-j|Navigation
-
-.jewel.navigation
-
\ No newline at end of file
+ public function TabBarButtonVO(label:String, href:String, icon:String = null)
+ {
+ this.label = label;
+ this.href = href;
+ this.icon = icon;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 22d3246..b599428 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -684,7 +684,7 @@ j|ImageButton {
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ImageModel");
}
-.jewel.item, .jewel.navigationlink {
+.jewel.item, .jewel.navigationlink, .jewel.tabbarbutton {
display: flex;
min-height: 34px;
text-decoration: none;
@@ -694,25 +694,13 @@ j|ImageButton {
overflow: hidden;
cursor: auto;
}
-.jewel.item.selectable, .jewel.navigationlink.selectable {
+.jewel.item.selectable, .jewel.navigationlink.selectable, .jewel.tabbarbutton.selectable {
cursor: pointer;
}
-.jewel.item .fonticon, .jewel.navigationlink .fonticon {
+.jewel.item .fonticon, .jewel.navigationlink .fonticon, .jewel.tabbarbutton .fonticon {
cursor: inherit;
}
-j|ListItemRenderer {
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
-}
-
-.jewel.navigationlink {
- min-height: 48px;
-}
-
-j|NavigationLinkItemRenderer {
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
-}
-
.jewel.label {
cursor: default;
white-space: nowrap;
@@ -2905,6 +2893,15 @@ j|List {
IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView");
}
+j|ListItemRenderer {
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
+}
+
+@media -royale-swf {
+ j|List {
+ IContentView: ClassReference("org.apache.royale.jewel.supportClasses.list.DataGroup");
+ }
+}
j|Navigation {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView");
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController");
@@ -2917,11 +2914,14 @@ j|Navigation {
IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView");
}
-@media -royale-swf {
- j|List {
- IContentView: ClassReference("org.apache.royale.jewel.supportClasses.list.DataGroup");
- }
+.jewel.navigationlink {
+ min-height: 48px;
}
+
+j|NavigationLinkItemRenderer {
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
+}
+
.jewel.numericstepper .jewel.textinput {
display: inline-flex;
}
@@ -3194,6 +3194,28 @@ j|Snackbar {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.SnackbarView");
}
+j|TabBar {
+ 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.HorizontalLayout");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer");
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport");
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView");
+}
+
+.jewel.tabbarbutton {
+ min-height: 48px;
+ margin: 0;
+ padding: 0.68em 1.12em;
+}
+
+j|TabBarButtonItemRenderer {
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
+}
+
.jewel.simpletable {
position: relative;
white-space: nowrap;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 152f5ca..ede8800 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -77,6 +77,8 @@
<component id="CheckBoxValidator" class="org.apache.royale.jewel.beads.validators.CheckBoxValidator"/>
<component id="RadioButtonValidator" class="org.apache.royale.jewel.beads.validators.RadioButtonValidator"/>
+ <component id="TabBar" class="org.apache.royale.jewel.TabBar"/>
+ <component id="TabBarButtonItemRenderer" class="org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer"/>
<component id="Navigation" class="org.apache.royale.jewel.Navigation"/>
<component id="NavigationLinkItemRenderer" class="org.apache.royale.jewel.itemRenderers.NavigationLinkItemRenderer"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TabBar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TabBar.as
new file mode 100644
index 0000000..6f232ed
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TabBar.as
@@ -0,0 +1,68 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ import org.apache.royale.events.MouseEvent;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The Navigation class is a List used for navigate other organized content
+ * in a Royale Application. In HTML is represented by a <nav> tag in HTML and
+ * It parents a list of links.
+ * By default it uses TabBarButtonItemRenderer class to define each item.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TabBar extends List
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TabBar()
+ {
+ super();
+
+ typeNames = "jewel tabbar";
+
+ addEventListener(MouseEvent.CLICK, internalMouseHandler);
+ }
+
+ private function internalMouseHandler(event:MouseEvent):void
+ {
+ COMPILE::JS
+ {
+ // avoid a link tries to open a new page
+ event.preventDefault();
+ }
+ }
+ }
+}
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
index a108a84..53a70e9 100644
--- 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
@@ -147,7 +147,7 @@ package org.apache.royale.jewel.itemRenderers
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- var a:WrappedHTMLElement = addElementToWrapper(this,'a');
+ var a:WrappedHTMLElement = addElementToWrapper(this, 'a');
a.setAttribute('href', href);
if(MXMLDescriptor == null)
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/TabBarButtonItemRenderer.as
similarity index 91%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/NavigationLinkItemRenderer.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
index a108a84..904d7fd 100644
--- 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/TabBarButtonItemRenderer.as
@@ -29,8 +29,8 @@ package org.apache.royale.jewel.itemRenderers
/**
- * The NavigationLinkItemRenderer defines the basic Item Renderer for a Jewel
- * Navigation List Component. It handles Objects with "label" and "href" data.
+ * The TabBarButtonItemRenderer defines the basic Item Renderer for a Jewel
+ * TabBar List Component. It handles Objects with "label" and "href" data.
* Extend this (you can do it in MXML) to support more data like for example: icon data.
*
* @langversion 3.0
@@ -38,7 +38,7 @@ package org.apache.royale.jewel.itemRenderers
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public class NavigationLinkItemRenderer extends StyledMXMLItemRenderer implements INavigationRenderer
+ public class TabBarButtonItemRenderer extends StyledMXMLItemRenderer implements INavigationRenderer
{
/**
* constructor.
@@ -48,11 +48,11 @@ package org.apache.royale.jewel.itemRenderers
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function NavigationLinkItemRenderer()
+ public function TabBarButtonItemRenderer()
{
super();
- typeNames = "jewel navigationlink";
+ typeNames = "jewel tabbarbutton";
}
private var _href:String = "#";
@@ -147,7 +147,7 @@ package org.apache.royale.jewel.itemRenderers
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- var a:WrappedHTMLElement = addElementToWrapper(this,'a');
+ var a:WrappedHTMLElement = addElementToWrapper(this, 'a');
a.setAttribute('href', href);
if(MXMLDescriptor == null)
@@ -170,6 +170,8 @@ package org.apache.royale.jewel.itemRenderers
// there's no selection only hover state
if(hoverable)
toggleClass("hovered", hovered);
+ if(selectable)
+ toggleClass("selected", selected);
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
index 38a2063..98fd6e8 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
@@ -22,7 +22,7 @@
// ListItemRenderer variables
$item-min-height: 34px
-.jewel.item, .jewel.navigationlink
+.jewel.item, .jewel.navigationlink, .jewel.tabbarbutton
display: flex
min-height: $item-min-height
text-decoration: none
@@ -38,11 +38,4 @@ $item-min-height: 34px
.fonticon
cursor: inherit
-j|ListItemRenderer
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
-.jewel.navigationlink
- min-height: 48px
-
-j|NavigationLinkItemRenderer
- 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/_list.sass b/frameworks/projects/Jewel/src/main/sass/components/_list.sass
index a776c8b..a8e8703 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_list.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_list.sass
@@ -37,19 +37,10 @@ j|List
//IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArraySelectionModel")
//IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData")
+j|ListItemRenderer
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
-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.scrollbar.ScrollingViewport")
- IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
- IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel")
- IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.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/_navigation.sass b/frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
index 0479810..c560515 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
@@ -18,7 +18,30 @@
////////////////////////////////////////////////////////////////////////////////
-j|Navigation
+// Jewel Navigation
+
+// Navigation variables
.jewel.navigation
-
\ No newline at end of file
+
+
+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.scrollbar.ScrollingViewport")
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel")
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
+
+
+// Jewel NavigationLinkItemRenderer
+
+// NavigationLinkItemRenderer variables
+.jewel.navigationlink
+ min-height: 48px
+
+j|NavigationLinkItemRenderer
+ 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/_list.sass b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
similarity index 50%
copy from frameworks/projects/Jewel/src/main/sass/components/_list.sass
copy to frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index a776c8b..dd02c19 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_list.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -17,44 +17,34 @@
//
////////////////////////////////////////////////////////////////////////////////
-// Jewel List
-// List variables
-
-.jewel.list, .jewel.navigation
- align-items: stretch
- align-content: flex-start
-
-j|List
- 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.ListItemRenderer")
- IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
- IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
- IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel")
- IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
- //IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArraySelectionModel")
- //IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData")
+// Jewel TabBar
+// TabBar variables
-j|Navigation
+
+.jewel.tabbar
+
+
+j|TabBar
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")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
- IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.NavigationLinkItemRenderer")
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer")
IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel")
IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
- // IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData")
-
-@media -royale-swf
- j|List
- //---iBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
- //---iBorderBead: ClassReference('org.apache.royale.html.beads.SingleLineBorderBead')
- //---iBorderModel: ClassReference('org.apache.royale.html.beads.models.SingleLineBorderModel')
- IContentView: ClassReference("org.apache.royale.jewel.supportClasses.list.DataGroup")
- //font-size: 11px
- //font-family: Arial
\ No newline at end of file
+
+// Jewel TabBarButtonItemRenderer
+$tabbarbutton-margin: 0 !default
+$tabbarbutton-padding: 0.68em 1.12em !default
+
+// TabBarButtonItemRenderer variables
+.jewel.tabbarbutton
+ min-height: 48px
+ margin: $tabbarbutton-margin
+ padding: $tabbarbutton-padding
+
+j|TabBarButtonItemRenderer
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index f261276..baff257 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -46,6 +46,7 @@
@import "components/sectioncontent"
@import "components/slider"
@import "components/snackbar"
+@import "components/tabbar"
@import "components/table"
@import "components/text"
@import "components/textinput"
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 6127187..4e3f71d 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -424,18 +424,6 @@ j|Card {
background: #24a3ef !important;
}
-.jewel.navigationlink {
- margin: 0;
- padding: 0 16px;
- font-family: "Lato", sans-serif;
- font-size: 1em;
- font-weight: 500;
- color: rgba(0, 0, 0, 0.6);
-}
-.jewel.navigationlink.hovered:hover {
- background: #f3f3f3 !important;
-}
-
.jewel.label {
font-family: "Lato", sans-serif;
font-size: 1em;
@@ -452,6 +440,18 @@ j|Card {
background-color: #ffffff;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink.hovered:hover {
+ background: #f3f3f3 !important;
+}
+
.jewel.numericstepper .jewel.textinput input {
width: 8em;
border-radius: 0.25rem 0px 0px 0.25rem;
@@ -660,6 +660,22 @@ j|Card {
border-radius: 0px;
}
}
+.jewel.tabbarbutton {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.tabbarbutton.hovered:hover {
+ background: #f3f3f3 !important;
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+ color: #FFFFFF;
+ background: #54b7f3 !important;
+}
+
.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
index f3c92d8..d43e66d 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
@@ -31,21 +31,3 @@ $itemrenderer-padding: 16px
&.selected, &.selectable:active
color: $font-theme-color
background: darken($primary-color, 5%) !important
-
-.jewel.navigationlink
- margin: 0
- padding: 0 $itemrenderer-padding
- font:
- family: $font-stack
- size: $font-size
- weight: $font-weight-normal + 100
-
- color: rgba(black, 0.6)
-
- &.hovered:hover
- //color: $font-theme-color
- background: lighten($default-color, 10%) !important
-
- // &.selectable:active
- // //color: $font-theme-color
- // background: $default-color !important
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_navigation.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_navigation.sass
index 66ff92d..6d772de 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_navigation.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_navigation.sass
@@ -18,7 +18,31 @@
////////////////////////////////////////////////////////////////////////////////
-j|Navigation
+// Jewel Navigation
+
+// Navigation variables
.jewel.navigation
- background-color: #ffffff
\ No newline at end of file
+ background-color: #ffffff
+
+
+// Jewel NavigationLinkItemRenderer
+
+// NavigationLinkItemRenderer variables
+.jewel.navigationlink
+ margin: 0
+ padding: 0 $itemrenderer-padding
+ font:
+ family: $font-stack
+ size: $font-size
+ weight: $font-weight-normal + 100
+
+ color: rgba(black, 0.6)
+
+ &.hovered:hover
+ //color: $font-theme-color
+ background: lighten($default-color, 10%) !important
+
+ // &.selectable:active
+ // //color: $font-theme-color
+ // background: $default-color !important
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
similarity index 76%
copy from frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
index f3c92d8..8ee998c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
@@ -17,22 +17,20 @@
//
////////////////////////////////////////////////////////////////////////////////
-// Jewel ListItemRenderer
-$itemrenderer-padding: 16px
+// Jewel TabBar
-// ListItemRenderer variables
-.jewel.item
- padding: 8px
+// TabBar variables
- &.hovered:hover
- color: $font-theme-color
- background: $primary-color !important
- &.selected, &.selectable:active
- color: $font-theme-color
- background: darken($primary-color, 5%) !important
+.jewel.tabbar
-.jewel.navigationlink
+// Jewel TabBarButtonItemRenderer
+
+// TabBarButtonItemRenderer variables
+// Jewel NavigationLinkItemRenderer
+
+// NavigationLinkItemRenderer variables
+.jewel.tabbarbutton
margin: 0
padding: 0 $itemrenderer-padding
font:
@@ -46,6 +44,6 @@ $itemrenderer-padding: 16px
//color: $font-theme-color
background: lighten($default-color, 10%) !important
- // &.selectable:active
- // //color: $font-theme-color
- // background: $default-color !important
\ No newline at end of file
+ &.selected, &.selectable:active
+ color: $font-theme-color
+ background: lighten($primary-color, 5%) !important
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 7d9a262..1a0b58d 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -46,6 +46,7 @@
@import "components-primary/radiobutton"
@import "components-primary/slider"
@import "components-primary/snackbar"
+@import "components-primary/tabbar"
@import "components-primary/table"
@import "components-primary/text"
@import "components-primary/textinput"