Permalink
Find file
c3b45b3 May 14, 2016
86 lines (77 sloc) 2.36 KB
<!--
@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="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/iron-icon/iron-icon.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/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>