mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-05-01 03:59:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Import files from Yawim

Browse source
This commit is contained in:
Robin Linus 2015-12-18 17:43:46 +01:00
parent 370003835e
commit dd4809f519
18 changed files with 994 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

24
app/elements/buddy-finder/buddy-finder-button.html Normal file
View file

@ -0,0 +1,24 @@
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<dom-module id="buddy-finder-button">
<template>
<style>
:host {
display: block;
}
paper-icon-item {
height: 60px;
}
</style>
<paper-icon-item>
<iron-icon icon="chat:wifi-tethering" item-icon></iron-icon>
Find People
</paper-icon-item>
</template>
<script>
'use strict';
Polymer({
is: 'buddy-finder-button'
});
</script>
</dom-module>

85
app/elements/buddy-finder/buddy-finder.html Normal file
View file

@ -0,0 +1,85 @@
<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="../contact-item/contact-item.html">
<link rel="import" href="../file-sharing/share-area.html">
<link rel="import" href="user-avatar.html">
<dom-module id="buddy-finder">
<template>
<style>
:host {
display: block;
background-color: white;
@apply(--layout-fit);
@apply(--layout-vertical);
@apply(--layout-center-center);
border-left: 1px solid #ccc;
}
.paper-font-display1 {
color: black;
text-align: center;
margin-bottom: 16px;
display: none;
}
.buddies {
z-index: 1;
}
.buddy {
cursor: pointer;
}
.circles {
position: absolute;
bottom: -50px;
left: 50%;
width: 1140px;
margin-left: -570px;
height: 700px;
transform-origin: 570px 570px;
animation: grow 1.5s ease-out;
fill: transparent;
}
.me {
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -60px;
}
</style>
<div class="paper-font-display1">People near by</div>
<div class="buddies">
<template is="dom-repeat" items="{{buddies}}">
<share-area>
<user-avatar on-tap="_connect" contact="{{item.peerId}}" class="buddy"></user-avatar>
</share-area>
</template>
</div>
<user-avatar contact="{{me}}" class="me"></user-avatar>
<iron-ajax auto url="https://yawim.com/findbuddies/{{me}}" handle-as="json" last-response="{{buddies}}"></iron-ajax>
<svg class="circles" viewBox="-0.5 -0.5 1140 700">
<circle class="circle" cx="570" cy="570" r="120" stroke="rgba(160,160,160,.4)"></circle>
<circle class="circle" cx="570" cy="570" r="210" stroke="rgba(160,160,160,.35)"></circle>
<circle class="circle" cx="570" cy="570" r="300" stroke="rgba(160,160,160,.3)"></circle>
<circle class="circle" cx="570" cy="570" r="390" stroke="rgba(160,160,160,.2)"></circle>
<circle class="circle" cx="570" cy="570" r="480" stroke="rgba(160,160,160,.15)"></circle>
</svg>
</template>
<script>
'use strict';
Polymer({
is: 'buddy-finder',
properties: {
buddies: Array,
me: {
type: String,
}
},
_connect: function(e) {
Polymer.dom(document).querySelector('x-app').p2p.connectToPeer(e.model.item.peerId);
}
});
</script>
</dom-module>

43
app/elements/buddy-finder/user-avatar.html Normal file
View file

@ -0,0 +1,43 @@
<link rel="import" href="../contact-item/anonymous-contact-behavior.html">
<dom-module id="user-avatar">
<template>
<style>
:host {
display: block;
@apply(--layout-vertical);
@apply(--layout-center);
width: 120px;
}
.avatar {
display: inline-block;
width: 52px;
height: 52px;
border-radius: 50%;
overflow: hidden;
background: #ccc;
@apply(--shadow-elevation-2dp);
}
.paper-font-subhead{
text-align: center;
}
</style>
<div class="avatar" id="avatar" item-icon></div>
<div class="paper-font-subhead">{{_displayName}}</div>
</template>
<script>
'use strict';
Polymer({
is: 'user-avatar',
behaviors:[Chat.AnonymousContactBehavior],
observers:['_computeBackgroundImg(contact.*)'],
_computeBackgroundImg:function(){
console.log('avatar changed');
var avatar = this.anonymousAccount(this.contact).avatar;
var style = this.$.avatar.style;
style.backgroundImage='url('+avatar.url+')';
style.backgroundPosition=avatar.left+'px '+avatar.top+'px';
}
});
</script>
</dom-module>