na-toolbar.html

<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../app-storage/app-network-status-behavior.html">

<dom-module id="na-toolbar">
  <template>
    <style>
      :host {
        @apply --layout-horizontal;
        @apply --layout-center;
        background-color: var(--paper-purple-500);
        color: var(--paper-purple-50);
        padding: 6px 8px;
        --paper-icon-button-disabled: {
          color: var(--paper-purple-50);
        };
      }

      h1 {
        font-size: 14px;
        flex-grow: 1;
        margin: 9px 0;
      }

      iron-icon {
        margin-right: 0.5em;
      }

      @media (min-width: 640px) {
        iron-icon,
        paper-icon-button {
          margin-right: 1.5em;
        }

        iron-icon:first-child {
          margin-left: 1em;
        }
      }
    </style>
    <iron-icon icon="bookmark"></iron-icon>
    <h1>Notes</h1>
    <iron-icon icon="cloud" hidden$="[[!online]]"></iron-icon>
    <iron-icon icon="cloud-off" hidden$="[[online]]"></iron-icon>
    <paper-icon-button
        icon="[[computeLockIcon(signedIn)]]"
        disabled="[[!signedIn]]"
        on-tap="lock">
    </paper-icon-button>
  </template>
  <script>
    Polymer({
      is: 'na-toolbar',

      behaviors: [
        Polymer.AppNetworkStatusBehavior
      ],

      properties: {
        signedIn: {
          type: Boolean,
          notify: true,
          value: false
        }
      },

      computeLockIcon: function(signedIn) {
        return signedIn ? 'lock-open' : 'lock';
      },

      lock: function() {
        this.fire('sign-out');
      }
    });
  </script>
</dom-module>