github/docker-registry-ui
1
0
Fork 0
mirror of https://github.com/Joxit/docker-registry-ui.git synced 2026-07-10 08:29:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

[riot-mui] Add riot-mui in menu (#17)

Browse Source
This commit is contained in:
Joxit
2017-09-23 20:36:17 +02:00
parent d4b99b2cb2
commit bdc0d34a87
2 changed files with 76 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/style.css
View File

@@ -219,4 +219,57 @@ material-card table th.material-card-th-sorted-descending:before {
material-snackbar .toast {
height: auto;
}
}
menu {
position: absolute;
top: 0px;
right: 16px;
color: #000;
}
menu .overlay {
position: fixed;
height: 100%;
width: 100%;
top: 0;
right: 0;
z-index: 1;
}
#menu-control-button {
background: rgba(255,255,255,0);
float: right;
}
#menu-control-button i {
color: #fff;
font-size: 24px;
}
#menu-control-dropdown {
display: inline-block;
position: relative;
}
.dropdown {
min-width: 124px;
padding: 8px 0;
margin: 0;
}
dropdown-item, #menu-control-dropdown p {
padding: 0 16px;
margin: auto;
line-height: 48px;
height: 48px;
cursor: pointer;
}
#menu-control-dropdown p:hover {
background-color: #eee;
}
#menu-control-dropdown p:active, .material-button-active:active {
background-color: #e0e0e0;
}

36
src/tags/menu.tag
View File

@@ -15,23 +15,31 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<menu>
<div ref="card-menu" id="card-menu" class="mdl-card__menu">
<button ref="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>
<li class="mdl-menu__item" onclick="registryUI.removeTag.show();">Remove URL</li>
</ul>
</div>
<material-button id="menu-control-button" onclick="registryUI.menuTag.toggle();" waves-center="true" rounded="true" waves-opacity="0.6" waves-duration="600">
<i class="material-icons">more_vert</i>
</material-button>
<material-dropdown id="menu-control-dropdown">
<p onclick="registryUI.addTag.show(); registryUI.menuTag.close();">Add URL</p>
<p onclick="registryUI.changeTag.show(); registryUI.menuTag.close();">Change URL</p>
<p onclick="registryUI.removeTag.show(); registryUI.menuTag.close();">Remove URL</p>
</material-dropdown>
<div class="overlay" onclick="registryUI.menuTag.close();" show="{ registryUI.menuTag.isOpen() }"></div>
<script type="text/javascript">
registryUI.menuTag = registryUI.menuTag || {};
registryUI.menuTag.update = this.update;
this.on('updated', function () {
componentHandler.upgradeElements(this.refs['card-menu']);
this.on('mount', function(args) {
var self = this;
registryUI.menuTag.close = function() {
self.tags['material-dropdown'].close();
self.update();
}
registryUI.menuTag.isOpen = function() {
return self.tags['material-dropdown'].opened;
}
registryUI.menuTag.toggle = function() {
self.tags['material-dropdown'].opened ? self.tags['material-dropdown'].close() : self.tags['material-dropdown'].open();
self.update();
};
});
registryUI.menuTag.update();
</script>
</menu>