This is an automated email from the ASF dual-hosted git repository.
carlosrovira 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 76130e5 latest changes to make content more visible, add grids
examples, make Container in Jewel suppor ClassListSelector, add
JewelToggleButton
76130e5 is described below
commit 76130e5edcd4c79aec285627a9a954747606ca2e
Author: Carlos Rovira <[email protected]>
AuthorDate: Tue Jul 3 20:54:37 2018 +0200
latest changes to make content more visible, add grids examples, make
Container in Jewel suppor ClassListSelector, add JewelToggleButton
---
.../src/main/resources/jewel-example-styles.css | 13 +-
.../src/main/royale/AlertPlayGround.mxml | 7 +-
.../src/main/royale/CardPlayGround.mxml | 5 +-
.../src/main/royale/GridPlayGround.mxml | 451 ++++++++++++++++++++-
.../src/main/royale/HeadingsAndText.mxml | 5 +-
.../src/main/royale/LabelPlayGround.mxml | 5 +-
.../JewelExample/src/main/royale/MainContent.mxml | 12 +-
.../projects/Jewel/src/main/resources/defaults.css | 36 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../apache/royale/jewel/ApplicationMainContent.as | 29 ++
.../royale/org/apache/royale/jewel/Container.as | 66 ++-
.../royale/org/apache/royale/jewel/ToggleButton.as | 189 +++++++++
.../sass/components/_applicationmaincontent.sass | 5 +-
.../src/main/sass/components/_togglebutton.sass | 58 ++-
.../Jewel/src/main/sass/components/_topappbar.sass | 7 +-
.../projects/Jewel/src/main/sass/defaults.sass | 1 +
16 files changed, 836 insertions(+), 54 deletions(-)
diff --git
a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
index d098485..00b87e8 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -22,7 +22,7 @@
@namespace "http://www.w3.org/1999/xhtml";;
.mainContent {
- margin: 20px;
+ padding: 20px;
}
.navIconLinkItemRenderer
@@ -39,4 +39,15 @@
{
height: 140px;
padding: 16px;
+}
+
+.wrapper {
+ outline: 0px dashed navy;
+}
+
+.box {
+ background: #dedede;
+ border-radius: 5px;
+ padding: 10px;
+ outline: 1px dashed navy;
}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/royale/AlertPlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/AlertPlayGround.mxml
index b3ca974..c26bd83 100644
--- a/examples/royale/JewelExample/src/main/royale/AlertPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/AlertPlayGround.mxml
@@ -19,8 +19,7 @@ limitations under the License.
-->
<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:j="library://ns.apache.org/royale/jewel"
- xmlns:html="library://ns.apache.org/royale/html"
- width="350">
+ xmlns:html="library://ns.apache.org/royale/html">
<fx:Script>
<![CDATA[
@@ -46,7 +45,7 @@ limitations under the License.
]]>
</fx:Script>
- <j:Card>
+ <j:Card width="350">
<html:H3 text="Jewel Alert"/>
<j:Label text="Click the button below to display a simple Alert window"
@@ -58,5 +57,5 @@ limitations under the License.
<j:Button text="Click Me" click="clickHandler(event)"/>
<j:Label id="status"/>
</j:Card>
-
+
</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/CardPlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/CardPlayGround.mxml
index 24deabf..2256c43 100644
--- a/examples/royale/JewelExample/src/main/royale/CardPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/CardPlayGround.mxml
@@ -19,10 +19,9 @@ limitations under the License.
-->
<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:j="library://ns.apache.org/royale/jewel"
- xmlns:html="library://ns.apache.org/royale/html"
- width="350">
+ xmlns:html="library://ns.apache.org/royale/html">
- <j:Card>
+ <j:Card width="350">
<html:H3 text="Cards (TODO)"/>
</j:Card>
diff --git a/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
index c077cca..9e31f3d 100644
--- a/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
@@ -18,13 +18,452 @@ limitations under the License.
-->
<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009";
- xmlns:j="library://ns.apache.org/royale/jewel"
- xmlns:html="library://ns.apache.org/royale/html"
- width="350">
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+
xmlns:html="library://ns.apache.org/royale/html">
- <j:Card>
- <html:H3 text="Grids (TODO)"/>
+ <fx:Script>
+ <![CDATA[
+ [Bindable]
+ public var useGap:Boolean = true;
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
+ <html:H3 text="Grids"/>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1"
tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="1"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1"
tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="2"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1"
tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="2"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="3"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="3"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="3"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="4"
+ tabletNumerator="1"
tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4"
+ tabletNumerator="1"
tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4"
+ tabletNumerator="1"
tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4"
+ tabletNumerator="1"
tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4"/>
+ </j:GridCell>
+ </j:Grid>
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="5"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="5"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="5"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="5"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="5"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="6"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6"
+ tabletNumerator="1"
tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
- </j:Card>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1"
tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1"
tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid id="g" className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1"
tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1"
tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1"
tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1"
tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1"
tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1"
tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1"
tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1"
tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1"
tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1"
tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1"
tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1"
tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+
+ </j:Grid>
+ <j:Button text="gap: {useGap}" emphasis="primary" click="useGap =
!useGap;"/>
+
+
</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml
b/examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml
index a5e25cf..92f6077 100644
--- a/examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml
+++ b/examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml
@@ -19,10 +19,9 @@ limitations under the License.
-->
<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:j="library://ns.apache.org/royale/jewel"
- xmlns:html="library://ns.apache.org/royale/html"
- width="350">
+ xmlns:html="library://ns.apache.org/royale/html">
- <j:Card>
+ <j:Card width="350">
<html:H3 text="Headings and text"/>
<html:H1 text="Heading H1"/>
diff --git a/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
index 88cab62..5b1607b 100644
--- a/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
@@ -19,8 +19,7 @@ limitations under the License.
-->
<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:j="library://ns.apache.org/royale/jewel"
- xmlns:html="library://ns.apache.org/royale/html"
- width="320">
+ xmlns:html="library://ns.apache.org/royale/html">
<fx:Script>
<![CDATA[
@@ -33,7 +32,7 @@ limitations under the License.
]]>
</fx:Script>
- <j:Card>
+ <j:Card width="320">
<html:H3 text="Jewel Label"/>
<j:Label id="label" text="This is a Label"
click="labelClick(event)"/>
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index 354d6c9..df46348 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -34,6 +34,12 @@ limitations under the License.
main.showContent(item.href);
drawer.close();
}
+
+ private function toggleTopAppBarFixed():void
+ {
+ topappbar.fixed = !topappbar.fixed;
+ main.hasTopAppBar = topappbar.fixed;
+ }
]]>
</fx:Script>
@@ -86,16 +92,16 @@ limitations under the License.
<js:Icon text="{MaterialIconType.VISIBILITY}"
material="true"/>
</j:icon>
</j:Button>
- <j:Button click="topappbar.fixed = !topappbar.fixed">
+ <j:ToggleButton click="toggleTopAppBarFixed()">
<j:icon>
<js:Icon text="{MaterialIconType.LOCK}"
material="true"/>
</j:icon>
- </j:Button>
+ </j:ToggleButton>
</j:TopAppBarSection>
</j:TopAppBarRow>
</j:TopAppBar>
- <j:ApplicationMainContent id="main">
+ <j:ApplicationMainContent id="main" hasTopAppBar="true"
className="mainContent">
<local:AlertPlayGround id="alert_panel"/>
<local:ButtonPlayGround id="button_panel" isActive="true"/>
<local:DropDownListPlayGround id="dropdownlist_panel"/>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index b85b900..a40e28f 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -103,6 +103,11 @@ j|Alert {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
}
+.jewel.main {
+ width: 100%;
+ height: 100%;
+}
+
j|ApplicationMainContent {
IBeadView:
ClassReference("org.apache.royale.core.beads.views.ContainerView");
IViewport: ClassReference("org.apache.royale.core.supportClasses.Viewport");
@@ -2686,6 +2691,32 @@ j|TitleBar {
IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.TitleBarView");
}
+.jewel.togglebutton {
+ margin: 0;
+ padding: 0.72em 1.12em;
+ cursor: pointer;
+ user-select: none;
+ display: inline-flex;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ zoom: 1;
+ vertical-align: middle;
+ overflow: hidden;
+ outline: none;
+ white-space: nowrap;
+ line-height: normal !important;
+ text-align: center;
+ text-decoration: none;
+}
+.jewel.togglebutton[disabled] {
+ cursor: unset;
+}
+.jewel.togglebutton .icon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
.jewel.topappbar {
display: flex;
flex-direction: column;
@@ -2697,8 +2728,9 @@ j|TitleBar {
position: fixed;
top: 0px;
}
-.jewel.topappbar.fixed + div {
- padding-top: 64px;
+
+.has-topappbar {
+ padding-top: 64px !important;
}
.jewel.topappbarrow {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index f300753..7fcc0ab 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -31,6 +31,7 @@
<component id="GridCell" class="org.apache.royale.jewel.GridCell"/>
<component id="Button" class="org.apache.royale.jewel.Button"/>
+ <component id="ToggleButton" class="org.apache.royale.jewel.ToggleButton"/>
<component id="Label" class="org.apache.royale.jewel.Label"/>
<component id="TextInput" class="org.apache.royale.jewel.TextInput"/>
<component id="TextArea" class="org.apache.royale.jewel.TextArea"/>
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as
index 39bc8e6..e47e169 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as
@@ -53,6 +53,35 @@ package org.apache.royale.jewel
typeNames = "jewel main";
}
+ private var _hasTopAppBar:Boolean;
+
+ /**
+ * a boolean flag to indicate if the container needs to make some room
+ * for a TopAppBar so content doesn't be hide
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get hasTopAppBar():Boolean
+ {
+ return _hasTopAppBar;
+ }
+
+ public function set hasTopAppBar(value:Boolean):void
+ {
+ if (_hasTopAppBar != value)
+ {
+ _hasTopAppBar = value;
+
+ COMPILE::JS
+ {
+ toggleClass("has-topappbar", _hasTopAppBar);
+ }
+ }
+ }
+
/**
* shows a concrete content and hides the rest
*
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as
index ae5b28d..d296f3f 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as
@@ -23,6 +23,8 @@ package org.apache.royale.jewel
import org.apache.royale.core.ValuesManager;
import org.apache.royale.events.Event;
import org.apache.royale.utils.MXMLDataInterpreter;
+ import org.apache.royale.utils.ClassSelectorList;
+ import org.apache.royale.utils.IClassSelectorListSupport;
/**
* The default property uses when additional MXML content appears
within an element's
@@ -67,7 +69,7 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- public class Container extends ContainerBase implements IMXMLDocument
+ public class Container extends ContainerBase implements IMXMLDocument,
IClassSelectorListSupport
{
/**
* Constructor.
@@ -79,12 +81,66 @@ package org.apache.royale.jewel
*/
public function Container()
{
- COMPILE::JS
- {
- typeNames = 'jewel container';
- }
super();
+ classSelectorList = new ClassSelectorList(this);
+ typeNames = "";
}
+
+ protected var classSelectorList:ClassSelectorList;
+
+ COMPILE::JS
+ override protected function setClassName(value:String):void
+ {
+ classSelectorList.addNames(value);
+ }
+
+ /**
+ * adds a class name
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function addClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.add(name);
+ }
+ }
+
+ /**
+ * removes a class name
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function removeClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.remove(name);
+ }
+ }
+
+ /**
+ * toggle a class name
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function toggleClass(name:String, value:Boolean):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.toggle(name, value);
+ }
+ }
private var _mxmlDescriptor:Array;
private var _mxmlDocument:Object = this;
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as
new file mode 100644
index 0000000..1bcfc64
--- /dev/null
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as
@@ -0,0 +1,189 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel
+{
+ import org.apache.royale.core.ISelectable;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IToggleButtonModel;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.Event;
+
+ COMPILE::SWF
+ {
+ import flash.events.MouseEvent;
+ }
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.events.MouseEvent;
+ }
+
+ //--------------------------------------
+ // Events
+ //--------------------------------------
+
+ /**
+ * Dispatched when the user clicks on a button.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ [Event(name="click", type="org.apache.royale.events.MouseEvent")]
+
+ /**
+ * Dispatched when ToggleTextButton is being selected/unselected.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ /**
+ * The ToggleButton class is a TextButton that supports
+ * a selected property.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class ToggleButton extends Button implements ISelectable
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function ToggleButton()
+ {
+ super();
+
+ typeNames = "jewel togglebutton";
+
+ COMPILE::SWF
+ {
+ addEventListener(MouseEvent.CLICK, internalMouseHandler);
+ }
+ }
+
+ private var _selected:Boolean = false;
+
+ [Bindable("change")]
+ /**
+ * <code>true</code> if the Button is selected.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get selected():Boolean
+ {
+ COMPILE::SWF
+ {
+ return IToggleButtonModel(model).selected;
+ }
+ COMPILE::JS
+ {
+ return _selected;
+ }
+ }
+
+ /**
+ * @private
+ */
+ public function set selected(value:Boolean):void
+ {
+ COMPILE::SWF
+ {
+ IToggleButtonModel(model).selected = value;
+ internalSelected()
+ dispatchEvent(new Event("change"));
+ }
+ COMPILE::JS
+ {
+ if (_selected != value)
+ {
+ _selected = value;
+ internalSelected();
+ dispatchEvent(new Event("change"));
+ }
+ }
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ super.createElement();
+ element.addEventListener("click", clickHandler, false);
+ internalSelected();
+
+ return element;
+ }
+
+ COMPILE::JS
+ private function clickHandler(event:Event):void
+ {
+ selected = !selected;
+ }
+
+ COMPILE::SWF
+ private function internalMouseHandler(event:MouseEvent) : void
+ {
+ selected = !selected;
+ }
+ COMPILE::SWF
+ private var savedClassName:String;
+ private function internalSelected():void
+ {
+ COMPILE::SWF
+ {
+ if(!savedClassName == null)
+ savedClassName = className;
+ var name:String = savedClassName;
+ if (selected)
+ {
+ className = "selected" + (name ? " " + name : "");
+ }
+ else
+ {
+ className = (name ? " " + name : "");
+ }
+ }
+ COMPILE::JS
+ {
+ var isToggleTextButtonSelected:Boolean =
element.classList.contains("selected");
+ //sync the class with the state
+ if(isToggleTextButtonSelected != _selected)
+ toggleClass("selected", _selected);
+
+ }
+ }
+
+ }
+}
diff --git
a/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
b/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
index 42bdce9..4ea0450 100644
---
a/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
+++
b/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
@@ -22,12 +22,13 @@
// ApplicationMainContent variables
.jewel.main
- // background: #55dede
+ width: 100%
+ height: 100%
+
// display: inline-block
// flex-grow: 1
// z-index: 1
// position: relative
- // height: 100%
// overflow: hidden !important
j|ApplicationMainContent
diff --git
a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
b/frameworks/projects/Jewel/src/main/sass/components/_togglebutton.sass
similarity index 52%
copy from
examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
copy to frameworks/projects/Jewel/src/main/sass/components/_togglebutton.sass
index d098485..42825b4 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/frameworks/projects/Jewel/src/main/sass/components/_togglebutton.sass
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,26 +16,47 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-@namespace "http://www.w3.org/1999/xhtml";;
+// Jewel Button
-.mainContent {
- margin: 20px;
-}
+// Button variables
+$button-margin: 0 !default
+$button-padding: 0.72em 1.12em !default
-.navIconLinkItemRenderer
-{
- IItemRenderer:
ClassReference("itemRenderers.NavigationIconLinkItemRenderer");
-}
+.jewel.togglebutton
+ margin: $button-margin
+ padding: $button-padding
-.navIconLinkItemRenderer .icon
-{
- margin-right: 24px;
-}
+ cursor: pointer
+ user-select: none
-.jewel.drawerheader img
-{
- height: 140px;
- padding: 16px;
-}
\ No newline at end of file
+ display: inline-flex
+ position: relative
+ align-items: center
+ justify-content: center
+ zoom: 1
+ vertical-align: middle
+ overflow: hidden
+ outline: none
+
+ // -- BUTTON LABEL
+ white-space: nowrap
+ line-height: normal !important
+
+ text:
+ align: center
+ decoration: none
+
+ // &:focus
+
+ &[disabled]
+ cursor: unset
+
+ .icon
+ margin-left: 0px
+ margin-right: 8px
+
+@media -royale-swf
+ j|ToggleTextButton
+ //IBeadModel:
ClassReference("org.apache.royale.jewel.beads.models.ToggleButtonModel")
+ //IBeadView:
ClassReference("org.apache.royale.html.beads.CSSTextToggleButtonView")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
index 3612041..cf34c56 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
@@ -34,9 +34,10 @@ $top-app-bar-button-size: 48px
position: fixed
top: 0px
- // this adjust the container declared after TopAppBar and with only
one row (most common case)
- + div
- padding-top: $top-app-bar-row-height
+// this adjust the container declared after TopAppBar and with only one row
(most common case)
+// used by ApplicationMainContent
+.has-topappbar
+ padding-top: $top-app-bar-row-height !important
.jewel.topappbarrow
display: flex
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass
b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index dd72ac6..f4fc0d0 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -42,5 +42,6 @@
@import "components/slider"
@import "components/textinput"
@import "components/titlebar"
+@import "components/togglebutton"
@import "components/topappbar"
