snapdrop/app/elements/buddy-finder/device-name-dialog.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>