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 2019/01/20 22:42:37 UTC
[royale-asjs] branch develop updated: make Badge invisible if no
text. Add overlap, defaults to false
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 007eab6 make Badge invisible if no text. Add overlap, defaults to false
007eab6 is described below
commit 007eab65fd576598f7cef1d8e62ae160e16474a9
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Jan 20 23:42:30 2019 +0100
make Badge invisible if no text. Add overlap, defaults to false
---
.../TourDeJewel/src/main/royale/MainContent.mxml | 22 ++++++----
.../projects/Jewel/src/main/resources/defaults.css | 2 +-
.../apache/royale/jewel/beads/controls/Badge.as | 47 ++++++++++------------
.../Jewel/src/main/sass/components/_badge.sass | 2 +-
4 files changed, 38 insertions(+), 35 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
index 47391a4..98753ac 100644
--- a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
@@ -47,6 +47,14 @@ limitations under the License.
{
main.selectedContent = "welcome_panel";
}
+
+ [Bindable]
+ public var badgeNum:int = 0;
+
+ public function increaseBadge():void
+ {
+ badge.text = ++badgeNum > 0 ? '' + badgeNum : '';
+ }
]]>
</fx:Script>
@@ -83,18 +91,15 @@ limitations under the License.
<j:FooterBar localId="footerbar" fixed="true" hasDrawer="{drawer.fixed && drawer.isOpen}">
<j:BarRow>
<j:BarSection>
- <j:IconButton>
+ <j:IconButton click="increaseBadge()">
<j:beads>
- <j:Badge text="2"/>
+ <j:Badge localId="badge" overlap="false"/>
</j:beads>
<j:icon>
- <js:FontIcon text="{MaterialIconType.ACCOUNT_BALANCE}" material="true" click="popup.open = !popup.open"/>
+ <js:FontIcon text="{MaterialIconType.ACCOUNT_BALANCE}" material="true"/>
</j:icon>
</j:IconButton>
- <j:PopUp localId="popup">
- <c:FormExample label="Form example in a PopUp from FooterBar" width="615" height="392"/>
- </j:PopUp>
- <j:IconButton>
+ <j:IconButton click="popup.open = !popup.open">
<j:beads>
<j:Badge text="5"/>
</j:beads>
@@ -102,6 +107,9 @@ limitations under the License.
<js:FontIcon text="{MaterialIconType.DATA_USAGE}" material="true"/>
</j:icon>
</j:IconButton>
+ <j:PopUp localId="popup">
+ <c:FormExample label="Form example in a PopUp from FooterBar" width="615" height="392"/>
+ </j:PopUp>
</j:BarSection>
<j:BarSection itemsHorizontalAlign="itemsCenter">
<html:H3 text="FooterBar" />
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 4898847..09416cb 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -178,7 +178,7 @@ j|Alert {
z-index: 2;
position: relative;
top: -1.2em;
- left: 0.7em;
+ left: 1.2em;
margin: 0 0 0 -1.5em !important;
padding: 0.5em;
min-width: 2em;
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 84ab094..326e991 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
@@ -81,17 +81,16 @@ package org.apache.royale.jewel.beads.controls
host = value as UIBase;
COMPILE::JS
{
- if (host)
- {
- // host.element.classList.toggle("overlap", _overlap);
- host.element.classList.add("visible");
- host.element.classList.add("viewport");
- }
+ host.element.classList.add("visible");
+ host.element.classList.add("viewport");
}
+ badge.toggleClass("overlap", _overlap);
+ badge.visible = text == '' ? false : true;
+
host.addElement(badge);
}
- private var _text:String;
+ private var _text:String = '';
/**
* The current value of the Badge that appers inside the circle.
*
@@ -100,6 +99,7 @@ package org.apache.royale.jewel.beads.controls
* @playerversion AIR 2.6
* @productversion Royale 0.9.6
*/
+ [Bindable]
public function get text():String
{
return _text;
@@ -109,9 +109,10 @@ package org.apache.royale.jewel.beads.controls
{
_text = value;
badge.text = _text;
+ badge.visible = text == '' ? false : true;
}
- // private var _overlap:Boolean = false;
+ private var _overlap:Boolean = true;
/**
* A boolean flag to activate "overlap" effect selector.
* Make the badge overlap with its container
@@ -121,25 +122,19 @@ package org.apache.royale.jewel.beads.controls
* @playerversion AIR 2.6
* @productversion Royale 0.9.6
*/
- // public function get overlap():Boolean
- // {
- // return _overlap;
- // }
+ public function get overlap():Boolean
+ {
+ return _overlap;
+ }
- // public function set overlap(value:Boolean):void
- // {
- // if (_overlap != value)
- // {
- // _overlap = value;
+ public function set overlap(value:Boolean):void
+ {
+ if (_overlap != value)
+ {
+ _overlap = value;
- // COMPILE::JS
- // {
- // if (host)
- // {
- // host.element.classList.toggle("overlap", _overlap);
- // }
- // }
- // }
- // }
+ badge.toggleClass("overlap", _overlap);
+ }
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_badge.sass b/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
index 0c42b2c..e62ec9d 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
@@ -35,7 +35,7 @@ $badge-overlap: 12px !default
position : relative
top: -1.2em
- left: .7em //1.2em
+ left: 1.2em
margin: 0 0 0 -1.5em !important
padding: .5em