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:04:57 UTC
[royale-asjs] branch develop updated: Badge initial commit
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 8170ad1 Badge initial commit
8170ad1 is described below
commit 8170ad178efb562e9af7167a5f4934070b670fa1
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Jan 20 23:04:49 2019 +0100
Badge initial commit
---
.../TourDeJewel/src/main/royale/MainContent.mxml | 6 +
.../projects/Jewel/src/main/resources/defaults.css | 22 ++++
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../apache/royale/jewel/beads/controls/Badge.as | 145 +++++++++++++++++++++
.../Jewel/src/main/sass/components/_badge.sass | 58 +++++++++
.../Jewel/src/main/sass/components/_layout.sass | 3 +
.../projects/Jewel/src/main/sass/defaults.sass | 1 +
7 files changed, 236 insertions(+)
diff --git a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
index c9a0be9..47391a4 100644
--- a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
@@ -84,6 +84,9 @@ limitations under the License.
<j:BarRow>
<j:BarSection>
<j:IconButton>
+ <j:beads>
+ <j:Badge text="2"/>
+ </j:beads>
<j:icon>
<js:FontIcon text="{MaterialIconType.ACCOUNT_BALANCE}" material="true" click="popup.open = !popup.open"/>
</j:icon>
@@ -92,6 +95,9 @@ limitations under the License.
<c:FormExample label="Form example in a PopUp from FooterBar" width="615" height="392"/>
</j:PopUp>
<j:IconButton>
+ <j:beads>
+ <j:Badge text="5"/>
+ </j:beads>
<j:icon>
<js:FontIcon text="{MaterialIconType.DATA_USAGE}" 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 a7c50ca..4898847 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -174,6 +174,25 @@ j|Alert {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
}
+.jewel.badge {
+ z-index: 2;
+ position: relative;
+ top: -1.2em;
+ left: 0.7em;
+ margin: 0 0 0 -1.5em !important;
+ padding: 0.5em;
+ min-width: 2em;
+ min-height: 2em;
+ font-size: 0.85em !important;
+ line-height: 1em;
+ border-radius: 500em;
+ background: red;
+ color: white;
+}
+.jewel.badge.overlap {
+ left: 0.7em;
+}
+
.jewel.button {
margin: 0;
padding: 0.68em 1.12em;
@@ -862,6 +881,9 @@ j|Label {
.viewport.scroll {
overflow: auto;
}
+.viewport.visible {
+ overflow: visible;
+}
.layout.basic {
position: relative;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index e82db55..0a91f95 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -114,6 +114,7 @@
<component id="DropDownListList" class="org.apache.royale.jewel.supportClasses.dropdownlist.DropDownListList"/>
+ <component id="Badge" class="org.apache.royale.jewel.beads.controls.Badge"/>
<component id="ToolTip" class="org.apache.royale.jewel.beads.controls.ToolTip"/>
<component id="Disabled" class="org.apache.royale.jewel.beads.controls.Disabled"/>
<component id="SizeControl" class="org.apache.royale.jewel.beads.controls.SizeControl"/>
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
new file mode 100644
index 0000000..84ab094
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/Badge.as
@@ -0,0 +1,145 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.controls
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.jewel.Label;
+
+ /**
+ * The Badge class provides a small status descriptors for UI elements.
+ *
+ * A Badge is an onscreen notification element consists of a small circle,
+ * typically containing a number or other characters, that appears in
+ * proximity to another object
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public class Badge implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public function Badge()
+ {
+ badge = createBadge();
+ }
+
+ /**
+ * the internal instance of the badge
+ */
+ private var badge:Label;
+
+ /**
+ * used to create the badge ui element
+ * that will be a Label
+ */
+ protected function createBadge():Label
+ {
+ var badge:Label = new Label();
+ badge.typeNames = "jewel badge";
+
+ return badge;
+ }
+
+ private var host:UIBase;
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public function set strand(value:IStrand):void
+ {
+ 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.addElement(badge);
+ }
+
+ private var _text:String;
+ /**
+ * The current value of the Badge that appers inside the circle.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public function get text():String
+ {
+ return _text;
+ }
+
+ public function set text(value:String):void
+ {
+ _text = value;
+ badge.text = _text;
+ }
+
+ // private var _overlap:Boolean = false;
+ /**
+ * A boolean flag to activate "overlap" effect selector.
+ * Make the badge overlap with its container
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ // public function get overlap():Boolean
+ // {
+ // return _overlap;
+ // }
+
+ // public function set overlap(value:Boolean):void
+ // {
+ // if (_overlap != value)
+ // {
+ // _overlap = value;
+
+ // COMPILE::JS
+ // {
+ // if (host)
+ // {
+ // host.element.classList.toggle("overlap", _overlap);
+ // }
+ // }
+ // }
+ // }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_badge.sass b/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
new file mode 100644
index 0000000..0c42b2c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_badge.sass
@@ -0,0 +1,58 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// 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: .7em //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
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 92bf99f..1414089 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -33,6 +33,9 @@ $gap-size: 10px !default
&.scroll
overflow: auto
+ &.visible
+ overflow: visible
+
// Basic
.layout.basic
position: relative
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index 0957bdd..6195246 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -24,6 +24,7 @@
// Components
@import "components/alert"
+@import "components/badge"
@import "components/button"
@import "components/card"
@import "components/checkbox"