new-contact-overlay.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog-transition.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-ripple/paper-ripple.html">

<!--
##### Example

    <messages-view></messages-view>

@element messages-view
@blurb Element providing solution to [...].
@status [...]
-->

<polymer-element name="new-contact-overlay" attributes="contacts">
  <template>
    <!--<link rel="stylesheet" href="messages-view.css">-->
    <style>
      paper-button[affirmative] {
        color: #4285f4;
      }

      paper-icon-button {
        align-self: center;
      }

      #nameInput {
        width: 100%;
      }
    </style>
    <paper-dialog id="overlay" heading="Add Contact" backdrop
        transition="paper-dialog-transition-bottom" on-core-overlay-close-completed="{{reset}}">
      <paper-input flex required id="nameInput" flex label="Name"></paper-input>
      <paper-button affirmative on-click="{{save}}" core-overlay-toggle>SAVE</paper-button>
      <paper-button dismissive core-overlay-toggle>CANCEL</paper-button>
    </paper-dialog>
  </template>

  <script>
    Polymer('new-contact-overlay', {

      ready: function() {
      },

      open: function() {
        this.$.overlay.toggle();
      },

      save: function() {
        if (this.$.nameInput.value == '') {
          return;
        }

        this.contacts.push({name: this.$.nameInput.value})
        this.$.nameInput.value = '';
      }
    });
  </script>
</polymer-element>