Lots of minor fixes

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);
         }

app/elements/buddy-finder/buddy-finder.html

@@ -102,11 +102,10 @@
                 opacity: 1;
             }
         }
-        
         </style>
         <div class="explanation2" hidden$="{{!_showExplanation}}">
-            Tap to send File.
+            {{_clickExplanation1}} Device to send File.
-            <br> Long Press to send Text.
+            <br> {{_clickExplanation2}} to send a Text.
         </div>
         <div class="buddies" two-lines$="{{twoLinesOfBuddies}}">
             <template is="dom-repeat" items="{{buddies}}">
@@ -123,6 +122,8 @@
     </template>
     <script>
     'use strict';
+    (function() {
+        var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
         Polymer({
             is: 'buddy-finder',
             properties: {
@@ -139,6 +140,24 @@
                 },
                 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';
+                        }
+                    })
                 }
             },
             observers: [
@@ -148,6 +167,7 @@
                 var peerId = e.model.item.peerId;
                 var file = e.detail;
                 app.conn.sendFile(peerId, file);
+                //document.querySelector('#ads').open();
             },
             _computeShowExplanation: function(nBuddies) {
                 if (!nBuddies || nBuddies === 0) {
@@ -162,5 +182,6 @@
                 this.set('twoLinesOfBuddies', (this.buddies.length > length));
             }
         });
+    }());
     </script>
 </dom-module>

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>

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>

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">
     

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';

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;

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">
+                        <paper-tooltip position="bottom" offset="14">
-                            Contact us on Twitter!
+                            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">
+                        <paper-tooltip position="bottom" offset="14">
-                            Contact us on Facebook!
+                            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>

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>

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="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="twitter:image" content="https://snapdrop.net/images/touch/chrome-touch-icon-192x192.png" />
+    <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>

app/styles/app-theme.html

@@ -25,7 +25,7 @@
 
 paper-progress {
     width: 100%;
-    z-index: 1;
+    z-index: 10000;
     position: absolute;
     top: 0;
 }

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;
+    }
+}