Merge pull request #245 from mozilla/localization

Localization
This commit is contained in:
Abhinav Adduri 2017-07-19 12:21:43 -07:00 committed by GitHub
commit ffc9386221
9 changed files with 583 additions and 2473 deletions

View File

@ -46,8 +46,11 @@ $(document).ready(function() {
//on complete //on complete
if (percent === 1) { if (percent === 1) {
fileReceiver.removeAllListeners('progress'); fileReceiver.removeAllListeners('progress');
notify('Your download has finished.'); document.l10n.formatValues('downloadNotification', 'downloadFinish')
$('.title').html('Download Complete'); .then(translated => {
notify(translated[0]);
$('.title').html(translated[1]);
})
} }
}); });
@ -72,9 +75,10 @@ $(document).ready(function() {
fileReceiver fileReceiver
.download() .download()
.catch(() => { .catch(() => {
$('.title').text( document.l10n.formatValue('expiredPageHeader')
'This link has expired or never existed in the first place.' .then(translated => {
); $('.title').text(translated);
})
$('#download-btn').hide(); $('#download-btn').hide();
$('#expired-img').show(); $('#expired-img').show();
console.log('The file has expired, or has already been deleted.'); console.log('The file has expired, or has already been deleted.');

View File

@ -17,7 +17,7 @@ $(document).ready(function() {
const $copyBtn = $('#copy-btn'); const $copyBtn = $('#copy-btn');
$copyBtn.attr('disabled', false); $copyBtn.attr('disabled', false);
$('#link').attr('disabled', false); $('#link').attr('disabled', false);
$copyBtn.html('Copy to Clipboard'); $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
$('#upload-progress').hide(); $('#upload-progress').hide();
$('#share-link').hide(); $('#share-link').hide();
@ -51,7 +51,7 @@ $(document).ready(function() {
window.setTimeout(() => { window.setTimeout(() => {
$copyBtn.attr('disabled', false); $copyBtn.attr('disabled', false);
$('#link').attr('disabled', false); $('#link').attr('disabled', false);
$copyBtn.html('Copy to Clipboard'); $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
}, 3000); }, 3000);
}); });
@ -68,6 +68,7 @@ $(document).ready(function() {
fill: '#3B9DFF', fill: '#3B9DFF',
size: 158 size: 158
}); });
//link back to homepage //link back to homepage
$('.send-new').attr('href', window.location); $('.send-new').attr('href', window.location);
@ -86,7 +87,11 @@ $(document).ready(function() {
$('#cancel-upload').click(() => { $('#cancel-upload').click(() => {
fileSender.cancel(); fileSender.cancel();
location.reload(); location.reload();
notify('Your upload was cancelled.'); document.l10n.formatValue('uploadCancelNotification')
.then(str => {
console.log('here')
notify(str);
})
}); });
fileSender.on('progress', progress => { fileSender.on('progress', progress => {
@ -156,7 +161,7 @@ $(document).ready(function() {
expiry: expiration expiry: expiration
}; };
localStorage.setItem(info.fileId, JSON.stringify(fileData)); localStorage.setItem(info.fileId, JSON.stringify(fileData));
$('#upload-filename').html('Ready to Send'); $('#upload-filename').attr('data-l10n-id', 'uploadSuccessConfirmHeader');
t = window.setTimeout(() => { t = window.setTimeout(() => {
$('#page-one').hide(); $('#page-one').hide();
$('#upload-progress').hide(); $('#upload-progress').hide();
@ -165,7 +170,9 @@ $(document).ready(function() {
}, 2000); }, 2000);
populateFileList(JSON.stringify(fileData)); populateFileList(JSON.stringify(fileData));
notify('Your upload has finished.'); document.l10n.formatValue('notifyUploadDone').then(str => {
notify(str);
});
}) })
.catch(err => { .catch(err => {
Raven.captureException(err); Raven.captureException(err);
@ -209,24 +216,42 @@ $(document).ready(function() {
const row = document.createElement('tr'); const row = document.createElement('tr');
const name = document.createElement('td'); const name = document.createElement('td');
const link = document.createElement('td'); const link = document.createElement('td');
const $copyIcon = $('<img>', { src: '/resources/copy-16.svg', class: 'icon-copy', title: 'Copy URL' }); const $copyIcon = $('<img>', { src: '/resources/copy-16.svg', class: 'icon-copy', 'data-l10n-id': 'copyUrlHover'});
const expiry = document.createElement('td'); const expiry = document.createElement('td');
const del = document.createElement('td'); const del = document.createElement('td');
const $delIcon = $('<img>', { src: '/resources/close-16.svg', class: 'icon-delete', title: 'Delete' }); const $delIcon = $('<img>', { src: '/resources/close-16.svg', class: 'icon-delete', 'data-l10n-id': 'deleteButtonHover' });
const popupDiv = document.createElement('div'); const popupDiv = document.createElement('div');
const $popupText = $('<div>', { class: 'popuptext' }); const $popupText = $('<div>', { class: 'popuptext' });
const cellText = document.createTextNode(file.name); const cellText = document.createTextNode(file.name);
const url = file.url.trim() + `#${file.secretKey}`.trim(); const url = file.url.trim() + `#${file.secretKey}`.trim();
$('#link').attr('value', url); $('#link').attr('value', url);
$('#copy-text').text( $('#copy-text').attr(
'Copy and share the link to send your file: ' + file.name 'data-l10n-args',
'{"filename": "' + file.name + '"}'
);
$('#copy-text').attr(
'data-l10n-id',
'copyUrlFormLabelWithName'
); );
$popupText.attr('tabindex', '-1'); $popupText.attr('tabindex', '-1');
name.appendChild(cellText); name.appendChild(cellText);
link.style.color = '#0A8DFF'; //font colour // create delete button
const delSpan = document.createElement('span');
$(delSpan).addClass('icon-cancel-1');
$(delSpan).attr('data-l10n-id', 'deleteButtonHover');
del.appendChild(delSpan);
const linkSpan = document.createElement('span');
$(linkSpan).addClass('icon-docs');
$(linkSpan).attr('data-l10n-id', 'copyUrlHover');
link.appendChild(linkSpan);
link.style.color = '#0A8DFF';
//copy link to clipboard when icon clicked //copy link to clipboard when icon clicked
$copyIcon.click(function() { $copyIcon.click(function() {
@ -236,9 +261,16 @@ $(document).ready(function() {
aux.select(); aux.select();
document.execCommand('copy'); document.execCommand('copy');
document.body.removeChild(aux); document.body.removeChild(aux);
link.innerHTML = 'Copied!'; document.l10n.formatValue('copiedUrl')
.then(translated => {
link.innerHTML = translated;
})
window.setTimeout(() => { window.setTimeout(() => {
link.innerHTML = '<img src="/resources/copy-16.svg" class="icon-copy" title="Copy URL" />'; const linkImg = document.createElement('img');
$(linkImg).addClass('icon-copy');
$(linkImg).attr('data-l10n-id', 'copyUrlHover');
$(linkImg).attr('src', '/resources/copy-16.svg');
$(link).html(linkImg);
}, 500); }, 500);
}); });
@ -284,9 +316,21 @@ $(document).ready(function() {
// create popup // create popup
popupDiv.classList.add('popup'); popupDiv.classList.add('popup');
$popupText.html( const popupDelSpan = document.createElement('span');
'<span class="del-file">Delete </span><span class="nvm" > Nevermind</span>' $(popupDelSpan).addClass('del-file');
); $(popupDelSpan).attr('data-l10n-id', 'sentFilesTitle4');
const popupNvmSpan = document.createElement('span');
$(popupNvmSpan).addClass('nvm');
$(popupNvmSpan).attr('data-l10n-id', 'nevermindButton');
$popupText.html([
popupDelSpan,
'&nbsp;',
'&nbsp;',
popupNvmSpan
]);
// add data cells to table row // add data cells to table row
row.appendChild(name); row.appendChild(name);

2738
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -15,6 +15,7 @@
"helmet": "^3.6.1", "helmet": "^3.6.1",
"jquery": "^3.2.1", "jquery": "^3.2.1",
"jquery-circle-progress": "^1.2.2", "jquery-circle-progress": "^1.2.2",
"l20n": "^5.0.0",
"mozlog": "^2.1.1", "mozlog": "^2.1.1",
"raven": "^2.1.0", "raven": "^2.1.0",
"raven-js": "^3.16.0", "raven-js": "^3.16.0",

View File

@ -0,0 +1,85 @@
title = Firefox Send
uploadPageHeader = Private, Encrypted File Sharing
uploadPageExplainer = Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
uploadPageLearnMore = Learn more
uploadPageDropMessage = Drop your files here to start uploading
uploadPageBrowseButton = Select a file on your computer
.title = {uploadPageBrowseButtonTitle}
uploadPageBrowseButtonTitle = Upload file
uploadingPageHeader = Uploading Your File
notifyUploadDone = Your upload has finished.
uploadingPageMessage = Once your file uploads you will be able to set expiry options.
uploadingPageCancel = Cancel upload
.title = {uploadingPageCancel}
uploadCancelNotification = Your upload was cancelled.
uploadingPageLargeFileMessage = This file is large and may take awhile to upload. Sit tight!
uploadingFileNotification = Notify me when the upload is complete.
uploadSuccessConfirmHeader = Ready to Send
uploadSvgAlt.alt = Upload
//Note the spec suggests that this string is editable. That feature will not appear at Launch
uploadSuccessTimingHeader = The link to your file will expire after 1 download or in 24 hours.
copyUrlFormLabel = Copy and share the link to send your file:
copyUrlFormLabelWithName = Copy and share the link to send your file: { $filename }
// Note: Title text for button should be the same
copyUrlFormButton = Copy to clipboard
.title = {copyUrlFormButton}
copiedUrl = Copied!
deleteFileButton = Delete file
.title = {deleteFileButton}
sendAnotherFileLink = Send another file
.title = {sendAnotherFileLink}
downloadAltText.alt = Download
downloadFileName = Download { $filename }
downloadFileSize = ({ $size })
downloadMessage = Your friend is sending you a file with Firefox Send, a service that allows you to share files with a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
downloadButtonLabel = Download
.title = {downloadButtonLabel}
downloadNotification = Your download has completed.
downloadFinish = Download Complete
sendYourFilesLink = Try Firefox Send
.title = {sendYourFilesLink}
downloadingPageProgress = Downloading { $filename } ({ $size })
downloadingPageMessage = Please leave this tab open while we fetch your file and decrypt it.
errorAltText.alt = Upload error
errorPageHeader = Something went wrong!
errorPageMessage = There has been an error uploading the file.
errorPageLink = Send another file
linkExpiredAlt.alt = Link expired
expiredPageHeader = This link has expired or never existed in the first place!
notSupportedHeader = Your browser is not supported.
notSupportedDetail = Unfortunately this browser does not support the web technology that powers Firefox Send. You'll need to try another browser. We recommend Firefox!
downloadFirefoxButtonSub = Free Download
sentFilesTitle1 = File
sentFilesTitle2 = Copy URL
sentFilesTitle3 = Expires In
sentFilesTitle4 = Delete
nevermindButton = Nevermind
deleteButtonHover.title = {sentFilesTitle4}
copyUrlHover.title = {sentFilesTitle2}
footerLinkLegal = Legal
footerLinkAbout = About Test Pilot
footerLinkPrivacy = Privacy
footerLinkTerms = Terms
footerLinkCookies = Cookies

View File

@ -19,6 +19,8 @@ const mozlog = require('./log.js');
const log = mozlog('send.server'); const log = mozlog('send.server');
const STATIC_PATH = path.join(__dirname, '../public'); const STATIC_PATH = path.join(__dirname, '../public');
const L20N = path.join(__dirname, '../node_modules/l20n');
const LOCALES = path.join(__dirname, '../public/locales');
const app = express(); const app = express();
@ -63,6 +65,9 @@ app.use(
app.use(busboy()); app.use(busboy());
app.use(bodyParser.json()); app.use(bodyParser.json());
app.use(express.static(STATIC_PATH)); app.use(express.static(STATIC_PATH));
app.use('/l20n', express.static(L20N));
// app.use('/download/*/l20n', express.static(L20N));
app.use('/locales', express.static(LOCALES));
app.get('/', (req, res) => { app.get('/', (req, res) => {
res.render('index', { res.render('index', {

View File

@ -2,24 +2,25 @@
{{#if filename}} {{#if filename}}
<div id="download-page-one"> <div id="download-page-one">
<div class="title"> <div class="title">
Download <span id="dl-filename">{{filename}}</span> ({{filesize}}) <span id="dl-filename"
data-l10n-id="downloadFileName"
data-l10n-args='{"filename": "{{filename}}"}'></span>
<span data-l10n-id="downloadFileSize"
data-l10n-args='{"size": "{{filesize}}"}'></span>
</div> </div>
<div class="description"> <div class="description" data-l10n-id="downloadMessage"></div>
Your friend is sending you a file with Firefox Send, a service that allows you to share files with a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever. <img src="/resources/illustration_download.svg" id="download-img" data-l10n-id="downloadAltText"/>
</div>
<img src="/resources/illustration_download.svg" id="download-img" alt="Download"/>
<div> <div>
<button id="download-btn" title="Download">Download</button> <button id="download-btn" data-l10n-id="downloadButtonLabel"></button>
</div> </div>
</div> </div>
<div id="download-progress"> <div id="download-progress">
<div class="title"> <div class="title"
Downloading {{filename}} ({{filesize}}) data-l10n-id="downloadingPageProgress"
</div> data-l10n-args='{"filename": "{{filename}}", "size": "{{filesize}}"}'>
<div class="description">
Please leave this tab open while we fetch your file and decrypt it.
</div> </div>
<div class="description" data-l10n-id="downloadingPageMessage"></div>
<!-- progress bar here --> <!-- progress bar here -->
<div class="progress-bar" id="dl-progress"> <div class="progress-bar" id="dl-progress">
<div class="percentage"> <div class="percentage">
@ -32,22 +33,14 @@
</div> </div>
</div> </div>
<a class="send-new" title="Try Firefox Send"> <a class="send-new" data-l10n-id="sendYourFilesLink"></a>
Try Firefox Send
</a>
{{else}} {{else}}
<div class="title"> <div class="title" data-l10n-id="expiredPageHeader"></div>
This link has expired or never existed in the first place.
</div>
<div class="share-window"> <div class="share-window">
<img src="/resources/illustration_expired.svg" id="expired-img" alt="Link expired" /> <img src="/resources/illustration_expired.svg" id="expired-img" data-l10n-id="linkExpiredAlt"/>
</div> </div>
<div class="expired-description"> <div class="expired-description" data-l10n-id="uploadPageExplainer"></div>
Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever. <a class="send-new" data-l10n-id="sendYourFilesLink"></a>
</div>
<a class="send-new" title="Try Firefox Send">
Try Firefox Send
</a>
{{/if}} {{/if}}
</div> </div>

View File

@ -1,18 +1,16 @@
<div id="page-one"> <div id="page-one">
<div class="title"> <div class="title" data-l10n-id="uploadPageHeader"></div>
Private, Encrypted File Sharing
</div>
<div class="description"> <div class="description">
Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.<br> <a href="https://testpilot.firefox.com/experiments/send" class="link">Learn more</a> <div data-l10n-id="uploadPageExplainer"></div>
<a href="https://testpilot.firefox.com/experiments/send" class="link" data-l10n-id="uploadPageLearnMore"></a>
</div> </div>
<div class="upload-window" > <div class="upload-window" >
<div id="upload-img"><img src="/resources/upload.svg" alt="Upload"/></div> <div id="upload-img"><img data-l10n-id="uploadSvgAlt" src="/resources/upload.svg"/></div>
<div id="upload-text"> <div id="upload-text" data-l10n-id="uploadPageDropMessage"></div>
Drop your files here to start uploading
</div>
<form method="post" action="upload" enctype="multipart/form-data"> <form method="post" action="upload" enctype="multipart/form-data">
<label for="file-upload" id="browse" title="Upload file">Select a file on your computer</label> <label for="file-upload" id="browse"
data-l10n-id="uploadPageBrowseButton"></label>
<input id="file-upload" type="file" name="fileUploaded" /> <input id="file-upload" type="file" name="fileUploaded" />
</form> </form>
</div> </div>
@ -22,27 +20,22 @@
<thead> <thead>
<tr> <tr>
<!-- htmllint attr-bans="false" --> <!-- htmllint attr-bans="false" -->
<th width="35%">File</th> <th width="35%" data-l10n-id="sentFilesTitle1"></th>
<th width="25%">Copy URL</th> <th width="25%" data-l10n-id="sentFilesTitle2"></th>
<th width="21%">Expires in</th> <th width="21%" data-l10n-id="sentFilesTitle3"></th>
<th width="12%">Delete</th> <th width="12%" data-l10n-id="sentFilesTitle4"></th>
<!-- htmllint tag-bans="$previous" --> <!-- htmllint tag-bans="$previous" -->
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div id="upload-progress"> <div id="upload-progress">
<div class="title" id="upload-filename"> <div class="title" id="upload-filename" data-l10n-id="uploadingPageHeader"></div>
Uploading Your File <div class="description"></div>
</div>
<div class="description">
</div>
<!-- progress bar here --> <!-- progress bar here -->
<div class="progress-bar" id="ul-progress"> <div class="progress-bar" id="ul-progress">
<div class="percentage"> <div class="percentage">
@ -52,54 +45,40 @@
</div> </div>
<div class="upload"> <div class="upload">
<div class="progress-text"></div> <div class="progress-text"></div>
<div id="cancel-upload" title="Cancel Upload">Cancel Upload</div> <div id="cancel-upload"
data-l10n-id="uploadingPageCancel"></div>
</div> </div>
</div> </div>
<div id="share-link"> <div id="share-link">
<div class="title"> <div class="title" data-l10n-id="uploadSuccessTimingHeader"></div>
This encrypted link will expire after 1 download or in 24 hours
</div>
<div id="share-window"> <div id="share-window">
<div id="copy-text"> <div id="copy-text" data-l10n-id="copyUrlFormLabel"></div>
Copy and share the link to send your file:
</div>
<div id="copy"> <div id="copy">
<input id="link" type="url" value="" readonly/> <input id="link" type="url" value="" readonly/>
<button id="copy-btn" title="Copy to Clipboard">Copy to Clipboard</button> <button id="copy-btn" data-l10n-id="copyUrlFormButton"></button>
</div> </div>
<button id="delete-file" title="Delete file">Delete file</button> <button id="delete-file" data-l10n-id="deleteFileButton"></button>
<a class="send-new" title="Send another file"> <a class="send-new" data-l10n-id="sendAnotherFileLink"></a>
Send another file
</a>
</div> </div>
</div> </div>
<div id="upload-error"> <div id="upload-error">
<div class="title"> <div class="title" data-l10n-id="errorPageHeader"></div>
Something went wrong! <div class="expired-description" data-l10n-id="errorPageMessage"></div>
</div> <img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/>
<div class="expired-description"> <a class="send-new" data-l10n-id="sendAnotherFileLink"></a>
There has been an error uploading the file.
</div>
<img id="upload-error-img" src="/resources/illustration_error.svg" alt="Upload error" />
<a class="send-new" title="Send another file">
Send another file
</a>
</div> </div>
<div id="unsupported-browser"> <div id="unsupported-browser">
<div class="title"> <div class="title" data-l10n-id="notSupportedHeader"></div>
Your browser is not supported. <div class="description" data-l10n-id="notSupportedDetail"></div>
</div>
<div class="description">
Unfortunately this browser does not support the web technology that powers Firefox Send. You'll need to try another browser. We recommend Firefox!
</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">
<img src="/resources/firefox_logo-only.svg" id="firefox-logo" alt="Firefox"/> <img src="/resources/firefox_logo-only.svg" id="firefox-logo" alt="Firefox"/>
<div id="dl-firefox-text">Firefox<br><span>Free Download</span></div> <div id="dl-firefox-text">Firefox<br>
</a> <span data-l10n-id="downloadFirefoxButtonSub"></span>
<div class="unsupported-description">
Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
</div> </div>
</a>
<div class="unsupported-description" data-l10n-id="uploadPageExplainer"></div>
</div> </div>

View File

@ -11,6 +11,11 @@
{{#if trackerId}} {{#if trackerId}}
{{> analytics trackerId=trackerId}} {{> analytics trackerId=trackerId}}
{{/if}} {{/if}}
<meta name="defaultLanguage" content="en-US">
<meta name="availableLanguages" content="en-US">
<link rel="localization" href="/locales/send.{locale}.ftl">
<script defer src="/l20n/dist/web/l20n.js"></script>
</head> </head>
<body> <body>
<div class="send-logo"> <div class="send-logo">
@ -23,11 +28,11 @@
<div class="footer"> <div class="footer">
<div class="legal-links"> <div class="legal-links">
<a href="https://www.mozilla.org"><img class="mozilla-logo" src="/resources/mozilla-logo.svg"/></a> <a href="https://www.mozilla.org"><img class="mozilla-logo" src="/resources/mozilla-logo.svg"/></a>
<a href="https://www.mozilla.org/about/legal/">Legal</a> <a href="https://www.mozilla.org/about/legal/" data-l10n-id="footerLinkLegal"></a>
<a href="https://testpilot.firefox.com/about">About Test Pilot</a> <a href="https://testpilot.firefox.com/about" data-l10n-id="footerLinkAbout"></a>
<a href="https://testpilot.firefox.com/privacy">Privacy</a> <a href="https://testpilot.firefox.com/privacy" data-l10n-id="footerLinkPrivacy"></a>
<a href="https://testpilot.firefox.com/terms">Terms</a> <a href="https://testpilot.firefox.com/terms" data-l10n-id="footerLinkTerms"></a>
<a href="https://www.mozilla.org/en-US/privacy/websites/#cookies">Cookies</a> <a href="https://www.mozilla.org/en-US/privacy/websites/#cookies" data-l10n-id="footerLinkCookies"></a>
</div> </div>
<div class="social-links"> <div class="social-links">
<a href="https://github.com/mozilla/send" target="_blank"><img class="github" src="/resources/github-icon.svg"/></a> <a href="https://github.com/mozilla/send" target="_blank"><img class="github" src="/resources/github-icon.svg"/></a>