52 lines
1.6 KiB
HTML
52 lines
1.6 KiB
HTML
|
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
|
||
|
|
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
|
||
|
|
<dom-module id="device-name-dialog">
|
||
|
|
<template>
|
||
|
|
<style>
|
||
|
|
:host {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
paper-dialog {
|
||
|
|
width: 400px;
|
||
|
|
max-width: 90%
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
|
||
|
|
<h2>Name this Device</h2>
|
||
|
|
<p>
|
||
|
|
<paper-input id="input" value="{{deviceName}}" label="Name this Device" char-counter maxlength="18" on-keypress="_keyPressed" autofocus></paper-input>
|
||
|
|
</p>
|
||
|
|
<div class="buttons">
|
||
|
|
<paper-button dialog-dismiss>Cancel</paper-button>
|
||
|
|
<paper-button on-tap="_save">Rename</paper-button>
|
||
|
|
</div>
|
||
|
|
</paper-dialog>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
'use strict';
|
||
|
|
Polymer({
|
||
|
|
is: 'device-name-dialog',
|
||
|
|
properties: {
|
||
|
|
deviceName: {
|
||
|
|
notify: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
open: function() {
|
||
|
|
this.$.dialog.open();
|
||
|
|
},
|
||
|
|
_keyPressed: function(e) {
|
||
|
|
if (e.which === 13 || e.charCode === 13) {
|
||
|
|
this.$.input.inputElement.blur();
|
||
|
|
this._save();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_save: function() {
|
||
|
|
this.$.dialog.close();
|
||
|
|
this.fire('save-device-name', this.deviceName);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</dom-module>
|