[royale-docs] branch master updated: jewel-alert: starting of a component sheet...

[ca...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/royale-docs.git


The following commit(s) were added to refs/heads/master by this push:
     new ddda270  jewel-alert: starting of a component sheet...
ddda270 is described below

commit ddda2703801e8d3b0bc563d00fae46dfe3450d52
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat May 25 20:39:54 2019 +0200

    jewel-alert: starting of a component sheet...
---
 component_sets/jewel/jewel_alert.md | 48 ++++++++++++++++++++++++++++++++++---
 royalesite.css                      | 11 ++++++++-
 2 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/component_sets/jewel/jewel_alert.md b/component_sets/jewel/jewel_alert.md
index b4b809f..eb3e751 100644
--- a/component_sets/jewel/jewel_alert.md
+++ b/component_sets/jewel/jewel_alert.md
@@ -20,13 +20,55 @@ title: Jewel Alert
 
 # Jewel Alert
 
-subtitle
+org.apache.royale.jewel.Alert
 
-text
+|            	| ALL                           	| JS 	| SWF 	|
+|------------	|-------------------------------	|----	|-----	|
+| extends    	| org.apache.royale.jewel.Group 	| -  	| -   	|
+| implements 	| org.apache.royale.core.IPopUp 	|    	|     	|
+
+Note: This component is currently only available in JS
+
+Available since 0.9.4
+
+## Overview
+
+The alert component displays a message and one or more buttons in a view that pops up over all other controls and views. 
+It uses the `AlertView` bead to display a modal dialog with a title and a variety of buttons configured through the flag property of its `show` static function.
+
+## Examples
+
+You can use the static method `show` to display the component:
+
+    Alert.show('This is an Alert component example that shows a label text and the default OK button.', 'Alert Example')
+
+This produces:
 
 {% raw %}
 <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" 
-width="400" height="400" 
+width="100%" height="300" 
 src="assets/BE0002_Using_Jewel_Alert_Control/index.html"></iframe>
 {% endraw %}
 
+You can attach listeners to the CloseEvent.CLOSE as follows:
+
+    var alert:Alert = Alert.show("Do you want to <b>save</b> your changes?", "Save Changes", 3);
+	alert.addEventListener(CloseEvent.CLOSE, alertClickHandler);
+
+
+Alert use the HTML dialog element, which currently has very limited cross-browser support.
+To ensure support across all modern browsers, we use dialogPolyfill extern.
+
+## Beads
+
+The Alert component uses the following beads:
+
+| Bead Type       	| Implementation                                            	| Description                                    	|
+|-----------------	|-----------------------------------------------------------	|------------------------------------------------	|
+| IBeadModel      	| org.apache.royale.jewel.beads.models.AlertModel           	| the data model for the Alert                   	|
+| IBeadView       	| org.apache.royale.jewel.beads.views.AlertView             	| the bead used to create the parts of the Alert 	|
+| IBeadController 	| org.apache.royale.jewel.beads.controllers.AlertController 	| the bead used to handle input events           	|
+| IBeadLayout     	| org.apache.royale.jewel.beads.layouts.NullLayout(*)       	| the bead used to postion the internal parts       |
+
+
+(*) NullLayout is used temporary
\ No newline at end of file
diff --git a/royalesite.css b/royalesite.css
index d49196a..8fd7c7c 100644
--- a/royalesite.css
+++ b/royalesite.css
@@ -321,8 +321,17 @@ a {
 	color: #c3d4d6;
 	background-color: #002b36;
 	border-radius: 10px;
-	padding: 15px;
 	font-size: 14px;
+	padding: 10px 10px 10px 30px;
+	margin-left: -30px;
+}
+
+.highlighter-rouge {
+	background-color: rgba(27,31,35,.05);
+	border-radius: 3px;
+	font-size: 85%;
+	margin: 0;
+	padding: .2em .4em;
 }
 
 pre {