PairDrop/app/elements/buddy-finder/buddy-finder.html
2015-12-31 01:33:59 +01:00

95 lines
2.7 KiB
HTML

<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
<link rel="import" href="../file-sharing/file-input.html">
<link rel="import" href="buddy-avatar.html">
<link rel="import" href="personal-avatar.html">
<dom-module id="buddy-finder">
<template>
<style>
:host {
background-color: transparent;
@apply(--layout-fit);
@apply(--layout-horizontal);
@apply(--layout-center-center);
overflow: hidden;
position: relative;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0;
--paper-tooltip: {
font-size: 14px;
background-color: #4285f4;
}
}
.buddies {
z-index: 1;
@apply(--layout-horizontal);
@apply(--layout-center-center);
@apply(--layout-wrap);
}
.buddy {
cursor: pointer;
}
.explanation {
@apply(--paper-font-headline);
color: #4285f4;
text-align: center;
}
.short {
@apply(--paper-font-body1);
color: #333;
}
[only] {
@apply(--layout-fit);
@apply(--layout-horizontal);
@apply(--layout-center-center);
cursor: pointer;
}
</style>
<div class="buddies">
<template is="dom-repeat" items="{{buddies}}">
<file-input on-file-selected="_fileSelected" only$="{{!buddies.1}}">
<buddy-avatar contact="{{item}}" class="buddy"></buddy-avatar>
</file-input>
</template>
</div>
<div hidden$="{{buddies.0}}" class="explanation">
Open Snapdrop on other devices
<br> to send files.
<paper-tooltip offset="14">
short url: dropc.at
</paper-tooltip>
</div>
<personal-avatar class="me"></personal-avatar>
</template>
<script>
'use strict';
Polymer({
is: 'buddy-finder',
properties: {
buddies: {
type: Array,
notify: true
},
me: {
type: String,
},
},
_fileSelected: function(e) {
var peerId = e.model.item.peerId;
var file = e.detail;
app.p2p.sendFile(peerId, file);
}
});
</script>
</dom-module>