Material Icons fix size, dark and light properties. Introduce MaterialIcon class to allow access to rest of 900 icons in MDL library and polish docs
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/bcfe8a57 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/bcfe8a57 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/bcfe8a57 Branch: refs/heads/feature/mdl Commit: bcfe8a57b8b17c0425fdeb4ab636ce37a54be9e2 Parents: 606ca70 Author: Carlos Rovira <[email protected]> Authored: Sun Jan 22 20:20:04 2017 +0100 Committer: Carlos Rovira <[email protected]> Committed: Sun Jan 22 20:20:04 2017 +0100 ---------------------------------------------------------------------- .../MDLExample/src/main/flex/Buttons.mxml | 2 +- .../flex/mdl/materialIcons/IMaterialIcon.as | 4 +- .../flex/mdl/materialIcons/MaterialIcon.as | 93 ++++++++++++++++++++ .../flex/mdl/materialIcons/MaterialIconAdd.as | 16 +++- .../mdl/materialIcons/MaterialIconCancel.as | 16 +++- .../flex/mdl/materialIcons/MaterialIconEvent.as | 16 +++- .../flex/mdl/materialIcons/MaterialIconFace.as | 16 +++- .../mdl/materialIcons/MaterialIconFormatBold.as | 16 +++- .../materialIcons/MaterialIconFormatItalic.as | 16 +++- .../MaterialIconKeyboardArrowDown.as | 16 +++- .../flex/mdl/materialIcons/MaterialIconMood.as | 16 +++- .../mdl/materialIcons/MaterialIconMoreVert.as | 16 +++- .../mdl/materialIcons/MaterialIconPerson.as | 16 +++- .../mdl/materialIcons/MaterialIconSearch.as | 16 +++- .../flex/mdl/materialIcons/MaterialIconShare.as | 16 +++- .../flex/mdl/materialIcons/MaterialIconStar.as | 16 +++- .../flex/mdl/materialIcons/MaterialIconsType.as | 11 ++- .../flex/mdl/supportClasses/MaterialIconBase.as | 77 +++++++++++++--- .../src/main/resources/defaults.css | 14 +++ .../src/main/resources/mdl-manifest.xml | 2 +- 20 files changed, 340 insertions(+), 71 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml b/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml index 42d0579..e90182c 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml @@ -45,7 +45,7 @@ limitations under the License. <!-- Fab with Ripple --> <mdl:Button fab="true" ripple="true"> <mdl:materialIcon> - <mdl:MaterialIconFace size="48"/> + <mdl:MaterialIconFace/> </mdl:materialIcon> </mdl:Button> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/IMaterialIcon.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/IMaterialIcon.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/IMaterialIcon.as index 71d689d..1d3af37 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/IMaterialIcon.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/IMaterialIcon.as @@ -21,12 +21,12 @@ package org.apache.flex.mdl.materialIcons import org.apache.flex.mdl.supportClasses.MaterialIconBase; /** - * Implement if class will need ability to display Material icon + * Implement if a class will need ability to display Material icon * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public interface IMaterialIcon { http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIcon.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIcon.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIcon.as new file mode 100644 index 0000000..1b8adcb --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIcon.as @@ -0,0 +1,93 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.materialIcons +{ + import org.apache.flex.mdl.supportClasses.MaterialIconBase; + + /** + * Material icons are beautifully crafted, delightful, and easy to use in your web, + * Android, and iOS projects. + * Material Design Icons are listed here : https://material.io/icons/ + * + * This class could be used with is text property to use one of the mdl icons listed + * in the before mentioned url. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ + public class MaterialIcon extends MaterialIconBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ + public function MaterialIcon() + { + super(); + } + + private var _text:String = ""; + /** + * The text of the icon + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ + public function get text():String + { + return _text; + } + public function set text(value:String):void + { + _text = value; + + COMPILE::JS + { + if(textNode == null) + { + textNode = document.createTextNode('') as Text; + element.appendChild(textNode); + } + + textNode.nodeValue = value; + } + } + + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ + override protected function get iconText():String + { + return text; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconAdd.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconAdd.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconAdd.as index addc056..083e75c 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconAdd.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconAdd.as @@ -21,13 +21,13 @@ package org.apache.flex.mdl.materialIcons import org.apache.flex.mdl.supportClasses.MaterialIconBase; /** - * The MaterialIconCancel bead class is a specialty bead that add "add" icon - * to component taken from "material-icons" + * The MaterialIconAdd class is a the MDL "add" icon + * from "material-icons" from https://material.io/icons/ * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconAdd extends MaterialIconBase { @@ -37,13 +37,21 @@ package org.apache.flex.mdl.materialIcons * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function MaterialIconAdd() { super(); } + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ override protected function get iconText():String { return MaterialIconsType.ADD; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconCancel.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconCancel.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconCancel.as index 264bfef..f0fba1d 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconCancel.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconCancel.as @@ -21,13 +21,13 @@ package org.apache.flex.mdl.materialIcons import org.apache.flex.mdl.supportClasses.MaterialIconBase; /** - * The MaterialIconCancel bead class is a specialty bead that add "cancel" icon - * to component taken from "material-icons" + * The MaterialIconAdd class is a the MDL "cancel" icon + * from "material-icons" from https://material.io/icons/ * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconCancel extends MaterialIconBase { @@ -37,13 +37,21 @@ package org.apache.flex.mdl.materialIcons * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function MaterialIconCancel() { super(); } + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ override protected function get iconText():String { return MaterialIconsType.CANCEL; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconEvent.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconEvent.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconEvent.as index b5d371f..3c27418 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconEvent.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconEvent.as @@ -21,13 +21,13 @@ package org.apache.flex.mdl.materialIcons 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" + * The MaterialIconAdd class is a the MDL "event" icon + * from "material-icons" from https://material.io/icons/ * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconEvent extends MaterialIconBase { @@ -37,13 +37,21 @@ package org.apache.flex.mdl.materialIcons * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function MaterialIconEvent() { super(); } + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ override protected function get iconText():String { return MaterialIconsType.EVENT; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFace.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFace.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFace.as index 6f9d305..3f3f97e 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFace.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFace.as @@ -21,13 +21,13 @@ package org.apache.flex.mdl.materialIcons import org.apache.flex.mdl.supportClasses.MaterialIconBase; /** - * The MaterialIconFace bead class is a specialty bead that add "face" icon - * to component taken from "material-icons" + * The MaterialIconAdd class is a the MDL "face" icon + * from "material-icons" from https://material.io/icons/ * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconFace extends MaterialIconBase { @@ -37,13 +37,21 @@ package org.apache.flex.mdl.materialIcons * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function MaterialIconFace() { super(); } + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ override protected function get iconText():String { return MaterialIconsType.FACE; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFormatBold.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFormatBold.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFormatBold.as index edd00cd..8f7afce 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFormatBold.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFormatBold.as @@ -21,13 +21,13 @@ package org.apache.flex.mdl.materialIcons import org.apache.flex.mdl.supportClasses.MaterialIconBase; /** - * The MaterialIconFormatBold bead class is a specialty bead that add "format_bold" icon - * to component taken from "material-icons" + * The MaterialIconAdd class is a the MDL "format_bold" icon + * from "material-icons" from https://material.io/icons/ * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconFormatBold extends MaterialIconBase { @@ -37,13 +37,21 @@ package org.apache.flex.mdl.materialIcons * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function MaterialIconFormatBold() { super(); } + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ override protected function get iconText():String { return MaterialIconsType.FORMAT_BOLD; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFormatItalic.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFormatItalic.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFormatItalic.as index 9392696..b41ad5b 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFormatItalic.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFormatItalic.as @@ -21,13 +21,13 @@ package org.apache.flex.mdl.materialIcons import org.apache.flex.mdl.supportClasses.MaterialIconBase; /** - * The MaterialIconFormatItalic bead class is a specialty bead that add "format_italic" icon - * to component taken from "material-icons" + * The MaterialIconAdd class is a the MDL "format_italic" icon + * from "material-icons" from https://material.io/icons/ * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconFormatItalic extends MaterialIconBase { @@ -37,13 +37,21 @@ package org.apache.flex.mdl.materialIcons * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function MaterialIconFormatItalic() { super(); } + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ override protected function get iconText():String { return MaterialIconsType.FORMAT_ITALIC; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconKeyboardArrowDown.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconKeyboardArrowDown.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconKeyboardArrowDown.as index 234e0db..a37f422 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconKeyboardArrowDown.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconKeyboardArrowDown.as @@ -21,13 +21,13 @@ package org.apache.flex.mdl.materialIcons import org.apache.flex.mdl.supportClasses.MaterialIconBase; /** - * The MaterialIconKeyboardArrowDown bead class is a specialty bead that add "keyboard_arrow_down" icon - * to component taken from "material-icons" + * The MaterialIconAdd class is a the MDL "keyboard_arrow_down" icon + * from "material-icons" from https://material.io/icons/ * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconKeyboardArrowDown extends MaterialIconBase { @@ -37,13 +37,21 @@ package org.apache.flex.mdl.materialIcons * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function MaterialIconKeyboardArrowDown() { super(); } + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ override protected function get iconText():String { return MaterialIconsType.KEYBOARD_ARROW_DOWN; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconMood.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconMood.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconMood.as index 7f7205e..5b146b7 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconMood.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconMood.as @@ -21,13 +21,13 @@ package org.apache.flex.mdl.materialIcons import org.apache.flex.mdl.supportClasses.MaterialIconBase; /** - * The MaterialIconMood bead class is a specialty bead that add "mood" icon - * to component taken from "material-icons" + * The MaterialIconAdd class is a the MDL "mood" icon + * from "material-icons" from https://material.io/icons/ * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconMood extends MaterialIconBase { @@ -37,13 +37,21 @@ package org.apache.flex.mdl.materialIcons * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function MaterialIconMood() { super(); } + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ override protected function get iconText():String { return MaterialIconsType.MOOD; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconMoreVert.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconMoreVert.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconMoreVert.as index f56b9ad..294925e 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconMoreVert.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconMoreVert.as @@ -21,13 +21,13 @@ package org.apache.flex.mdl.materialIcons import org.apache.flex.mdl.supportClasses.MaterialIconBase; /** - * The MaterialIconMoreVert bead class is a specialty bead that add "more_vert" icon - * to component taken from "material-icons" + * The MaterialIconAdd class is a the MDL "move_vert" icon + * from "material-icons" from https://material.io/icons/ * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconMoreVert extends MaterialIconBase { @@ -37,13 +37,21 @@ package org.apache.flex.mdl.materialIcons * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function MaterialIconMoreVert() { super(); } + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ override protected function get iconText():String { return MaterialIconsType.MORE_VERT; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconPerson.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconPerson.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconPerson.as index fb55c9e..4443ba7 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconPerson.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconPerson.as @@ -21,13 +21,13 @@ package org.apache.flex.mdl.materialIcons import org.apache.flex.mdl.supportClasses.MaterialIconBase; /** - * The MaterialIconPerson bead class is a specialty bead that add "person" icon - * to component taken from "material-icons" + * The MaterialIconAdd class is a the MDL "person" icon + * from "material-icons" from https://material.io/icons/ * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconPerson extends MaterialIconBase { @@ -37,13 +37,21 @@ package org.apache.flex.mdl.materialIcons * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function MaterialIconPerson() { super(); } + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ override protected function get iconText():String { return MaterialIconsType.PERSON; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconSearch.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconSearch.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconSearch.as index 0a1cf5e..f18739d 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconSearch.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconSearch.as @@ -21,13 +21,13 @@ package org.apache.flex.mdl.materialIcons import org.apache.flex.mdl.supportClasses.MaterialIconBase; /** - * The MaterialIconSearch bead class is a specialty bead that add "search" icon - * to component taken from "material-icons" + * The MaterialIconAdd class is a the MDL "search" icon + * from "material-icons" from https://material.io/icons/ * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconSearch extends MaterialIconBase { @@ -37,13 +37,21 @@ package org.apache.flex.mdl.materialIcons * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function MaterialIconSearch() { super(); } + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ override protected function get iconText():String { return MaterialIconsType.SEARCH; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconShare.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconShare.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconShare.as index 2a27799..3a366c0 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconShare.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconShare.as @@ -21,13 +21,13 @@ package org.apache.flex.mdl.materialIcons 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" + * The MaterialIconAdd class is a the MDL "add" icon + * from "material-icons" from https://material.io/icons/ * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconShare extends MaterialIconBase { @@ -37,13 +37,21 @@ package org.apache.flex.mdl.materialIcons * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function MaterialIconShare() { super(); } + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ override protected function get iconText():String { return MaterialIconsType.SHARE; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconStar.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconStar.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconStar.as index 5bf7407..9354917 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconStar.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconStar.as @@ -21,13 +21,13 @@ package org.apache.flex.mdl.materialIcons import org.apache.flex.mdl.supportClasses.MaterialIconBase; /** - * The MaterialIconStar bead class is a specialty bead that add "star" icon - * to component taken from "material-icons" + * The MaterialIconAdd class is a the MDL "star" icon + * from "material-icons" from https://material.io/icons/ * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconStar extends MaterialIconBase { @@ -37,13 +37,21 @@ package org.apache.flex.mdl.materialIcons * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public function MaterialIconStar() { super(); } + /** + * The icon text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ override protected function get iconText():String { return MaterialIconsType.STAR; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconsType.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconsType.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconsType.as index 0cabd61..1e7c57f 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconsType.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconsType.as @@ -18,6 +18,16 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.mdl.materialIcons { + /** + * The MaterialIconsType class list all possible icons + * found in https://material.io/icons/ to use in its own + * Material Icon class. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ public class MaterialIconsType { public static const CANCEL:String = "cancel"; @@ -31,7 +41,6 @@ package org.apache.flex.mdl.materialIcons public static const MORE_VERT:String = "more_vert"; public static const SEARCH:String = "search"; public static const KEYBOARD_ARROW_DOWN:String = "keyboard_arrow_down"; - public static const FORMAT_BOLD:String = "format_bold"; public static const FORMAT_ITALIC:String = "format_italic"; } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/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 c28488d..bc6f067 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 @@ -26,12 +26,16 @@ package org.apache.flex.mdl.supportClasses } /** - * Provide common features for all material icons type + * Material icons are beautifully crafted, delightful, and easy to use in your web, + * Android, and iOS projects. + * Material Design Icons are listed here : https://material.io/icons/ + * + * This base class provide common features for all material icons type * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 + * @productversion FlexJS 0.8 */ public class MaterialIconBase extends UIBase { @@ -41,9 +45,7 @@ package org.apache.flex.mdl.supportClasses * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 - * - * @flexjsignorecoercion HTMLElement + * @productversion FlexJS 0.8 */ public function MaterialIconBase() { @@ -58,6 +60,7 @@ package org.apache.flex.mdl.supportClasses /** * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement * @flexjsignorecoercion HTMLElement + * @flexjsignorecoercion Text */ COMPILE::JS override protected function createElement():WrappedHTMLElement @@ -77,6 +80,15 @@ package org.apache.flex.mdl.supportClasses return element; } + /** + * the icon text that matchs with MDL icon. + * Check this url to see the icon list: https://material.io/icons/ + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ protected function get iconText():String { return ""; @@ -86,15 +98,27 @@ package org.apache.flex.mdl.supportClasses /** * 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. + * As recommended by Google be use css like this .material-icons.md-18 { font-size: 18px; } + * to uses 18, 24, 36 or 48px. + * * The default being 24px. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 */ public function get size():Number { return _size; } /** - * Activate "md-48" class selector. + * Activate "md-XX" size class selector. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 */ public function set size(value:Number):void { @@ -113,7 +137,12 @@ package org.apache.flex.mdl.supportClasses private var _dark:Boolean; /** - * Activate "mdl-dark" class selector, for use in list item + * Activate "md-dark" class selector. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 */ public function get dark():Boolean { @@ -125,13 +154,18 @@ package org.apache.flex.mdl.supportClasses COMPILE::JS { - element.classList.toggle("mdl-dark", _dark); + element.classList.toggle("md-dark", _dark); } } private var _light:Boolean; /** - * Activate "mdl-light" class selector, for use in list item + * Activate "md-light" class selector. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 */ public function get light():Boolean { @@ -143,13 +177,18 @@ package org.apache.flex.mdl.supportClasses COMPILE::JS { - element.classList.toggle("mdl-light", _light); + element.classList.toggle("md-light", _light); } } private var _listItemIcon:Boolean; /** - * Activate "mdl-list__item-icon" class selector, for use in list item + * Activate "mdl-list__item-icon" class selector, for use in a list item + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 */ public function get listItemIcon():Boolean { @@ -167,7 +206,12 @@ package org.apache.flex.mdl.supportClasses private var _listItemAvatar:Boolean; /** - * Activate "mdl-list__item-avatar" class selector, for use in list item + * Activate "mdl-list__item-avatar" class selector, for use in a list item + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 */ public function get listItemAvatar():Boolean { @@ -185,7 +229,12 @@ package org.apache.flex.mdl.supportClasses private var _iconToggleLabel:Boolean; /** - * Activate "mdl-icon-toggle__label" class selector, for use in list item + * Activate "mdl-icon-toggle__label" class selector, for use in a list item + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 */ public function get iconToggleLabel():Boolean { http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css index 20091a6..3fa6096 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css @@ -20,6 +20,20 @@ @namespace "library://ns.apache.org/flexjs/mdl"; +/* Rules for sizing the icon. */ +.material-icons.md-18 { font-size: 18px; } +.material-icons.md-24 { font-size: 24px; } +.material-icons.md-36 { font-size: 36px; } +.material-icons.md-48 { font-size: 48px; } + +/* Rules for using icons as black on a light background. */ +.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } +.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } + +/* Rules for using icons as white on a dark background. */ +.material-icons.md-light { color: rgba(255, 255, 255, 1); } +.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } + TextField { IBeadModel: ClassReference("org.apache.flex.html.beads.models.TextModel"); http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bcfe8a57/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 f941a55..82319f9 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -40,7 +40,6 @@ <component id="Menu" class="org.apache.flex.mdl.Menu"/> <component id="MenuItemRenderer" class="org.apache.flex.mdl.itemRenderers.MenuItemRenderer"/> <component id="Card" class="org.apache.flex.mdl.Card"/> - <component id="CardInner" class="org.apache.flex.mdl.supportClasses.CardInner"/> <component id="CardTitle" class="org.apache.flex.mdl.CardTitle"/> <component id="CardTitleText" class="org.apache.flex.mdl.CardTitleText"/> <component id="CardSupportingText" class="org.apache.flex.mdl.CardSupportingText"/> @@ -114,6 +113,7 @@ <component id="TabsView" class="org.apache.flex.mdl.beads.views.TabsView"/> <component id="Tabs" class="org.apache.flex.mdl.Tabs"/> + <component id="MaterialIcon" class="org.apache.flex.mdl.materialIcons.MaterialIcon"/> <component id="MaterialIconCancel" class="org.apache.flex.mdl.materialIcons.MaterialIconCancel"/> <component id="MaterialIconAdd" class="org.apache.flex.mdl.materialIcons.MaterialIconAdd"/> <component id="MaterialIconPerson" class="org.apache.flex.mdl.materialIcons.MaterialIconPerson"/>
