Repository: flex-asjs Updated Branches: refs/heads/develop be86f911b -> bed2b2437
Add IconToggle button - Add new material icons format_bold, format_italic - Update MDL Buttons example with new component Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/bed2b243 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/bed2b243 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/bed2b243 Branch: refs/heads/develop Commit: bed2b24377faf1cf38bd813b4987222ffa94a9f0 Parents: be86f91 Author: piotrz <[email protected]> Authored: Sun Jan 8 18:23:30 2017 +0100 Committer: piotrz <[email protected]> Committed: Sun Jan 8 18:23:30 2017 +0100 ---------------------------------------------------------------------- .../MDLExample/src/main/flex/Buttons.mxml | 12 +- .../main/flex/org/apache/flex/mdl/IconToggle.as | 218 +++++++++++++++++++ .../src/main/flex/org/apache/flex/mdl/Switch.as | 22 +- .../mdl/materialIcons/MaterialIconFormatBold.as | 52 +++++ .../materialIcons/MaterialIconFormatItalic.as | 52 +++++ .../flex/mdl/materialIcons/MaterialIconsType.as | 3 + .../flex/mdl/supportClasses/MaterialIconBase.as | 17 ++ .../src/main/resources/mdl-manifest.xml | 4 +- 8 files changed, 362 insertions(+), 18 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bed2b243/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 a72ad48..ad20861 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml @@ -61,7 +61,17 @@ limitations under the License. <mdl:Disabled/> </mdl:beads> </mdl:Button> - + + <mdl:IconToggle dataMdlFor="mdlBoldIcon"> + <mdl:materialIcon> + <mdl:MaterialIconFormatBold /> + </mdl:materialIcon> + </mdl:IconToggle> + <mdl:IconToggle dataMdlFor="mdlItalicIcon"> + <mdl:materialIcon> + <mdl:MaterialIconFormatItalic /> + </mdl:materialIcon> + </mdl:IconToggle> </mdl:Grid> </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bed2b243/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/IconToggle.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/IconToggle.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/IconToggle.as new file mode 100644 index 0000000..bf5a994 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/IconToggle.as @@ -0,0 +1,218 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 +{ + import org.apache.flex.mdl.materialIcons.IMaterialIcon; + import org.apache.flex.mdl.supportClasses.MaterialIconBase; + + COMPILE::JS + { + import org.apache.flex.core.UIBase; + import org.apache.flex.core.WrappedHTMLElement; + } + /** + * The IconToggle class provides a MDL UI-like appearance for + * a IconToggle. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + COMPILE::SWF + public class IconToggle implements IMaterialIcon + { + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function IconToggle() {} + + private var _ripple:Boolean; + private var _dataMdlFor:String = "icon-toggle-1"; + private var _materialIcon:MaterialIconBase; + + /** + * The id value of the associated input + * Need to specify for display content of IconToggle + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get dataMdlFor():String + { + return _dataMdlFor; + } + + public function set dataMdlFor(value:String):void + { + _dataMdlFor = value; + } + + /** + * A boolean flag to activate "mdl-js-ripple-effect" effect selector. + * Applies ripple click effect. May be used in combination with any other classes + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get ripple():Boolean + { + return _ripple; + } + + public function set ripple(value:Boolean):void + { + _ripple = value; + } + + /** + * A material icon. Optional + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get materialIcon():MaterialIconBase + { + return _materialIcon; + } + public function set materialIcon(value:MaterialIconBase):void + { + _materialIcon = value; + } + } + + COMPILE::JS + public class IconToggle extends UIBase + { + public function IconToggle() + { + super(); + + className = ""; + } + + private var label:HTMLLabelElement; + private var input:HTMLInputElement; + + private var _dataMdlFor:String = "icon-toggle-1"; + private var _ripple:Boolean = false; + private var _materialIcon:MaterialIconBase; + + public function get dataMdlFor():String + { + return _dataMdlFor; + } + public function set dataMdlFor(value:String):void + { + _dataMdlFor = value; + + COMPILE::JS + { + if (input) + { + input.id = _dataMdlFor; + } + element.setAttribute('for', _dataMdlFor); + } + } + + public function get ripple():Boolean + { + return _ripple; + } + + public function set ripple(value:Boolean):void + { + _ripple = value; + + element.classList.toggle("mdl-js-ripple-effect", _ripple); + } + + /** + * A material icon. Optional + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get materialIcon():MaterialIconBase + { + return _materialIcon; + } + public function set materialIcon(value:MaterialIconBase):void + { + _materialIcon = value; + + COMPILE::JS + { + _materialIcon.iconToggleLabel = true; + addElement(_materialIcon); + } + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + * @flexjsignorecoercion HTMLLabelElement + * @flexjsignorecoercion HTMLInputElement + */ + override protected function createElement():WrappedHTMLElement + { + typeNames = "mdl-icon-toggle mdl-js-icon-toggle"; + + label = document.createElement("label") as HTMLLabelElement; + + element = label as WrappedHTMLElement; + element.setAttribute('for', _dataMdlFor); + + if (_dataMdlFor) + { + input = document.createElement("input") as HTMLInputElement; + input.id = _dataMdlFor; + input.type = "checkbox"; + input.checked = false; + input.classList.add("mdl-icon-toggle__input"); + + label.appendChild(input); + } + else + { + throw new Error("dataMdlFor need to be specify in order to display IconToggle"); + } + + positioner = element; + + (input as WrappedHTMLElement).flexjs_wrapper = this; + element.flexjs_wrapper = this; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bed2b243/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Switch.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Switch.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Switch.as index dd43270..af27d9b 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Switch.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Switch.as @@ -55,9 +55,11 @@ package org.apache.flex.mdl super(); } - protected var _ripple:Boolean = false; + private var _ripple:Boolean = false; + /** * A boolean flag to activate "mdl-js-ripple-effect" effect selector. + * Applies ripple click effect. May be used in combination with any other classes * * @langversion 3.0 * @playerversion Flash 10.2 @@ -130,17 +132,8 @@ package org.apache.flex.mdl return element; } - protected var _ripple:Boolean = false; - - /** - * A boolean flag to activate "mdl-js-ripple-effect" effect selector. - * Applies ripple click effect. May be used in combination with any other classes - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 - */ + private var _ripple:Boolean = false; + public function get ripple():Boolean { return _ripple; @@ -150,10 +143,7 @@ package org.apache.flex.mdl { _ripple = value; - COMPILE::JS - { - element.classList.toggle("mdl-js-ripple-effect", _ripple); - } + element.classList.toggle("mdl-js-ripple-effect", _ripple); } public function get text():String http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bed2b243/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 new file mode 100644 index 0000000..edd00cd --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFormatBold.as @@ -0,0 +1,52 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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; + + /** + * The MaterialIconFormatBold bead class is a specialty bead that add "format_bold" icon + * to component taken from "material-icons" + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class MaterialIconFormatBold extends MaterialIconBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function MaterialIconFormatBold() + { + super(); + } + + override protected function get iconText():String + { + return MaterialIconsType.FORMAT_BOLD; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bed2b243/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 new file mode 100644 index 0000000..9392696 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconFormatItalic.as @@ -0,0 +1,52 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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; + + /** + * The MaterialIconFormatItalic bead class is a specialty bead that add "format_italic" icon + * to component taken from "material-icons" + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class MaterialIconFormatItalic extends MaterialIconBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function MaterialIconFormatItalic() + { + super(); + } + + override protected function get iconText():String + { + return MaterialIconsType.FORMAT_ITALIC; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bed2b243/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 3eea71d..939ed95 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 @@ -30,5 +30,8 @@ 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/bed2b243/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 f7b51ff..c28488d 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 @@ -183,5 +183,22 @@ package org.apache.flex.mdl.supportClasses } } + private var _iconToggleLabel:Boolean; + /** + * Activate "mdl-icon-toggle__label" class selector, for use in list item + */ + public function get iconToggleLabel():Boolean + { + return _iconToggleLabel; + } + public function set iconToggleLabel(value:Boolean):void + { + _iconToggleLabel = value; + + COMPILE::JS + { + element.classList.toggle("mdl-icon-toggle__label", _iconToggleLabel); + } + } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/bed2b243/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 ad80a50..016e72b 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -22,6 +22,7 @@ <componentPackage> <component id="Button" class="org.apache.flex.mdl.Button"/> + <component id="IconToggle" class="org.apache.flex.mdl.IconToggle"/> <component id="TextField" class="org.apache.flex.mdl.TextField"/> <component id="TextArea" class="org.apache.flex.mdl.TextArea"/> <component id="CheckBox" class="org.apache.flex.mdl.CheckBox"/> @@ -112,5 +113,6 @@ <component id="MaterialIconMoreVert" class="org.apache.flex.mdl.materialIcons.MaterialIconMoreVert"/> <component id="MaterialIconSearch" class="org.apache.flex.mdl.materialIcons.MaterialIconSearch"/> <component id="MaterialIconKeyboardArrowDown" class="org.apache.flex.mdl.materialIcons.MaterialIconKeyboardArrowDown"/> - + <component id="MaterialIconFormatBold" class="org.apache.flex.mdl.materialIcons.MaterialIconFormatBold" /> + <component id="MaterialIconFormatItalic" class="org.apache.flex.mdl.materialIcons.MaterialIconFormatItalic"/> </componentPackage>
