[change] Add change dialog and tag for menu

change.tag

@@ -0,0 +1,54 @@
+<!--
+ 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.url() }" 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.tileServerList = registryUI.changeTag.tileServerList
+      || registryUI.changeTag.dialog.querySelector('#server-list');
+  if (!registryUI.changeTag.dialog.showModal) {
+    dialogPolyfill.registerDialog(registryUI.changeTag.dialog);
+  }
+});
+registryUI.changeTag.show = function() {
+  registryUI.changeTag.dialog.showModal();
+};
+registryUI.changeTag.change = function() {
+  registryUI.changeTag.dialog.close();
+};
+registryUI.changeTag.close = function() {
+  registryUI.changeTag.dialog.close();
+};
+</script>
+</change>

index.html

@@ -41,6 +41,7 @@
    <taglist></taglist>
   </div>
   </main>
+  <change></change>
   <footer class="mdl-mini-footer">
    <div class="mdl-mini-footer__left-section">
     <div class="mdl-logo">Docker Registry UI</div>
@@ -53,6 +54,7 @@
  </div>
  <script src="catalog.tag" type="riot/tag"></script>
  <script src="taglist.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>

menu.tag

@@ -21,7 +21,7 @@
  </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>
+  <li class="mdl-menu__item" onclick="registryUI.changeTag.show();">Change URL</li>
  </ul>
 </div>
 

script.js

@@ -22,4 +22,5 @@ var catalog = {};
 registryUI.taglist = {};
 riot.mount('catalog');
 riot.mount('taglist');
+riot.mount('change');
 riot.mount('menu');