Merge pull request #5 from Joxit/menu

[menu] remplace layout drawer with menu dots
Now you can : 
* Change registry url 
* Add registry url

add.tag

@@ -0,0 +1,58 @@
+<!--
+ 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/>.
+-->
+<add>
+<dialog id="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" id="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> <script type="text/javascript">
+registryUI.addTag = registryUI.addTag || {};
+registryUI.addTag.update = this.update;
+this.on('updated', function () {
+  componentHandler.upgradeElements(this['add-server-dialog']);
+  registryUI.addTag.dialog = registryUI.addTag.dialog
+      || document.querySelector('#add-server-dialog');
+  registryUI.addTag.addServer = registryUI.addTag.tileServerList
+      || registryUI.addTag.dialog.querySelector('#add-server-input');
+  if (!registryUI.addTag.dialog.showModal) {
+    dialogPolyfill.registerDialog(registryUI.addTag.dialog);
+  }
+});
+registryUI.addTag.show = function() {
+  registryUI.addTag.dialog.showModal();
+};
+registryUI.addTag.add = function() {
+  if (registryUI.addTag.addServer.value && registryUI.addTag.addServer.value.length > 0) {
+    registryUI.addServer(registryUI.addTag.addServer.value);
+  }
+  registryUI.addTag.addServer.value = '';
+  registryUI.addTag.dialog.close();
+};
+registryUI.addTag.close = function() {
+  registryUI.addTag.dialog.close();
+};
+registryUI.addTag.update();
+</script>
+</add>

change.tag

@@ -0,0 +1,59 @@
+<!--
+ 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/>.
+-->
+<change>
+<dialog id="change-server-dialog" class="mdl-dialog">
+<h4 class="mdl-dialog__title">Change your Server ?</h4>
+<div class="mdl-dialog__content">
+ <div class="mdl-textfield mdl-js-textfield">
+  <select class="mdl-textfield__input mdl-textfield__select" name="server-list" id="server-list">
+   <option each="{ url in registryUI.getRegistryServer() }" value={url}>{url}</option>
+  </select>
+ </div>
+</div>
+<div class="mdl-dialog__actions">
+ <button type="button" class="mdl-button change" onClick="registryUI.changeTag.change();">Change</button>
+ <button type="button" class="mdl-button close" onClick="registryUI.changeTag.close();">Cancel</button>
+</div>
+</dialog> <script type="text/javascript">
+registryUI.changeTag = registryUI.changeTag || {};
+registryUI.changeTag.update = this.update;
+this.on('updated', function () {
+  componentHandler.upgradeElements(this['change-server-dialog']);
+  registryUI.changeTag.dialog = registryUI.changeTag.dialog
+      || document.querySelector('#change-server-dialog');
+  registryUI.changeTag.serverList = registryUI.changeTag.serverList
+      || registryUI.changeTag.dialog.querySelector('#server-list');
+  if (!registryUI.changeTag.dialog.showModal) {
+    dialogPolyfill.registerDialog(registryUI.changeTag.dialog);
+  }
+});
+registryUI.changeTag.show = function() {
+  registryUI.changeTag.update();
+  registryUI.changeTag.dialog.showModal();
+};
+registryUI.changeTag.change = function() {
+  if (registryUI.changeTag.serverList.value && registryUI.changeTag.serverList.value.length > 0) {
+    registryUI.changeServer(registryUI.changeTag.serverList.value);
+  }
+  registryUI.changeTag.serverList.value = '';
+  registryUI.changeTag.dialog.close();
+};
+registryUI.changeTag.close = function() {
+  registryUI.changeTag.dialog.close();
+};
+</script>
+</change>

index.html

@@ -33,28 +33,17 @@
    <div class="mdl-layout__header-row">
     <!-- Title -->
     <span class="mdl-layout-title">Docker Registry UI</span>
-    <!-- Add spacer, to align navigation to the right -->
+    <menu></menu>
-    <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>
    </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>
    <taglist></taglist>
   </div>
   </main>
+  <change></change>
+  <add></add>
   <footer class="mdl-mini-footer">
    <div class="mdl-mini-footer__left-section">
     <div class="mdl-logo">Docker Registry UI</div>
@@ -67,6 +56,9 @@
  </div>
  <script src="catalog.tag" type="riot/tag"></script>
  <script src="taglist.tag" type="riot/tag"></script>
+ <script src="add.tag" type="riot/tag"></script>
+ <script src="change.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>

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" onclick="registryUI.addTag.show();">Add URL</li>
+  <li class="mdl-menu__item" onclick="registryUI.changeTag.show();">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>

script.js

@@ -16,10 +16,44 @@
  */
 var registryUI = {}
 registryUI.url = function () {
-  return localStorage.getItem('registryServer');
+  return registryUI.getRegistryServer(0);
+}
+registryUI.getRegistryServer = function (i) {
+  try {
+    var res = JSON.parse(localStorage.getItem('registryServer'));
+    if (res instanceof Array) {
+      return (!isNaN(i)) ? res[i] : res;
+    }
+  } catch (e) {}
+  return (!isNaN(i)) ? '' : [];
+}
+registryUI.addServer = function (url) {
+  var registryServer = registryUI.getRegistryServer();
+  url = url.trim();
+  var index = registryServer.indexOf(url);
+  if (index != -1) {
+    return;
+  }
+  registryServer.push(url);
+  localStorage.setItem('registryServer', JSON.stringify(registryServer));
+}
+registryUI.changeServer = function (url) {
+  var registryServer = registryUI.getRegistryServer();
+  url = url.trim();
+  var index = registryServer.indexOf(url);
+  if (index == -1) {
+    return;
+  }
+  registryServer.splice(index, 1);
+  registryServer = [ url ].concat(registryServer);
+  registryUI.registryServer.servers = registryServer;
+  localStorage.setItem('registryServer', JSON.stringify(registryServer));
 }
 var catalog = {};
 registryUI.taglist = {};
+
 riot.mount('catalog');
 riot.mount('taglist');
-
+riot.mount('add');
+riot.mount('change');
+riot.mount('menu');