From bdc0d34a87aaaeec436b8a4af31815a95ab768fc Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Sat, 23 Sep 2017 20:36:17 +0200
Subject: [PATCH] [riot-mui] Add riot-mui in menu (#17)

---
 src/style.css     | 55 ++++++++++++++++++++++++++++++++++++++++++++++-
 src/tags/menu.tag | 36 +++++++++++++++++++------------
 2 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/src/style.css b/src/style.css
index 457ef54..476a220 100644
--- a/src/style.css
+++ b/src/style.css
@@ -219,4 +219,57 @@ material-card table th.material-card-th-sorted-descending:before {
 
 material-snackbar .toast {
   height: auto;
-}
\ No newline at end of file
+}
+
+menu {
+  position: absolute;
+  top: 0px;
+  right: 16px;
+  color: #000;
+}
+
+menu .overlay {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  right: 0;
+  z-index: 1;
+}
+
+#menu-control-button {
+  background: rgba(255,255,255,0);
+  float: right;
+}
+
+#menu-control-button i {
+  color: #fff;
+  font-size: 24px;
+}
+
+#menu-control-dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+.dropdown {
+  min-width: 124px;
+  padding: 8px 0;
+  margin: 0;
+}
+
+dropdown-item, #menu-control-dropdown p {
+  padding: 0 16px;
+  margin: auto;
+  line-height: 48px;
+  height: 48px;
+  cursor: pointer;
+}
+
+#menu-control-dropdown p:hover {
+  background-color: #eee;
+}
+
+#menu-control-dropdown p:active, .material-button-active:active {
+  background-color: #e0e0e0;
+}
diff --git a/src/tags/menu.tag b/src/tags/menu.tag
index e68bda0..368b1af 100644
--- a/src/tags/menu.tag
+++ b/src/tags/menu.tag
@@ -15,23 +15,31 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <menu>
-  <div ref="card-menu" id="card-menu" class="mdl-card__menu">
-    <button ref="registry-menu" name="registry-menu" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
-      <i class="material-icons">more_vert</i>
-    </button>
-    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="registry-menu">
-      <li class="mdl-menu__item" onclick="registryUI.addTag.show();">Add URL</li>
-      <li class="mdl-menu__item" onclick="registryUI.changeTag.show();">Change URL</li>
-      <li class="mdl-menu__item" onclick="registryUI.removeTag.show();">Remove URL</li>
-    </ul>
-  </div>
-
+  <material-button id="menu-control-button" onclick="registryUI.menuTag.toggle();" waves-center="true" rounded="true" waves-opacity="0.6" waves-duration="600">
+    <i class="material-icons">more_vert</i>
+  </material-button>
+  <material-dropdown id="menu-control-dropdown">
+    <p onclick="registryUI.addTag.show(); registryUI.menuTag.close();">Add URL</p>
+    <p onclick="registryUI.changeTag.show(); registryUI.menuTag.close();">Change URL</p>
+    <p onclick="registryUI.removeTag.show(); registryUI.menuTag.close();">Remove URL</p>
+  </material-dropdown>
+  <div class="overlay" onclick="registryUI.menuTag.close();" show="{ registryUI.menuTag.isOpen() }"></div>
   <script type="text/javascript">
     registryUI.menuTag = registryUI.menuTag || {};
     registryUI.menuTag.update = this.update;
-    this.on('updated', function () {
-      componentHandler.upgradeElements(this.refs['card-menu']);
+    this.on('mount', function(args) {
+      var self = this;
+      registryUI.menuTag.close = function() {
+        self.tags['material-dropdown'].close();
+        self.update();
+      }
+      registryUI.menuTag.isOpen = function() {
+        return self.tags['material-dropdown'].opened;
+      }
+      registryUI.menuTag.toggle = function() {
+        self.tags['material-dropdown'].opened ? self.tags['material-dropdown'].close() : self.tags['material-dropdown'].open();
+        self.update();
+      };
     });
-    registryUI.menuTag.update();
   </script>
 </menu>