[menu] remplace layout drawer with menu dots

This commit is contained in:
Joxit 2016-05-08 01:02:40 +02:00
parent 7e3ffab9af
commit 27db0da65f
3 changed files with 39 additions and 15 deletions

View file

@ -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>

36
menu.tag Normal file
View file

@ -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>

View file

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