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/09/05 08:54:08 UTC

[royale-asjs] branch develop updated: jewel-tabbar: fix indicator not sizing properly when content starts hidden (display: none)

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 b586aab  jewel-tabbar: fix indicator not sizing properly when content starts hidden (display: none)
b586aab is described below

commit b586aab70124cc128eccc18b65c6cfe554326580
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Sep 5 10:53:54 2020 +0200

    jewel-tabbar: fix indicator not sizing properly when content starts hidden (display: none)
---
 ...tonInidicatorRestrictedToContentItemRenderer.as | 27 ++++++++++++++--------
 .../itemRenderers/TabBarButtonItemRenderer.as      |  8 +++----
 2 files changed, 22 insertions(+), 13 deletions(-)

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 67b6162..0d931f0 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
@@ -18,6 +18,8 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel.itemRenderers
 {
+	import org.apache.royale.utils.observeElementSize;
+
 	/**
 	 *  The TabBarButtonInidicatorRestrictedToContentItemRenderer
      *  is a TabBarButtonItemRenderer that restrict indicator to content
@@ -40,15 +42,13 @@ package org.apache.royale.jewel.itemRenderers
 		public function TabBarButtonInidicatorRestrictedToContentItemRenderer()
 		{
 			super();
-		}
 
-		override public function set text(value:String):void
-		{
-			super.text = value;
 			COMPILE::JS
 			{
-			setTimeout(updateInternalSize, 350);
-			}
+			// since span content and _internal must by synced on size, 
+			// but are in different DOM branches
+            observeElementSize(content, contentSizeChanged);
+            }
 		}
 
 		COMPILE::JS
@@ -72,10 +72,19 @@ package org.apache.royale.jewel.itemRenderers
 		}
 
 		COMPILE::JS
-		private function updateInternalSize():void
+        private function contentSizeChanged():void
+		{
+			updateInternalSize();
+        }
+
+		/**
+		 * updated internal size according to real content size
+		 */
+		COMPILE::JS
+		protected function updateInternalSize():void
 		{
-			_internal_.style.width = span.offsetWidth + "px";
-			_internal_.style.height = span.offsetHeight + "px";
+			_internal_.style.width = content.offsetWidth + "px";
+			_internal_.style.height = content.offsetHeight + "px";
 		}
 	}
 }
\ 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 321bc9b..dcad4c1 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
@@ -81,7 +81,7 @@ package org.apache.royale.jewel.itemRenderers
 		}
 
 		COMPILE::JS
-		public var span:HTMLSpanElement;
+		public var content:HTMLSpanElement;
 		
 		COMPILE::JS
 		public var indicator:HTMLSpanElement;
@@ -96,9 +96,9 @@ 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";
+			//element (span content)
+            content = addElementToWrapper(this, 'span') as HTMLSpanElement;
+			content.className = "content";
 			
 			//postioner (button)
 			positioner = document.createElement('button') as WrappedHTMLElement;