Display the progress when downloading a file

www/file/file.css

@@ -35,13 +35,15 @@ body {
 }
 #upload-form label,
 #download-form label {
-  line-height: 50vh;
+  line-height: calc(50vh - 20px);
   text-align: center;
   position: relative;
   padding: 10px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  height: 50vh;
+  box-sizing: border-box;
 }
 .hovering {
   background-color: rgba(255, 0, 115, 0.5) !important;
@@ -63,8 +65,8 @@ body {
 }
 #progress {
   position: absolute;
-  top: 0px;
+  top: 0;
-  left: 0px;
+  left: 0;
   height: 100%;
   transition: width 500ms;
   width: 0%;

www/file/file.less

@@ -1,6 +1,8 @@
 @import "../../customize.dist/src/less/variables.less";
 @import "../../customize.dist/src/less/mixins.less";
 
+@button-border: 2px;
+
 html, body {
     margin: 0px;
 }
@@ -13,7 +15,7 @@ html, body {
     display: block;
     height: 100%;
     width: 100%;
-    border: 2px solid black;
+    border: @button-border solid black;
 }
 
 .inputfile {
@@ -36,13 +38,15 @@ html, body {
     margin: 50px auto;
     max-width: 80vw;
     label {
-        line-height: 50vh;
+        line-height: ~"calc(50vh - 20px)";
         text-align: center;
         position: relative;
         padding: 10px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        height: 50vh;
+        box-sizing: border-box;
     }
 }
 .hovering {
@@ -68,8 +72,8 @@ html, body {
 
 #progress {
     position: absolute;
-    top: 0px;
+    top: 0;
-    left: 0px;
+    left: 0;
     height: 100%;
 
 

www/file/inner.html

@@ -19,6 +19,7 @@
         <input type="button" name="dl" id="dl" class="inputfile" />
         <label for="dl" class="block unselectable" data-localization-title="download_button"
             data-localization="download_button"></label>
+        <span class="block" id="progress">&nbsp;</span>
     </div>
     <table id="status" style="display: none;">
         <tr>

www/file/main.js

@@ -25,6 +25,7 @@ define([
     var $label = $form.find('label');
     var $dllabel = $dlform.find('label');
     var $table = $iframe.find('#status');
+    var $progress = $iframe.find('#progress');
 
     Cryptpad.addLoadingScreen();
 
@@ -276,6 +277,8 @@ define([
                         Title.updateTitle(title || Title.defaultTitle);
                         exportFile();
                     }, function (progress) {
+                        var p = progress * 100 +'%';
+                        $progress.width(p);
                         console.error(progress);
                     });
                 });