130 lines
4.3 KiB
HTML
130 lines
4.3 KiB
HTML
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
|
<dom-module id="buddy-avatar">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
@apply(--layout-vertical);
|
|
@apply(--layout-center);
|
|
width: 120px;
|
|
height: 152px;
|
|
}
|
|
|
|
paper-icon-button {
|
|
display: inline-block;
|
|
width: 64px !important;
|
|
height: 64px !important;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
padding: 12px;
|
|
margin-bottom: 4px;
|
|
background-color: #4285f4;
|
|
color: white;
|
|
}
|
|
|
|
:host:hover paper-icon-button {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.paper-font-subhead {
|
|
text-align: center;
|
|
}
|
|
|
|
.paper-font-body1 {
|
|
text-align: center;
|
|
width: 100%;
|
|
font-size: 13px;
|
|
color: grey;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
:host,
|
|
.paper-font-subhead,
|
|
.paper-font-body1 {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
margin-top: 4px;
|
|
}
|
|
</style>
|
|
<paper-icon-button icon="{{_displayIcon}}"></paper-icon-button>
|
|
<div class="paper-font-subhead">{{_displayName}}</div>
|
|
<div class="paper-font-body1">{{status}}</div>
|
|
</template>
|
|
<script>
|
|
'use strict';
|
|
Polymer({
|
|
is: 'buddy-avatar',
|
|
properties: {
|
|
contact: Object,
|
|
_displayName: {
|
|
computed: '_computeDisplayName(contact)'
|
|
},
|
|
_displayIcon: {
|
|
computed: '_computeDisplayIcon(contact)'
|
|
},
|
|
status: {
|
|
type: String,
|
|
value: ''
|
|
}
|
|
},
|
|
_computeDisplayName: function(contact) {
|
|
contact = contact.name;
|
|
if (contact.model) {
|
|
return contact.os + ' ' + contact.model;
|
|
}
|
|
contact.os = contact.os.replace('Mac OS', 'Mac');
|
|
return contact.os + ' ' + contact.browser;
|
|
},
|
|
_computeDisplayIcon: function(contact) {
|
|
contact = contact.name;
|
|
if (contact.type === 'mobile') {
|
|
return 'chat:phone-iphone';
|
|
}
|
|
if (contact.type === 'tablet') {
|
|
return 'chat:tablet-mac';
|
|
}
|
|
return 'chat:desktop-mac';
|
|
},
|
|
attached: function() {
|
|
this.async(function() {
|
|
app.p2p.addEventListener('file-offered', function(e) {
|
|
if (e.detail.to === this.contact.peerId) {
|
|
this.status = 'Waiting to accept...';
|
|
}
|
|
}.bind(this), false);
|
|
app.p2p.addEventListener('upload-started', function(e) {
|
|
if (e.detail.to === this.contact.peerId) {
|
|
this.status = 'Uploading...';
|
|
}
|
|
}.bind(this), false);
|
|
app.p2p.addEventListener('download-started', function(e) {
|
|
if (e.detail.from === this.contact.peerId) {
|
|
this.status = 'Downloading...';
|
|
}
|
|
}.bind(this), false);
|
|
app.p2p.addEventListener('upload-complete', function(e) {
|
|
if (e.detail.from === this.contact.peerId) {
|
|
this.status = '';
|
|
}
|
|
}.bind(this), false);
|
|
app.p2p.addEventListener('download-complete', function(e) {
|
|
if (e.detail.from === this.contact.peerId) {
|
|
this.status = '';
|
|
}
|
|
}.bind(this), false);
|
|
app.p2p.addEventListener('file-declined', function(e) {
|
|
if (e.detail.from === this.contact.peerId) {
|
|
this.status = '';
|
|
}
|
|
}.bind(this), false);
|
|
app.p2p.addEventListener('upload-error', function(e) {
|
|
this.status = '';
|
|
}.bind(this), false);
|
|
}, 200);
|
|
}
|
|
});
|
|
</script>
|
|
</dom-module>
|