This is an automated email from the ASF dual-hosted git repository.
aharui 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 32de896 improve MX Alert
32de896 is described below
commit 32de896d662795be6a33e548de42228ed083e846
Author: Alex Harui <[email protected]>
AuthorDate: Fri Dec 13 22:32:02 2019 -0800
improve MX Alert
---
.../org/apache/royale/html/beads/AlertView.as | 17 ++++++++++----
.../MXRoyale/src/main/resources/defaults.css | 19 ++++++++++------
.../MXRoyale/src/main/royale/mx/controls/Alert.as | 26 ++++++++++++++++++++++
frameworks/themes/Basic/src/basic.css | 2 +-
4 files changed, 52 insertions(+), 12 deletions(-)
diff --git
a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/AlertView.as
b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/AlertView.as
index e7de709..4b7bd88 100644
---
a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/AlertView.as
+++
b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/AlertView.as
@@ -140,8 +140,9 @@ package org.apache.royale.html.beads
label.text = alertModel.message;
labelContent = new Group();
- labelContent.percentWidth = 100;
- labelContent.percentHeight = 100;
+ labelContent.className = "AlertContent";
+ //labelContent.percentWidth = 100;
+ //labelContent.percentHeight = 100;
labelContent.addElement(label);
@@ -150,9 +151,9 @@ package org.apache.royale.html.beads
COMPILE::JS
{
label.element.style["white-space"] = "unset";
- labelContent.element.style["minHeight"] =
"30px";
+ //labelContent.element.style["minHeight"] =
"30px";
controlBar.element.style["flex-direction"] =
"row";
- controlBar.element.style["justify-content"] =
"flex-end";
+ controlBar.element.style["justify-content"] =
"center";
controlBar.element.style["border"] = "none";
controlBar.element.style["background-color"] =
"#FFFFFF";
}
@@ -180,6 +181,7 @@ package org.apache.royale.html.beads
if( flags & Alert.OK )
{
okButton = new TextButton();
+ okButton.className = "AlertButton";
okButton.text = alertModel.okLabel;
okButton.addEventListener("click",handleOK);
@@ -187,6 +189,7 @@ package org.apache.royale.html.beads
COMPILE::JS
{
+ okButton.element.style["height"] = "intrinsic";
okButton.element.style["margin-left"] = "2px";
okButton.element.style["margin-right"] = "2px";
}
@@ -194,6 +197,7 @@ package org.apache.royale.html.beads
if( flags & Alert.CANCEL )
{
cancelButton = new TextButton();
+ cancelButton.className = "AlertButton";
cancelButton.text = alertModel.cancelLabel;
cancelButton.addEventListener("click",handleCancel);
@@ -201,6 +205,7 @@ package org.apache.royale.html.beads
COMPILE::JS
{
+ cancelButton.element.style["height"] = "intrinsic";
cancelButton.element.style["margin-left"] = "2px";
cancelButton.element.style["margin-right"] = "2px";
}
@@ -208,6 +213,7 @@ package org.apache.royale.html.beads
if( flags & Alert.YES )
{
yesButton = new TextButton();
+ yesButton.className = "AlertButton";
yesButton.text = alertModel.yesLabel;
yesButton.addEventListener("click",handleYes);
@@ -215,6 +221,7 @@ package org.apache.royale.html.beads
COMPILE::JS
{
+ yesButton.element.style["height"] = "intrinsic";
yesButton.element.style["margin-left"] = "2px";
yesButton.element.style["margin-right"] = "2px";
}
@@ -222,6 +229,7 @@ package org.apache.royale.html.beads
if( flags & Alert.NO )
{
noButton = new TextButton();
+ noButton.className = "AlertButton";
noButton.text = alertModel.noLabel;
noButton.addEventListener("click",handleNo);
@@ -229,6 +237,7 @@ package org.apache.royale.html.beads
COMPILE::JS
{
+ noButton.element.style["height"] = "intrinsic";
noButton.element.style["margin-left"] = "2px";
noButton.element.style["margin-right"] = "2px";
}
diff --git a/frameworks/projects/MXRoyale/src/main/resources/defaults.css
b/frameworks/projects/MXRoyale/src/main/resources/defaults.css
index 170fd47..bf1aa49 100644
--- a/frameworks/projects/MXRoyale/src/main/resources/defaults.css
+++ b/frameworks/projects/MXRoyale/src/main/resources/defaults.css
@@ -126,6 +126,18 @@ Alert
border-width: 1px;
}
+.AlertButton
+{
+ padding-top: 3px;
+ padding-bottom: 3px;
+}
+
+.AlertContent
+{
+ margin: auto;
+ padding: 8px;
+}
+
Button
{
IBeadModel:
ClassReference("org.apache.royale.html.beads.models.ImageAndTextModel");
@@ -344,13 +356,6 @@ Panel .TitleBar
background-color: #FFFFFF;
}
-.TitleBarTitle
-{
- position: absolute;
- left: 6px;
- top: 6px;
-}
-
PanelTitleBar
{
IBeadModel:
ClassReference("org.apache.royale.html.beads.models.TitleBarModel");
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Alert.as
b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Alert.as
index 4f1c3f9..bfe46f0 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Alert.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/Alert.as
@@ -719,6 +719,32 @@ public class Alert extends Panel
$uibase_addChild(c as IUIComponent);
}
+ override public function addedToParent():void
+ {
+ super.addedToParent();
+ COMPILE::JS
+ {
+ // make the buttons the same width
+ var buttonWidth:Number = 0;
+ var controlBar:HTMLElement = element.childNodes[2];
+ var numButtons:int = controlBar.childNodes.length;
+ for (var i:int = 0; i < numButtons; i++)
+ {
+ buttonWidth = Math.max(buttonWidth,
controlBar.childNodes[i].offsetWidth);
+ }
+ for (i = 0; i < numButtons; i++)
+ {
+ controlBar.childNodes[i].style.minWidth =
buttonWidth.toString() + "px";
+ }
+ // set a max on the content of 2 x (max of buttons or title)
+ var maxContentWidth:Number = buttonWidth * numButtons;
+ maxContentWidth =
Math.max(element.childNodes[0].childNodes[0].clientWidth);
+ maxContentWidth += maxContentWidth;
+ element.childNodes[1].style.maxWidth = maxContentWidth.toString()
+ "px";
+
+ }
+ }
+
}
}
diff --git a/frameworks/themes/Basic/src/basic.css
b/frameworks/themes/Basic/src/basic.css
index 919e626..306e2c4 100644
--- a/frameworks/themes/Basic/src/basic.css
+++ b/frameworks/themes/Basic/src/basic.css
@@ -148,5 +148,5 @@ ToggleTextButton.selected:hover
TitleBarTitle {
font-weight: bold;
padding: 0;
- margin: 0px 5px;
+ margin: 6px 5px;
}
