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 2018/08/24 10:54:55 UTC
[royale-asjs] branch develop updated: Make Jewel ListItemRenderers
capable of be selectable or not and provide a use case in the Table Jewel
Example
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 bb5116c Make Jewel ListItemRenderers capable of be selectable or not and provide a use case in the Table Jewel Example
bb5116c is described below
commit bb5116c8115b672bfd6881776ce2dd4da6261e65
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Aug 24 12:54:51 2018 +0200
Make Jewel ListItemRenderers capable of be selectable or not and provide a use case in the Table Jewel Example
---
.../src/main/royale/ListPlayGround.mxml | 38 ++++++++++++----------
.../TableCellCloseIconItemRenderer.mxml | 15 +++++++--
.../projects/Jewel/src/main/resources/defaults.css | 5 ++-
.../controllers/ItemRendererMouseController.as | 2 +-
.../royale/jewel/itemRenderers/ListItemRenderer.as | 30 ++++++++++++++++-
.../src/main/sass/components/_itemRenderer.sass | 5 ++-
.../JewelTheme/src/main/resources/defaults.css | 10 ++++--
.../src/main/sass/components-primary/_table.sass | 11 ++++---
8 files changed, 87 insertions(+), 29 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
index e735869..3fcdd5e 100644
--- a/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
@@ -119,23 +119,27 @@ limitations under the License.
phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel List With ItemRenderer"/>
- <j:List id="iconList" width="200" height="300" className="iconListItemRenderer">
- <j:beads>
- <js:ConstantBinding
- sourceID="listModel"
- sourcePropertyName="iconListData"
- destinationPropertyName="dataProvider" />
- <j:AddListItemRendererForArrayListData/>
- <j:DynamicRemoveItemRendererForArrayListData/>
- <j:DynamicUpdateItemRendererForArrayListData/>
- <j:RemoveAllItemRendererForArrayListData/>
- </j:beads>
- </j:List>
- <j:Button text="change data" emphasis="{Button.PRIMARY}" click="changeListData()"/>
- <j:Button text="Add item" click="addItem()"/>
- <j:Button text="Remove first item" click="removeItemAt()"/>
- <j:Button text="Update first item" click="updateFirstItem()"/>
- <j:Button text="Remove all data" click="removeAllData()"/>
+ <j:HGroup gap="3">
+ <j:List id="iconList" width="200" height="300" className="iconListItemRenderer">
+ <j:beads>
+ <js:ConstantBinding
+ sourceID="listModel"
+ sourcePropertyName="iconListData"
+ destinationPropertyName="dataProvider" />
+ <j:AddListItemRendererForArrayListData/>
+ <j:DynamicRemoveItemRendererForArrayListData/>
+ <j:DynamicUpdateItemRendererForArrayListData/>
+ <j:RemoveAllItemRendererForArrayListData/>
+ </j:beads>
+ </j:List>
+ <j:VGroup gap="3">
+ <j:Button text="change data" emphasis="{Button.PRIMARY}" click="changeListData()"/>
+ <j:Button text="Add item" click="addItem()"/>
+ <j:Button text="Remove first item" click="removeItemAt()"/>
+ <j:Button text="Update first item" click="updateFirstItem()"/>
+ <j:Button text="Remove all data" click="removeAllData()"/>
+ </j:VGroup>
+ </j:HGroup>
</j:Card>
</j:GridCell>
</j:Grid>
diff --git a/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml b/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
index 3c3420a..b5897ce 100644
--- a/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
+++ b/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
@@ -21,13 +21,24 @@ limitations under the License.
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
- xmlns="http://www.w3.org/1999/xhtml">
+ xmlns="http://www.w3.org/1999/xhtml"
+ hoverable="false"
+ selectable="false">
+ <fx:Script>
+ <![CDATA[
+ private function clickCloseButton():void
+ {
+ trace("hello!");
+ }
+ ]]>
+ </fx:Script>
+
<mdl:beads>
<js:ItemRendererDataBinding/>
</mdl:beads>
- <j:IconButton emphasis="primary" width="24" height="24" style="padding: 0px; border-radius: 50%">
+ <j:IconButton emphasis="primary" width="24" height="24" style="padding: 0px; border-radius: 50%" click="clickCloseButton()">
<j:icon>
<js:FontIcon text="{data.icon}" material="true" size="18"/>
</j:icon>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 1c29c4d..05c6649 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -500,13 +500,16 @@ j|DateField {
.jewel.item, .jewel.navigationlink {
display: flex;
- cursor: pointer;
min-height: 34px;
text-decoration: none;
align-items: center;
letter-spacing: 0;
line-height: normal !important;
overflow: hidden;
+ cursor: auto;
+}
+.jewel.item.selectable, .jewel.navigationlink.selectable {
+ cursor: pointer;
}
.jewel.navigationlink {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ItemRendererMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ItemRendererMouseController.as
index a114dba..5d6e986 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ItemRendererMouseController.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ItemRendererMouseController.as
@@ -204,7 +204,7 @@ COMPILE::JS {
{
event.stopImmediatePropagation();
var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
- if (target)
+ if (target && target.selectable)
{
var newEvent:ItemClickedEvent = new ItemClickedEvent("itemClicked");
newEvent.data = target.data;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
index c8a2e02..51a52d4 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
@@ -21,6 +21,7 @@ package org.apache.royale.jewel.itemRenderers
import org.apache.royale.core.StyledMXMLItemRenderer;
import org.apache.royale.utils.ClassSelectorList;
import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
+ import org.apache.royale.events.MouseEvent;
COMPILE::JS
{
@@ -51,6 +52,7 @@ package org.apache.royale.jewel.itemRenderers
super();
typeNames = "jewel item";
+ addClass("selectable");
}
private var _text:String = "";
@@ -117,6 +119,29 @@ package org.apache.royale.jewel.itemRenderers
return element;
}
+ private var _selectable:Boolean = true;
+ /**
+ * <code>true</code> if the item renderer is can be selected
+ * false otherwise. Use to configure a renderer to be non
+ * selectable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ override public function get selectable():Boolean
+ {
+ return _selectable;
+ }
+ override public function set selectable(value:Boolean):void
+ {
+ _selectable = value;
+ toggleClass("selectable", _selectable);
+ }
+
/**
* @private
*/
@@ -132,7 +157,10 @@ package org.apache.royale.jewel.itemRenderers
//else
// useColor = backgroundColor;
- toggleClass("selected", selected);
+ if(hoverable)
+ toggleClass("hovered", hovered);
+ if(selectable)
+ toggleClass("selected", selected);
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
index 568c67e..432d7f4 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
@@ -24,13 +24,16 @@ $item-min-height: 34px
.jewel.item, .jewel.navigationlink
display: flex
- cursor: pointer
min-height: $item-min-height
text-decoration: none
align-items: center
letter-spacing: 0
line-height: normal !important
overflow: hidden
+ cursor: auto
+
+ &.selectable
+ cursor: pointer
.jewel.navigationlink
min-height: 48px
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 58f1918..9390150 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -636,11 +636,17 @@ j|Card {
box-shadow: inset 0 1px 0 white;
}
-.jewel.tableitem:hover {
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
color: #FFFFFF;
background: #3CADF1;
}
-.jewel.tableitem:active, .jewel.tableitem.selected {
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
color: #FFFFFF;
background: #24a3ef;
}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
index 0baf972..16e0cfe 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
@@ -121,12 +121,15 @@ $table-border-radius: $border-radius
// border: 1px solid black
.jewel.tableitem
+ cursor: auto
// padding: 12px 0px 14px 0px
-
- &:hover
+ &.selectable
+ cursor: pointer
+
+ &.hovered:hover
color: $font-theme-color
background: $primary-color
- &:active, &.selected
+ &.selected, &.selectable:active
color: $font-theme-color
- background: darken($primary-color, 5%)
\ No newline at end of file
+ background: darken($primary-color, 5%)