Permalink
Browse files

bug: Menu.show needed some pos calculation, Added tests for layout an…

…d menu
  • Loading branch information...
MikeMitterer committed Jun 10, 2015
1 parent d263873 commit a5f218093051876ffc26a56bbe7577689525cb2d
@@ -5,18 +5,18 @@
<div class="demo-preview-block">
<button id="clickable1" class="demo-menu-button-left mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="clickable1" id="menu1">
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="clickable1">
<li class="mdl-menu__item">5.0 Lollipop</li>
<li class="mdl-menu__item">4.4 KitKat</li>
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
<li class="mdl-menu__item">Android History</li>
</ul>
<button id="clickable2" class="demo-menu-button-left2 mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" for="clickable2">
@@ -27,7 +27,7 @@
</ul>
<button id="clickable3" class="demo-menu-button-right2 mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="clickable3">
@@ -38,7 +38,7 @@
</ul>
<button id="clickable4" class="demo-menu-button-right mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" for="clickable4">
@@ -49,16 +49,3 @@
</ul>
</div>
<div id="message"></div>
<!-- build:js(app/styleguide/dropdown-menu/) ../../scripts/main.min.js -->
<!-- <!-- <script src="../mdlComponentHandler.js"></script> --> -->
<!-- <!-- <script src="menu.js"></script> --> -->
<!-- <!-- <script src="../button/button.js"></script> --> -->
<!-- <!-- <script src="../ripple/ripple.js"></script> --> -->
<!-- <!-- <script src="../third_party/rAF.js"></script> --> -->
<!-- endbuild -->
<!-- start Autogenerated with gensamples.dart -->
<!-- <script type="application/dart" src="main.dart"></script> -->
<!-- <script type="text/javascript" src="packages/browser/dart.js"></script> -->
<!-- end Autogenerated with gensamples.dart -->
@@ -16,6 +16,12 @@
.demo-page--menu, .demo-section--menu {
#message {
position: absolute;
bottom: 0;
left: 0;
}
.demo-preview-block {
position: relative;
height: 500px;
@@ -50,16 +50,16 @@
<section class="demo-section demo-section--menu">
<div class="demo-preview-block">
<button id="clickable1" class="demo-menu-button-left mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="clickable1" id="menu1">
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="clickable1">
<li class="mdl-menu__item">5.0 Lollipop</li>
<li class="mdl-menu__item">4.4 KitKat</li>
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
<li class="mdl-menu__item">Android History</li>
</ul>
<button id="clickable2" class="demo-menu-button-left2 mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" for="clickable2">
<li class="mdl-menu__item">5.0 Lollipop</li>
@@ -68,7 +68,7 @@
<li class="mdl-menu__item">Android History</li>
</ul>
<button id="clickable3" class="demo-menu-button-right2 mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="clickable3">
<li class="mdl-menu__item">5.0 Lollipop</li>
@@ -77,7 +77,7 @@
<li class="mdl-menu__item">Android History</li>
</ul>
<button id="clickable4" class="demo-menu-button-right mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" for="clickable4">
<li class="mdl-menu__item">5.0 Lollipop</li>
@@ -86,19 +86,6 @@
<li class="mdl-menu__item">Android History</li>
</ul>
</div>
<div id="message"></div>
<!-- build:js(app/styleguide/dropdown-menu/) ../../scripts/main.min.js -->
<!-- <!-- <script src="../mdlComponentHandler.js"></script> --> -->
<!-- <!-- <script src="menu.js"></script> --> -->
<!-- <!-- <script src="../button/button.js"></script> --> -->
<!-- <!-- <script src="../ripple/ripple.js"></script> --> -->
<!-- <!-- <script src="../third_party/rAF.js"></script> --> -->
<!-- endbuild -->
<!-- start Autogenerated with gensamples.dart -->
<!-- <script type="application/dart" src="main.dart"></script> -->
<!-- <script type="text/javascript" src="packages/browser/dart.js"></script> -->
<!-- end Autogenerated with gensamples.dart -->
</section>
</div>
</div>
@@ -14,17 +14,26 @@ main() {
registerMdl();
componentFactory().run().then((_) {
final MaterialMenu menu1 = MaterialMenu.widget(dom.querySelector("#menu1"));
final dom.DivElement message = dom.querySelector("#message");
final dom.HtmlElement element = dom.querySelector(".mdl-menu");
final MaterialMenu menu1 = MaterialMenu.widget(element);
void _addMessageDiv() {
final dom.HtmlElement element = dom.querySelectorAll(".mdl-menu__container").last.parent;
final dom.DivElement message = new dom.DivElement();
message.id = "message";
element.insertAdjacentElement("beforeEnd",message);
}
void _showMessage(final int secsToClose) {
final dom.DivElement message = dom.querySelector("#message");
message.text = "Menu closes in ${secsToClose} seconds...";
if(secsToClose <= 0) {
message.text = "";
message.text = "Closed!";
}
}
menu1.show();
_addMessageDiv();
_showMessage(TIMEOUT_IN_SECS);
int tick = 0;
new Timer.periodic(new Duration(milliseconds: 1000) , (final Timer timer) {
@@ -5,18 +5,18 @@
<div class="demo-preview-block">
<button id="clickable1" class="demo-menu-button-left mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="clickable1" id="menu1">
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="clickable1">
<li class="mdl-menu__item">5.0 Lollipop</li>
<li class="mdl-menu__item">4.4 KitKat</li>
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
<li class="mdl-menu__item">Android History</li>
</ul>
<button id="clickable2" class="demo-menu-button-left2 mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" for="clickable2">
@@ -27,7 +27,7 @@
</ul>
<button id="clickable3" class="demo-menu-button-right2 mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="clickable3">
@@ -38,7 +38,7 @@
</ul>
<button id="clickable4" class="demo-menu-button-right mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" for="clickable4">
@@ -49,6 +49,5 @@
</ul>
</div>
<div id="message"></div>
</section>
@@ -7,17 +7,26 @@
registerMdl();
componentFactory().run().then((_) &#123;
final MaterialMenu menu1 = MaterialMenu.widget(dom.querySelector(&quot;#menu1&quot;));
final dom.DivElement message = dom.querySelector(&quot;#message&quot;);
final dom.HtmlElement element = dom.querySelector(&quot;.mdl-menu&quot;);
final MaterialMenu menu1 = MaterialMenu.widget(element);
void _addMessageDiv() &#123;
final dom.HtmlElement element = dom.querySelectorAll(&quot;.mdl-menu__container&quot;).last.parent;
final dom.DivElement message = new dom.DivElement();
message.id = &quot;message&quot;;
element.insertAdjacentElement(&quot;beforeEnd&quot;,message);
&#125;
void _showMessage(final int secsToClose) &#123;
final dom.DivElement message = dom.querySelector(&quot;#message&quot;);
message.text = &quot;Menu closes in $&#123;secsToClose&#125; seconds...&quot;;
if(secsToClose &lt;= 0) &#123;
message.text = &quot;&quot;;
message.text = &quot;Closed!&quot;;
&#125;
&#125;
menu1.show();
_addMessageDiv();
_showMessage(TIMEOUT_IN_SECS);
int tick = 0;
new Timer.periodic(new Duration(milliseconds: 1000) , (final Timer timer) &#123;
@@ -1,15 +1,15 @@
&lt;div class=&quot;demo-preview-block&quot;&gt;
&lt;button id=&quot;clickable1&quot; class=&quot;demo-menu-button-left mdl-button mdl-js-button mdl-button--icon&quot;&gt;
&lt;span class=&quot;mdl-icon mdl-icon--more-vert&quot;&#47;&gt;
&lt;i class=&quot;material-icons&quot;&gt;more_vert&lt;&#47;i&gt;
&lt;&#47;button&gt;
&lt;ul class=&quot;mdl-menu mdl-js-menu mdl-js-ripple-effect&quot; for=&quot;clickable1&quot; id=&quot;menu1&quot;&gt;
&lt;ul class=&quot;mdl-menu mdl-js-menu mdl-js-ripple-effect&quot; for=&quot;clickable1&quot;&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;5.0 Lollipop&lt;&#47;li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;4.4 KitKat&lt;&#47;li&gt;
&lt;li disabled class=&quot;mdl-menu__item&quot;&gt;4.3 Jelly Bean&lt;&#47;li&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;Android History&lt;&#47;li&gt;
&lt;&#47;ul&gt;
&lt;button id=&quot;clickable2&quot; class=&quot;demo-menu-button-left2 mdl-button mdl-js-button mdl-button--icon&quot;&gt;
&lt;span class=&quot;mdl-icon mdl-icon--more-vert&quot;&#47;&gt;
&lt;i class=&quot;material-icons&quot;&gt;more_vert&lt;&#47;i&gt;
&lt;&#47;button&gt;
&lt;ul class=&quot;mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect&quot; for=&quot;clickable2&quot;&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;5.0 Lollipop&lt;&#47;li&gt;
@@ -18,7 +18,7 @@
&lt;li class=&quot;mdl-menu__item&quot;&gt;Android History&lt;&#47;li&gt;
&lt;&#47;ul&gt;
&lt;button id=&quot;clickable3&quot; class=&quot;demo-menu-button-right2 mdl-button mdl-js-button mdl-button--icon&quot;&gt;
&lt;span class=&quot;mdl-icon mdl-icon--more-vert&quot;&#47;&gt;
&lt;i class=&quot;material-icons&quot;&gt;more_vert&lt;&#47;i&gt;
&lt;&#47;button&gt;
&lt;ul class=&quot;mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect&quot; for=&quot;clickable3&quot;&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;5.0 Lollipop&lt;&#47;li&gt;
@@ -27,7 +27,7 @@
&lt;li class=&quot;mdl-menu__item&quot;&gt;Android History&lt;&#47;li&gt;
&lt;&#47;ul&gt;
&lt;button id=&quot;clickable4&quot; class=&quot;demo-menu-button-right mdl-button mdl-js-button mdl-button--icon&quot;&gt;
&lt;span class=&quot;mdl-icon mdl-icon--more-vert&quot;&#47;&gt;
&lt;i class=&quot;material-icons&quot;&gt;more_vert&lt;&#47;i&gt;
&lt;&#47;button&gt;
&lt;ul class=&quot;mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect&quot; for=&quot;clickable4&quot;&gt;
&lt;li class=&quot;mdl-menu__item&quot;&gt;5.0 Lollipop&lt;&#47;li&gt;
@@ -36,4 +36,3 @@
&lt;li class=&quot;mdl-menu__item&quot;&gt;Android History&lt;&#47;li&gt;
&lt;&#47;ul&gt;
&lt;&#47;div&gt;
&lt;div id=&quot;message&quot;&gt;&lt;&#47;div&gt;
@@ -6,4 +6,8 @@
li {
margin-bottom: 10px;
}
ol.linenums {
margin-left: 0;
}
}
@@ -16,6 +16,12 @@
.demo-page--menu, .demo-section--menu {
#message {
position: absolute;
bottom: 0;
left: 0;
}
.demo-preview-block {
position: relative;
height: 500px;
@@ -158,17 +158,27 @@ class MenuController extends DemoController {
void loaded(final Route route) {
super.loaded(route);
final MaterialMenu menu1 = MaterialMenu.widget(dom.querySelector("#menu1"));
final dom.DivElement message = dom.querySelector("#message");
final dom.HtmlElement element = dom.querySelector(".mdl-menu"); // first menu
final MaterialMenu menu1 = MaterialMenu.widget(element);
void _addMessageDiv() {
final dom.HtmlElement element = dom.querySelectorAll(".mdl-menu__container").last.parent;
final dom.DivElement message = new dom.DivElement();
message.id = "message";
element.insertAdjacentElement("beforeEnd",message);
}
void _showMessage(final int secsToClose) {
final dom.DivElement message = dom.querySelector("#message");
message.text = "Menu closes in ${secsToClose} seconds...";
if(secsToClose <= 0) {
message.text = "";
message.text = "Closed!";
}
}
menu1.show();
_addMessageDiv();
_showMessage(TIMEOUT_IN_SECS);
int tick = 0;
new Timer.periodic(new Duration(milliseconds: 1000) , (final Timer timer) {
@@ -14,7 +14,6 @@ html, body {
box-sizing: border-box;
}
body {
margin : 0;
padding : 0;
@@ -5,18 +5,18 @@
<div class="demo-preview-block">
<button id="clickable1" class="demo-menu-button-left mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="clickable1" id="menu1">
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="clickable1">
<li class="mdl-menu__item">5.0 Lollipop</li>
<li class="mdl-menu__item">4.4 KitKat</li>
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
<li class="mdl-menu__item">Android History</li>
</ul>
<button id="clickable2" class="demo-menu-button-left2 mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" for="clickable2">
@@ -27,7 +27,7 @@
</ul>
<button id="clickable3" class="demo-menu-button-right2 mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="clickable3">
@@ -38,7 +38,7 @@
</ul>
<button id="clickable4" class="demo-menu-button-right mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" for="clickable4">
@@ -49,6 +49,5 @@
</ul>
</div>
<div id="message"></div>
</section>
Oops, something went wrong.

0 comments on commit a5f2180

Please sign in to comment.