Merge branch 'custom_room_names' of github.com:cowbell/sharedrop into custom_room_names

app/index.html

@@ -65,15 +65,21 @@
   <script src="/scripts/app/lib/room.js"></script>
   <script src="/scripts/app/lib/file.js"></script>
   <script src="/scripts/app/lib/webrtc.js"></script>
+
   <script src="/scripts/app.js"></script>
+
   <script src="/scripts/app/components/modal_dialog_component.js"></script>
   <script src="/scripts/app/components/popover_confirm_component.js"></script>
+  <script src="/scripts/app/components/room_url_component.js"></script>
+
   <script src="/scripts/app/controllers/application_controller.js"></script>
   <script src="/scripts/app/controllers/index_controller.js"></script>
   <script src="/scripts/app/controllers/peer_controller.js"></script>
   <script src="/scripts/app/controllers/user_controller.js"></script>
+
   <script src="/scripts/app/models/peer.js"></script>
   <script src="/scripts/app/models/user.js"></script>
+
   <script src="/scripts/app/views/file_field.js"></script>
   <script src="/scripts/app/views/peer_view.js"></script>
   <script src="/scripts/app/views/peer_avatar_view.js"></script>

app/scripts/app.js

@@ -137,9 +137,7 @@ ShareDrop.App.IndexRoute = Ember.Route.extend({
             outlet: 'about_you'
         });
 
-        // TODO: modify key name when cross-network feature is ready
-        // and info about it is added to 'about_app' template
-        var key =  'seenInstructions';
+        var key =  'show-instructions-for-app';
         if (!localStorage.getItem(key)) {
             this.send('openModal', 'about_app');
             localStorage.setItem(key, 'yup');

app/scripts/app/components/room_url_component.js

@@ -0,0 +1,17 @@
+ShareDrop.App.RoomUrlComponent = Ember.TextField.extend({
+    classNames: ['room-url'],
+
+    becomeSelected: function () {
+        this.$().focus().select();
+    }.on('didInsertElement'),
+
+    copyValueToClipboard: function () {
+        if (window.ClipboardEvent) {
+            var pasteEvent = new window.ClipboardEvent('paste', {
+                dataType: 'text/plain',
+                data: this.$().val()
+            });
+            document.dispatchEvent(pasteEvent);
+        }
+    }
+});

app/scripts/app/templates/about_app.hbs

@@ -2,14 +2,21 @@
   <h2 class="logo"><span>ShareDrop</span></h2>
   <h3>What is it?</h3>
   <p>
-    ShareDrop is a free app that allows you to easily and securely share files directly between devices in the same local network<sup>*</sup>, without having to upload them to any server first.
+    ShareDrop is a free app that allows you to easily and securely share files directly between devices without having to upload them to any server first.
   </p>
 
   <h3>How to use it?</h3>
+  <h4>Sharing files between devices in local network<sup>*</sup></h4>
   <p>
-    To send a file to another device, open this page on both devices. Drag and drop the file directly on other user's avatar or click the avatar and select the file you want to send. The file transfer will start once the recipient accepts the file.
+    To send a file to another device in the same local network, open this page (i.e. <a href="https://www.sharedrop.io">www.sharedrop.io</a>) on both devices. Drag and drop a file directly on other persons's avatar or click the avatar and select the file you want to send. The file transfer will start once the recipient accepts the file.
   </p>
 
+  <h4>Sharing files between devices in different networks</h4>
+  <p>
+    To send a file to another device in a different network, click <span style="font-weight: bold; font-size: 2rem">+</span> button in the upper right corner of the page and follow futher instructions.
+  </p>
+
+  <h4>Signing in</h4>
   <p>
     Additionally, you can sign in using <a href="http://www.mozilla.org/persona" target="_blank">Persona</a> to allow others to easily recognize you by your email. This will show others your email address and also your <a href="http://gravatar.com" target="_blank">Gravatar</a>, if you have one.
   </p>

app/scripts/app/templates/about_room.hbs

@@ -1,12 +1,21 @@
 {{#modal-dialog action="closeModal"}}
   <h2 class="logo"><span>ShareDrop</span></h2>
-  <h3>How rooms work?</h3>
+  <h3>Sharing files between devices in different networks</h3>
+
   <p>
-    Share this URL with others blah blah:
+    Copy provided address and send it any way you like to the other person.
   </p>
 
   <p>
-    {{input value=currentURL disabled="disabled"}}
+    {{room-url value=currentURL disabled="disabled" style="display: block; margin: auto;"}}
+  </p>
+
+  <p>
+    When the other person enters this address, you'll see each other on this page.
+  </p>
+
+  <p>
+    Drag and drop a file directly on other persons's avatar or click the avatar and select the file you want to send. The file transfer will start once the recipient accepts the file.
   </p>
 
   <div class="actions">

app/scripts/app/templates/application.hbs

@@ -10,7 +10,7 @@
       <a href="javascript:void(0)" class="icon-create-room" {{action 'redirect'}} title="Create a room. You'll leave the room you're currently in.">+</a>
       </li>
       <li>
-        <a href="javascript:void(0)" class="icon-circle icon-about" {{action 'openModal' 'about'}} title="About">?</a>
+        <a href="javascript:void(0)" class="icon-circle icon-about" {{action 'openModal' 'about_app'}} title="About">?</a>
       </li>
       {{#if you.email}}
         <li class="email">

app/styles/layout/_media.sass

@@ -133,5 +133,3 @@
     width: auto
     font-size: 1.4rem
     padding: 0 15px
-
-

app/styles/modules/_modal.sass

@@ -22,6 +22,10 @@
     font-size: 1.8rem
     font-weight: bold
     margin-bottom: 1.11em
+  h4
+    font-size: 1.5rem
+    font-weight: bold
+    margin-bottom: 0.5em
   p
     font-size: 1.4rem
     line-height: 1.4em
@@ -58,4 +62,3 @@
     background: transparent image-url("/images/sharedrop.svg") no-repeat left
     span
       display: none
-

app/styles/modules/_modules.sass

@@ -55,3 +55,9 @@
   51%
     +scale(.5)
     opacity: 0
+
+.room-url
+  display: block
+  margin: auto
+  font-size: 14px
+  width: 80%