web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Display the progress when downloading a file

Browse Source
This commit is contained in:
yflory 2017-05-22 12:30:00 +02:00
parent 5179252d3b
commit 3964f4feee
4 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
www/file/file.css
View File

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

12
www/file/file.less
View File

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

1
www/file/inner.html
View File

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

3
www/file/main.js
View File

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