royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: - jewel button and list example page use grid with various Cards -if buttons has icon but not text don't apply the gap between icon and textnode
Date Tue, 10 Jul 2018 16:51:20 GMT
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 6eb2724  - jewel button and list example page use grid with various Cards -if buttons
has icon but not text don't apply the gap between icon and textnode
6eb2724 is described below

commit 6eb2724421390c0b4a786203f3abeaad9d189bcd
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Tue Jul 10 18:51:15 2018 +0200

    - jewel button and list example page use grid with various Cards
    -if buttons has icon but not text don't apply the gap between icon and textnode
---
 .../src/main/resources/jewel-example-styles.css    |   2 +-
 .../src/main/royale/ButtonPlayGround.mxml          | 109 ++++++++++++---------
 .../src/main/royale/ListPlayGround.mxml            |  62 ++++++------
 .../projects/Jewel/src/main/resources/defaults.css |  12 +--
 .../main/royale/org/apache/royale/jewel/Button.as  |   8 +-
 .../Jewel/src/main/sass/components/_button.sass    |   4 -
 .../Jewel/src/main/sass/components/_card.sass      |  12 +--
 .../JewelTheme/src/main/resources/defaults.css     |   8 ++
 .../src/main/sass/components-primary/_button.sass  |  10 ++
 9 files changed, 134 insertions(+), 93 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 29313db..c9d4bd3 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -24,7 +24,7 @@
 
 .mainContent 
 {
-    padding: 20px;
+    padding: 5px;
 }
 
 .jewel.section
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index d0845dd..766b4e9 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -34,50 +34,71 @@ limitations under the License.
         <js:ContainerDataBinding/>
     </j:beads>
 
-	<j:Card>
-		<html:H3 text="Jewel Button"/>
+	<j:Grid gap="true">
+		<j:GridCell desktopNumerator="1" desktopDenominator="3"
+					tabletNumerator="1" tabletDenominator="1"
+					phoneNumerator="1" phoneDenominator="1">
+			<j:Card width="100%">
+				<html:H3 text="Jewel Button"/>
+				
+				<j:Button text="Default" id="button" click="clickHandler(event)"/>
+				<j:Button text="Button With More Text"/>
+				<j:Button text="Primary" emphasis="{Button.PRIMARY}"/>
+				<j:Button text="Secondary" emphasis="{Button.SECONDARY}"/>
+				<j:Button text="Emphasized" emphasis="{Button.EMPHASIZED}"/>
+				<j:Button text="Disabled" emphasis="{Button.PRIMARY}">
+					<j:beads>
+						<j:Disabled/>
+					</j:beads>
+				</j:Button>
+			</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="Button Sizes"/>
 		
-		<j:Button text="Default" id="button" click="clickHandler(event)"/>
-		<j:Button text="Button With More Text"/>
-		<j:Button text="Primary" emphasis="{Button.PRIMARY}"/>
-		<j:Button text="Secondary" emphasis="{Button.SECONDARY}"/>
-		<j:Button text="Emphasized" emphasis="{Button.EMPHASIZED}"/>
-		<j:Button text="Disabled" emphasis="{Button.PRIMARY}">
-			<j:beads>
-				<j:Disabled/>
-			</j:beads>
-		</j:Button>
+				<j:Button text="xsmall">
+					<j:beads>
+						<j:SizeControl size="{SizeControl.XSMALL}"/>
+					</j:beads>
+				</j:Button>
+				<j:Button text="small" emphasis="{Button.PRIMARY}">
+					<j:beads>
+						<j:SizeControl size="{SizeControl.SMALL}"/>
+					</j:beads>
+				</j:Button>
+				<j:Button text="large" emphasis="{Button.SECONDARY}">
+					<j:beads>
+						<j:SizeControl size="{SizeControl.LARGE}"/>
+					</j:beads>
+				</j:Button>
+				<j:Button text="xlarge" emphasis="{Button.EMPHASIZED}">
+					<j:beads>
+						<j:SizeControl size="{SizeControl.XLARGE}"/>
+					</j:beads>
+				</j:Button>
+			</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="Button with Icons"/>
+				
+				<j:Button text="print" emphasis="primary">
+					<j:icon>
+						<js:FontIcon text="{MaterialIconType.PRINT}" material="true"/>
+					</j:icon>
+				</j:Button>
+				<j:Button emphasis="primary">
+					<j:icon>
+						<js:FontIcon text="{MaterialIconType.FACE}" material="true"/>
+					</j:icon>
+				</j:Button>
+			</j:Card>
+		</j:GridCell>
+	</j:Grid>
 
-		<html:H4 text="Icons"/>
-		
-		<j:Button text="print" emphasis="primary">
-			<j:icon>
-				<js:FontIcon text="{MaterialIconType.PRINT}" material="true"/>
-			</j:icon>
-		</j:Button>
-
-		<html:H4 text="Sizes"/>
-		
-		<j:Button text="xsmall">
-			<j:beads>
-				<j:SizeControl size="{SizeControl.XSMALL}"/>
-			</j:beads>
-		</j:Button>
-		<j:Button text="small" emphasis="{Button.PRIMARY}">
-			<j:beads>
-				<j:SizeControl size="{SizeControl.SMALL}"/>
-			</j:beads>
-		</j:Button>
-		<j:Button text="large" emphasis="{Button.SECONDARY}">
-			<j:beads>
-				<j:SizeControl size="{SizeControl.LARGE}"/>
-			</j:beads>
-		</j:Button>
-		<j:Button text="xlarge" emphasis="{Button.EMPHASIZED}">
-			<j:beads>
-				<j:SizeControl size="{SizeControl.XLARGE}"/>
-			</j:beads>
-		</j:Button>
-	</j:Card>
-	
 </j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
index 45b4a54..02773c8 100644
--- a/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
@@ -56,36 +56,40 @@ limitations under the License.
 
 	<j:beads>
         <js:ContainerDataBinding/>
-		<j:VerticalLayout gap="3"/>
     </j:beads>
 
-	<j:Card>
-		<html:H3 text="Jewel List"/>
-		
-		<j:List id="list" width="200" height="300" change="onChange(event)">
-			<j:beads>
-				<js:ConstantBinding
-					sourcePropertyName="simple"
-					destinationPropertyName="dataProvider" />
-			</j:beads>
-		</j:List>
+	<j:Grid gap="true">
+		<j:GridCell desktopNumerator="1" desktopDenominator="2"
+					tabletNumerator="1" tabletDenominator="2"
+					phoneNumerator="1" phoneDenominator="1">
+			<j:Card width="100%">
+				<html:H3 text="Jewel List"/>
+				<j:List id="list" width="200" height="300" change="onChange(event)">
+					<j:beads>
+						<js:ConstantBinding
+							sourcePropertyName="simple"
+							destinationPropertyName="dataProvider" />
+					</j:beads>
+				</j:List>
+				<j:Label id="selected"/>
+				<j:Button text="Assign new data" emphasis="{Button.PRIMARY}" click="assignNewData()"/>
+			</j:Card>
+		</j:GridCell>
+		<j:GridCell desktopNumerator="1" desktopDenominator="2"
+					tabletNumerator="1" tabletDenominator="2"
+					phoneNumerator="1" phoneDenominator="1">
+			<j:Card width="100%">
+				<html:H3 text="Jewel List With ItemRenderer"/>
+				<j:List width="200" height="300" className="iconListItemRenderer">
+					<j:beads>
+						<js:ConstantBinding
+							sourceID="listModel"
+							sourcePropertyName="iconListData"
+							destinationPropertyName="dataProvider" />
+					</j:beads>
+				</j:List>
+			</j:Card>
+		</j:GridCell>
+	</j:Grid>
 
-		<j:Label id="selected"/>
-
-		<j:Button text="Assign new data" emphasis="{Button.PRIMARY}" click="assignNewData()"/>
-	</j:Card>
-
-	<j:Card>
-		<html:H3 text="Jewel List With ItemRenderer"/>
-		
-		<j:List width="200" height="300" className="iconListItemRenderer">
-			<j:beads>
-				<js:ConstantBinding
-					sourceID="listModel"
-					sourcePropertyName="iconListData"
-					destinationPropertyName="dataProvider" />
-			</j:beads>
-		</j:List>
-
-	</j:Card>
 </j:SectionContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index c2ab767..ab09126 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -133,16 +133,12 @@ j|Alert {
 .jewel.button[disabled] {
   cursor: unset;
 }
-.jewel.button .fonticon {
-  margin-left: 0px;
-  margin-right: 8px;
-}
 
 .jewel.card {
-  flex-direction: column;
-  min-width: 320px;
-  min-height: 180px;
-  width: 350px;
+  min-width: 240px;
+  min-height: 52px;
+  overflow: hidden;
+  position: relative;
 }
 
 j|Card {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
index 72287e6..0173f90 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -489,7 +489,13 @@ package org.apache.royale.jewel
         {
             _icon = value;
 
-            toggleClass("icon", (_icon != null));
+            var iconClass:String = "icon"
+            if(text != "")
+            {
+                iconClass += "WithSpace";
+            }
+
+            toggleClass(iconClass, (_icon != null));
             
             COMPILE::JS
             {
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_button.sass b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
index 2b64ac0..24bb5dc 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_button.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
@@ -52,7 +52,3 @@ $button-padding: 0.72em 1.12em !default
     &[disabled]
         cursor: unset
 
-    .fonticon
-        margin-left: 0px
-        margin-right: 8px
-
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_card.sass b/frameworks/projects/Jewel/src/main/sass/components/_card.sass
index a5b3544..709dd77 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_card.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_card.sass
@@ -20,18 +20,18 @@
 // Jewel Card
 
 // Card variables
-$card-width: 320px !default
-$card-height: 180px !default
+$card-width: 240px !default
+$card-height: 52px !default
 
 .jewel.card
-    flex-direction: column
+    //flex-direction: column
     
     min-width: $card-width
     min-height: $card-height
 
-    width: 350px
-    //overflow: hidden
-    //position: relative
+    // width: 350px
+    overflow: hidden
+    position: relative
     //z-index: 1
 
 j|Card
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index b2ef53f..36412fa 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -154,6 +154,14 @@ div {
   font-weight: 400;
   text-shadow: unset;
 }
+.jewel.button.icon i {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+  margin-left: 0px;
+  margin-right: 8px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#54b7f3, #24a3ef);
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
index bcbb129..5afdb92 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
@@ -65,6 +65,16 @@ $button-border-radius: $border-radius
 			weight: $font-weight-normal
 		text:
 			shadow: unset
+	
+	&.icon
+		i
+			margin-left: 0px
+			margin-right: 0px
+
+	&.iconWithSpace
+		i
+			margin-left: 0px
+			margin-right: 8px
 
 .jewel.button.primary
 	+button-theme($primary-color, $font-theme-color)


Mime
View raw message