xenofem/transbeam
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Wiki Activity

make overall progress bar nicer too

Browse source
This commit is contained in:
xenofem 2022-04-28 02:28:10 -04:00
parent 93da22569c
commit b520304a9d
3 changed files with 9 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/index.html
View file

@ -21,9 +21,7 @@
</div> </div>
<div id="progress_container" style="display: none;"> <div id="progress_container" style="display: none;">
<div id="progress"></div> <div id="progress"></div>
<div id="progress_bar"> <div id="progress_bar"></div>
<div id="progress_bar_filled"></div>
</div>
</div> </div>
<div id="file_list_container" style="display: none;"> <div id="file_list_container" style="display: none;">
<table id="file_list"> <table id="file_list">

13
static/transbeam.css
View file

@ -14,16 +14,13 @@ body {
margin: 10px auto; margin: 10px auto;
} }
#progress_bar, #progress_bar_filled {
height: 20px;
border-radius: 8px;
}
#progress_bar { #progress_bar {
height: 20px;
border-radius: 10px;
border: 1px solid #48f; border: 1px solid #48f;
} background-image: linear-gradient(0deg, #27f, #27f);
#progress_bar_filled { background-repeat: no-repeat;
width: 0; background-size: 0;
background-color: #27f;
} }
table { table {

6
static/transbeam.js
View file

@ -15,7 +15,7 @@ const downloadLink = document.getElementById('download_link');
const progressContainer = document.getElementById('progress_container'); const progressContainer = document.getElementById('progress_container');
const progress = document.getElementById('progress'); const progress = document.getElementById('progress');
const progressBarFilled = document.getElementById('progress_bar_filled'); const progressBar = document.getElementById('progress_bar');
let files = []; let files = [];
@ -71,8 +71,8 @@ function updateProgress() {
} else { } else {
percentage = `${(bytesSent*100/totalBytes).toFixed(1)}%`; percentage = `${(bytesSent*100/totalBytes).toFixed(1)}%`;
} }
progress.textContent = percentage; progress.textContent = `${percentage} (${displaySize(bytesSent)}/${displaySize(totalBytes)})`;
progressBarFilled.style.width = percentage; progressBar.style.backgroundSize = percentage;
const fileEntries = Array.from(fileList.children); const fileEntries = Array.from(fileList.children);
for (entry of fileEntries.slice(0, fileIndex)) { for (entry of fileEntries.slice(0, fileIndex)) {