165 lines
4.8 KiB
HTML
165 lines
4.8 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="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);
|
|
-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);
|
|
}
|
|
|
|
.explanation {
|
|
@apply(--paper-font-headline);
|
|
color: #4285f4;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
|
|
.short {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #727272;
|
|
}
|
|
|
|
.short a {
|
|
color: #4285f4;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.explanation:hover a {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
@media all and (max-width: 600px) {
|
|
.explanation {
|
|
width: 340px;
|
|
}
|
|
}
|
|
|
|
@media all and (max-height: 440px) {
|
|
.buddies {
|
|
padding-top: 56px;
|
|
@apply(--layout-self-start);
|
|
}
|
|
}
|
|
|
|
@media all and (max-height: 600px) {
|
|
.buddies[two-lines] {
|
|
padding-top: 56px;
|
|
@apply(--layout-self-start);
|
|
}
|
|
}
|
|
|
|
.explanation2 {
|
|
display: none;
|
|
position: absolute;
|
|
width: 296px;
|
|
margin-left: -148px;
|
|
left: 50%;
|
|
@apply(--paper-font-title);
|
|
color: rgba(66, 133, 244, 0.65);
|
|
text-align: center;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 500ms ease-out;
|
|
-moz-transition: opacity 500ms ease-out;
|
|
-o-transition: opacity 500ms ease-out;
|
|
transition: opacity 500ms ease-out;
|
|
z-index: 0;
|
|
}
|
|
|
|
@media all and (min-height: 441px) and (max-height: 559px) {
|
|
.explanation2 {
|
|
display: block;
|
|
top: 64px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media all and (min-height: 560px) {
|
|
.explanation2 {
|
|
display: block;
|
|
top: 128px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="explanation2" hidden$="{{!_showExplanation}}">
|
|
Tap to send File.
|
|
<br> Long Press to send Text.
|
|
</div>
|
|
<div class="buddies" two-lines$="{{twoLinesOfBuddies}}">
|
|
<template is="dom-repeat" items="{{buddies}}">
|
|
<buddy-avatar on-file-selected="_fileSelected" only$="{{!buddies.1}}" contact="{{item}}"></buddy-avatar>
|
|
</template>
|
|
</div>
|
|
<div hidden$="{{buddies.0}}" class="explanation">
|
|
Open Snapdrop on other devices to send files.
|
|
<div class="short">
|
|
Short link: <a href="http://yg.gl" target="_blank">yg.gl</a>
|
|
</div>
|
|
</div>
|
|
<personal-avatar class="me"></personal-avatar>
|
|
</template>
|
|
<script>
|
|
'use strict';
|
|
Polymer({
|
|
is: 'buddy-finder',
|
|
properties: {
|
|
buddies: {
|
|
type: Array,
|
|
notify: true
|
|
},
|
|
me: {
|
|
type: String,
|
|
},
|
|
_showExplanation: {
|
|
computed: '_computeShowExplanation(buddies.length)',
|
|
value: false
|
|
},
|
|
twoLinesOfBuddies: {
|
|
value: false
|
|
}
|
|
},
|
|
observers: [
|
|
'_buddiesChanged(buddies.splices)'
|
|
],
|
|
_fileSelected: function(e) {
|
|
var peerId = e.model.item.peerId;
|
|
var file = e.detail;
|
|
app.conn.sendFile(peerId, file);
|
|
},
|
|
_computeShowExplanation: function(nBuddies) {
|
|
if (!nBuddies || nBuddies === 0) {
|
|
return false;
|
|
}
|
|
if (nBuddies < 3) {
|
|
return true;
|
|
}
|
|
},
|
|
_buddiesChanged: function() {
|
|
var length = window.innerWidth / 120;
|
|
this.set('twoLinesOfBuddies', (this.buddies.length > length));
|
|
}
|
|
});
|
|
</script>
|
|
</dom-module>
|