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 371f6d4  jewel-tabbar: latest touches: - remove 
restrictIndicatorToContent in favor of an ItemRenderer subclass - improve 
tabbatbutton content giving some room and space - make tabbar icon item 
renderer arrange content vertical - improve tourdejewel Example/SourceCode tabs 
with icons
371f6d4 is described below

commit 371f6d46d7974d0a38a99bd2bd05e06a85e76dc6
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon Apr 22 00:04:48 2019 +0200

    jewel-tabbar: latest touches:
    - remove restrictIndicatorToContent in favor of an ItemRenderer subclass
    - improve tabbatbutton content giving some room and space
    - make tabbar icon item renderer arrange content vertical
    - improve tourdejewel Example/SourceCode tabs with icons
---
 .../ExampleAndSourceCodeTabbedSectionContent.as    |  4 +-
 .../itemRenderers/TabBarIconItemRenderer.mxml      | 15 ++---
 .../projects/Jewel/src/main/resources/defaults.css |  3 +-
 .../Jewel/src/main/resources/jewel-manifest.xml    |  1 +
 ...tonInidicatorRestrictedToContentItemRenderer.as | 66 ++++++++++++++++++++++
 .../itemRenderers/TabBarButtonItemRenderer.as      | 49 +++++-----------
 .../Jewel/src/main/sass/components/_tabbar.sass    |  4 +-
 .../JewelTheme/src/main/resources/defaults.css     |  8 ++-
 .../src/main/sass/components-primary/_tabbar.sass  | 12 ++--
 9 files changed, 106 insertions(+), 56 deletions(-)

diff --git 
a/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
 
b/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
index 16feafe..f92f1a5 100644
--- 
a/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
+++ 
b/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
@@ -83,8 +83,8 @@ package components
         private function initCompleteHandler(event:Event):void
         {
             tabBarNavigation = new ArrayList([
-                               new TabBarButtonVO("Examples", "exampleTab", 
null),
-                               new TabBarButtonVO("Source Code", 
"sourceCodeTab", null)                
+                               new TabBarButtonVO("Examples", "exampleTab", 
MaterialIconType.VIEW_COMPACT),
+                               new TabBarButtonVO("Source Code", 
"sourceCodeTab", MaterialIconType.CODE)               
                        ]);
 
             tabbar = new TabBar();
diff --git 
a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml
 
b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml
index 25be2ed..8c8e370 100644
--- 
a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml
+++ 
b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml
@@ -17,12 +17,11 @@ See the License for the specific language governing 
permissions and
 limitations under the License.
 
 -->
-<j:TabBarButtonItemRenderer 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";
-    restrictIndicatorToContent="true">
+    xmlns="http://www.w3.org/1999/xhtml";>
 
     <fx:Script>
         <![CDATA[
@@ -40,9 +39,11 @@ limitations under the License.
         <js:ItemRendererDataBinding />
     </j:beads>
 
-    <js:FontIcon text="{tabButton ? tabButton.icon : ''}" material="true" 
visible="{tabButton ? tabButton.icon != null : false}"/>
+    <j:VGroup itemsHorizontalAlign="itemsCentered">
+        <js:FontIcon text="{tabButton ? tabButton.icon : ''}" material="true" 
+                    visible="{tabButton ? tabButton.icon != null : false}"/>
+        <html:Span text="{tabButton ? tabButton.label : ''}"/>
+    </j:VGroup>
 
-    <html:Span text="{tabButton ? tabButton.label : ''}"/>
-
-</j:TabBarButtonItemRenderer>
+</j:TabBarButtonInidicatorRestrictedToContentItemRenderer>
 
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css 
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index eccb762..69bc93a 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3510,7 +3510,6 @@ j|TabBar {
 }
 
 .jewel.tabbarbutton {
-  height: 48px;
   padding: 0 24px;
   position: relative;
   display: flex;
@@ -3520,7 +3519,7 @@ j|TabBar {
   z-index: 1;
   overflow: initial;
 }
-.jewel.tabbarbutton .content {
+.jewel.tabbarbutton > .content {
   display: flex;
   position: relative;
   align-items: center;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml 
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index b57ce26..f0c2e51 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -88,6 +88,7 @@
 
     <component id="TabBar" class="org.apache.royale.jewel.TabBar"/>
     <component id="TabBarButtonItemRenderer" 
class="org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer"/>
+    <component id="TabBarButtonInidicatorRestrictedToContentItemRenderer" 
class="org.apache.royale.jewel.itemRenderers.TabBarButtonInidicatorRestrictedToContentItemRenderer"/>
     <component id="TabBarContent" 
class="org.apache.royale.jewel.TabBarContent"/>
     <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/itemRenderers/TabBarButtonInidicatorRestrictedToContentItemRenderer.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonInidicatorRestrictedToContentItemRenderer.as
new file mode 100644
index 0000000..1d37100
--- /dev/null
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonInidicatorRestrictedToContentItemRenderer.as
@@ -0,0 +1,66 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+    COMPILE::JS
+    {
+       import org.apache.royale.core.WrappedHTMLElement;
+       import org.apache.royale.html.util.addElementToWrapper;
+    }
+       import org.apache.royale.core.StyledMXMLItemRenderer;
+       import org.apache.royale.events.Event;
+       import org.apache.royale.jewel.supportClasses.INavigationRenderer;
+       import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
+    
+       /**
+        *  The TabBarButtonInidicatorRestrictedToContentItemRenderer
+     *  is a TabBarButtonItemRenderer that restrict indicator to content
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion Royale 0.9.6
+        */
+       public class TabBarButtonInidicatorRestrictedToContentItemRenderer 
extends TabBarButtonItemRenderer
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9.4
+                */
+               public function 
TabBarButtonInidicatorRestrictedToContentItemRenderer()
+               {
+                       super();
+               }
+
+               /**
+                * 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
+                */
+               COMPILE::JS
+               override protected function addIndicator():void
+               {
+                       span.appendChild(indicator);
+               }
+       }
+}
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 feb4554..e4fa6bd 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
@@ -136,13 +136,13 @@ package org.apache.royale.jewel.itemRenderers
                }
 
                COMPILE::JS
-               private var span:HTMLSpanElement;
+               protected var span:HTMLSpanElement;
                
                COMPILE::JS
-               private var indicator:HTMLSpanElement;
+               protected var indicator:HTMLSpanElement;
                
                COMPILE::JS
-               private var indicator_content:HTMLSpanElement;
+               protected var indicator_content:HTMLSpanElement;
 
         /**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
@@ -157,7 +157,7 @@ package org.apache.royale.jewel.itemRenderers
 
                        indicator = document.createElement('span') as 
HTMLSpanElement;
                        indicator.className = "indicator";
-                       positioner.appendChild(indicator);
+                       addIndicator();
                        
                        indicator_content = document.createElement('span') as 
HTMLSpanElement;
                        indicator_content.className = "indicatorContent";
@@ -174,6 +174,17 @@ package org.apache.royale.jewel.itemRenderers
             return element;
         }
 
+               /**
+                * 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
+                */
+               COMPILE::JS
+               protected function addIndicator():void
+               {
+                       positioner.appendChild(indicator);
+               }
+
                COMPILE::JS
                public function get getBoundingBox():ClientRect
                {
@@ -249,35 +260,5 @@ package org.apache.royale.jewel.itemRenderers
                toggleClass("selected", selected);
                        }
                }
-
-
-               private var _restrictIndicatorToContent:Boolean;
-        /**
-         *  Restrict the indicator to content
-         *  
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion Royale 0.9.6
-         */
-               public function get restrictIndicatorToContent():Boolean
-               {
-            return _restrictIndicatorToContent;   
-               }
-               public function set 
restrictIndicatorToContent(value:Boolean):void
-               {
-            _restrictIndicatorToContent = value;
-
-                       COMPILE::JS
-                       {
-                       if(!_restrictIndicatorToContent && positioner && 
indicator)
-                       {
-                               positioner.appendChild(indicator);
-                       } else if(_restrictIndicatorToContent && span && 
indicator)
-                       {
-                               span.appendChild(indicator);
-                       }
-                       }
-               }
        }
 }
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass 
b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index 7a0c6bb..2234c48 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -61,7 +61,7 @@ $tabbarbutton-margin-height: 48px
 // TabBarButtonItemRenderer variables
 .jewel
     &.tabbarbutton
-        height: $tabbarbutton-margin-height
+        // height: $tabbarbutton-margin-height
         // min-height: $tabbarbutton-margin-height
         // margin: $tabbarbutton-margin
         padding: $tabbarbutton-padding
@@ -74,7 +74,7 @@ $tabbarbutton-margin-height: 48px
         z-index: 1
         overflow: initial
 
-        .content
+        > .content
             display: flex
             position: relative
             align-items: center
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css 
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 1a8d5a4..85b23ef 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -855,10 +855,11 @@ j|FormItem {
   text-decoration: none;
   letter-spacing: 0.1em;
   font-weight: 600;
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
 }
-.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
-  color: #3CADF1;
+.jewel.tabbarbutton > .content {
+  padding-top: 12px;
+  padding-bottom: 12px;
 }
 .jewel.tabbarbutton .indicator > .indicatorContent {
   height: 2px;
@@ -868,6 +869,7 @@ j|FormItem {
   background: rgba(60, 173, 241, 0.2);
 }
 .jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+  color: #0f88d1;
   background: rgba(60, 173, 241, 0.4);
 }
 
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 7224daa..68cbe04 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
@@ -50,13 +50,12 @@
         letter-spacing: .1em
         font-weight: 600
 
-        transition: background-color .3s ease-in-out
-        // .content
-            // padding: 0px $itemrenderer-padding
+        transition: background-color .3s ease-in-out, color .3s ease-in-out
+        
+        > .content
+            padding-top: 12px
+            padding-bottom: 12px
         
-        &.selected, &.selectable:active
-            color: $primary-color
-
         .indicator
             > .indicatorContent
                 height: 2px
@@ -73,4 +72,5 @@
 
         &.selected, &.selectable:active
             // color: $font-theme-color
+            color: darken($primary-color, 15%)
             background: rgba($primary-color, .4)
\ No newline at end of file

Reply via email to