snapdrop

A Progressive Web App for local file sharing
git clone http://git.hanabi.in/repos/snapdrop.git
Log | Files | Refs | README | LICENSE

commit d8dcbfcb0f8f2acb0716d7bc5b54088e4c688b34
parent bb81b6f2e47dd4a821217cda8745f281df46ecb2
Author: Robin Linus <robin_woll@capira.de>
Date:   Wed,  4 May 2016 23:13:07 -0600

Lots of minor fixes

Diffstat:
Mapp/elements/buddy-finder/buddy-avatar.html | 13++++++++++++-
Mapp/elements/buddy-finder/buddy-finder.html | 97++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------
Mapp/elements/buddy-finder/device-name.html | 4++--
Aapp/elements/donate-dialog/donate-dialog.html | 95+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mapp/elements/elements.html | 1+
Mapp/elements/file-sharing/file-button-behavior.html | 2+-
Mapp/elements/p2p-network/file-transfer-protocol.html | 3+++
Mapp/elements/x-cards/about-page.html | 26+++++++++++++-------------
Aapp/elements/x-cards/settings-page.html | 92+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Dapp/images/avatars.jpg | 0
Dapp/images/nice_background.jpg | 0
Mapp/images/touch/chrome-splashscreen-icon-384x384.png | 0
Mapp/images/touch/chrome-touch-icon-192x192.png | 0
Mapp/images/touch/icon-128x128.png | 0
Aapp/images/touch/ms-icon-144x144-precomposed.png | 0
Mapp/images/touch/ms-icon-144x144.png | 0
Dapp/images/touch/ms-touch-icon-144x144-precomposed.png | 0
Aapp/images/touch/snapdrop-icon copy.png | 0
Mapp/index.html | 30++++++++++++++++++++++++++----
Mapp/styles/app-theme.html | 2+-
Mapp/styles/main.css | 27+++++++++++++++++++++++++++
21 files changed, 332 insertions(+), 60 deletions(-)

diff --git a/app/elements/buddy-finder/buddy-avatar.html b/app/elements/buddy-finder/buddy-avatar.html @@ -20,7 +20,7 @@ border-radius: 50%; overflow: hidden; padding: 12px; - margin-bottom: 4px; + margin-bottom: 6px; background-color: #4285f4; color: white; } @@ -127,39 +127,50 @@ return status; }, attached: function() { + // var adsDialog = document.querySelector('#ads'); this.async(function() { app.conn.addEventListener('file-offered', function(e) { if (e.detail.to === this.contact.peerId) { this.status = 'Waiting to accept...'; + //adsDialog.open(); } }.bind(this), false); app.conn.addEventListener('upload-started', function(e) { if (e.detail.to === this.contact.peerId) { this.status = 'Uploading...'; + // adsDialog.setState('Uploading...'); } }.bind(this), false); app.conn.addEventListener('download-started', function(e) { if (e.detail.from === this.contact.peerId) { this.status = 'Downloading...'; + //adsDialog.open(); + // adsDialog.setState('Downloading...'); } }.bind(this), false); app.conn.addEventListener('upload-complete', function(e) { if (e.detail.from === this.contact.peerId) { this.status = this.defaultStatus; + adsDialog.setState('Transfer Complete'); + // adsDialog.close(); } }.bind(this), false); app.conn.addEventListener('download-complete', function(e) { if (e.detail.from === this.contact.peerId) { this.status = this.defaultStatus; + adsDialog.setState('Transfer Complete'); + // adsDialog.close(); } }.bind(this), false); app.conn.addEventListener('file-declined', function(e) { if (e.detail.from === this.contact.peerId) { this.status = this.defaultStatus; + // adsDialog.close(true); } }.bind(this), false); app.conn.addEventListener('upload-error', function(e) { this.status = this.defaultStatus; + // adsDialog.close(); }.bind(this), false); }, 200); } diff --git a/app/elements/buddy-finder/buddy-finder.html b/app/elements/buddy-finder/buddy-finder.html @@ -102,11 +102,10 @@ opacity: 1; } } - </style> <div class="explanation2" hidden$="{{!_showExplanation}}"> - Tap to send File. - <br> Long Press to send Text. + {{_clickExplanation1}} Device to send File. + <br> {{_clickExplanation2}} to send a Text. </div> <div class="buddies" two-lines$="{{twoLinesOfBuddies}}"> <template is="dom-repeat" items="{{buddies}}"> @@ -123,44 +122,66 @@ </template> <script> 'use strict'; - Polymer({ - is: 'buddy-finder', - properties: { - buddies: { - type: Array, - notify: true + (function() { + var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); + Polymer({ + is: 'buddy-finder', + properties: { + buddies: { + type: Array, + notify: true + }, + me: { + type: String, + }, + _showExplanation: { + computed: '_computeShowExplanation(buddies.length)', + value: false + }, + twoLinesOfBuddies: { + value: false + }, + _clickExplanation1: { + value: (function() { + if (isMobile) { + return 'Tap'; + } else { + return 'Click'; + } + }) + }, + _clickExplanation2: { + value: (function() { + if (isMobile) { + return 'Long Press'; + } else { + return 'Right Click'; + } + }) + } }, - me: { - type: String, + observers: [ + '_buddiesChanged(buddies.splices)' + ], + _fileSelected: function(e) { + var peerId = e.model.item.peerId; + var file = e.detail; + app.conn.sendFile(peerId, file); + //document.querySelector('#ads').open(); }, - _showExplanation: { - computed: '_computeShowExplanation(buddies.length)', - value: false + _computeShowExplanation: function(nBuddies) { + if (!nBuddies || nBuddies === 0) { + return false; + } + if (nBuddies < 3) { + return true; + } }, - 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; + _buddiesChanged: function() { + var length = window.innerWidth / 120; + this.set('twoLinesOfBuddies', (this.buddies.length > length)); } - if (nBuddies < 3) { - return true; - } - }, - _buddiesChanged: function() { - var length = window.innerWidth / 120; - this.set('twoLinesOfBuddies', (this.buddies.length > length)); - } - }); + }); + }()); </script> </dom-module> diff --git a/app/elements/buddy-finder/device-name.html b/app/elements/buddy-finder/device-name.html @@ -14,7 +14,7 @@ text-align: center; cursor: pointer; width: 160px; - line-height: 18px !important; + line-height: 12px !important; } :root { @@ -37,7 +37,7 @@ text-align: left; } </style> - <div class="name-label" hidden$="{{name}}">My Name</div> + <div class="name-label" hidden$="{{name}}">My Device</div> <div class="name-label" hidden$="{{!name}}">{{name}}</div> <iron-localstorage name="device-name" value="{{name}}" iron-localstorage-load="_nameChanged"></iron-localstorage> </template> diff --git a/app/elements/donate-dialog/donate-dialog.html b/app/elements/donate-dialog/donate-dialog.html @@ -0,0 +1,95 @@ +<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"> +<dom-module id="donate-dialog-impl"> + <template> + <style> + :host { + display: block; + } + + paper-dialog { + max-width: 324px; + } + + iron-icon { + width: 72px; + height: 72px; + display: block; + margin: 0 auto; + margin-bottom: 4px; + color: #4285f4; + } + + p { + padding: 0 48px; + margin: 4px; + @apply(--paper-font-subhead); + } + + paper-dialog > a { + text-decoration: none; + color: #52524F; + text-align: center; + } + + @media screen and (max-width: 500px) { + paper-dialog { + margin: 24px + } + } + </style> + <paper-dialog id="dialog" with-backdrop entry-animation="scale-up-animation" exit-animation="fade-out-animation" modal> + <h2>Do you like Snapdrop?</h2> + <a href="https://www.paypal.com/cgi-bin/webscr?business=robin@capira.de&cmd=_xclick&currency_code=USD&item_name=Snapdrop&shipping=0" target="_blank" dialog-confirm> + <p> + <iron-icon icon="chat:local-cafe"></iron-icon> + <span>Donate a cup of Coffee <br>to the Developers!</span> + </p> + </a> + <div class="buttons"> + <paper-button dialog-dismiss>No, thanks.</paper-button> + <a href="https://www.paypal.com/cgi-bin/webscr?business=robin@capira.de&cmd=_xclick&currency_code=USD&item_name=Snapdrop&shipping=0" target="_blank"> + <paper-button dialog-confirm>Donate</paper-button> + </a> + </div> + </paper-dialog> + </template> + <script> + 'use strict'; + Polymer({ + is: 'donate-dialog-impl', + open: function() { + this.$.dialog.open(); + } + }); + </script> +</dom-module> +<dom-module id="donate-dialog"> + <script> + 'use strict'; + Polymer({ + is: 'donate-dialog', + properties: { + chance: { + value: 1 / 6 + } + }, + attached: function() { + window.donateDialog = this; + }, + get dialog() { + var dialog = document.querySelector('donate-dialog-impl'); + if (!dialog) { + dialog = Polymer.Base.create('donate-dialog-impl'); + document.body.appendChild(dialog); + } + return dialog; + }, + open: function() { + var chance = Math.random() <= this.chance; + if (chance) { + this.dialog.open(); + } + } + }); + </script> +</dom-module> diff --git a/app/elements/elements.html b/app/elements/elements.html @@ -13,4 +13,5 @@ <link rel="import" href="buddy-finder/buddy-finder.html"> <link rel="import" href="p2p-network/connection-wrapper.html"> <link rel="import" href="file-sharing/file-receiver.html"> +<link rel="import" href="donate-dialog/donate-dialog.html"> \ No newline at end of file diff --git a/app/elements/file-sharing/file-button-behavior.html b/app/elements/file-sharing/file-button-behavior.html @@ -8,7 +8,7 @@ Chat.FileButtonBehaviorImpl = { if (!fileInput) { fileInput = document.createElement('input'); fileInput.type = 'file'; - fileInput.multiple = 'true'; + fileInput.multiple = 'false'; fileInput.className = 'fileInput'; fileInput.style.position = 'fixed'; fileInput.style.top = '-10000px'; diff --git a/app/elements/p2p-network/file-transfer-protocol.html b/app/elements/p2p-network/file-transfer-protocol.html @@ -128,6 +128,9 @@ Chat.FileTransferProtocol = { _onReceived: function(offer) { this.loading = false; this.fire('upload-complete', offer); + if(window.donateDialog){ + window.donateDialog.open(); + } }, _onError: function() { this.loading = false; diff --git a/app/elements/x-cards/about-page.html b/app/elements/x-cards/about-page.html @@ -130,40 +130,40 @@ <div class="paper-font-headline">Snapdrop</div> <div class="slogan">The easiest way to transfer files across devices.</div> <div class="social"> - <a href="https://twitter.com/snapdrop42" target="_blank"> + <a href="https://twitter.com/intent/tweet?text=https://snapdrop.net%20by%20@robin_linus%20&" target="_blank"> <iron-icon icon="chat:twitter"></iron-icon> - <paper-tooltip for="" position="bottom" offset="14"> - Contact us on Twitter! + <paper-tooltip position="bottom" offset="14"> + Tweet about Snapdrop! </paper-tooltip> </a> - <a href="https://www.facebook.com/snapdrop.net/" target="_blank"> + <a href="https://www.facebook.com/RobinLinus" target="_blank"> <iron-icon icon="chat:facebook"></iron-icon> - <paper-tooltip for="" position="bottom" offset="14"> - Contact us on Facebook! + <paper-tooltip position="bottom" offset="14"> + Like my Facebook Page! </paper-tooltip> </a> - <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=R9C5E42UYEQCN" target="_blank"> + <a href="https://www.paypal.com/cgi-bin/webscr?business=robin@capira.de&cmd=_xclick&currency_code=USD&item_name=Snapdrop&shipping=0" target="_blank"> <iron-icon icon="chat:local-cafe"></iron-icon> - <paper-tooltip for="" position="bottom" offset="14"> + <paper-tooltip position="bottom" offset="14"> You like Snapdrop? <br> Buy me a cup of coffee! </paper-tooltip> </a> - <a href="https://github.com/capira12/snapdrop" target="_blank" class="github"> + <a href="https://github.com/yougrow/snapdrop" target="_blank" class="github"> <iron-icon icon="chat:github"></iron-icon> - <paper-tooltip for="" position="bottom" offset="14"> + <paper-tooltip position="bottom" offset="14"> Get involved! </paper-tooltip> </a> - <a href="https://github.com/capira12/snapdrop#frequently-asked-questions" target="_blank" class="github"> + <a href="https://github.com/yougrow/snapdrop#frequently-asked-questions" target="_blank" class="github"> <iron-icon icon="chat:help-outline"></iron-icon> - <paper-tooltip for="" position="bottom" offset="14"> + <paper-tooltip position="bottom" offset="14"> Frequently Asked Questions </paper-tooltip> </a> </div> </div> - <span id="footer">Built with &#9829; by <a href="https://twitter.com/capira42" target="_blank">Robin Linus</a></span> + <span id="footer"><a href="https://twitter.com/robin_linus" target="_blank">Built with &#9829; by Robin Linus</a></span> </div> </template> </dom-module> diff --git a/app/elements/x-cards/settings-page.html b/app/elements/x-cards/settings-page.html @@ -0,0 +1,92 @@ +<dom-module id="settings-page"> + <template> + <style> + :host { + display: block; + overflow: hidden; + color: white; + z-index: 3 + } + + #placeholder { + opacity: 0; + background-color: #4285f4; + @apply(--layout-fit); + } + /* paper-icon-button { + position: absolute; + top: 16px; + right: 16px; + z-index: 2; + }*/ + + #container { + @apply(--layout-fit); + @apply(--layout-vertical); + @apply(--layout-center-center); + background-color: #4285f4; + padding: 64px 32px 64px 32px; + box-sizing: border-box; + } + </style> + </template> + <script> + 'use strict'; + Polymer({ + is: 'settings-page', + behaviors: [ + Polymer.NeonSharedElementAnimatableBehavior + ], + properties: { + animationConfig: { + value: function() { + return { + 'entry': [{ + name: 'ripple-animation', + id: 'ripple', + toPage: this + }, { + name: 'fade-out-animation', + node: this.$.placeholder, + timing: { + delay: 250 + } + }, { + name: 'fade-in-animation', + node: this.$.container, + timing: { + delay: 50 + } + }], + 'exit': [{ + name: 'opaque-animation', + node: this.$.placeholder + }, { + name: 'fade-out-animation', + node: this.$.container, + timing: { + duration: 0 + } + }, { + name: 'reverse-ripple-animation', + id: 'reverse-ripple', + fromPage: this + }] + }; + } + }, + sharedElements: { + value: function() { + return { + 'ripple': this.$.placeholder, + 'reverse-ripple': this.$.placeholder + }; + } + } + }, + _switch: function() { + document.querySelector('#pages').select(0); + } + }); + </script> +</dom-module> diff --git a/app/images/avatars.jpg b/app/images/avatars.jpg Binary files differ. diff --git a/app/images/nice_background.jpg b/app/images/nice_background.jpg Binary files differ. diff --git a/app/images/touch/chrome-splashscreen-icon-384x384.png b/app/images/touch/chrome-splashscreen-icon-384x384.png Binary files differ. diff --git a/app/images/touch/chrome-touch-icon-192x192.png b/app/images/touch/chrome-touch-icon-192x192.png Binary files differ. diff --git a/app/images/touch/icon-128x128.png b/app/images/touch/icon-128x128.png Binary files differ. diff --git a/app/images/touch/ms-icon-144x144-precomposed.png b/app/images/touch/ms-icon-144x144-precomposed.png Binary files differ. diff --git a/app/images/touch/ms-icon-144x144.png b/app/images/touch/ms-icon-144x144.png Binary files differ. diff --git a/app/images/touch/ms-touch-icon-144x144-precomposed.png b/app/images/touch/ms-touch-icon-144x144-precomposed.png Binary files differ. diff --git a/app/images/touch/snapdrop-icon copy.png b/app/images/touch/snapdrop-icon copy.png Binary files differ. diff --git a/app/index.html b/app/index.html @@ -3,11 +3,10 @@ <head> <meta charset="utf-8"> - <meta name="description" content="Snapdrop is an easy way to transfer files. Instantly share images, video, PDF, and links across devices. Peer2Peer, Private, Secure and Open Source. No Setup, No Signup."> <meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="generator" content="Snapdrop"> <title>Snapdrop</title> - <link rel="shortcut icon" href="favicon.ico?v=2"/> + <link rel="shortcut icon" href="favicon.ico?v=3" /> <!-- Place favicon.ico in the `app/` directory --> <!-- Chrome for Android theme color --> <meta name="theme-color" content="#3367d6"> @@ -20,8 +19,16 @@ <meta name="application-name" content="PSK"> <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png"> <link rel="fluid-icon" type="image/png" href="images/touch/chrome-touch-icon-192x192.png"> - <meta property="og:image" content="https://snapdrop.net/images/touch/chrome-touch-icon-192x192.png" /> - <meta name="twitter:image" content="https://snapdrop.net/images/touch/chrome-touch-icon-192x192.png" /> + <meta name="description" content="Snapdrop is an easy way to transfer files. Instantly share images, video, PDF, and links across devices. Peer2Peer, Private, Secure and Open Source. No Setup, No Signup."> + <meta property="og:image" content="https://snapdrop.net/images/touch/chrome-splashscreen-icon-384x384.png" /> + <meta property="og:url" content="https://snapdrop.net/" /> + <meta name="twitter:image" content="https://snapdrop.net/images/touch/chrome-splashscreen-icon-384x384.png" /> + <meta name="twitter:author" content="@RobinLinus" /> + <meta property="og:type" content="article" /> + <meta property="og:author" content="https://facebook.com/RobinLinus" /> + <meta property="fb:pages" content="451189218422617" /> + <meta property="fb:profile_id" content="451189218422617" /> + <meta name="twitter:description" content="Snapdrop is an easy way to transfer files. Instantly share images, video, PDF, and links across devices. Peer2Peer, Private, Secure and Open Source. No Setup, No Signup."> <!-- Add to homescreen for Safari on iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> @@ -63,6 +70,7 @@ </paper-toast> <paper-toast id="caching-complete" duration="6000" text="Caching complete! This app will work offline."> </paper-toast> + <donate-dialog></donate-dialog> <platinum-sw-register auto-register clients-claim skip-waiting base-uri="bower_components/platinum-sw/bootstrap" on-service-worker-installed="displayInstalledToast"> <platinum-sw-cache default-cache-strategy="fastest" cache-config-file="cache-config.json"> </platinum-sw-cache> @@ -87,6 +95,20 @@ ga('create', 'UA-71686975-1', 'auto'); ga('send', 'pageview'); </script> + <!-- <div id="ads"> + <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <ins class="adsbygoogle" style="display:inline-block;width:320px;height:100px" data-ad-client="ca-pub-9914824802194583" data-ad-slot="1331757352"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> + </div> + <div id="ads2"> + <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <ins class="adsbygoogle" style="display:inline-block;width:120px;height:600px" data-ad-client="ca-pub-9914824802194583" data-ad-slot="4027871759"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> + </div> --> </body> </html> diff --git a/app/styles/app-theme.html b/app/styles/app-theme.html @@ -25,7 +25,7 @@ paper-progress { width: 100%; - z-index: 1; + z-index: 10000; position: absolute; top: 0; } diff --git a/app/styles/main.css b/app/styles/main.css @@ -13,3 +13,30 @@ body { -webkit-font-smoothing: antialiased; overflow-x: hidden; } + +#ads, +#ads2 { + display: none; +} + +@media screen and (min-width: 520px) { + #ads { + display: block; + position: absolute; + top: 8px; + left: 50%; + margin-left: -150px; + } +} + +@media screen and (min-width: 720px) { + #ads{ + display: none; + } + #ads2 { + display: block; + position: absolute; + bottom: 4px; + left: 4px; + } +}