From 46b80e73f26f0723db4ebc4a58975d99df984933 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Sun, 24 Sep 2017 22:58:59 +0200
Subject: [PATCH] [riot-mui] Add riot-mui in add (#17)

---
 src/style.css    | 13 ++++++++++++
 src/tags/add.tag | 51 ++++++++++++++++++++++--------------------------
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/style.css b/src/style.css
index 476a220..bdaf388 100644
--- a/src/style.css
+++ b/src/style.css
@@ -273,3 +273,16 @@ dropdown-item, #menu-control-dropdown p {
 #menu-control-dropdown p:active, .material-button-active:active {
   background-color: #e0e0e0;
 }
+
+material-popup material-button {
+  background-color: #fff;
+  color: #000;
+}
+
+material-popup material-button:hover material-waves {
+  background-color: hsla(0,0%,75%,.2);
+}
+
+material-popup .popup {
+  max-width: 450px;
+}
diff --git a/src/tags/add.tag b/src/tags/add.tag
index 46ff0bd..0f5e906 100644
--- a/src/tags/add.tag
+++ b/src/tags/add.tag
@@ -15,38 +15,34 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <add>
-  <dialog ref="add-server-dialog" class="mdl-dialog">
-    <h4 class="mdl-dialog__title">Add your Server ?</h4>
-    <div class="mdl-dialog__content">
-      <div class="mdl-textfield mdl-js-textfield">
-        <input class="mdl-textfield__input" type="text" ref="add-server-input">
-        <label class="mdl-textfield__label" for="add-server-input">Server url</label>
-      </div>
-    </div>
-    <div class="mdl-dialog__actions">
-      <button type="button" class="mdl-button change" onClick="registryUI.addTag.add();">Add</button>
-      <button type="button" class="mdl-button close" onClick="registryUI.addTag.close();">Cancel</button>
-    </div>
-  </dialog>
+  <material-popup>
+   <div class="material-popup-title">Add your Server ?</div>
+   <div class="material-popup-content">
+     <material-input ref="test" placeholder="Server URL"></material-input>
+   </div>
+   <div class="material-popup-action">
+     <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="registryUI.addTag.add();">Add</material-button>
+     <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="registryUI.addTag.close();">Cancel</material-button>
+   </div>
+  </material-popup>
+
   <script type="text/javascript">
     registryUI.addTag = registryUI.addTag || {};
     registryUI.addTag.update = this.update;
-    this.on('updated', function () {
-      registryUI.addTag.dialog = this.refs['add-server-dialog'];
-      registryUI.addTag.addServer = this.refs['add-server-input'];
-      componentHandler.upgradeElements(registryUI.addTag.dialog);
-      if (!registryUI.addTag.dialog.showModal) {
-        dialogPolyfill.registerDialog(registryUI.addTag.dialog);
-      }
-      this.refs['add-server-input'].onkeyup = function (e) {
-        // if keyCode is Enter
-        if (e.keyCode == 13) {
-          registryUI.addTag.add();
-        }
-      };
+    this.one('mount', function () {
+      registryUI.addTag.dialog = this.tags['material-popup'];
+      registryUI.addTag.dialog.one('updated', function() {
+        registryUI.addTag.addServer = registryUI.addTag.dialog.tags['material-input'];
+        registryUI.addTag.addServer.onkeyup = function (e) {
+          // if keyCode is Enter
+          if (e.keyCode == 13) {
+            registryUI.addTag.add();
+          }
+        };
+      });
     });
     registryUI.addTag.show = function () {
-      registryUI.addTag.dialog.showModal();
+      registryUI.addTag.dialog.open();
     };
     registryUI.addTag.add = function () {
       if (registryUI.addTag.addServer.value && registryUI.addTag.addServer.value.length > 0) {
@@ -60,6 +56,5 @@
       registryUI.addTag.addServer.value = '';
       registryUI.addTag.dialog.close();
     };
-    registryUI.addTag.update();
   </script>
 </add>