flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject git commit: [flex-asjs] [refs/heads/develop] - MDL Menu and MenuItem finished with example
Date Thu, 17 Nov 2016 00:08:31 GMT
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 <carlosrovira@apache.org>
Authored: Thu Nov 17 01:08:28 2016 +0100
Committer: Carlos Rovira <carlosrovira@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");
                 //}
 			}


Mime
View raw message