diff --git a/example/mdl_menu/.sitegen/html/_content/index.html b/example/mdl_menu/.sitegen/html/_content/index.html index b72b8bb5..6ff342a0 100644 --- a/example/mdl_menu/.sitegen/html/_content/index.html +++ b/example/mdl_menu/.sitegen/html/_content/index.html @@ -5,10 +5,10 @@
-
-
- - --> - --> - --> - --> - --> - - - - - - \ No newline at end of file diff --git a/example/mdl_menu/web/demo.scss b/example/mdl_menu/web/demo.scss index 685632d3..67fc98d8 100644 --- 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 index 337be56e..ffc73895 100644 --- a/example/mdl_menu/web/index.html +++ b/example/mdl_menu/web/index.html @@ -50,16 +50,16 @@
-
-
- - --> - --> - --> - --> - --> - - - - - -
diff --git a/example/mdl_menu/web/main.dart b/example/mdl_menu/web/main.dart index 2c8d3250..5f9adf4f 100644 --- 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 index 70b4e583..0b06e615 100644 --- a/example/styleguide/.sitegen/html/_content/views/menu.html +++ b/example/styleguide/.sitegen/html/_content/views/menu.html @@ -5,10 +5,10 @@
-
-
- + diff --git a/example/styleguide/.sitegen/html/_partials/usage/menu/dart.html b/example/styleguide/.sitegen/html/_partials/usage/menu/dart.html index c92323d9..e58075d0 100644 --- 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((_) { - 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/_partials/usage/menu/html.html b/example/styleguide/.sitegen/html/_partials/usage/menu/html.html index d333b319..c544d47e 100644 --- a/example/styleguide/.sitegen/html/_partials/usage/menu/html.html +++ b/example/styleguide/.sitegen/html/_partials/usage/menu/html.html @@ -1,15 +1,15 @@ <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> @@ -18,7 +18,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> @@ -27,7 +27,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> @@ -36,4 +36,3 @@ <li class="mdl-menu__item">Android History</li> </ul> </div> - <div id="message"></div> diff --git a/example/styleguide/web/assets/styles/_demo/_include.scss b/example/styleguide/web/assets/styles/_demo/_include.scss index 30611f83..07ef37fa 100644 --- 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 index 685632d3..67fc98d8 100644 --- 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 index 07a5f544..c6e93b49 100644 --- 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 index 395c8d51..275b342f 100644 --- 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 index 2a72f6f3..79f4339e 100644 --- a/example/styleguide/web/views/menu.html +++ b/example/styleguide/web/views/menu.html @@ -5,10 +5,10 @@
-
-
- + \ No newline at end of file diff --git a/example/styleguide/web/views/usage/menu.html b/example/styleguide/web/views/usage/menu.html index 8fcb7219..eb347837 100644 --- a/example/styleguide/web/views/usage/menu.html +++ b/example/styleguide/web/views/usage/menu.html @@ -23,15 +23,23 @@ const int TIMEOUT_IN_SECS = 5; 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) { @@ -57,16 +65,16 @@ 
   <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>
@@ -75,7 +83,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>
@@ -84,7 +92,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>
@@ -93,7 +101,6 @@
       <li class="mdl-menu__item">Android History</li>
     </ul>
   </div>
-  <div id="message"></div>
diff --git a/lib/src/components/MaterialMenu.dart b/lib/src/components/MaterialMenu.dart index 6820cc58..6aabc6e2 100644 --- a/lib/src/components/MaterialMenu.dart +++ b/lib/src/components/MaterialMenu.dart @@ -111,6 +111,8 @@ class MaterialMenu extends MdlComponent { /// MaterialMenu.prototype.show = function(evt) { void show() { + _recalcPosition(); + if (element != null && _container != null && _outline != null ) { // Measure the inner element. @@ -332,7 +334,12 @@ class MaterialMenu extends MdlComponent { /// toggling it. /// MaterialMenu.prototype.handleForClick_ = function(evt) { void _handleForClick(final dom.MouseEvent evt) { + _recalcPosition(); + toggle(); + } + /// Recalculates the position of the menu-container depending on the menu settings (left, right...) + void _recalcPosition() { if (element != null && _forElement != null) { final rect = _forElement.getBoundingClientRect(); @@ -366,8 +373,6 @@ class MaterialMenu extends MdlComponent { _container.style.top = "${_forElement.offsetTop + _forElement.offsetHeight}px"; } } - - toggle(); } /// Handles a keyboard event on the "for" element. diff --git a/test/visual/components/accordion_test.dart b/test/visual/components/accordion_test.dart index ef9ccdb4..cc7d8b58 100644 --- a/test/visual/components/accordion_test.dart +++ b/test/visual/components/accordion_test.dart @@ -14,6 +14,14 @@ testAccordion() { expect(element.dataset["upgraded"],"MaterialAccordion"); }); + test('> widget', () { + final dom.HtmlElement element = dom.document.querySelector("#accordion1"); + + final MaterialAccordion widget = MaterialAccordion.widget(element); + expect(widget,isNotNull); + + }); // end of 'widget' test + }); // end 'Accordion' group diff --git a/test/visual/components/button_test.dart b/test/visual/components/button_test.dart index 18736b8e..b633126e 100644 --- a/test/visual/components/button_test.dart +++ b/test/visual/components/button_test.dart @@ -12,6 +12,15 @@ testButton() { expect(element.dataset.containsKey("upgraded"),isTrue); expect(element.dataset["upgraded"],"MaterialButton"); }); + + test('> widget', () { + final dom.ButtonElement element = dom.document.querySelector("#button1"); + + final MaterialButton widget = MaterialButton.widget(element); + expect(widget,isNotNull); + + }); // end of 'widget' test + }); // end 'Button' group } diff --git a/test/visual/components/checkbox_test.dart b/test/visual/components/checkbox_test.dart index befa183f..73a006c3 100644 --- a/test/visual/components/checkbox_test.dart +++ b/test/visual/components/checkbox_test.dart @@ -14,6 +14,15 @@ testCheckbox() { expect(element.dataset["upgraded"],"MaterialCheckbox"); }); + test('> widget', () { + final dom.HtmlElement element = dom.document.querySelector("#checkbox1"); + + final MaterialCheckbox widget = MaterialCheckbox.widget(element); + expect(widget,isNotNull); + + }); // end of 'widget' test + + }); // end 'Checkbox' group } diff --git a/test/visual/components/data-table_test.dart b/test/visual/components/data-table_test.dart index 9d282105..bbc1d9cc 100644 --- a/test/visual/components/data-table_test.dart +++ b/test/visual/components/data-table_test.dart @@ -18,6 +18,13 @@ testDataTable() { }); // end of 'check if upgraded' test + test('> widget', () { + final dom.TableElement element = dom.document.querySelector("#data-table"); + + final MaterialDataTable widget = MaterialDataTable.widget(element); + expect(widget,isNotNull); + + }); // end of 'widget' test }); // end 'DataTable' group diff --git a/test/visual/components/icon_toggle_test.dart b/test/visual/components/icon_toggle_test.dart index 974bdc76..262d6c27 100644 --- a/test/visual/components/icon_toggle_test.dart +++ b/test/visual/components/icon_toggle_test.dart @@ -13,6 +13,13 @@ testIconToggle() { expect(element.dataset["upgraded"],"MaterialIconToggle"); }); + test('> widget', () { + final dom.HtmlElement element = dom.document.querySelector("#icon-toggle1"); + + final MaterialIconToggle widget = MaterialIconToggle.widget(element); + expect(widget,isNotNull); + + }); // end of 'widget' test }); diff --git a/test/visual/components/layout_test.dart b/test/visual/components/layout_test.dart new file mode 100644 index 00000000..ac32b4f4 --- /dev/null +++ b/test/visual/components/layout_test.dart @@ -0,0 +1,29 @@ +part of mdl.ui.unit.test; + +testLayout() { + final Logger _logger = new Logger("test.Layout"); + + group('Layout', () { + setUp(() { }); + + test('> check if upgraded', () { + final dom.DivElement element = dom.document.querySelector("#demo-layout"); + + expect(element,isNotNull); + expect(element.dataset.containsKey("upgraded"),isTrue); + expect(element.dataset["upgraded"],"MaterialLayout"); + }); + + test('> widget', () { + final dom.DivElement element = dom.document.querySelector("#demo-layout"); + + final MaterialLayout widget = MaterialLayout.widget(element); + expect(widget,isNotNull); + + }); // end of 'widget' test + + }); + // end 'Layout' group +} + +// - Helper -------------------------------------------------------------------------------------- diff --git a/test/visual/components/menu_test.dart b/test/visual/components/menu_test.dart new file mode 100644 index 00000000..a2ed59f2 --- /dev/null +++ b/test/visual/components/menu_test.dart @@ -0,0 +1,38 @@ +part of mdl.ui.unit.test; + +testMenu() { + final Logger _logger = new Logger("test.Menu"); + + group('Menu', () { + setUp(() { + final dom.HtmlElement elementLeft = dom.document.querySelector("#menu-left"); + final dom.HtmlElement elementRight = dom.document.querySelector("#menu-right"); + final MaterialMenu menuLeft = MaterialMenu.widget(elementLeft); + final MaterialMenu menuRight = MaterialMenu.widget(elementRight); + + menuLeft.show(); + menuRight.show(); + }); + + test('> check if upgraded', () { + final dom.HtmlElement element = dom.document.querySelector("#menu-left"); + + expect(element,isNotNull); + expect(element.dataset.containsKey("upgraded"),isTrue); + expect(element.dataset["upgraded"],"MaterialMenu,MaterialRipple"); + }); + + test('> widget', () { + final dom.HtmlElement element = dom.document.querySelector("#menu-right"); + + final MaterialMenu widget = MaterialMenu.widget(element); + expect(widget,isNotNull); + + }); // end of 'widget' test + + + }); + // end 'Menu' group +} + +// - Helper -------------------------------------------------------------------------------------- diff --git a/test/visual/test.dart b/test/visual/test.dart index 2f2706ff..229615d8 100644 --- a/test/visual/test.dart +++ b/test/visual/test.dart @@ -38,6 +38,8 @@ part "components/button_test.dart"; part "components/checkbox_test.dart"; part "components/icon_toggle_test.dart"; part "components/data-table_test.dart"; +part "components/layout_test.dart"; +part "components/menu_test.dart"; part "componenthandler/componenthandler_test.dart"; @@ -67,6 +69,8 @@ main() async { testCheckbox(); testIconToggle(); testDataTable(); + testLayout(); + testMenu(); testComponentHandler(); } diff --git a/test/visual/test.html b/test/visual/test.html index 2fe39bbc..f4990754 100755 --- a/test/visual/test.html +++ b/test/visual/test.html @@ -8,6 +8,8 @@ + + @@ -79,7 +126,7 @@
Header
@@ -159,5 +206,87 @@
Header
+
+
Fixed drawer with header
+

The drawer is always open in large screen sizes, functioning as side + navigation.

+
+
+
+
+ Fixed drawer +
+
+ +
+ +
+
+
+
+
+ Material Design Lite + +
+
+
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, + sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no + sea takimata sanctus est Lorem ipsum dolor sit amet.

+ +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, + sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no + sea takimata sanctus est Lorem ipsum dolor sit amet.

+ +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, + sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no + sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+
+
+
+
+ +
+ + + + + + + +
+ \ No newline at end of file diff --git a/tool/grinder/samples.dart b/tool/grinder/samples.dart index 88d8a6c6..bf436878 100644 --- a/tool/grinder/samples.dart +++ b/tool/grinder/samples.dart @@ -130,7 +130,7 @@ void createSampleList() { samples.add(new Sample("icon-toggle",Type.Core, hasReadme: false, hasOwnDartMain: true, hasOwnDemoHtml: true)); samples.add(new Sample("layout", Type.Core)); samples.add(new Sample("list", Type.Core, hasScript: false)); - samples.add(new Sample("menu", Type.Core, hasOwnDartMain: true, hasOwnDemoHtml: true)); + samples.add(new Sample("menu", Type.Core, hasOwnDartMain: true)); samples.add(new Sample("palette", Type.Core, hasScript: false, hasReadme: false)); samples.add(new Sample("progress", Type.Core, hasDemoCss: false, hasOwnDemoHtml: true, hasOwnDartMain: true)); samples.add(new Sample("radio", Type.Core, hasDemoCss: false, hasOwnDartMain: true));