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 2018/03/30 11:31:54 UTC
[royale-asjs] branch feature/jewel-ui-set updated: alert and layout
changes
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/jewel-ui-set by this push:
new 8ae7322 alert and layout changes
8ae7322 is described below
commit 8ae7322e57044392d853ce9162f10bbb999eff2d
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Mar 30 13:31:49 2018 +0200
alert and layout changes
---
.../src/main/royale/ButtonPlayGround.mxml | 8 +-
.../projects/Jewel/src/main/resources/defaults.css | 38 ++--
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../projects/Jewel/src/main/royale/JewelClasses.as | 3 +-
.../main/royale/org/apache/royale/jewel/Alert.as | 215 +++++++++++----------
.../royale/jewel/beads/layouts/HorizontalLayout.as | 8 +-
...alLayout.as => HorizontalLayoutSpaceBetween.as} | 22 +--
.../layouts/HorizontalLayoutWithPaddingAndGap.as | 4 +-
.../royale/jewel/beads/layouts/VerticalLayout.as | 4 +-
.../layouts/VerticalLayoutWithPaddingAndGap.as | 4 +-
.../apache/royale/jewel/beads/views/AlertView.as | 8 +-
.../projects/Jewel/src/main/sass/_global.sass | 4 +-
.../Jewel/src/main/sass/components/_alert.sass | 42 ++--
.../Jewel/src/main/sass/components/_titlebar.sass | 1 +
14 files changed, 197 insertions(+), 165 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 41c6545..4d71052 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -29,12 +29,12 @@ limitations under the License.
private function showAlert(event:MouseEvent):void
{
- var alert:Alert = Alert.show("Are you sure ?", this, "Alert Title", Alert.OK | Alert.CANCEL);
- //alert.height = 150;
- alert.addEventListener("close", onShowAlertAction);
+ var alert:Alert = Alert.show("Are you sure ?", "Alert Title", Alert.OK | Alert.CANCEL);
+ //alert.height = 450;
+ alert.addEventListener("close", onClose);
}
- private function onShowAlertAction(event:CloseEvent):void
+ private function onClose(event:CloseEvent):void
{
trace("Hi!");
//alertStatus.text = "Alert status: " + event.detail;
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 94135ab..af7a52c 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -30,23 +30,31 @@
display: block !important;
}
+.layout.horizontal.space {
+ display: flex;
+ justify-content: space-between;
+}
+
.jewel.alert {
position: fixed;
- z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- min-width: 400px;
- min-height: 210px;
+ margin: 0;
+ padding: 20px;
+ min-width: 350px;
+ min-height: 200px;
max-width: 100%;
max-height: 100%;
- z-index: 1000;
+ border: 1px solid rgba(0, 0, 0, 0.3);
}
.jewel.alert .jewel.titlebar {
- padding: 20px 20px 0px 20px;
+ padding: 0px;
+ border: 1px solid rgba(0, 0, 0, 0.3);
}
.jewel.alert .jewel.titlebar .jewel.label {
- font-size: 2em;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ font-size: 1.9em;
font-weight: bold;
}
.jewel.alert .jewel.titlebar .closebutton {
@@ -55,17 +63,23 @@
padding: 4px;
}
.jewel.alert .Group {
- padding: 10px 20px 20px 20px;
+ margin: 10px 0;
+ padding: 0px;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ width: 100%;
+ height: 100%;
overflow: auto;
}
.jewel.alert .Group .jewel.label {
- font-size: 1.5em;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ font-size: 1.1em;
}
.jewel.alert .jewel.controlbar {
- display: flex;
- flex-direction: row-reverse;
- flex-wrap: wrap;
- padding: 8px 6px;
+ padding: 0px;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+}
+.jewel.alert + .backdrop {
+ background-color: rgba(0, 0, 0, 0.5);
}
j|Alert {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index b97804b..8e73799 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -39,6 +39,7 @@
<component id="VerticalLayout" class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/>
<component id="HorizontalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap"/>
<component id="VerticalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap"/>
+ <component id="HorizontalLayoutSpaceBetween" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween"/>
<component id="HorizontalSliderLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout" />
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 35c5454..300f270 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -52,7 +52,8 @@ package
import org.apache.royale.jewel.beads.layouts.VerticalLayout; VerticalLayout;
import org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap; HorizontalLayoutWithPaddingAndGap;
import org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap; VerticalLayoutWithPaddingAndGap;
-
+ import org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween; HorizontalLayoutSpaceBetween;
+
//import org.apache.royale.jewel.beads.views.JewelLabelViewBead; JewelLabelViewBead;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
index 3029329..37b1f5a 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
@@ -42,10 +42,14 @@ package org.apache.royale.jewel
* org.apache.royale.core.IBorderBead: if present, draws a border around the Alert.
* org.apache.royale.core.IBackgroundBead: if present, places a solid color background below the Alert.
*
+ * Note: Alert use the HTML <dialog> element, which currently has very limited cross-browser support.
+ * To ensure support across all modern browsers, we use use dialogPolyfill extern or creating your own.
+ * The required Dialog Polyfill lines are injected in the constructor
+ *
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public class Alert extends Group implements IPopUp
{
@@ -55,7 +59,7 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public static const YES:uint = 0x000001;
@@ -65,7 +69,7 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public static const NO:uint = 0x000002;
@@ -75,7 +79,7 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public static const OK:uint = 0x000004;
@@ -85,7 +89,7 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public static const CANCEL:uint = 0x000008;
@@ -100,7 +104,7 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public function Alert()
{
@@ -109,8 +113,65 @@ package org.apache.royale.jewel
typeNames = "jewel alert";
}
+ /**
+ * The tile of the Alert.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get title():String
+ {
+ return IAlertModel(model).title;
+ }
+
+ public function set title(value:String):void
+ {
+ IAlertModel(model).title = value;
+ }
+
+ /**
+ * The message to display in the Alert body.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get message():String
+ {
+ return IAlertModel(model).message;
+ }
+ public function set message(value:String):void
+ {
+ IAlertModel(model).message = value;
+ }
+
+ /**
+ * The buttons to display on the Alert as bit-mask values.
+ *
+ * Alert.YES
+ * Alert.NO
+ * Alert.OK
+ * Alert.CANCEL
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get flags():uint
+ {
+ return IAlertModel(model).flags;
+ }
+ public function set flags(value:uint):void
+ {
+ IAlertModel(model).flags = value;
+ }
+
/**
- * The html dialog component that parents the dialog content
+ * The html dialog component that parents the alert content
*/
COMPILE::JS
private var dialog:HTMLDialogElement;
@@ -132,24 +193,32 @@ package org.apache.royale.jewel
private var lockDialogCreation:Boolean = false;
/**
- * This function make the dialog be added to document.body only once
+ * This function make the dialog be added only once to document.body if parent is not
+ * provided (null) or to parent if indicated.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.3
*/
- private function prepareDialog():void
+ private function prepareAlert(parent:Object = null):void
{
COMPILE::JS
{
if(!lockDialogCreation)
{
lockDialogCreation = true;
- var body:HTMLElement = document.getElementsByTagName('body')[0];
- body.appendChild(element);
- this.addedToParent();
+ if(parent != null)
+ {
+ parent.addElement(this);
+ } else {
+ var body:HTMLElement = document.getElementsByTagName('body')[0];
+ body.appendChild(element);
+ }
+
+ addedToParent();
+
if (!("showModal" in dialog))
{
window["dialogPolyfill"]["registerDialog"](dialog);
@@ -158,61 +227,54 @@ package org.apache.royale.jewel
}
}
- // note: only passing parent to this function as I don't see a way to identify
- // the 'application' or top level view without supplying a place to start to
- // look for it.
- /**
+ /**
* This static method is a convenience function to quickly create and display an Alert. The
* text and parent paramters are required, the others will default.
*
* @param String message The message content of the Alert.
- * @param Object parent The object that hosts the pop-up.
* @param String title An optional title for the Alert.
* @param uint flags Identifies which buttons to display in the alert.
+ * @param Object parent The object that hosts the pop-up.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
- static public function show( message:String, parent:Object, title:String="", flags:uint=Alert.OK ) : Alert
+ static public function show(message:String, title:String="", flags:uint=Alert.OK, parent:Object = null, modal:Boolean = true) : Alert
{
var alert:Alert = new Alert();
alert.message = message;
alert.title = title;
alert.flags = flags;
- COMPILE::SWF
- {
- alert.show(parent);
- }
+ if(modal)
+ alert.showModal(parent);
+ else
+ alert.show(parent);
- COMPILE::JS
- {
- alert.show();
- }
-
- /*COMPILE::JS
- {
- alert.positioner.style.margin = 'auto';
- alert.positioner.style.left = "50%";
- alert.positioner.style.top = "50%";
- alert.positioner.style.width = "200px";
- }*/
- return alert;
+ return alert;
}
- /**
- * Displays the dialog element and makes it the top-most modal dialog.
+ /**
+ * Shows the Alert modal anchored to the given parent object which is usally a root component such
+ * as a UIView or body if null
+ *
+ * @param Object parent The object that hosts the pop-up.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.3
*/
- public function showModal():void
+ public function showModal(parent:Object = null):void
{
- prepareDialog();
+ prepareAlert(parent);
+
+ COMPILE::SWF
+ {
+ parent.addElement(this);
+ }
COMPILE::JS
{
@@ -221,19 +283,19 @@ package org.apache.royale.jewel
}
/**
- * Shows the Alert anchored to the given parent object which is usally a root component such
- * as a UIView..
+ * Shows the Alert non modal anchored to the given parent object which is usally a root component such
+ * as a UIView or body if null
*
* @param Object parent The object that hosts the pop-up.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public function show(parent:Object = null) : void
{
- prepareDialog();
+ prepareAlert(parent);
COMPILE::SWF
{
@@ -245,14 +307,14 @@ package org.apache.royale.jewel
dialog.show();
}
}
-
+
/**
* Closes the dialog element.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.3
*/
public function close():void
{
@@ -261,62 +323,5 @@ package org.apache.royale.jewel
dialog.close();
}
}
-
- /**
- * The tile of the Alert.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function get title():String
- {
- return IAlertModel(model).title;
- }
-
- public function set title(value:String):void
- {
- IAlertModel(model).title = value;
- }
-
- /**
- * The message to display in the Alert body.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function get message():String
- {
- return IAlertModel(model).message;
- }
- public function set message(value:String):void
- {
- IAlertModel(model).message = value;
- }
-
- /**
- * The buttons to display on the Alert as bit-mask values.
- *
- * Alert.YES
- * Alert.NO
- * Alert.OK
- * Alert.CANCEL
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function get flags():uint
- {
- return IAlertModel(model).flags;
- }
- public function set flags(value:uint):void
- {
- IAlertModel(model).flags = value;
- }
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
index eff02f9..5ec7691 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
@@ -23,13 +23,13 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.ILayoutChild;
import org.apache.royale.core.ILayoutView;
import org.apache.royale.core.IParentIUIBase;
- import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.LayoutBase;
- COMPILE::SWF {
- import org.apache.royale.core.UIBase;
+
+ COMPILE::JS {
+ import org.apache.royale.utils.cssclasslist.addStyles;
}
/**
@@ -141,7 +141,7 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- contentView.element.classList.add("layout", "horizontal");
+ addStyles(contentView.element, "layout horizontal");
/**
* This Layout uses the following CSS rules
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutSpaceBetween.as
similarity index 91%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutSpaceBetween.as
index eff02f9..9db09c6 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutSpaceBetween.as
@@ -23,13 +23,13 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.ILayoutChild;
import org.apache.royale.core.ILayoutView;
import org.apache.royale.core.IParentIUIBase;
- import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.LayoutBase;
- COMPILE::SWF {
- import org.apache.royale.core.UIBase;
+
+ COMPILE::JS {
+ import org.apache.royale.utils.cssclasslist.addStyles;
}
/**
@@ -43,7 +43,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
- public class HorizontalLayout extends LayoutBase implements IBeadLayout
+ public class HorizontalLayoutSpaceBetween extends LayoutBase implements IBeadLayout
{
/**
* Constructor.
@@ -53,7 +53,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
- public function HorizontalLayout()
+ public function HorizontalLayoutSpaceBetween()
{
super();
}
@@ -141,18 +141,14 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- contentView.element.classList.add("layout", "horizontal");
+ addStyles (contentView.element, "layout horizontal space");
/**
* This Layout uses the following CSS rules
*
- * .layout.horizontal {
- * white-space: nowrap;
- * display: block;
- * }
- *
- * .layout.horizontal > * {
- * display: inline-block !important;
+ * .layout.horizontal.space {
+ * display: flex;
+ * justify-content: space-between;
* }
*/
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
index 95b689d..6224f4b 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
@@ -19,7 +19,6 @@
package org.apache.royale.jewel.beads.layouts
{
import org.apache.royale.core.LayoutBase;
-
import org.apache.royale.core.IBeadLayout;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
@@ -30,6 +29,7 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
COMPILE::JS {
+ import org.apache.royale.utils.cssclasslist.addStyles;
import org.apache.royale.core.WrappedHTMLElement;
}
@@ -275,7 +275,7 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- contentView.element.classList.add("layout", "horizontal");
+ addStyles (contentView.element, "layout horizontal");
var children:Array = contentView.internalChildren();
var i:int;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
index 947a7de..a6f0486 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
@@ -19,7 +19,6 @@
package org.apache.royale.jewel.beads.layouts
{
import org.apache.royale.core.LayoutBase;
-
import org.apache.royale.core.IBeadLayout;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
@@ -31,6 +30,7 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.ValuesManager;
COMPILE::JS
{
+ import org.apache.royale.utils.cssclasslist.addStyles;
import org.apache.royale.core.WrappedHTMLElement;
}
@@ -150,7 +150,7 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- contentView.element.classList.add("layout", "vertical");
+ addStyles (contentView.element, "layout vertical");
var children:Array = contentView.internalChildren();
var i:int;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
index ed602a2..745a2ff 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
@@ -19,7 +19,6 @@
package org.apache.royale.jewel.beads.layouts
{
import org.apache.royale.core.LayoutBase;
-
import org.apache.royale.core.IBeadLayout;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
@@ -31,6 +30,7 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.ValuesManager;
COMPILE::JS
{
+ import org.apache.royale.utils.cssclasslist.addStyles;
import org.apache.royale.core.WrappedHTMLElement;
}
@@ -279,7 +279,7 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- contentView.element.classList.add("layout", "vertical");
+ addStyles (contentView.element, "layout vertical");
var children:Array = contentView.internalChildren();
var i:int;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
index 93f3eaf..f30f8a4 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
@@ -167,7 +167,7 @@ package org.apache.royale.jewel.beads.views
{
cancelButton = new TextButton();
cancelButton.text = alertModel.cancelLabel;
- cancelButton.addEventListener("click",handleCancel);
+ cancelButton.addEventListener("click", handleCancel);
controlBar.addElement(cancelButton);
}
@@ -177,7 +177,7 @@ package org.apache.royale.jewel.beads.views
okButton = new TextButton();
okButton.primary = true;
okButton.text = alertModel.okLabel;
- okButton.addEventListener("click",handleOK);
+ okButton.addEventListener("click", handleOK);
controlBar.addElement(okButton);
}
@@ -186,7 +186,7 @@ package org.apache.royale.jewel.beads.views
{
noButton = new TextButton();
noButton.text = alertModel.noLabel;
- noButton.addEventListener("click",handleNo);
+ noButton.addEventListener("click", handleNo);
controlBar.addElement(noButton);
}
@@ -196,7 +196,7 @@ package org.apache.royale.jewel.beads.views
yesButton = new TextButton();
yesButton.primary = true;
yesButton.text = alertModel.yesLabel;
- yesButton.addEventListener("click",handleYes);
+ yesButton.addEventListener("click", handleYes);
controlBar.addElement(yesButton);
}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 56495a9..3d6a380 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -29,6 +29,8 @@
> *
display: block !important
-
+.layout.horizontal.space
+ display: flex
+ justify-content: space-between
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
index 5fc8248..ee07516 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
@@ -18,50 +18,62 @@
////////////////////////////////////////////////////////////////////////////////
.jewel.alert
- position: fixed //avoid move with scroll
- z-index: 1 // above rest of content
+ position: fixed
top: 50%
left: 50%
transform: translate(-50%, -50%)
- min-width: 400px
- min-height: 210px
+ margin: 0
+ padding: 20px
+ min-width: 350px
+ min-height: 200px
max-width: 100%
max-height: 100%
- z-index: 1000
+ border: 1px solid rgba(0, 0, 0, .3)
// box-shadow: 0px 6px 60px -10px rgba(112,112,112,0.7)
// background-color: #FFFFFF
// border: 0px solid
// border-radius: 10px
.jewel.titlebar
- padding: 20px 20px 0px 20px
+ padding: 0px
+ border: 1px solid rgba(0, 0, 0, .3)
.jewel.label
+ border: 1px solid rgba(0, 0, 0, .3)
font:
- size: 2em
+ size: 1.9em
weight: bold
.closebutton
+ //vertical-align: top
min-width: 24px
min-height: 24px
padding: 4px
.Group
- padding: 10px 20px 20px 20px
- overflow: auto // if needed show let scroll
+ margin: 10px 0
+ padding: 0px
+ border: 1px solid rgba(0, 0, 0, .3)
+ width: 100%
+ height: 100%
+ overflow: auto
.jewel.label
+ border: 1px solid rgba(0, 0, 0, .3)
font:
- size: 1.5em
+ size: 1.1em
.jewel.controlbar
- display: flex
- flex-direction: row-reverse
- flex-wrap: wrap
- padding: 8px 6px
-
+ padding: 0px
+ border: 1px solid rgba(0, 0, 0, .3)
+ // display: flex
+ // flex-direction: row-reverse
+ // flex-wrap: wrap
+ + .backdrop
+ background-color: rgba(0, 0, 0, .5)
+ //filter: blur(5px)
j|Alert
IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass b/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
index ad90019..6c34aa5 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
@@ -25,6 +25,7 @@
j|TitleBar
IBeadModel: ClassReference("org.apache.royale.html.beads.models.TitleBarModel")
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
+ //IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween")
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TitleBarView")
@media -royale-swf
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.