Repository: flex-asjs Updated Branches: refs/heads/develop 0eb0ad89e -> 7c71bf441
MDL Menu and MenuItem finished with 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/7c71bf44 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/7c71bf44 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/7c71bf44 Branch: refs/heads/develop Commit: 7c71bf4415d9f51ce6827d2e2bd3fc421dcfe251 Parents: 0eb0ad8 Author: Carlos Rovira <carlosrov...@apache.org> Authored: Thu Nov 17 01:08:28 2016 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Thu Nov 17 01:08:28 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/App.mxml | 26 ++++--- .../src/main/flex/org/apache/flex/mdl/Menu.as | 78 +++++++++++++++++++- .../main/flex/org/apache/flex/mdl/MenuItem.as | 22 ++++++ .../flex/org/apache/flex/mdl/beads/Disabled.as | 16 ++-- 4 files changed, 125 insertions(+), 17 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7c71bf44/examples/flexjs/MDLExample/src/main/flex/App.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/App.mxml b/examples/flexjs/MDLExample/src/main/flex/App.mxml index 8d3eea1..6743d44 100644 --- a/examples/flexjs/MDLExample/src/main/flex/App.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml @@ -119,15 +119,6 @@ limitations under the License. </mdl:CardSupportingText> <mdl:CardActions border="true"> <mdl:Button text="Get Started" ripple="true" colored="true"/> - <mdl:Spacer/> - <mdl:Button icon="true" id="menu_btn"> - <i class="material-icons">more_vert</i> - </mdl:Button> - <mdl:Menu ripple="true" dataMdlFor="menu_btn"> - <mdl:MenuItem text="Some Action"/> - <mdl:MenuItem text="Another Action"/> - <mdl:MenuItem text="Another Action 2"/> - </mdl:Menu> </mdl:CardActions> <mdl:CardMenu> <mdl:Button icon="true" ripple="true" style="color: #fff;"> @@ -136,6 +127,23 @@ limitations under the License. </mdl:CardMenu> </mdl:Card> + <mdl:Spacer/> + + <mdl:Button id="menu_btn" icon="true"> + <i class="material-icons">more_vert</i> + </mdl:Button> + <mdl:Menu dataMdlFor="menu_btn" ripple="true" bottom="true" left="false"> + <mdl:MenuItem text="Some Action"/> + <mdl:MenuItem text="Another Action"/> + <mdl:MenuItem text="Action Disabled"> + <js:beads> + <mdl:Disabled/> + </js:beads> + </mdl:MenuItem> + <mdl:MenuItem text="More Action" divider="true"/> + <mdl:MenuItem text="Separated Action"/> + </mdl:Menu> + <mdl:Slider className="mdlsl_example"/> <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7c71bf44/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Menu.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Menu.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Menu.as index cb3c346..a438316 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Menu.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Menu.as @@ -56,7 +56,7 @@ package org.apache.flex.mdl COMPILE::JS override protected function createElement():WrappedHTMLElement { - typeNames = "mdl-menu mdl-js-menu mdl-menu--top-left"; + typeNames = "mdl-menu mdl-js-menu"; element = document.createElement('ul') as WrappedHTMLElement; @@ -66,8 +66,82 @@ package org.apache.flex.mdl return element; } - private var _dataMdlFor:String; + // default position for Menu in MDL is bottom/left (or no class selector specified) + private var currentPosClazz:String = ""; + private var _bottom:Boolean = true; + /** + * Position the menu relative to the associated button. + * Used in conjunction with "left" + * deafult is true + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get bottom():Boolean + { + return _bottom; + } + public function set bottom(value:Boolean):void + { + _bottom = value; + + var newPosClazz:String; + + if(currentPosClazz == "") + { + currentPosClazz = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); + trace("[bottom] currentPosClazz: " + currentPosClazz); + className += currentPosClazz; + } else + { + newPosClazz = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); + trace("[bottom] newPosClazz: " + newPosClazz); + className = className.replace( "/(?:^|\s)" + currentPosClazz + "(?!\S)/g" , newPosClazz); + } + + currentPosClazz = newPosClazz; + + } + private var _left:Boolean = true; + /** + * Position the menu relative to the associated button. + * Used in conjunction with "bottom" + * deafult is true + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get left():Boolean + { + return _left; + } + public function set left(value:Boolean):void + { + _left = value; + + var newPosClazz:String; + + if(currentPosClazz == "") + { + currentPosClazz = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); + trace("[left] currentPosClazz: " + currentPosClazz); + className += currentPosClazz; + } else + { + newPosClazz = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); + trace("[left] newPosClazz: " + newPosClazz); + className = className.replace( "/(?:^|\s)" + currentPosClazz + "(?!\S)/g" , newPosClazz); + } + + currentPosClazz = newPosClazz; + } + + private var _dataMdlFor:String; /** * The id value of the associated button that opens this menu. * http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7c71bf44/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/MenuItem.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/MenuItem.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/MenuItem.as index 54b4507..105d0db 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/MenuItem.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/MenuItem.as @@ -106,6 +106,28 @@ package org.apache.flex.mdl return element; } + private var _divider:Boolean; + + /** + * A boolean flag to activate "mdl-menu__item--full-bleed-divider" effect selector. + * Modifies an item to have a full bleed divider between it and the next list item. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get divider():Boolean + { + return _divider; + } + public function set divider(value:Boolean):void + { + _divider = value; + + className += (_divider ? " mdl-menu__item--full-bleed-divider" : ""); + } + protected var _ripple:Boolean = false; /** * A boolean flag to activate "mdl-js-ripple-effect" effect selector. http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7c71bf44/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as index 72861ba..ee34e27 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as @@ -83,13 +83,17 @@ package org.apache.flex.mdl.beads COMPILE::JS { var host:UIBase = value as UIBase; - var input:HTMLInputElement; - //if (host.element is HTMLInputElement) - //{ - input = host.element as HTMLInputElement; + host.element.setAttribute('disabled', ''); + /*var host:UIBase = value as UIBase; + if (host.element is HTMLInputElement) + { + var input:HTMLInputElement = host.element as HTMLInputElement; input.disabled = "disabled"; - //} else - //{ + } else if (host.element is HTMLElement) + { + var elm:HTMLElement = host.element as HTMLElement; + elm.disabled = "disabled"; + }*/ // throw new Error("Host element component in not type input"); //} }
