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 19:17:43 UTC
[royale-asjs] branch feature/jewel-ui-set updated: a way to layout
the alert
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 a431696 a way to layout the alert
a431696 is described below
commit a431696a28efed1a03c735810c79b212bd292195
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Mar 30 21:17:35 2018 +0200
a way to layout the alert
---
.../projects/Jewel/src/main/resources/defaults.css | 27 ++++++++--------
.../apache/royale/jewel/beads/views/AlertView.as | 37 ++++++++++------------
.../Jewel/src/main/sass/components/_alert.sass | 35 ++++++++++----------
3 files changed, 46 insertions(+), 53 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 5bf4a03..21ab0c8 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -48,20 +48,18 @@
min-height: 200px;
max-width: 100%;
max-height: 100%;
- border: 1px solid rgba(0, 0, 0, 0.3);
+ border: 0px solid;
}
.jewel.alert .jewel.titlebar {
- padding: 0px;
- border: 1px solid rgba(0, 0, 0, 0.3);
+ padding: 10px 10px 0px 10px;
+ height: 50px;
}
.jewel.alert .jewel.titlebar .jewel.label {
- border: 1px solid rgba(0, 0, 0, 0.3);
font-size: 1.9em;
font-weight: bold;
}
.jewel.alert .jewel.titlebar .closebutton {
border: 0px;
- border: 1px solid rgba(0, 0, 0, 0.3);
min-width: 16px;
min-height: 16px;
padding: 4px;
@@ -71,20 +69,23 @@
}
.jewel.alert .Group {
position: absolute;
- top: 0;
- left: 0;
- padding: 60px 20px 20px 20px;
- border: 1px solid rgba(0, 0, 0, 0.3);
width: 100%;
- height: 100%;
- overflow: auto;
+ top: 50px;
+ bottom: 50px;
+ overflow-y: auto;
+ padding: 10px;
}
.jewel.alert .Group .jewel.label {
font-size: 1.1em;
}
.jewel.alert .jewel.controlbar {
- padding: 0px;
- border: 1px solid rgba(0, 0, 0, 0.3);
+ padding: 0px 10px 10px 10px;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 50px;
+ display: flex;
+ flex-direction: row-reverse;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
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 a351508..f314559 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
@@ -71,19 +71,19 @@ package org.apache.royale.jewel.beads.views
public function AlertView()
{
}
+
+ protected var alertModel:IAlertModel;
protected var titleBar:TitleBar;
- protected var controlBar:UIBase;
+ protected var content:Group;
protected var label:Label;
- protected var labelContent:Group;
+ protected var controlBar:UIBase;
protected var okButton:TextButton;
protected var cancelButton:TextButton;
protected var yesButton:TextButton;
protected var noButton:TextButton;
- protected var alertModel:IAlertModel;
-
/**
* @copy org.apache.royale.core.IBead#strand
*
@@ -123,26 +123,21 @@ package org.apache.royale.jewel.beads.views
alertModel = (_strand as UIBase).model as IAlertModel;
- createButtons();
-
- if (alertModel.title)
- {
- titleBar = new TitleBar();
- titleBar.addBead(new HorizontalLayoutSpaceBetween());
- titleBar.title = alertModel.title;
- IParent(_strand).addElement(titleBar);
- }
-
+ // TitleBar
+ titleBar = new TitleBar();
+ titleBar.addBead(new HorizontalLayoutSpaceBetween());
+ titleBar.title = alertModel.title;
+ IParent(_strand).addElement(titleBar);
+
+ // Text
+ content = new Group();
label = new Label();
label.text = alertModel.message;
+ content.addElement(label);
+ IParent(_strand).addElement(content);
- labelContent = new Group();
- //labelContent.percentWidth = 100;
- //labelContent.percentHeight = 100;
- labelContent.addElement(label);
-
- IParent(_strand).addElement(labelContent);
-
+ // ControlBar
+ createButtons();
IParent(_strand).addElement(controlBar);
COMPILE::SWF
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
index e2cf7d2..f267c59 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
@@ -29,26 +29,23 @@
min-height: 200px
max-width: 100%
max-height: 100%
+ border: 0px solid
- 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: 0px
- border: 1px solid rgba(0, 0, 0, .3)
+ padding: 10px 10px 0px 10px
+ height: 50px
.jewel.label
- border: 1px solid rgba(0, 0, 0, .3)
font:
size: 1.9em
weight: bold
.closebutton
border: 0px
- border: 1px solid rgba(0, 0, 0, .3)
min-width: 16px
min-height: 16px
padding: 4px
@@ -60,28 +57,28 @@
.Group
position: absolute
- top: 0
- left: 0
- padding: 60px 20px 20px 20px
- border: 1px solid rgba(0, 0, 0, .3)
width: 100%
- height: 100%
- overflow: auto
+ top: 50px
+ bottom: 50px
+ overflow-y: auto
+ padding: 10px
.jewel.label
font:
size: 1.1em
.jewel.controlbar
- padding: 0px
- border: 1px solid rgba(0, 0, 0, .3)
- // display: flex
- // flex-direction: row-reverse
- // flex-wrap: wrap
-
+ padding: 0px 10px 10px 10px
+ position: absolute
+ bottom: 0
+ width: 100%
+ height: 50px
+ display: flex
+ flex-direction: row-reverse
+
+ .backdrop
background-color: rgba(0, 0, 0, .5)
- //filter: blur(5px)
+ // filter: blur(5px)
j|Alert
IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel")
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.