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 2019/04/21 17:36:03 UTC

[royale-asjs] branch develop updated: jewel-tabbar: simplify animation

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 cb8ed09  jewel-tabbar: simplify animation
cb8ed09 is described below

commit cb8ed09e911ad4463d61ff56f41f178c45ecd264
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Apr 21 19:35:55 2019 +0200

    jewel-tabbar: simplify animation
---
 .../royale/jewel/itemRenderers/TabBarButtonItemRenderer.as    | 11 +++--------
 frameworks/themes/JewelTheme/src/main/resources/defaults.css  |  2 +-
 .../JewelTheme/src/main/sass/components-primary/_tabbar.sass  |  6 +++++-
 3 files changed, 9 insertions(+), 10 deletions(-)

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 ef966bf..d199144 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
@@ -185,14 +185,9 @@ package org.apache.royale.jewel.itemRenderers
 		COMPILE::JS
 		public function animateIndicator(positionDiff:Number, widthDiff:Number, duration:int, easingFunction:String):void
 		{
-			indicator_content["animate"]([
-					{ 
-						transform : "translateX(" + positionDiff + "px) scaleX(" + widthDiff + ")"
-					}, 
-					{
-						transform: "none"
-					}
-				], 
+			indicator_content["animate"](
+				{ transform: ["translateX(" + positionDiff + "px) scaleX(" + widthDiff + ")", "none"] }
+				, 
 				{
 					duration: duration,
 					easing: easingFunction,
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index d856296..e613862 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -855,7 +855,7 @@ j|FormItem {
 .jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
   color: #3CADF1;
 }
-.jewel.tabbarbutton .indicator .indicatorContent {
+.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 f14f519..65d5539 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
@@ -51,9 +51,13 @@
             color: $primary-color
 
         .indicator
-            .indicatorContent
+            > .indicatorContent
                 height: 2px
                 background-color: $primary-color
+                // transition: transform .25s ease-in-out //cubic-bezier(.4,0,.2,1)
+                // animation-duration: .3s
+                // animation-timing-function: ease-in-out
+                // animation-fill-mode: both
         // &.hovered:hover
         //     color: $font-theme-color
         //     background: lighten($primary-color, 10%)