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/07/12 13:35:57 UTC

[royale-asjs] branch develop updated: fix card sizes in Jewel Example

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 4b5d5e9  fix card sizes in Jewel Example
4b5d5e9 is described below

commit 4b5d5e927d2e377e53c1b71367788c0a288a6294
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Jul 12 15:35:51 2018 +0200

    fix card sizes in Jewel Example
---
 .../src/main/royale/ButtonPlayGround.mxml          |   6 +-
 .../src/main/royale/CheckBoxPlayGround.mxml        |   2 +-
 .../src/main/royale/DropDownListPlayGround.mxml    |   2 +-
 .../src/main/royale/GridPlayGround.mxml            |  62 ++++++-
 .../src/main/royale/LabelPlayGround.mxml           |   2 +-
 .../src/main/royale/RadioButtonPlayGround.mxml     |   2 +-
 .../src/main/royale/SliderPlayGround.mxml          |   2 +-
 .../src/main/royale/TextInputPlayGround.mxml       | 194 +++++++++++----------
 8 files changed, 173 insertions(+), 99 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 766b4e9..e9b8164 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -38,7 +38,7 @@ limitations under the License.
 		<j:GridCell desktopNumerator="1" desktopDenominator="3"
 					tabletNumerator="1" tabletDenominator="1"
 					phoneNumerator="1" phoneDenominator="1">
-			<j:Card width="100%">
+			<j:Card>
 				<html:H3 text="Jewel Button"/>
 				
 				<j:Button text="Default" id="button" click="clickHandler(event)"/>
@@ -56,7 +56,7 @@ limitations under the License.
 		<j:GridCell desktopNumerator="1" desktopDenominator="3"
 					tabletNumerator="1" tabletDenominator="2"
 					phoneNumerator="1" phoneDenominator="1">
-			<j:Card width="100%">
+			<j:Card>
 				<html:H4 text="Button Sizes"/>
 		
 				<j:Button text="xsmall">
@@ -84,7 +84,7 @@ limitations under the License.
 		<j:GridCell desktopNumerator="1" desktopDenominator="3"
 					tabletNumerator="1" tabletDenominator="2"
 					phoneNumerator="1" phoneDenominator="1">
-			<j:Card width="100%">
+			<j:Card>
 				<html:H4 text="Button with Icons"/>
 				
 				<j:Button text="print" emphasis="primary">
diff --git a/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
index 713552f..9d37063 100644
--- a/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
@@ -21,7 +21,7 @@ limitations under the License.
 		xmlns:j="library://ns.apache.org/royale/jewel"
 		xmlns:html="library://ns.apache.org/royale/html">
 
-	<j:Card>   
+	<j:Card width="350">   
 		<html:H3 text="Jewel CheckBox"/>
 
 		<j:CheckBox text="Not Checkbox"/>
diff --git a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
index 9be5f34..551ea59 100644
--- a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
@@ -39,7 +39,7 @@ limitations under the License.
 		]]>
 	</fx:Script>
 
-	<j:Card>
+	<j:Card width="350">
 		<j:beads>
 			<j:HorizontalLayout gap="3"/>
 			<js:ViewDataBinding />
diff --git a/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
index 9e31f3d..7075521 100644
--- a/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
@@ -35,6 +35,7 @@ limitations under the License.
 
 
 	<html:H3 text="Grids"/>
+	<j:CheckBox text="Turn Gap on/off" change="useGap = !useGap;" selected="true"/>
 
 	<j:Grid className="wrapper" gap="{useGap}">
 		<j:GridCell desktopNumerator="1" desktopDenominator="1"
@@ -461,9 +462,66 @@ limitations under the License.
 					phoneNumerator="1" phoneDenominator="4">
 			<html:Div className="box" text="12"/>
 		</j:GridCell>
-		
 	</j:Grid>
-	<j:Button text="gap: {useGap}" emphasis="primary" click="useGap = !useGap;"/>
 
+	<html:H3 text="Grids Responsive Visibility"/>
+
+	<j:Grid className="wrapper" gap="true">
+		<j:GridCell desktopNumerator="1" desktopDenominator="2"
+					tabletNumerator="1" tabletDenominator="2"
+					phoneNumerator="1" phoneDenominator="2">
+			<html:Div className="box" text="2a"/>
+		</j:GridCell>
+		<j:GridCell desktopNumerator="1" desktopDenominator="2"
+					tabletNumerator="1" tabletDenominator="2"
+					phoneNumerator="1" phoneDenominator="2"
+					wideScreenVisible="false">
+			<html:Div className="box" text="2b - Hidden in WideScreen"/>
+		</j:GridCell>
+	</j:Grid>
+
+	<j:Grid className="wrapper" gap="true">
+		<j:GridCell desktopNumerator="1" desktopDenominator="3"
+					tabletNumerator="1" tabletDenominator="3"
+					phoneNumerator="1" phoneDenominator="3"
+					phoneVisible="false">
+			<html:Div className="box" text="3a - Hidden in Phones"/>
+		</j:GridCell>
+		<j:GridCell desktopNumerator="1" desktopDenominator="3"
+					tabletNumerator="1" tabletDenominator="3"
+					phoneNumerator="1" phoneDenominator="3"
+					tabletVisible="false">
+			<html:Div className="box" text="3b - Hidden in Tablet"/>
+		</j:GridCell>
+		<j:GridCell desktopNumerator="1" desktopDenominator="3"
+					tabletNumerator="1" tabletDenominator="3"
+					phoneNumerator="1" phoneDenominator="3">
+			<html:Div className="box" text="3c"/>
+		</j:GridCell>
+	</j:Grid>
+
+	<j:Grid className="wrapper" gap="true">
+		<j:GridCell desktopNumerator="1" desktopDenominator="4"
+					tabletNumerator="1" tabletDenominator="2"
+					phoneNumerator="1" phoneDenominator="1">
+			<html:Div className="box" text="4a"/>
+		</j:GridCell>
+		<j:GridCell desktopNumerator="1" desktopDenominator="4"
+					tabletNumerator="1" tabletDenominator="2"
+					phoneNumerator="1" phoneDenominator="1">
+			<html:Div className="box" text="4b"/>
+		</j:GridCell>
+		<j:GridCell desktopNumerator="1" desktopDenominator="4"
+					tabletNumerator="1" tabletDenominator="2"
+					phoneNumerator="1" phoneDenominator="1"
+					desktopVisible="false">
+			<html:Div className="box" text="4c - Hidden in Desktop"/>
+		</j:GridCell>
+		<j:GridCell desktopNumerator="1" desktopDenominator="4"
+					tabletNumerator="1" tabletDenominator="2"
+					phoneNumerator="1" phoneDenominator="1">
+			<html:Div className="box" text="4d"/>
+		</j:GridCell>
+	</j:Grid>
 	
 </j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
index 5b1607b..67635c0 100644
--- a/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
@@ -32,7 +32,7 @@ limitations under the License.
     	]]>
 	</fx:Script>
 	
-	<j:Card width="320">
+	<j:Card width="350">
 		<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/RadioButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
index 62b8b1f..5edac7f 100644
--- a/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
@@ -21,7 +21,7 @@ limitations under the License.
 				xmlns:j="library://ns.apache.org/royale/jewel"
 				xmlns:html="library://ns.apache.org/royale/html">
     
-	<j:Card>
+	<j:Card width="350">
 		<html:H3 text="Jewel RadioButton"/>
 
 		<j:RadioButton text="RadioButton 1" groupName="radios" value="Test 1"/>
diff --git a/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
index 9285356..bc0ee8d 100644
--- a/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
@@ -56,7 +56,7 @@ limitations under the License.
         <js:ContainerDataBinding/>
     </j:beads>
 
-	<j:Card>
+	<j:Card width="350">
 		<html:H3 text="Jewel Slider"/>
 		
 		<j:Slider id="slider_w" width="250" value="250" minimum="100" maximum="500"
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index 10b531b..f6ca313 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -22,94 +22,110 @@ limitations under the License.
 		xmlns:js="library://ns.apache.org/royale/basic"
 		xmlns:html="library://ns.apache.org/royale/html">
 
-	<j:Card>
-		<html:H3 text="Jewel TextInput"/>
+	<j:Grid gap="true">
+		<j:GridCell desktopNumerator="1" desktopDenominator="3"
+					tabletNumerator="1" tabletDenominator="1"
+					phoneNumerator="1" phoneDenominator="1">
+			<j:Card>
+				<html:H3 text="Jewel TextInput"/>
+
+				<j:Group>
+					<j:beads>
+						<j:HorizontalLayout gap="3"/>
+					</j:beads>
+					<j:Button text="Check it!" emphasis="primary"/>
+					<j:TextInput text="A TextInput"/>
+				</j:Group>
+
+				<j:Group>
+					<j:beads>
+						<j:HorizontalLayout gap="3"/>
+					</j:beads>
+					<j:TextInput>
+						<j:beads>
+							<j:TextPrompt prompt="With prompt..."/>
+						</j:beads>
+					</j:TextInput>
+					<j:Button text="Send" emphasis="secondary"/>
+				</j:Group>
+
+				<j:TextInput text="Disabled with text...">
+					<j:beads>
+						<j:TextPrompt prompt="Disabled TextInput..."/>
+						<j:Disabled/>
+					</j:beads>
+				</j:TextInput>
+
+				<j:TextInput>
+					<j:beads>
+						<j:TextPrompt prompt="Disabled with prompt..."/>
+						<j:Disabled/>
+					</j:beads>
+				</j:TextInput>
+			</j:Card>
+		</j:GridCell>
+		<j:GridCell desktopNumerator="1" desktopDenominator="3"
+					tabletNumerator="1" tabletDenominator="2"
+					phoneNumerator="1" phoneDenominator="1">
+			<j:Card width="100%">
+				<html:H4 text="TextInput Sizes"/>
+				<j:TextInput>
+					<j:beads>
+						<j:TextPrompt prompt="Size xsmall"/>
+						<j:SizeControl size="xsmall"/>
+					</j:beads>
+				</j:TextInput>
+				
+				<j:TextInput>
+					<j:beads>
+						<j:TextPrompt prompt="Size small"/>
+						<j:SizeControl size="small"/>
+					</j:beads>
+				</j:TextInput>
+				
+				<j:TextInput>
+					<j:beads>
+						<j:TextPrompt prompt="Size normal"/>
+					</j:beads>
+				</j:TextInput>
+
+				<j:TextInput>
+					<j:beads>
+						<j:TextPrompt prompt="Size large"/>
+						<j:SizeControl size="large"/>
+					</j:beads>
+				</j:TextInput>
+
+				<j:TextInput>
+					<j:beads>
+						<j:TextPrompt prompt="Size xlarge"/>
+						<j:SizeControl size="xlarge"/>
+					</j:beads>
+				</j:TextInput>
+			</j:Card>
+		</j:GridCell>
+		<j:GridCell desktopNumerator="1" desktopDenominator="3"
+					tabletNumerator="1" tabletDenominator="2"
+					phoneNumerator="1" phoneDenominator="1">
+			<j:Card width="100%">
+				<html:H4 text="Jewell TextArea"/>
+
+				<j:TextArea text="A TextArea with 5 rows" rows="5"/>
+
+				<j:TextArea>
+					<j:beads>
+						<j:TextPrompt prompt="With prompt..."/>
+					</j:beads>
+				</j:TextArea>
+
+				<j:TextArea text="A TextArea">
+					<j:beads>
+						<j:TextPrompt prompt="with prompt..."/>
+						<j:Disabled/>
+					</j:beads>
+				</j:TextArea>
+			</j:Card>
+		</j:GridCell>
+	</j:Grid>
 
-		<j:Group>
-			<j:beads>
-				<j:HorizontalLayout gap="3"/>
-			</j:beads>
-			<j:Button text="Check it!" emphasis="primary"/>
-			<j:TextInput text="A TextInput"/>
-		</j:Group>
-
-		<j:Group>
-			<j:beads>
-				<j:HorizontalLayout gap="3"/>
-			</j:beads>
-			<j:TextInput>
-				<j:beads>
-					<j:TextPrompt prompt="With prompt..."/>
-				</j:beads>
-			</j:TextInput>
-			<j:Button text="Send" emphasis="secondary"/>
-		</j:Group>
-
-		<j:TextInput text="Disabled with text...">
-			<j:beads>
-				<j:TextPrompt prompt="Disabled TextInput..."/>
-				<j:Disabled/>
-			</j:beads>
-		</j:TextInput>
-
-		<j:TextInput>
-			<j:beads>
-				<j:TextPrompt prompt="Disabled with prompt..."/>
-				<j:Disabled/>
-			</j:beads>
-		</j:TextInput>
-
-		<html:H4 text="Sizes"/>
-
-		<j:TextInput>
-			<j:beads>
-				<j:TextPrompt prompt="Size xsmall"/>
-				<j:SizeControl size="xsmall"/>
-			</j:beads>
-		</j:TextInput>
-		
-		<j:TextInput>
-			<j:beads>
-				<j:TextPrompt prompt="Size small"/>
-				<j:SizeControl size="small"/>
-			</j:beads>
-		</j:TextInput>
-		
-		<j:TextInput>
-			<j:beads>
-				<j:TextPrompt prompt="Size normal"/>
-			</j:beads>
-		</j:TextInput>
-
-		<j:TextInput>
-			<j:beads>
-				<j:TextPrompt prompt="Size large"/>
-				<j:SizeControl size="large"/>
-			</j:beads>
-		</j:TextInput>
-
-		<j:TextInput>
-			<j:beads>
-				<j:TextPrompt prompt="Size xlarge"/>
-				<j:SizeControl size="xlarge"/>
-			</j:beads>
-		</j:TextInput>
-
-		<html:H3 text="Jewel TextArea"/>
-
-		<j:TextArea text="A TextArea with 5 rows" rows="5"/>
-
-		<j:TextArea>
-			<j:beads>
-				<j:TextPrompt prompt="With prompt..."/>
-			</j:beads>
-		</j:TextArea>
-
-		<j:TextArea text="A TextArea">
-			<j:beads>
-				<j:TextPrompt prompt="with prompt..."/>
-				<j:Disabled/>
-			</j:beads>
-		</j:TextArea>
-	</j:Card>
 </j:SectionContent>