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 <[email protected]>
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)
