feat(ui): Add navigation bar

Orange-OpenSource · Dec 14, 2016 · 51daa26 · 51daa26
1 parent af1a720
commit 51daa26
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 34 deletions.
diff --git a/client/jdropit-send.js b/client/jdropit-send.js
@@ -84,34 +84,7 @@ SenderHandler.prototype = {
 
 
         this.socket.on('server_receiver_ready', function (receiverId) {
-            $('#copyLinkContainer').hide();
-            $('#transfertMessage').html("Transfer in progress...");
-
-            //init container
-            var transferContainer = $('#transferContainer');
-            transferContainer.show();
-
-            var rowReceiverTemplate = $("#rowReceiverTemplate");
-            var newRow = rowReceiverTemplate.clone();
-            newRow.removeAttr("id");
-            newRow.show();
-            var linkRemove = newRow.find(".icon-delete");
-            linkRemove.on("click", function (e) {
-                e.preventDefault();
-                newRow.hide();
-            });
-            linkRemove.tooltip();
-
-            var pbContainer = newRow.children(".col-xs-7");
-            var transferProgressBar = pbContainer.find("progress");
-            var displayProgressBar = pbContainer.find(".text-xs-center");
-            displayProgressBar.attr("id", "progress-"+receiverId);
-            transferProgressBar.attr("aria-describedby", "progress-"+receiverId);
-            transferContainer.append(newRow);
-            that.receiverInfos[receiverId] = new ReceiverInfo(pbContainer, transferProgressBar, displayProgressBar, linkRemove);
-
-            that.startUpload(receiverId);
-
+            that.receiverIsReady(receiverId);
         });
 
 
@@ -138,6 +111,18 @@ SenderHandler.prototype = {
         });
     },
 
+    setNavigationStep: function(step) {
+        $(".o-stepbar > ol > li").each(function (idx) {
+            if(step > idx) {
+                $(this).removeClass("current");
+                $(this).addClass("done");
+            }
+            else if(step == idx){
+                $(this).addClass("current");
+            }
+        });
+    },
+
     fileIsReady: function (fileToTransfert) {
         var sizeDisplay = fileToTransfert.size > (1024 * 1024) ? Math.round(fileToTransfert.size / 1024 / 1024) + " Mo" :
             fileToTransfert.size > 1024 ? Math.round(fileToTransfert.size / 1024) + " Ko" : fileToTransfert.size + " o";
@@ -153,6 +138,38 @@ SenderHandler.prototype = {
         $('#copyLinkContainer').show(500);
         $('#warning-window').show(500);
         $('#selectFileContainer').hide(500);
+        this.setNavigationStep(1);
+    },
+
+    receiverIsReady: function(receiverId) {
+        $('#copyLinkContainer').hide();
+        this.setNavigationStep(2);
+        $('#transfertMessage').html("Transfer in progress...");
+
+        //init container
+        var transferContainer = $('#transferContainer');
+        transferContainer.show();
+
+        var rowReceiverTemplate = $("#rowReceiverTemplate");
+        var newRow = rowReceiverTemplate.clone();
+        newRow.removeAttr("id");
+        newRow.show();
+        var linkRemove = newRow.find(".icon-delete");
+        linkRemove.on("click", function (e) {
+            e.preventDefault();
+            newRow.hide();
+        });
+        linkRemove.tooltip();
+
+        var pbContainer = newRow.children(".col-xs-7");
+        var transferProgressBar = pbContainer.find("progress");
+        var displayProgressBar = pbContainer.find(".text-xs-center");
+        displayProgressBar.attr("id", "progress-"+receiverId);
+        transferProgressBar.attr("aria-describedby", "progress-"+receiverId);
+        transferContainer.append(newRow);
+        this.receiverInfos[receiverId] = new ReceiverInfo(pbContainer, transferProgressBar, displayProgressBar, linkRemove);
+
+        this.startUpload(receiverId);
     },
 
     startUpload: function (receiverId) {

diff --git a/public/css/justdropit.css b/public/css/justdropit.css
@@ -111,7 +111,7 @@ header {
 }
 
 main {
-    padding: 1.5rem 0px 1.1rem;
+    padding: 2rem 0px 1.1rem;
 }
 
 main em {

diff --git a/views/header.jade b/views/header.jade
@@ -29,7 +29,7 @@ header(role="banner")
                 div.col-xs-12
                     h1 Just drop it
                         small &laquo;Let us ease your file transfer&raquo;
-
+    block extra_header
 
 script.
     function enableNotifications() {

diff --git a/views/send.jade b/views/send.jade
@@ -41,10 +41,23 @@ block extra_scripts
             sendFile(#{isLocal});
             enableNotifications();
         }
+block extra_header
+    nav.o-stepbar
+        ol
+            li.stepbar-item.current
+                a.stepbar-link(title="Select your file")
+                    span.step-number 1
+                    span.step-title Select your file
+            li.stepbar-item
+                a.stepbar-link(title="Share it with your friends")
+                    span.step-number 2
+                    span.step-title Share it with your friends
+            li.stepbar-item
+                a.stepbar-link(title="Transferring")
+                    span.step-number 3
+                    span.step-title Transferring
 block content
     div.row#selectFileContainer
-        div.col-xs-12
-            h2 Select your file
         div.col-xs-12
             p.lead Either drop a file below:
             div.upload-drop-zone#drop-zone Just drag and drop a file here
@@ -53,7 +66,6 @@ block content
                 input#file(type="file")
     div.row#copyLinkContainer(style="display: none;")
         div.col-xs-12
-            h2 Ready to transfer!
             p.lead Tell your friend to go to this url:
             div.text-muted
                 p#generatedurl
@@ -62,7 +74,7 @@ block content
     div#transferContainer(style="display: none;")
         div.row
             div.col-xs-12
-                em The transfer will start as soon as your friends open the link.
+                em Each transfer will start as soon as your friends open the link.
 
                 p.text-muted#generatedurlreminder
                 p &nbsp;
-Original file line number
+Diff line change
@@ Expand Up / @@ -111,7 +111,7 @@ header { @@
     }
     main {
-        padding: 1.5rem 0px 1.1rem;
+        padding: 2rem 0px 1.1rem;
     }
     main em {
@@ Expand Down @@