Repository: flex-asjs Updated Branches: refs/heads/develop aec80ceb8 -> f8aa55e89
New List example with secondary actions Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/f8aa55e8 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/f8aa55e8 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/f8aa55e8 Branch: refs/heads/develop Commit: f8aa55e8908ef7a1b64d0a1e02a49e33bcf8718a Parents: aec80ce Author: Carlos Rovira <carlosrov...@apache.org> Authored: Sat Dec 10 18:04:41 2016 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Sat Dec 10 18:04:41 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Lists.mxml | 10 ++++ .../AvatarAndActionListItemRenderer.mxml | 56 ++++++++++++++++++++ .../src/main/resources/mdl-styles.css | 5 ++ .../flex/mdl/supportClasses/MaterialIconBase.as | 19 +++++++ 4 files changed, 90 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f8aa55e8/examples/flexjs/MDLExample/src/main/flex/Lists.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Lists.mxml b/examples/flexjs/MDLExample/src/main/flex/Lists.mxml index 38ef48d..36a8bcf 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Lists.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Lists.mxml @@ -55,6 +55,16 @@ limitations under the License. </mdl:beads> </mdl:List> + <mdl:List labelField="actorName" className="avatarAndActionListItemRenderer"> + <mdl:beads> + <js:ConstantBinding + sourceID="model" + sourcePropertyName="actors" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:List> + + </mdl:Grid> <!-- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f8aa55e8/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionListItemRenderer.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionListItemRenderer.mxml b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionListItemRenderer.mxml new file mode 100644 index 0000000..40b8163 --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionListItemRenderer.mxml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + +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. + +--> +<mdl:ListItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:js="library://ns.apache.org/flexjs/basic" + xmlns:mdl="library://ns.apache.org/flexjs/mdl" + xmlns="http://www.w3.org/1999/xhtml";> + + <fx:Script> + <![CDATA[ + import vos.ActorVO; + + [Bindable("dataChange")] + public function get actor():ActorVO + { + return data as ActorVO; + } + ]]> + </fx:Script> + + <js:beads> + <js:ItemRendererDataBinding /> + </js:beads> + + <js:Span text="{actor.actorName}"> + <mdl:beads> + <mdl:ListItemPrimaryContent/> + <mdl:MaterialIconPerson listItemAvatar="true"/> + </mdl:beads> + </js:Span> + <js:A href="#"> + <mdl:beads> + <mdl:ListItemSecondaryAction/> + <mdl:MaterialIconStar/> + </mdl:beads> + </js:A> + + +</mdl:ListItemRenderer> + http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f8aa55e8/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css index 6730c58..67716a0 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css @@ -51,6 +51,11 @@ js|Image IItemRenderer: ClassReference("itemRenderers.ActorNameAndIconListItemRenderer"); } +.avatarAndActionListItemRenderer +{ + IItemRenderer: ClassReference("itemRenderers.AvatarAndActionListItemRenderer"); +} + /*.customListItemRenderer { IItemRenderer: ClassReference("itemRenderers.CustomListItemRenderer"); http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f8aa55e8/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as index bfb218c..fd80bcf 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as @@ -94,5 +94,24 @@ package org.apache.flex.mdl.supportClasses element.classList.toggle("mdl-list__item-icon", _listItemIcon); } } + + private var _listItemAvatar:Boolean; + /** + * Activate "mdl-list__item-avatar" class selector, for use in list item + */ + public function get listItemAvatar():Boolean + { + return _listItemAvatar; + } + public function set listItemAvatar(value:Boolean):void + { + _listItemAvatar = value; + + COMPILE::JS + { + element.classList.toggle("mdl-list__item-avatar", _listItemAvatar); + } + } + } }
