You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ca...@apache.org on 2016/11/17 00:08:31 UTC
git commit: [flex-asjs] [refs/heads/develop] - MDL Menu and MenuItem
finished with example
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 <ca...@apache.org>
Authored: Thu Nov 17 01:08:28 2016 +0100
Committer: Carlos Rovira <ca...@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");
//}
}