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

53
frontend/src/upload.js
View File

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

3
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
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
.title = {uploadPageBrowseButtonTitle}
@ -82,4 +83,4 @@ footerLinkLegal = Legal
footerLinkAbout = About Test Pilot
footerLinkPrivacy = Privacy
footerLinkTerms = Terms
footerLinkCookies = Cookies
footerLinkCookies = Cookies

16
public/main.css
View File

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

4
views/download.handlebars
View File

@ -2,7 +2,7 @@
{{#if filename}}
<div id="download-page-one">
<div class="title">
<span id="dl-filename"
<span id="dl-filename"
data-l10n-id="downloadFileName"
data-l10n-args='{"filename": "{{filename}}"}'></span>
<span data-l10n-id="downloadFileSize"
@ -15,7 +15,7 @@
</div>
</div>
<div id="download-progress">
<div id="download-progress" hidden="true">
<div class="title"
data-l10n-id="downloadingPageProgress"
data-l10n-args='{"filename": "{{filename}}", "size": "{{filesize}}"}'>

16
views/index.handlebars
View File

@ -7,9 +7,9 @@
<div class="upload-window" >
<div id="upload-img"><img data-l10n-id="uploadSvgAlt" src="/resources/upload.svg"/></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">
<label for="file-upload" id="browse"
<label for="file-upload" id="browse"
data-l10n-id="uploadPageBrowseButton"></label>
<input id="file-upload" type="file" name="fileUploaded" />
</form>
@ -33,7 +33,7 @@
</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="description"></div>
<!-- progress bar here -->
@ -45,13 +45,13 @@
</div>
<div class="upload">
<div class="progress-text"></div>
<div id="cancel-upload"
<div id="cancel-upload"
data-l10n-id="uploadingPageCancel"></div>
</div>
</div>
<div id="share-link">
<div id="share-link" hidden="true">
<div class="title" data-l10n-id="uploadSuccessTimingHeader"></div>
<div id="share-window">
<div id="copy-text" data-l10n-id="copyUrlFormLabel"></div>
@ -64,14 +64,14 @@
</div>
</div>
<div id="upload-error">
<div id="upload-error" hidden="true">
<div class="title" data-l10n-id="errorPageHeader"></div>
<div class="expired-description" data-l10n-id="errorPageMessage"></div>
<img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/>
<a class="send-new" data-l10n-id="sendAnotherFileLink"></a>
</div>
<div id="unsupported-browser">
<div id="unsupported-browser" hidden="true">
<div class="title" data-l10n-id="notSupportedHeader"></div>
<div class="description" data-l10n-id="notSupportedDetail"></div>
<a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2" target="_blank">