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 2020/08/31 16:29:42 UTC
[royale-asjs] branch develop updated: jewel-tabbar: more
improvement to make it more flexible. Make TabBarButtonItemRenderer extend
ListItemRenderer to get other list possibilities like alignment
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 4524740 jewel-tabbar: more improvement to make it more flexible. Make TabBarButtonItemRenderer extend ListItemRenderer to get other list possibilities like alignment
4524740 is described below
commit 4524740e74fc84406f92b14e37f6259ebadf8d6f
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Aug 31 18:29:27 2020 +0200
jewel-tabbar: more improvement to make it more flexible. Make TabBarButtonItemRenderer extend ListItemRenderer to get other list possibilities like alignment
---
.../projects/Jewel/src/main/resources/defaults.css | 7 +--
.../Jewel/src/main/resources/jewel-manifest.xml | 2 +
.../royale/jewel/beads/controls/TextAlign.as | 2 +-
.../itemRenderers/TabBarButtonItemRenderer.as | 51 ++--------------------
.../Jewel/src/main/sass/components/_tabbar.sass | 11 ++---
.../JewelTheme/src/main/resources/defaults.css | 8 +++-
.../src/main/sass/components-primary/_tabbar.sass | 9 +++-
7 files changed, 26 insertions(+), 64 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index a7b016f..45d1ec7 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3674,19 +3674,15 @@ j|TabBar {
.jewel.tabbarbutton {
margin: 0;
- position: relative;
- display: flex;
flex: 1 0 auto !important;
+ position: relative;
white-space: nowrap;
- justify-content: center;
z-index: 1;
overflow: initial;
}
.jewel.tabbarbutton > .content {
display: flex;
- position: relative;
align-items: center;
- justify-content: center;
height: inherit;
}
.jewel.tabbarbutton > .tab-internal-span {
@@ -3717,6 +3713,7 @@ j|TabBar {
j|TabBarButtonItemRenderer {
IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
}
j|TabBarContent {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index d9b0b77..80f662b 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -232,6 +232,8 @@
<component id="DateItemRenderer" class="org.apache.royale.jewel.itemRenderers.DateItemRenderer"/>
<component id="DropDownListItemRenderer" class="org.apache.royale.jewel.itemRenderers.DropDownListItemRenderer"/>
+ <component id="ListPresentationModel" class="org.apache.royale.jewel.beads.models.ListPresentationModel"/>
+
<component id="Viewport" class="org.apache.royale.jewel.supportClasses.Viewport"/>
<component id="ScrollingViewport" class="org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport"/>
<component id="NoViewport" class="org.apache.royale.jewel.supportClasses.NoViewport"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/TextAlign.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/TextAlign.as
index 4589742..2b25daa 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/TextAlign.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/TextAlign.as
@@ -67,7 +67,7 @@ package org.apache.royale.jewel.beads.controls
return _align;
}
- [Inspectable(category="General", enumeration="left,right,center", defaultValue="left")]
+ [Inspectable(category="General", enumeration="left,right,center", defaultValue="left")]
public function set align(value:String):void
{
if(_align !== value)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
index 56f3d27..718e49f 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
@@ -26,7 +26,6 @@ package org.apache.royale.jewel.itemRenderers
import org.apache.royale.core.StyledMXMLItemRenderer;
import org.apache.royale.events.Event;
import org.apache.royale.html.util.getLabelFromData;
- import org.apache.royale.jewel.supportClasses.INavigationRenderer;
/**
* The TabBarButtonItemRenderer defines the basic Item Renderer for a Jewel
@@ -38,7 +37,7 @@ package org.apache.royale.jewel.itemRenderers
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public class TabBarButtonItemRenderer extends StyledMXMLItemRenderer implements INavigationRenderer
+ public class TabBarButtonItemRenderer extends ListItemRenderer
{
/**
* constructor.
@@ -55,52 +54,10 @@ package org.apache.royale.jewel.itemRenderers
typeNames = "jewel tabbarbutton";
}
- private var _text:String = "";
+ // override public function set align(value:String):void
+ // {
- [Bindable(event="textChange")]
- /**
- * The text of the navigation link
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get text():String
- {
- return _text;
- }
-
- public function set text(value:String):void
- {
- if(value != _text) {
- _text = value;
- COMPILE::JS
- {
- if(MXMLDescriptor == null)
- {
- element.innerHTML = _text;
- }
- }
- dispatchEvent(new Event('textChange'));
- }
- }
-
- /**
- * 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.4
- */
- override public function set data(value:Object):void
- {
- text = getLabelFromData(this, value);
- super.data = value;
- }
+ // }
COMPILE::JS
public var span:HTMLSpanElement;
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index f28b26d..0531a9e 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -68,19 +68,17 @@ $tabbarbutton-margin: 0 !default
&.tabbarbutton
margin: $tabbarbutton-margin //to avoid margin in safari
- position: relative
- display: flex
flex: 1 0 auto !important
+ position: relative
white-space: nowrap
- justify-content: center
z-index: 1
overflow: initial
> .content
display: flex
- position: relative
align-items: center
- justify-content: center
+ // position: relative
+ // justify-content: center
height: inherit
@@ -112,8 +110,7 @@ $tabbarbutton-margin: 0 !default
j|TabBarButtonItemRenderer
IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController")
- // IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
-
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
j|TabBarContent
IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView")
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index b665008..02282c9 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -1177,6 +1177,10 @@ j|FormItem {
flex: 1 0 0% !important;
}
+j|TabBar {
+ itemsExpand: true;
+}
+
.jewel.tabbarbutton {
font-size: 1em;
font-weight: 500;
@@ -1202,8 +1206,8 @@ j|FormItem {
background: rgba(60, 173, 241, 0.4);
}
-j|TabBar {
- itemsExpand: true;
+j|TabBarButtonItemRenderer {
+ itemsHorizontalAlign: itemsCenter;
}
.jewel.simpletable {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
index fb2947a..fb4c642 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
@@ -27,6 +27,10 @@
> *
flex: 1 0 0% !important
+j|TabBar
+ itemsExpand: true
+
+
// Jewel TabBarButtonItemRenderer
// TabBarButtonItemRenderer variables
@@ -72,5 +76,6 @@
color: darken($primary-color, 15%)
background: rgba($primary-color, .4)
-j|TabBar
- itemsExpand: true
\ No newline at end of file
+
+j|TabBarButtonItemRenderer
+ itemsHorizontalAlign: itemsCenter
\ No newline at end of file