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 <carlosrov...@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 carlosrov...@apache.org.