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 9712fd9 finished main jewel badge
9712fd9 is described below
commit 9712fd99bf9cb9e42b26437c5bece490f79f3687
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon Jan 21 19:20:14 2019 +0100
finished main jewel badge
---
.../src/main/royale/ButtonPlayGround.mxml | 44 +++++++++++-
.../TourDeJewel/src/main/royale/MainContent.mxml | 10 ++-
.../projects/Jewel/src/main/resources/defaults.css | 35 ++++++----
.../apache/royale/jewel/beads/controls/Badge.as | 81 +++++++++++++++++++++-
.../Jewel/src/main/sass/components/_badge.sass | 57 +++++++--------
.../JewelTheme/src/main/resources/defaults.css | 22 ++++++
.../main/sass/components-emphasized}/_badge.sass | 36 +---------
.../src/main/sass/components-primary}/_badge.sass | 43 +++---------
.../main/sass/components-secondary}/_badge.sass | 36 +---------
.../themes/JewelTheme/src/main/sass/defaults.sass | 3 +
10 files changed, 224 insertions(+), 143 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
b/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
index 6187762..545f133 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
@@ -153,7 +153,49 @@ limitations under the License.
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1"
phoneDenominator="1">
<j:Card>
-
+ <html:H3 text="Buttons with Badges"/>
+
+ <j:Button text="Badge Top-Right">
+ <js:beads>
+ <j:Badge text="tr"
emphasis="secondary"/>
+ </js:beads>
+ </j:Button>
+ <j:Button text="Badge Bottom-Right">
+ <js:beads>
+ <j:Badge text="br"
emphasis="secondary" subindex="true"/>
+ </js:beads>
+ </j:Button>
+ <j:Button text="Badge Top-Left">
+ <js:beads>
+ <j:Badge text="tl"
emphasis="secondary" preindex="true"/>
+ </js:beads>
+ </j:Button>
+ <j:Button text="Badge Bottom-Left">
+ <js:beads>
+ <j:Badge text="bl"
emphasis="secondary" subindex="true" preindex="true"/>
+ </js:beads>
+ </j:Button>
+
+ <j:Button text="Badge Top-Right (Overlap)"
emphasis="primary">
+ <js:beads>
+ <j:Badge text="tr"
emphasis="emphasized" overlap="true"/>
+ </js:beads>
+ </j:Button>
+ <j:Button text="Badge Bottom-Right (Overlap)"
emphasis="primary">
+ <js:beads>
+ <j:Badge text="br"
emphasis="emphasized" subindex="true" overlap="true"/>
+ </js:beads>
+ </j:Button>
+ <j:Button text="Badge Top-Left (Overlap)"
emphasis="primary">
+ <js:beads>
+ <j:Badge text="tl"
emphasis="emphasized" preindex="true" overlap="true"/>
+ </js:beads>
+ </j:Button>
+ <j:Button text="Badge Bottom-Left (Overlap)"
emphasis="primary">
+ <js:beads>
+ <j:Badge text="bl"
emphasis="emphasized" subindex="true" preindex="true" overlap="true"/>
+ </js:beads>
+ </j:Button>
</j:Card>
</j:GridCell>
</j:Grid>
diff --git a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
index 98753ac..c41e02e 100644
--- a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
@@ -93,7 +93,7 @@ limitations under the License.
<j:BarSection>
<j:IconButton click="increaseBadge()">
<j:beads>
- <j:Badge localId="badge" overlap="false"/>
+ <j:Badge localId="badge" overlap="true"/>
</j:beads>
<j:icon>
<js:FontIcon text="{MaterialIconType.ACCOUNT_BALANCE}"
material="true"/>
@@ -101,7 +101,7 @@ limitations under the License.
</j:IconButton>
<j:IconButton click="popup.open = !popup.open">
<j:beads>
- <j:Badge text="5"/>
+ <j:Badge text="5" emphasis="secondary" subindex="true"
overlap="true"/>
</j:beads>
<j:icon>
<js:FontIcon text="{MaterialIconType.DATA_USAGE}"
material="true"/>
@@ -116,11 +116,17 @@ limitations under the License.
</j:BarSection>
<j:BarSection itemsHorizontalAlign="itemsRight">
<j:IconButton>
+ <j:beads>
+ <j:Badge text="27" emphasis="primary" preindex="true"
overlap="true"/>
+ </j:beads>
<j:icon>
<js:FontIcon text="{MaterialIconType.ADD_ALARM}"
material="true"/>
</j:icon>
</j:IconButton>
<j:IconButton>
+ <j:beads>
+ <j:Badge text="209" emphasis="emphasized"
subindex="true" preindex="true" overlap="true"/>
+ </j:beads>
<j:icon>
<js:FontIcon text="{MaterialIconType.ANNOUNCEMENT}"
material="true"/>
</j:icon>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 9169a30..e334368 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -176,21 +176,32 @@ j|Alert {
.jewel.badge {
z-index: 2;
- position: relative;
- top: -1.2em;
- left: 1.2em;
- margin: 0 0 0 -1.5em !important;
+ position: absolute;
+ top: -1em;
+ right: -1em;
+ text-transform: initial;
padding: 0.5em;
- min-width: 2em;
- min-height: 2em;
- font-size: 0.85em !important;
- line-height: 1em;
- border-radius: 500em;
- background: red;
- color: white;
+ min-width: 2.1em;
}
.jewel.badge.overlap {
- left: 0.7em;
+ top: 0em;
+ right: 0em;
+}
+.jewel.badge.subindex {
+ top: auto;
+ bottom: -1em;
+}
+.jewel.badge.subindex.overlap {
+ top: auto;
+ bottom: 0em;
+}
+.jewel.badge.preindex {
+ left: -1em;
+ right: auto;
+}
+.jewel.badge.preindex.overlap {
+ left: 0em;
+ right: auto;
}
.jewel.button {
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/Badge.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/Badge.as
index 326e991..f99ce31 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/Badge.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/Badge.as
@@ -84,6 +84,8 @@ package org.apache.royale.jewel.beads.controls
host.element.classList.add("visible");
host.element.classList.add("viewport");
}
+ badge.toggleClass("preindex", _preindex);
+ badge.toggleClass("subindex", _subindex);
badge.toggleClass("overlap", _overlap);
badge.visible = text == '' ? false : true;
@@ -104,7 +106,6 @@ package org.apache.royale.jewel.beads.controls
{
return _text;
}
-
public function set text(value:String):void
{
_text = value;
@@ -112,7 +113,34 @@ package org.apache.royale.jewel.beads.controls
badge.visible = text == '' ? false : true;
}
- private var _overlap:Boolean = true;
+ private var _emphasis:String;
+ /**
+ * The color of this Badge
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public function get emphasis():String
+ {
+ return _emphasis;
+ }
+ public function set emphasis(value:String):void
+ {
+ if (_emphasis != value)
+ {
+ if(_emphasis)
+ {
+ badge.removeClass(_emphasis);
+ }
+ _emphasis = value;
+
+ badge.addClass(_emphasis);
+ }
+ }
+
+ private var _overlap:Boolean = false;
/**
* A boolean flag to activate "overlap" effect selector.
* Make the badge overlap with its container
@@ -126,7 +154,6 @@ package org.apache.royale.jewel.beads.controls
{
return _overlap;
}
-
public function set overlap(value:Boolean):void
{
if (_overlap != value)
@@ -136,5 +163,53 @@ package org.apache.royale.jewel.beads.controls
badge.toggleClass("overlap", _overlap);
}
}
+
+ private var _subindex:Boolean = false;
+ /**
+ * A boolean flag to activate "subindex" effect selector.
+ * Make the badge position subindex instead of default
superindex
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public function get subindex():Boolean
+ {
+ return _subindex;
+ }
+ public function set subindex(value:Boolean):void
+ {
+ if (_subindex != value)
+ {
+ _subindex = value;
+
+ badge.toggleClass("subindex", _subindex);
+ }
+ }
+
+ private var _preindex:Boolean = false;
+ /**
+ * A boolean flag to activate "preindex" effect selector.
+ * Make the badge position preindex instead of default
postindex
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public function get preindex():Boolean
+ {
+ return _preindex;
+ }
+ public function set preindex(value:Boolean):void
+ {
+ if (_preindex != value)
+ {
+ _preindex = value;
+
+ badge.toggleClass("preindex", _preindex);
+ }
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
b/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
index e62ec9d..e01f339 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
@@ -20,39 +20,42 @@
// Jewel Badge
// Badge variables
-$badge-color: #FF1493
-$badge-font-size: 12px !default
-$badge-color: unquote("rgb(255,20,147)") !default
-$badge-color-inverse: unquote("rgb(0,0,0)") !default
-$badge-background: unquote("rgb(255,20,147)") !default
-$badge-background-inverse: unquote("rgba(0,0,0,0.2)") !default
-$badge-size : 22px !default
-$badge-padding: 2px !default
-$badge-overlap: 12px !default
+$badge-size: 2.1em
+$badge-padding: .5em
+// $badge-margin: 0 -1.5em 0 -1.5em
+// $badge-overlap: 1em
.jewel.badge
z-index: 2
- position : relative
- top: -1.2em
- left: 1.2em
-
- margin: 0 0 0 -1.5em !important
- padding: .5em
-
- min-width: 2em
- min-height: 2em
-
- font-size: .85em !important
- line-height: 1em
+ position: absolute
+ top: -1em
+ right: -1em
- border-radius: 500em
- background: red
- color: white
+ text-transform: initial
- &.overlap
- // top: -1.2em
- left: .7em
+ // margin: $badge-margin !important
+ padding: $badge-padding
+ min-width: $badge-size
+ // min-height: $badge-size
+ &.overlap
+ top: 0em
+ right: 0em
+
+ &.subindex
+ top: auto
+ bottom: -1em
+ &.overlap
+ top: auto
+ bottom: 0em
+
+ &.preindex
+ left: -1em
+ right: auto
+ &.overlap
+ left: 0em
+ right: auto
+
j|Badge
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index d51e060..5bcd494 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -135,6 +135,18 @@ div {
background-color: rgba(0, 0, 0, 0.5);
}
+.jewel.badge {
+ border-radius: 500em;
+ background: #d9d9d9;
+ color: #808080;
+ font-size: 0.85em !important;
+ line-height: 1em;
+}
+.jewel.badge.primary {
+ background: #3CADF1;
+ color: #FFFFFF;
+}
+
.jewel.button {
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
@@ -1073,6 +1085,11 @@ j|Wizard {
itemsVerticalAlign: itemsCentered;
}
+.jewel.badge.secondary {
+ background: #EF5A2A;
+ color: #FFFFFF;
+}
+
.jewel.button.secondary {
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
@@ -1164,6 +1181,11 @@ a:active {
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
+.jewel.badge.emphasized {
+ background: #8CC63C;
+ color: #FFFFFF;
+}
+
.jewel.button.emphasized {
background: linear-gradient(#98cc50, #7eb435);
border: 1px solid #638c29;
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_badge.sass
similarity index 58%
copy from frameworks/projects/Jewel/src/main/sass/components/_badge.sass
copy to
frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_badge.sass
index e62ec9d..284819a 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_badge.sass
@@ -20,39 +20,9 @@
// Jewel Badge
// Badge variables
-$badge-color: #FF1493
-$badge-font-size: 12px !default
-$badge-color: unquote("rgb(255,20,147)") !default
-$badge-color-inverse: unquote("rgb(0,0,0)") !default
-$badge-background: unquote("rgb(255,20,147)") !default
-$badge-background-inverse: unquote("rgba(0,0,0,0.2)") !default
-$badge-size : 22px !default
-$badge-padding: 2px !default
-$badge-overlap: 12px !default
.jewel.badge
- z-index: 2
- position : relative
- top: -1.2em
- left: 1.2em
-
- margin: 0 0 0 -1.5em !important
- padding: .5em
-
- min-width: 2em
- min-height: 2em
-
- font-size: .85em !important
- line-height: 1em
-
- border-radius: 500em
- background: red
- color: white
-
- &.overlap
- // top: -1.2em
- left: .7em
-
-
-j|Badge
\ No newline at end of file
+ &.emphasized
+ background: $emphasized-color
+ color: $font-theme-color
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_badge.sass
similarity index 58%
copy from frameworks/projects/Jewel/src/main/sass/components/_badge.sass
copy to
frameworks/themes/JewelTheme/src/main/sass/components-primary/_badge.sass
index e62ec9d..718e2ea 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_badge.sass
@@ -20,39 +20,18 @@
// Jewel Badge
// Badge variables
-$badge-color: #FF1493
-$badge-font-size: 12px !default
-$badge-color: unquote("rgb(255,20,147)") !default
-$badge-color-inverse: unquote("rgb(0,0,0)") !default
-$badge-background: unquote("rgb(255,20,147)") !default
-$badge-background-inverse: unquote("rgba(0,0,0,0.2)") !default
-$badge-size : 22px !default
-$badge-padding: 2px !default
-$badge-overlap: 12px !default
+$badge-font-size: .85em
+$badge-line-height: 1em
+$badge-border-radius: 500em
.jewel.badge
- z-index: 2
-
- position : relative
- top: -1.2em
- left: 1.2em
-
- margin: 0 0 0 -1.5em !important
- padding: .5em
-
- min-width: 2em
- min-height: 2em
-
- font-size: .85em !important
- line-height: 1em
-
- border-radius: 500em
- background: red
- color: white
+ border-radius: $badge-border-radius
+ background: $default-color
+ color: $default-font-color
- &.overlap
- // top: -1.2em
- left: .7em
-
+ font-size: $badge-font-size !important
+ line-height: $badge-line-height
-j|Badge
\ No newline at end of file
+ &.primary
+ background: $primary-color
+ color: $font-theme-color
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_badge.sass
similarity index 58%
copy from frameworks/projects/Jewel/src/main/sass/components/_badge.sass
copy to
frameworks/themes/JewelTheme/src/main/sass/components-secondary/_badge.sass
index e62ec9d..947c248 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_badge.sass
@@ -20,39 +20,9 @@
// Jewel Badge
// Badge variables
-$badge-color: #FF1493
-$badge-font-size: 12px !default
-$badge-color: unquote("rgb(255,20,147)") !default
-$badge-color-inverse: unquote("rgb(0,0,0)") !default
-$badge-background: unquote("rgb(255,20,147)") !default
-$badge-background-inverse: unquote("rgba(0,0,0,0.2)") !default
-$badge-size : 22px !default
-$badge-padding: 2px !default
-$badge-overlap: 12px !default
.jewel.badge
- z-index: 2
-
- position : relative
- top: -1.2em
- left: 1.2em
-
- margin: 0 0 0 -1.5em !important
- padding: .5em
-
- min-width: 2em
- min-height: 2em
-
- font-size: .85em !important
- line-height: 1em
- border-radius: 500em
- background: red
- color: white
-
- &.overlap
- // top: -1.2em
- left: .7em
-
-
-j|Badge
\ No newline at end of file
+ &.secondary
+ background: $secondary-color
+ color: $font-theme-color
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 5747bb2..9d6257b 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -27,6 +27,7 @@
// Components
@import "components-primary/alert"
+@import "components-primary/badge"
@import "components-primary/button"
@import "components-primary/card"
@import "components-primary/checkbox"
@@ -61,6 +62,7 @@
@import "components-primary/wizard"
@import "components-secondary/alert"
+@import "components-secondary/badge"
@import "components-secondary/button"
@import "components-secondary/card"
@import "components-secondary/checkbox"
@@ -78,6 +80,7 @@
@import "components-secondary/togglebutton"
@import "components-emphasized/alert"
+@import "components-emphasized/badge"
@import "components-emphasized/button"
@import "components-emphasized/card"
@import "components-emphasized/checkbox"
