You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by pe...@apache.org on 2018/03/27 18:15:47 UTC
[royale-asjs] branch feature/MXRoyale updated: Fixes sizing issues
for MXRoyale Label and Button. Uses background-image for Button icon.
This is an automated email from the ASF dual-hosted git repository.
pent pushed a commit to branch feature/MXRoyale
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/MXRoyale by this push:
new 5bbfae1 Fixes sizing issues for MXRoyale Label and Button. Uses background-image for Button icon.
5bbfae1 is described below
commit 5bbfae169a96d81aa98438aba9f7a3ddc23fa2a4
Author: Peter Ent <pe...@apache.org>
AuthorDate: Tue Mar 27 14:15:43 2018 -0400
Fixes sizing issues for MXRoyale Label and Button. Uses background-image for Button icon.
---
.../MXRoyale/src/main/royale/mx/controls/Button.as | 72 ++++++++++------------
.../MXRoyale/src/main/royale/mx/controls/Label.as | 15 ++++-
frameworks/themes/MXRoyale/src/mx.css | 5 +-
3 files changed, 49 insertions(+), 43 deletions(-)
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Button.as b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Button.as
index dc24ce5..a67f2b9 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Button.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Button.as
@@ -577,12 +577,6 @@ public class Button extends UIComponent implements IDataRenderer
// internal
//----------------------------------
- COMPILE::JS
- private var imagePart:HTMLImageElement;
-
- COMPILE::JS
- private var labelPart:HTMLSpanElement;
-
/**
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
*/
@@ -596,56 +590,56 @@ public class Button extends UIComponent implements IDataRenderer
}
/**
+ * @royaleignorecoercion HTMLImageElement
*/
COMPILE::JS
protected function setInnerHTML():void
{
if (label != null) {
- if (labelPart == null) {
- var lbl:HTMLSpanElement = document.createElement('span') as HTMLSpanElement;
- labelPart = lbl;
- element.appendChild(lbl);
- }
- labelPart.innerHTML = label;
+ element.innerHTML = label;
}
if (icon != null) {
- if (imagePart == null) {
- var img:HTMLImageElement = document.createElement('img') as HTMLImageElement;
- img.addEventListener("load", handleImageLoaded);
- if (labelPart) element.insertBefore(img,labelPart);
- else element.appendChild(img);
- imagePart = img;
- }
- img.src = icon;
+ element.style.background = "url('"+icon+"') no-repeat center "+(labelPlacement == "right" ? "left" : "right");
+
+ // since the load of a CSS background-image cannot be detected, a standard technique
+ // is to create a dummy <img> and load the same image and listen for that to
+ // complete. This element is never added to the DOM.
+ var dummyImage:HTMLImageElement = document.createElement('img') as HTMLImageElement;
+ dummyImage.addEventListener("load", handleImageLoaded2);
+ dummyImage.src = icon;
}
+
+ measuredWidth = Number.NaN;
+ measuredHeight = Number.NaN;
};
+ /**
+ *
+ * @royaleignorecoercion HTMLImageElement
+ */
COMPILE::JS
- private function handleImageLoaded(event:BrowserEvent):void
- {
- measuredWidth = imagePart.naturalWidth + labelPart.offsetWidth + 2;
- measuredHeight = Math.max(imagePart.naturalHeight, labelPart.offsetHeight);
-
- if (imagePart) {
- imagePart.style.position = 'absolute';
- imagePart.style.top = '0px';
- imagePart.style.left = '0px';
- }
- if (labelPart) {
- labelPart.style.position = 'absolute';
- labelPart.style.lineHeight = String(measuredHeight) + 'px';
- labelPart.style.verticalAlign = 'middle';
- labelPart.style.top = '0px';
- labelPart.style.left = String(imagePart ? imagePart.naturalWidth + 2 : 0) + 'px';
- }
+ private function handleImageLoaded2(event:BrowserEvent):void
+ {
+ var img:HTMLImageElement = event.target as HTMLImageElement;
+ element.style["padding-left"] = String(img.naturalWidth+2)+"px";
- setActualSize(measuredWidth, measuredHeight);
+ this.height = Math.max(img.naturalHeight, element.offsetHeight);
- dispatchEvent(new Event("complete"));
+ measuredWidth = Number.NaN;
+ measuredHeight = Number.NaN;
var newEvent:Event = new Event("layoutNeeded",true);
dispatchEvent(newEvent);
}
+
+ COMPILE::JS
+ override public function setActualSize(w:Number, h:Number):void
+ {
+ // For HTML/JS, we only set the size if there is an explicit
+ // size set.
+ if (!isNaN(explicitWidth)) setWidth(w);
+ if (!isNaN(explicitHeight)) setHeight(h);
+ }
}
}
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Label.as b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Label.as
index beae276..224fa91 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Label.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Label.as
@@ -644,6 +644,7 @@ public class Label extends UIComponent
this.element.innerHTML = value;
this.dispatchEvent('textChange');
}
+ invalidateSize();
}
//----------------------------------
@@ -696,6 +697,8 @@ public class Label extends UIComponent
this.dispatchEvent('textChange');
}
}
+
+ invalidateSize();
}
@@ -718,7 +721,7 @@ public class Label extends UIComponent
}
/**
- * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion window.Text
*/
COMPILE::JS
override protected function createElement():WrappedHTMLElement
@@ -729,9 +732,19 @@ public class Label extends UIComponent
element.appendChild(textNode);
element.style.whiteSpace = "nowrap";
+ element.style.display = "inline-block";
return element;
}
+
+ COMPILE::JS
+ override public function setActualSize(w:Number, h:Number):void
+ {
+ // For HTML/JS, we only set the size if there is an explicit
+ // size set.
+ if (!isNaN(explicitWidth)) setWidth(w);
+ if (!isNaN(explicitHeight)) setHeight(h);
+ }
//--------------------------------------------------------------------------
diff --git a/frameworks/themes/MXRoyale/src/mx.css b/frameworks/themes/MXRoyale/src/mx.css
index 21f0ae6..ebd98c4 100644
--- a/frameworks/themes/MXRoyale/src/mx.css
+++ b/frameworks/themes/MXRoyale/src/mx.css
@@ -30,16 +30,15 @@ Button
{
IBeadModel: ClassReference("org.apache.royale.html.beads.models.ImageAndTextModel");
border: 0.5px solid black;
+ border-radius: 2px;
background-color: #EEEEEE;
- padding: 4px 4px;
- text-align: center;
text-decoration: none;
- display: inline-block;
}
Button:hover {
background-color: #CCCCCC;
}
+
Button:active {
background-color: #999999;
color: white;
--
To stop receiving notification emails like this one, please contact
pent@apache.org.