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

This commit is contained in:
Joxit 2017-09-24 22:58:59 +02:00
parent bdc0d34a87
commit 46b80e73f2
2 changed files with 36 additions and 28 deletions

View file

@ -273,3 +273,16 @@ dropdown-item, #menu-control-dropdown p {
#menu-control-dropdown p:active, .material-button-active:active { #menu-control-dropdown p:active, .material-button-active:active {
background-color: #e0e0e0; background-color: #e0e0e0;
} }
material-popup material-button {
background-color: #fff;
color: #000;
}
material-popup material-button:hover material-waves {
background-color: hsla(0,0%,75%,.2);
}
material-popup .popup {
max-width: 450px;
}

View file

@ -15,38 +15,34 @@
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<add> <add>
<dialog ref="add-server-dialog" class="mdl-dialog"> <material-popup>
<h4 class="mdl-dialog__title">Add your Server ?</h4> <div class="material-popup-title">Add your Server ?</div>
<div class="mdl-dialog__content"> <div class="material-popup-content">
<div class="mdl-textfield mdl-js-textfield"> <material-input ref="test" placeholder="Server URL"></material-input>
<input class="mdl-textfield__input" type="text" ref="add-server-input">
<label class="mdl-textfield__label" for="add-server-input">Server url</label>
</div> </div>
<div class="material-popup-action">
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="registryUI.addTag.add();">Add</material-button>
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="registryUI.addTag.close();">Cancel</material-button>
</div> </div>
<div class="mdl-dialog__actions"> </material-popup>
<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"> <script type="text/javascript">
registryUI.addTag = registryUI.addTag || {}; registryUI.addTag = registryUI.addTag || {};
registryUI.addTag.update = this.update; registryUI.addTag.update = this.update;
this.on('updated', function () { this.one('mount', function () {
registryUI.addTag.dialog = this.refs['add-server-dialog']; registryUI.addTag.dialog = this.tags['material-popup'];
registryUI.addTag.addServer = this.refs['add-server-input']; registryUI.addTag.dialog.one('updated', function() {
componentHandler.upgradeElements(registryUI.addTag.dialog); registryUI.addTag.addServer = registryUI.addTag.dialog.tags['material-input'];
if (!registryUI.addTag.dialog.showModal) { registryUI.addTag.addServer.onkeyup = function (e) {
dialogPolyfill.registerDialog(registryUI.addTag.dialog);
}
this.refs['add-server-input'].onkeyup = function (e) {
// if keyCode is Enter // if keyCode is Enter
if (e.keyCode == 13) { if (e.keyCode == 13) {
registryUI.addTag.add(); registryUI.addTag.add();
} }
}; };
}); });
});
registryUI.addTag.show = function () { registryUI.addTag.show = function () {
registryUI.addTag.dialog.showModal(); registryUI.addTag.dialog.open();
}; };
registryUI.addTag.add = function () { registryUI.addTag.add = function () {
if (registryUI.addTag.addServer.value && registryUI.addTag.addServer.value.length > 0) { if (registryUI.addTag.addServer.value && registryUI.addTag.addServer.value.length > 0) {
@ -60,6 +56,5 @@
registryUI.addTag.addServer.value = ''; registryUI.addTag.addServer.value = '';
registryUI.addTag.dialog.close(); registryUI.addTag.dialog.close();
}; };
registryUI.addTag.update();
</script> </script>
</add> </add>