Chapril/drop.chapril.org-firefoxsend
Chapril/drop.chapril.org-firefoxsend
25
1
Fork 0
Code Issues Releases Activity

Merge pull request #256 from mozilla/ui

Browse Source 
add file size limit message
This commit is contained in:
Daniela Arcese 2017-07-19 17:09:40 -04:00 committed by GitHub
commit 64e7182f30
7 changed files with 2439 additions and 393 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/download.js
View File

@ -5,7 +5,6 @@ require('jquery-circle-progress');
const Raven = window.Raven; const Raven = window.Raven;
$(document).ready(function() { $(document).ready(function() {
$('#download-progress').hide();
//link back to homepage //link back to homepage
$('.send-new').attr('href', window.location.origin); $('.send-new').attr('href', window.location.origin);
@ -23,8 +22,8 @@ $(document).ready(function() {
const fileReceiver = new FileReceiver(); const fileReceiver = new FileReceiver();
fileReceiver.on('progress', progress => { fileReceiver.on('progress', progress => {
$('#download-page-one').hide(); $('#download-page-one').attr('hidden', true);
$('#download-progress').show(); $('#download-progress').removeAttr('hidden');
const percent = progress[0] / progress[1]; const percent = progress[0] / progress[1];
// update progress bar // update progress bar
$('#dl-progress').circleProgress('value', percent); $('#dl-progress').circleProgress('value', percent);
@ -50,7 +49,7 @@ $(document).ready(function() {
.then(translated => { .then(translated => {
notify(translated[0]); notify(translated[0]);
$('.title').html(translated[1]); $('.title').html(translated[1]);
}) });
} }
}); });
@ -78,9 +77,9 @@ $(document).ready(function() {
document.l10n.formatValue('expiredPageHeader') document.l10n.formatValue('expiredPageHeader')
.then(translated => { .then(translated => {
$('.title').text(translated); $('.title').text(translated);
}) });
$('#download-btn').hide(); $('#download-btn').attr('hidden', true);
$('#expired-img').show(); $('#expired-img').removeAttr('hidden');
console.log('The file has expired, or has already been deleted.'); console.log('The file has expired, or has already been deleted.');
return; return;
}) })

47
frontend/src/upload.js
View File

@ -7,8 +7,8 @@ const Raven = window.Raven;
$(document).ready(function() { $(document).ready(function() {
gcmCompliant().catch(err => { gcmCompliant().catch(err => {
$('#page-one').hide(); $('#page-one').attr('hidden', true);
$('#unsupported-browser').show(); $('#unsupported-browser').removeAttr('hidden');
}); });
$('#file-upload').change(onUpload); $('#file-upload').change(onUpload);
@ -19,12 +19,6 @@ $(document).ready(function() {
$('#link').attr('disabled', false); $('#link').attr('disabled', false);
$copyBtn.attr('data-l10n-id', 'copyUrlFormButton'); $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
$('#upload-progress').hide();
$('#share-link').hide();
$('#upload-error').hide();
$('#unsupported-browser').hide();
$('#compliance-error').hide();
$('#page-one').show();
if (localStorage.length === 0) { if (localStorage.length === 0) {
toggleHeader(); toggleHeader();
@ -75,6 +69,12 @@ $(document).ready(function() {
// on file upload by browse or drag & drop // on file upload by browse or drag & drop
function onUpload(event) { function onUpload(event) {
event.preventDefault(); event.preventDefault();
$('#page-one').attr('hidden', true);
$('#upload-error').attr('hidden', true);
$('#upload-progress').removeAttr('hidden');
//don't allow drag and drop when not on page-one
$('body').off('drop', onUpload);
let file = ''; let file = '';
if (event.type === 'drop') { if (event.type === 'drop') {
file = event.originalEvent.dataTransfer.files[0]; file = event.originalEvent.dataTransfer.files[0];
@ -89,17 +89,11 @@ $(document).ready(function() {
location.reload(); location.reload();
document.l10n.formatValue('uploadCancelNotification') document.l10n.formatValue('uploadCancelNotification')
.then(str => { .then(str => {
console.log('here')
notify(str); notify(str);
}) });
}); });
fileSender.on('progress', progress => { fileSender.on('progress', progress => {
$('#page-one').hide();
$('#upload-error').hide();
$('#upload-progress').show();
//don't allow drag and drop when not on page-one
$('body').off('drop', onUpload);
const percent = progress[0] / progress[1]; const percent = progress[0] / progress[1];
// update progress bar // update progress bar
$('#ul-progress').circleProgress('value', percent); $('#ul-progress').circleProgress('value', percent);
@ -163,23 +157,24 @@ $(document).ready(function() {
localStorage.setItem(info.fileId, JSON.stringify(fileData)); localStorage.setItem(info.fileId, JSON.stringify(fileData));
$('#upload-filename').attr('data-l10n-id', 'uploadSuccessConfirmHeader'); $('#upload-filename').attr('data-l10n-id', 'uploadSuccessConfirmHeader');
t = window.setTimeout(() => { t = window.setTimeout(() => {
$('#page-one').hide(); $('#page-one').attr('hidden', true);
$('#upload-progress').hide(); $('#upload-progress').attr('hidden', true);
$('#upload-error').hide(); $('#upload-error').attr('hidden', true);
$('#share-link').show(); $('#share-link').removeAttr('hidden');
}, 2000); }, 2000);
populateFileList(JSON.stringify(fileData)); populateFileList(JSON.stringify(fileData));
document.l10n.formatValue('notifyUploadDone').then(str => { document.l10n.formatValue('notifyUploadDone')
.then(str => {
notify(str); notify(str);
}); });
}) })
.catch(err => { .catch(err => {
Raven.captureException(err); Raven.captureException(err);
console.log(err); console.log(err);
$('#page-one').hide(); $('#page-one').attr('hidden', true);
$('#upload-progress').hide(); $('#upload-progress').attr('hidden', true);
$('#upload-error').show(); $('#upload-error').removeAttr('hidden');
window.clearTimeout(t); window.clearTimeout(t);
}); });
} }
@ -264,7 +259,7 @@ $(document).ready(function() {
document.l10n.formatValue('copiedUrl') document.l10n.formatValue('copiedUrl')
.then(translated => { .then(translated => {
link.innerHTML = translated; link.innerHTML = translated;
}) });
window.setTimeout(() => { window.setTimeout(() => {
const linkImg = document.createElement('img'); const linkImg = document.createElement('img');
$(linkImg).addClass('icon-copy'); $(linkImg).addClass('icon-copy');
@ -381,9 +376,9 @@ $(document).ready(function() {
function toggleHeader() { function toggleHeader() {
//hide table header if empty list //hide table header if empty list
if (document.querySelector('tbody').childNodes.length === 1) { if (document.querySelector('tbody').childNodes.length === 1) {
$('#file-list').hide(); $('#file-list').attr('hidden', true);
} else { } else {
$('#file-list').show(); $('#file-list').removeAttr('hidden');
} }
} }
}); });

2727
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
public/locales/send.en-US.ftl
View File

@ -5,6 +5,7 @@ uploadPageExplainer = Send files through a safe, private, and encrypted link tha
uploadPageLearnMore = Learn more uploadPageLearnMore = Learn more
uploadPageDropMessage = Drop your files here to start uploading uploadPageDropMessage = Drop your files here to start uploading
uploadPageSizeMessage = For the most reliable operation, it’s best to keep your file under 1GB
uploadPageBrowseButton = Select a file on your computer uploadPageBrowseButton = Select a file on your computer
.title = {uploadPageBrowseButtonTitle} .title = {uploadPageBrowseButtonTitle}

16
public/main.css
View File

@ -87,7 +87,7 @@ a {
#upload-text { #upload-text {
font-size: 22px; font-size: 22px;
color: #737373; color: #737373;
margin: 20px 0 30px; margin: 20px 0 10px;
font-family: 'SF Pro Display', sans-serif; font-family: 'SF Pro Display', sans-serif;
} }
@ -108,6 +108,12 @@ input[type="file"] {
display: none; display: none;
} }
#file-size-msg {
font-size: 12px;
color: #737373;
margin-bottom: 22px;
}
/** file-list **/ /** file-list **/
th { th {
font-size: 16px; font-size: 16px;
@ -330,6 +336,10 @@ tbody {
text-align: center; text-align: center;
} }
#upload-error[hidden], #unsupported-browser[hidden] {
display: none;
}
#upload-error-img { #upload-error-img {
margin-bottom: 90px; margin-bottom: 90px;
margin-top: 5px; margin-top: 5px;
@ -439,6 +449,10 @@ tbody {
text-align: center; text-align: center;
} }
#download-progress[hidden] {
display: none;
}
#download-img { #download-img {
width: 283px; width: 283px;
height: 196px; height: 196px;

2
views/download.handlebars
View File

@ -15,7 +15,7 @@
</div> </div>
</div> </div>
<div id="download-progress"> <div id="download-progress" hidden="true">
<div class="title" <div class="title"
data-l10n-id="downloadingPageProgress" data-l10n-id="downloadingPageProgress"
data-l10n-args='{"filename": "{{filename}}", "size": "{{filesize}}"}'> data-l10n-args='{"filename": "{{filename}}", "size": "{{filesize}}"}'>

10
views/index.handlebars
View File

@ -7,7 +7,7 @@
<div class="upload-window" > <div class="upload-window" >
<div id="upload-img"><img data-l10n-id="uploadSvgAlt" src="/resources/upload.svg"/></div> <div id="upload-img"><img data-l10n-id="uploadSvgAlt" src="/resources/upload.svg"/></div>
<div id="upload-text" data-l10n-id="uploadPageDropMessage"></div> <div id="upload-text" data-l10n-id="uploadPageDropMessage"></div>
<span id="file-size-msg"><em data-l10n-id="uploadPageSizeMessage"></em></span>
<form method="post" action="upload" enctype="multipart/form-data"> <form method="post" action="upload" enctype="multipart/form-data">
<label for="file-upload" id="browse" <label for="file-upload" id="browse"
data-l10n-id="uploadPageBrowseButton"></label> data-l10n-id="uploadPageBrowseButton"></label>
@ -33,7 +33,7 @@
</div> </div>
</div> </div>
<div id="upload-progress"> <div id="upload-progress" hidden="true">
<div class="title" id="upload-filename" data-l10n-id="uploadingPageHeader"></div> <div class="title" id="upload-filename" data-l10n-id="uploadingPageHeader"></div>
<div class="description"></div> <div class="description"></div>
<!-- progress bar here --> <!-- progress bar here -->
@ -51,7 +51,7 @@
</div> </div>
<div id="share-link"> <div id="share-link" hidden="true">
<div class="title" data-l10n-id="uploadSuccessTimingHeader"></div> <div class="title" data-l10n-id="uploadSuccessTimingHeader"></div>
<div id="share-window"> <div id="share-window">
<div id="copy-text" data-l10n-id="copyUrlFormLabel"></div> <div id="copy-text" data-l10n-id="copyUrlFormLabel"></div>
@ -64,14 +64,14 @@
</div> </div>
</div> </div>
<div id="upload-error"> <div id="upload-error" hidden="true">
<div class="title" data-l10n-id="errorPageHeader"></div> <div class="title" data-l10n-id="errorPageHeader"></div>
<div class="expired-description" data-l10n-id="errorPageMessage"></div> <div class="expired-description" data-l10n-id="errorPageMessage"></div>
<img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/> <img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/>
<a class="send-new" data-l10n-id="sendAnotherFileLink"></a> <a class="send-new" data-l10n-id="sendAnotherFileLink"></a>
</div> </div>
<div id="unsupported-browser"> <div id="unsupported-browser" hidden="true">
<div class="title" data-l10n-id="notSupportedHeader"></div> <div class="title" data-l10n-id="notSupportedHeader"></div>
<div class="description" data-l10n-id="notSupportedDetail"></div> <div class="description" data-l10n-id="notSupportedDetail"></div>
<a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2" target="_blank"> <a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2" target="_blank">