More icons, and new card example
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/bc10559a Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/bc10559a Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/bc10559a Branch: refs/heads/feature/mdl Commit: bc10559afd08d637d582247d407cbf498c56f680 Parents: e27b6d0 Author: Carlos Rovira <[email protected]> Authored: Sun Dec 11 21:54:28 2016 +0100 Committer: Carlos Rovira <[email protected]> Committed: Sun Dec 11 21:54:28 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Cards.mxml | 25 ++++++- .../src/main/resources/mdl-styles.css | 31 +++++++++ .../beads/materialIcons/MaterialIconEvent.as | 72 ++++++++++++++++++++ .../beads/materialIcons/MaterialIconShare.as | 72 ++++++++++++++++++++ .../mdl/beads/materialIcons/MaterialIconStar.as | 2 +- .../beads/materialIcons/MaterialIconsType.as | 2 + .../flex/mdl/supportClasses/MaterialIconBase.as | 60 ++++++++++++++-- .../src/main/resources/mdl-manifest.xml | 2 + 8 files changed, 257 insertions(+), 9 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml b/examples/flexjs/MDLExample/src/main/flex/Cards.mxml index df0763e..98c460d 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Cards.mxml @@ -42,7 +42,9 @@ limitations under the License. </mdl:CardActions> <mdl:CardMenu> <mdl:Button icon="true" ripple="true"> - <i class="material-icons">share</i> + <js:beads> + <mdl:MaterialIconShare/> + </js:beads> </mdl:Button> </mdl:CardMenu> </mdl:Card> @@ -67,6 +69,27 @@ limitations under the License. <js:Span text="Image.jpg" style="color: #fff; font-size: 14px; font-weight: 500;"/> </mdl:CardActions> </mdl:Card> + + <mdl:Card className="demo-card-event" shadow="2"> + <mdl:CardTitle expand="true"> + <mdl:CardTitleText> + <js:beads> + <js:InnerHTML> + <![CDATA[ + <h4 class="mdl-card__title_h4">Featured event:<br>May 24, 2016<br>7-11pm</h4> + ]]> + </js:InnerHTML> + </js:beads> + </mdl:CardTitleText> + </mdl:CardTitle> + <mdl:CardActions border="true"> + <js:beads> + <mdl:MaterialIconEvent/> + </js:beads> + <mdl:Button colored="true" ripple="true" text="Add to Calendar"/> + <mdl:Spacer/> + </mdl:CardActions> + </mdl:Card> </mdl:Grid> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/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 d473445..b9b7831 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css @@ -41,6 +41,7 @@ js|Image IBeadView: ClassReference("org.apache.flex.html.beads.ImageView"); } +/* Lists */ .actorNameListItemRenderer { width: 300px; @@ -81,6 +82,7 @@ js|Image color: white; } +/* card wide */ .demo-card-wide.mdl-card { width: 512px; } @@ -93,6 +95,7 @@ js|Image color: #fff; } +/* card square */ .demo-card-square.mdl-card { width: 320px; height: 320px; @@ -103,6 +106,34 @@ js|Image background: url('assets/dog.png') bottom right 15% no-repeat #46B6AC; } +/* card event */ +.demo-card-event.mdl-card { + width: 256px; + height: 256px; + background: #3E4EB8; +} +.demo-card-event > .mdl-card__actions { + border-color: rgba(255, 255, 255, 0.2); +} +.demo-card-event > .mdl-card__title { + align-items: flex-start; +} +.demo-card-event > .mdl-card__title > .mdl-card__title_h4 { + margin-top: 0; +} +.demo-card-event > .mdl-card__actions { + display: flex; + box-sizing:border-box; + align-items: center; +} +.demo-card-event > .mdl-card__actions > .material-icons { + padding-right: 10px; +} +.demo-card-event > .mdl-card__title, +.demo-card-event > .mdl-card__actions, +.demo-card-event > .mdl-card__actions > .mdl-button { + color: #fff; +} .demo-grid .mdl-cell { http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconEvent.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconEvent.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconEvent.as new file mode 100644 index 0000000..34bf8fc --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconEvent.as @@ -0,0 +1,72 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.flex.mdl.beads.materialIcons +{ + import org.apache.flex.core.IBead; + import org.apache.flex.core.IStrand; + import org.apache.flex.core.UIBase; + import org.apache.flex.mdl.supportClasses.MaterialIconBase; + + /** + * The MaterialIconEvent bead class is a specialty bead that add "star" icon + * to component taken from "material-icons" + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class MaterialIconEvent extends MaterialIconBase implements IBead + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function MaterialIconEvent() + { + super(); + } + + private var _strand:IStrand; + + /** + * @flexjsignorecoercion HTMLElement + * + * @param value + */ + public function set strand(value:IStrand):void + { + _strand = value; + + COMPILE::JS + { + var host:UIBase = value as UIBase; + var htmlElement:HTMLElement = host.element as HTMLElement; + + materialIcon.text = MaterialIconsType.EVENT; + + htmlElement.appendChild(element); + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconShare.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconShare.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconShare.as new file mode 100644 index 0000000..76b027a --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconShare.as @@ -0,0 +1,72 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.flex.mdl.beads.materialIcons +{ + import org.apache.flex.core.IBead; + import org.apache.flex.core.IStrand; + import org.apache.flex.core.UIBase; + import org.apache.flex.mdl.supportClasses.MaterialIconBase; + + /** + * The MaterialIconShare bead class is a specialty bead that add "add" icon + * to component taken from "material-icons" + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class MaterialIconShare extends MaterialIconBase implements IBead + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function MaterialIconShare() + { + super(); + } + + private var _strand:IStrand; + + /** + * @flexjsignorecoercion HTMLElement + * + * @param value + */ + public function set strand(value:IStrand):void + { + _strand = value; + + COMPILE::JS + { + var host:UIBase = value as UIBase; + var htmlElement:HTMLElement = host.element as HTMLElement; + + materialIcon.text = MaterialIconsType.SHARE; + + htmlElement.appendChild(element); + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconStar.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconStar.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconStar.as index 9ebfa26..ae52548 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconStar.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconStar.as @@ -24,7 +24,7 @@ package org.apache.flex.mdl.beads.materialIcons import org.apache.flex.mdl.supportClasses.MaterialIconBase; /** - * The MaterialMaterialIconStarIconPerson bead class is a specialty bead that add "star" icon + * The MaterialIconStar bead class is a specialty bead that add "star" icon * to component taken from "material-icons" * * @langversion 3.0 http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconsType.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconsType.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconsType.as index 026cf9f..fd92da3 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconsType.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/materialIcons/MaterialIconsType.as @@ -24,5 +24,7 @@ package org.apache.flex.mdl.beads.materialIcons public static const ADD:String = "add"; public static const PERSON:String = "person"; public static const STAR:String = "star"; + public static const SHARE:String = "share"; + public static const EVENT:String = "event"; } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/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 fd80bcf..70e2092 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 @@ -58,22 +58,68 @@ package org.apache.flex.mdl.supportClasses return materialIcon.element as HTMLElement; } - private var _md48:Boolean; - - public function get md48():Boolean + private var _size:Number = 24; + /** + * Although the icons in the font can be scaled to any size, + * in accordance with material design icons guidelines, + * we recommend them to be shown in either 18, 24, 36 or 48px. + * The default being 24px. + */ + public function get size():Number { - return _md48; + return _size; } /** * Activate "md-48" class selector. */ - public function set md48(value:Boolean):void + public function set size(value:Number):void + { + COMPILE::JS + { + element.classList.remove("md-" + _size); + } + + _size = value; + + COMPILE::JS + { + element.classList.add("md-" + _size); + } + } + + private var _dark:Boolean; + /** + * Activate "mdl-dark" class selector, for use in list item + */ + public function get dark():Boolean + { + return _dark; + } + public function set dark(value:Boolean):void + { + _dark = value; + + COMPILE::JS + { + element.classList.toggle("mdl-dark", _dark); + } + } + + private var _light:Boolean; + /** + * Activate "mdl-light" class selector, for use in list item + */ + public function get light():Boolean + { + return _light; + } + public function set light(value:Boolean):void { - _md48 = value; + _light = value; COMPILE::JS { - element.classList.toggle("md-48", _md48); + element.classList.toggle("mdl-light", _light); } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bc10559a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml index d831714..19820c4 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -75,6 +75,8 @@ <component id="MaterialIconAdd" class="org.apache.flex.mdl.beads.materialIcons.MaterialIconAdd"/> <component id="MaterialIconPerson" class="org.apache.flex.mdl.beads.materialIcons.MaterialIconPerson"/> <component id="MaterialIconStar" class="org.apache.flex.mdl.beads.materialIcons.MaterialIconStar"/> + <component id="MaterialIconShare" class="org.apache.flex.mdl.beads.materialIcons.MaterialIconShare"/> + <component id="MaterialIconEvent" class="org.apache.flex.mdl.beads.materialIcons.MaterialIconEvent"/> <component id="ContactChip" class="org.apache.flex.mdl.beads.ContactChip"/> <component id="ContactImageChip" class="org.apache.flex.mdl.beads.ContactImageChip"/> <component id="Tooltip" class="org.apache.flex.mdl.beads.Tooltip"/>
