From 27db0da65fadf238617ed4f784c081ed6aecc6de Mon Sep 17 00:00:00 2001
From: Joxit <Joxit972@gmail.com>
Date: Sun, 8 May 2016 01:02:40 +0200
Subject: [PATCH] [menu] remplace layout drawer with menu dots

---
 index.html | 16 ++--------------
 menu.tag   | 36 ++++++++++++++++++++++++++++++++++++
 script.js  |  2 +-
 3 files changed, 39 insertions(+), 15 deletions(-)
 create mode 100644 menu.tag

diff --git a/index.html b/index.html
index 660f360..6c5ca7d 100644
--- a/index.html
+++ b/index.html
@@ -32,22 +32,9 @@
    <div class="mdl-layout__header-row">
     <!-- Title -->
     <span class="mdl-layout-title">Docker Registry UI</span>
-    <!-- Add spacer, to align navigation to the right -->
-    <div class="mdl-layout-spacer"></div>
-    <!-- Navigation. We hide it in small screens. -->
-    <nav class="mdl-navigation mdl-layout--large-screen-only">
-     <a class="mdl-navigation__link" href="">Name spaces</a><a class="mdl-navigation__link" href="index.html">Home</a>
-    </nav>
+    <menu></menu>
    </div>
   </header>
-  <div class="mdl-layout__drawer">
-   <span class="mdl-layout-title">Docker Registry UI</span>
-   <nav class="mdl-navigation">
-    <a class="mdl-navigation__link" href="">Home</a>
-    <a class="mdl-navigation__link" href="">Name spaces</a>
-    <a class="mdl-navigation__link" href="">Change URL</a>
-   </nav>
-  </div>
   <main class="mdl-layout__content">
   <div class="page-content">
    <catalog></catalog>
@@ -66,6 +53,7 @@
  </div>
  <script src="catalog.tag" type="riot/tag"></script>
  <script src="taglist.tag" type="riot/tag"></script>
+ <script src="menu.tag" type="riot/tag"></script>
  <script src="node_modules/riot/riot+compiler.min.js"></script>
  <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
  <script src="node_modules/material-design-lite/dist/material.min.js"></script>
diff --git a/menu.tag b/menu.tag
new file mode 100644
index 0000000..928caf3
--- /dev/null
+++ b/menu.tag
@@ -0,0 +1,36 @@
+<!--
+ Copyright (C) 2016  Jones Magloire @Joxit
+ 
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+ 
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+ 
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+<menu>
+<div id="card-menu" class="mdl-card__menu">
+ <button id="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">Add URL</li>
+  <li class="mdl-menu__item">Change URL</li>
+ </ul>
+</div>
+
+ <script type="text/javascript">
+registryUI.menuTag = registryUI.menuTag || {};
+registryUI.menuTag.update = this.update;
+this.on('updated', function () {
+  componentHandler.upgradeElements(this['card-menu']);
+});
+registryUI.menuTag.update();
+</script>
+</menu>
diff --git a/script.js b/script.js
index ce095cd..bd08afa 100644
--- a/script.js
+++ b/script.js
@@ -22,4 +22,4 @@ var catalog = {};
 registryUI.taglist = {};
 riot.mount('catalog');
 riot.mount('taglist');
-
+riot.mount('menu');