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/30 13:48:38 UTC
[royale-asjs] branch develop updated: jewel-tabbar: make renderers
more flexible. we can now add paddings to the extended renderers. For
restricted renderer we create a new internal element to position indicator
and avoid to be affected by user supplied paddings
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 c7f5533 jewel-tabbar: make renderers more flexible. we can now add paddings to the extended renderers. For restricted renderer we create a new internal element to position indicator and avoid to be affected by user supplied paddings
c7f5533 is described below
commit c7f5533b4eeb5b7df2da5562709cf734cfc26a27
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Aug 30 15:48:24 2020 +0200
jewel-tabbar: make renderers more flexible. we can now add paddings to the extended renderers. For restricted renderer we create a new internal element to position indicator and avoid to be affected by user supplied paddings
---
.../TabBarHorizontalIconItemRenderer.mxml | 11 +++----
.../TabBarVerticalIconItemRenderer.mxml | 9 +++---
.../projects/Jewel/src/main/resources/defaults.css | 7 +++++
.../itemRenderers/ListItemRendererInitializer.as | 6 ++--
.../itemRenderers/TabBarItemRendererInitializer.as | 32 ++++++++++++++++++--
...tonInidicatorRestrictedToContentItemRenderer.as | 35 ++++++++++++++++++----
.../itemRenderers/TabBarButtonItemRenderer.as | 10 +++++--
.../Jewel/src/main/sass/components/_tabbar.sass | 8 ++++-
.../JewelTheme/src/main/resources/defaults.css | 4 ---
.../src/main/sass/components-primary/_tabbar.sass | 6 ++--
10 files changed, 98 insertions(+), 30 deletions(-)
diff --git a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
index ab6c292..c6b04c4 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
@@ -17,11 +17,11 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
-<j:TabBarButtonInidicatorRestrictedToContentItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
+<j:TabBarButtonItemRenderer
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns="http://www.w3.org/1999/xhtml">
+ xmlns:html="library://ns.apache.org/royale/html">
<fx:Script>
<![CDATA[
@@ -36,7 +36,8 @@ limitations under the License.
</fx:Script>
<j:beads>
- <js:ItemRendererDataBinding />
+ <js:ItemRendererDataBinding/>
+ <j:Paddings paddingTop="12" paddingBottom="12"/>
</j:beads>
<j:HGroup gap="4" itemsVerticalAlign="itemsCenter">
@@ -45,5 +46,5 @@ limitations under the License.
<html:Span text="{tabButton.label}"/>
</j:HGroup>
-</j:TabBarButtonInidicatorRestrictedToContentItemRenderer>
+</j:TabBarButtonItemRenderer>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
index c5d5c4f..dfc7b62 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
@@ -17,11 +17,11 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
-<j:TabBarButtonInidicatorRestrictedToContentItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
+<j:TabBarButtonInidicatorRestrictedToContentItemRenderer
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns="http://www.w3.org/1999/xhtml">
+ xmlns:html="library://ns.apache.org/royale/html">
<fx:Script>
<![CDATA[
@@ -36,7 +36,8 @@ limitations under the License.
</fx:Script>
<j:beads>
- <js:ItemRendererDataBinding />
+ <js:ItemRendererDataBinding/>
+ <j:Paddings paddingTop="12" paddingBottom="12"/>
</j:beads>
<j:VGroup itemsHorizontalAlign="itemsCenter">
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index cf5cf53..5dfd870 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3690,6 +3690,13 @@ j|TabBar {
justify-content: center;
height: inherit;
}
+.jewel.tabbarbutton > .tab-internal-span {
+ position: absolute;
+ bottom: 0;
+}
+.jewel.tabbarbutton > .tab-internal-span > .tab-internal-text {
+ visibility: hidden;
+}
.jewel.tabbarbutton .indicator {
display: flex;
position: absolute;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/ListItemRendererInitializer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/ListItemRendererInitializer.as
index 62ddd0d..776d01b 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/ListItemRendererInitializer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/ListItemRendererInitializer.as
@@ -20,12 +20,12 @@ package org.apache.royale.jewel.beads.itemRenderers
{
import org.apache.royale.core.IIndexedItemRenderer;
import org.apache.royale.core.IItemRendererOwnerView;
+ import org.apache.royale.core.IListWithPresentationModel;
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IStrandWithModelView;
import org.apache.royale.core.StyledMXMLItemRenderer;
import org.apache.royale.core.StyledUIBase;
import org.apache.royale.jewel.supportClasses.list.IListPresentationModel;
- import org.apache.royale.core.IListWithPresentationModel;
/**
* The ListItemRendererInitializer class initializes item renderers
@@ -73,8 +73,6 @@ package org.apache.royale.jewel.beads.itemRenderers
override protected function setupVisualsForItemRenderer(ir:IIndexedItemRenderer):void
{
- super.setupVisualsForItemRenderer(ir);
-
if (presentationModel) {
if(!presentationModel.variableRowHeight)
StyledUIBase(ir).height = presentationModel.rowHeight;
@@ -92,6 +90,8 @@ package org.apache.royale.jewel.beads.itemRenderers
(ir as StyledMXMLItemRenderer).emphasis = StyledUIBase(_strand).emphasis;
}
}
+
+ super.setupVisualsForItemRenderer(ir);
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TabBarItemRendererInitializer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TabBarItemRendererInitializer.as
index e476d45..6aae51b 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TabBarItemRendererInitializer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TabBarItemRendererInitializer.as
@@ -18,7 +18,12 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.itemRenderers
{
+ import org.apache.royale.core.IIndexedItemRenderer;
import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.layout.IPaddings;
+ import org.apache.royale.jewel.beads.layouts.Paddings;
+ import org.apache.royale.jewel.beads.models.ListPresentationModel;
+ import org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer;
/**
* The TabBarItemRendererInitializer class initializes item renderers
@@ -46,8 +51,31 @@ package org.apache.royale.jewel.beads.itemRenderers
{
}
- // remove paddings, since tabbarbutton doesn't use it
+ override protected function setupVisualsForItemRenderer(ir:IIndexedItemRenderer):void
+ {
+ super.setupVisualsForItemRenderer(ir);
+ }
+
+ /**
+ * padding in tabbar buttons always must to be applied to content (span)
+ * not to the button itself, since we have an indicator that can be
+ * restricted to content or take all available button space.
+ */
override public function setPaddings(ir:IStrand):void {
- }
+ var tir:TabBarButtonItemRenderer = ir as TabBarButtonItemRenderer;
+ var paddings:Paddings = tir.getBeadByType(IPaddings) as Paddings;
+
+ trace(_strand, tir.height, paddings, presentationModel.rowHeight, ListPresentationModel.DEFAULT_ROW_HEIGHT )
+
+ if(!paddings && !(tir.height > ListPresentationModel.DEFAULT_ROW_HEIGHT))
+ {
+ paddings = new Paddings();
+ paddings.paddingTop = DEFAULT_PADDING;
+ paddings.paddingBottom = DEFAULT_PADDING;
+ ir.addBead(paddings)
+ }
+ }
+
+ public static const DEFAULT_PADDING:Number = 12;
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonInidicatorRestrictedToContentItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonInidicatorRestrictedToContentItemRenderer.as
index 505272b..8b58f6c 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonInidicatorRestrictedToContentItemRenderer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonInidicatorRestrictedToContentItemRenderer.as
@@ -17,7 +17,7 @@
//
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.itemRenderers
-{
+{
/**
* The TabBarButtonInidicatorRestrictedToContentItemRenderer
* is a TabBarButtonItemRenderer that restrict indicator to content
@@ -42,15 +42,40 @@ package org.apache.royale.jewel.itemRenderers
super();
}
+ override public function set text(value:String):void
+ {
+ super.text = value;
+ COMPILE::JS
+ {
+ internal_text.innerHTML = value;
+ }
+ }
+
+ COMPILE::JS
+ private var __internal__:HTMLSpanElement;
+ COMPILE::JS
+ private var internal_text:HTMLSpanElement;
+
/**
- * adding indicator to positioner makes the indicator fill all available space
- * adding to "span" HTMLElement restrict indicator to content.
- * Override this function in TabBarButtonItemRenderer subclasses
+ * We create an internal element with the text and make it invisible.
+ * So we position absolutely to the bottom and add the indicator
+ * to this internal element.
+ * In this way we can manage paddings and other things
+ * in extended renderers.
*/
COMPILE::JS
override protected function addIndicator():void
{
- span.appendChild(indicator);
+ // this is to position the indicator when restricted
+ __internal__ = document.createElement('span') as HTMLSpanElement;
+ __internal__.className = "tab-internal-span";
+ positioner.appendChild(__internal__);
+
+ internal_text = document.createElement('span') as HTMLSpanElement;
+ internal_text.className = "tab-internal-text";
+ __internal__.appendChild(internal_text);
+
+ __internal__.appendChild(indicator);
}
}
}
\ No newline at end of file
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 33dfc8c..56f3d27 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
@@ -118,8 +118,11 @@ package org.apache.royale.jewel.itemRenderers
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
+ //element (span.content)
span = addElementToWrapper(this, 'span') as HTMLSpanElement;
span.className = "content";
+
+ //postioner (button)
positioner = document.createElement('button') as WrappedHTMLElement;
indicator = document.createElement('span') as HTMLSpanElement;
@@ -134,9 +137,10 @@ package org.apache.royale.jewel.itemRenderers
}
/**
- * adding indicator to positioner makes the indicator fill all available space
- * adding to "span" HTMLElement restrict indicator to content.
- * Override this function in TabBarButtonItemRenderer subclasses
+ * Adding indicator to positioner makes the indicator fill all available space
+ * Override this function in TabBarButtonItemRenderer subclasses.
+ * Check TabBarButtonInidicatorRestrictedToContentItemRenderer for a "restricted to content" indicator
+ * @see org.apache.royale.jewel.itemRenderers. TabBarButtonInidicatorRestrictedToContentItemRenderer
*/
COMPILE::JS
protected function addIndicator():void
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index 45e27a4..98f432e 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -70,7 +70,7 @@ $tabbarbutton-padding: 0 24px !default
&.tabbarbutton
// height: $tabbarbutton-margin-height
// min-height: $tabbarbutton-margin-height
- margin: $tabbarbutton-margin
+ margin: $tabbarbutton-margin //to avoid margin in safari
padding: $tabbarbutton-padding
position: relative
@@ -88,6 +88,12 @@ $tabbarbutton-padding: 0 24px !default
justify-content: center
height: inherit
+
+ > .tab-internal-span
+ position: absolute
+ bottom: 0
+ > .tab-internal-text
+ visibility: hidden
.indicator
display: flex
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 5cd30fd..b665008 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -1190,10 +1190,6 @@ j|FormItem {
font-weight: 600;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
-.jewel.tabbarbutton > .content {
- padding-top: 12px;
- padding-bottom: 12px;
-}
.jewel.tabbarbutton .indicator > .indicatorContent {
height: 2px;
background-color: #3CADF1;
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 bdcf0d0..2890994 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
@@ -55,9 +55,9 @@
transition: background-color .3s ease-in-out, color .3s ease-in-out
> .content
- padding-top: 12px
- padding-bottom: 12px
-
+ // padding-top: 12px
+ // padding-bottom: 12px
+
.indicator
> .indicatorContent
height: 2px