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

…d menu
MikeMitterer · Jun 10, 2015 · a5f2180 · a5f2180
1 parent d263873
commit a5f2180
Show file tree

Hide file tree

Showing 24 changed files with 345 additions and 79 deletions.
diff --git a/example/mdl_menu/.sitegen/html/_content/index.html b/example/mdl_menu/.sitegen/html/_content/index.html
@@ -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 -->
-
diff --git a/example/mdl_menu/web/demo.scss b/example/mdl_menu/web/demo.scss
@@ -16,6 +16,12 @@
 
 .demo-page--menu, .demo-section--menu {
 
+    #message {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+    }
+
     .demo-preview-block {
         position: relative;
         height: 500px;

diff --git a/example/mdl_menu/web/index.html b/example/mdl_menu/web/index.html
@@ -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>

diff --git a/example/mdl_menu/web/main.dart b/example/mdl_menu/web/main.dart
@@ -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) {

diff --git a/example/styleguide/.sitegen/html/_content/views/menu.html b/example/styleguide/.sitegen/html/_content/views/menu.html
@@ -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>
diff --git a/example/styleguide/.sitegen/html/_partials/usage/menu/dart.html b/example/styleguide/.sitegen/html/_partials/usage/menu/dart.html
@@ -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;

diff --git a/example/styleguide/.sitegen/html/_partials/usage/menu/html.html b/example/styleguide/.sitegen/html/_partials/usage/menu/html.html
@@ -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;
diff --git a/example/styleguide/web/assets/styles/_demo/_include.scss b/example/styleguide/web/assets/styles/_demo/_include.scss
@@ -6,4 +6,8 @@
     li {
         margin-bottom: 10px;
     }
+
+    ol.linenums {
+        margin-left: 0;
+    }
 }
diff --git a/example/styleguide/web/assets/styles/_demo/_menu.scss b/example/styleguide/web/assets/styles/_demo/_menu.scss
@@ -16,6 +16,12 @@
 
 .demo-page--menu, .demo-section--menu {
 
+    #message {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+    }
+
     .demo-preview-block {
         position: relative;
         height: 500px;

diff --git a/example/styleguide/web/main.dart b/example/styleguide/web/main.dart
@@ -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) {

diff --git a/example/styleguide/web/styleguide.scss b/example/styleguide/web/styleguide.scss
@@ -14,7 +14,6 @@ html, body {
     box-sizing: border-box;
 }
 
-
 body {
     margin  : 0;
     padding : 0;

diff --git a/example/styleguide/web/views/menu.html b/example/styleguide/web/views/menu.html
@@ -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>