natty
/
fox-send
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1087 from mozilla/custom-elements 

use custom elements instead of adding css classes for selectors
This commit is contained in:
Danny Coates 2019-01-14 11:03:23 -08:00 committed by GitHub
parent 742b97cb4b f402011c82
commit 6e175dd5ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/ui/account.js
View File

@ -62,18 +62,18 @@ class Account extends Component {
const translate = this.state.translate; const translate = this.state.translate;
if (!this.local.loggedIn) { if (!this.local.loggedIn) {
return html` return html`
<div> <send-account>
<button <button
class="p-2 border rounded border-white text-white hover:bg-white hover:text-blue md:text-blue md:border-blue md:hover:text-white md:hover:bg-blue" class="p-2 border rounded border-white text-white hover:bg-white hover:text-blue md:text-blue md:border-blue md:hover:text-white md:hover:bg-blue"
onclick="${e => this.login(e)}" onclick="${e => this.login(e)}"
> >
${translate('signInMenuOption')} ${translate('signInMenuOption')}
</button> </button>
</div> </send-account>
`; `;
} }
return html` return html`
<div class="relative h-8"> <send-account class="relative h-8">
<input <input
type="image" type="image"
alt="${user.email}" alt="${user.email}"
@ -97,7 +97,7 @@ class Account extends Component {
</a> </a>
</li> </li>
</ul> </ul>
</div> </send-account>
`; `;
} }
} }

31
app/ui/archiveTile.js
View File

@ -96,7 +96,7 @@ function password(state) {
function fileInfo(file, action) { function fileInfo(file, action) {
return html` return html`
<article class="flex flex-row items-center p-3 w-full"> <send-file class="flex flex-row items-center p-3 w-full">
<img class="" src="${assets.get('blue_file.svg')}"/> <img class="" src="${assets.get('blue_file.svg')}"/>
<p class="ml-4 w-full"> <p class="ml-4 w-full">
<h1 class="text-sm font-medium word-break-all">${file.name}</h1> <h1 class="text-sm font-medium word-break-all">${file.name}</h1>
@ -106,7 +106,7 @@ function fileInfo(file, action) {
<div class="hidden">${file.type}</div> <div class="hidden">${file.type}</div>
</p> </p>
${action} ${action}
</article>`; </send-file>`;
} }
function archiveDetails(translate, archive) { function archiveDetails(translate, archive) {
@ -141,7 +141,7 @@ function archiveDetails(translate, archive) {
module.exports = function(state, emit, archive) { module.exports = function(state, emit, archive) {
return html` return html`
<article <send-archive
id="archive-${archive.id}" id="archive-${archive.id}"
class="flex flex-col items-start border border-grey-light bg-white p-4 w-full"> class="flex flex-col items-start border border-grey-light bg-white p-4 w-full">
<p class="w-full"> <p class="w-full">
@ -168,7 +168,7 @@ module.exports = function(state, emit, archive) {
<img src="${assets.get('copy-16.svg')}" class="mr-2"/> <img src="${assets.get('copy-16.svg')}" class="mr-2"/>
${state.translate('copyUrlHover')} ${state.translate('copyUrlHover')}
</button> </button>
</article>`; </send-archive>`;
function copy(event) { function copy(event) {
event.stopPropagation(); event.stopPropagation();
@ -189,7 +189,10 @@ module.exports = function(state, emit, archive) {
module.exports.wip = function(state, emit) { module.exports.wip = function(state, emit) {
return html` return html`
<article class="flex flex-col bg-white z-20 md:h-full w-full" id="wip"> <send-upload-area
class="flex flex-col bg-white z-20 md:h-full w-full"
id="wip"
>
${ ${
list( list(
Array.from(state.archive.files) Array.from(state.archive.files)
@ -231,7 +234,7 @@ module.exports.wip = function(state, emit) {
> >
${state.translate('uploadFilesButton')} ${state.translate('uploadFilesButton')}
</button> </button>
</article> </send-upload-area>
`; `;
function upload(event) { function upload(event) {
@ -281,7 +284,7 @@ module.exports.uploading = function(state, emit) {
const progressPercent = percent(progress); const progressPercent = percent(progress);
const archive = state.archive; const archive = state.archive;
return html` return html`
<article <send-upload-area
id="${archive.id}" id="${archive.id}"
class="z-20 flex flex-col items-start border border-grey-light bg-white p-4 w-full"> class="z-20 flex flex-col items-start border border-grey-light bg-white p-4 w-full">
<p class="w-full"> <p class="w-full">
@ -305,7 +308,7 @@ module.exports.uploading = function(state, emit) {
onclick=${cancel}> onclick=${cancel}>
${state.translate('uploadingPageCancel')} ${state.translate('uploadingPageCancel')}
</button> </button>
</article>`; </send-upload-area>`;
function cancel(event) { function cancel(event) {
event.stopPropagation(); event.stopPropagation();
@ -316,7 +319,7 @@ module.exports.uploading = function(state, emit) {
module.exports.empty = function(state, emit) { module.exports.empty = function(state, emit) {
return html` return html`
<article <send-upload-area
class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full w-full" class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full w-full"
onclick="${ onclick="${
e => { e => {
@ -351,7 +354,7 @@ module.exports.empty = function(state, emit) {
> >
${state.translate('addFilesButton')} ${state.translate('addFilesButton')}
</label> </label>
</article> </send-upload-area>
`; `;
function add(event) { function add(event) {
@ -368,7 +371,7 @@ module.exports.preview = function(state, emit) {
archive.open = true; archive.open = true;
} }
return html` return html`
<article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20 w-full"> <send-archive class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20 w-full">
<p class="w-full mb-4"> <p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1> <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -384,7 +387,7 @@ module.exports.preview = function(state, emit) {
onclick=${download}> onclick=${download}>
${state.translate('downloadButtonLabel')} ${state.translate('downloadButtonLabel')}
</button> </button>
</article>`; </send-archive>`;
function download(event) { function download(event) {
event.preventDefault(); event.preventDefault();
@ -398,7 +401,7 @@ module.exports.downloading = function(state, emit) {
const progress = state.transfer.progressRatio; const progress = state.transfer.progressRatio;
const progressPercent = percent(progress); const progressPercent = percent(progress);
return html` return html`
<article class="flex flex-col bg-white border border-grey-light p-4 z-20 w-full"> <send-archive class="flex flex-col bg-white border border-grey-light p-4 z-20 w-full">
<p class="w-full mb-4"> <p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1> <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -414,7 +417,7 @@ module.exports.downloading = function(state, emit) {
onclick=${cancel}> onclick=${cancel}>
${state.translate('downloadCancel')} ${state.translate('downloadCancel')}
</button> </button>
</article>`; </send-archive>`;
function cancel(event) { function cancel(event) {
event.preventDefault(); event.preventDefault();

6
app/ui/copyDialog.js
View File

@ -4,7 +4,9 @@ const { copyToClipboard } = require('../utils');
module.exports = function(name, url) { module.exports = function(name, url) {
return function(state, emit, close) { return function(state, emit, close) {
return html` return html`
<div class="flex flex-col items-center text-center p-4 max-w-sm"> <send-copy-dialog
class="flex flex-col items-center text-center p-4 max-w-sm"
>
<h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1> <h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1>
<p class="font-normal leading-normal text-grey-darker word-break-all"> <p class="font-normal leading-normal text-grey-darker word-break-all">
${state.translate('copyUrlFormLabelWithName', { filename: name })} ${state.translate('copyUrlFormLabelWithName', { filename: name })}
@ -25,7 +27,7 @@ module.exports = function(name, url) {
<a class="text-blue my-4 font-medium cursor-pointer" onclick="${close}" <a class="text-blue my-4 font-medium cursor-pointer" onclick="${close}"
>${state.translate('okButton')}</a >${state.translate('okButton')}</a
> >
</div> </send-copy-dialog>
`; `;
function copy(event) { function copy(event) {

4
app/ui/intro.js
View File

@ -3,7 +3,7 @@ const assets = require('../../common/assets');
module.exports = function intro(state) { module.exports = function intro(state) {
return html` return html`
<article class="flex flex-col items-center justify-center bg-white border border-grey-light md:border-none px-6 text-center md:py-0 py-6 md:mb-0 mb-6 h-full"> <send-intro class="flex flex-col items-center justify-center bg-white border border-grey-light md:border-none px-6 text-center md:py-0 py-6 md:mb-0 mb-6 h-full">
<div class="flex flex-col items-center justify-between h-full py-8"> <div class="flex flex-col items-center justify-between h-full py-8">
<p class="text-center"> <p class="text-center">
<div class="font-semibold leading-normal">${state.translate( <div class="font-semibold leading-normal">${state.translate(
@ -18,5 +18,5 @@ module.exports = function intro(state) {
'uploadPageExplainer' 'uploadPageExplainer'
)}</p> )}</p>
</div> </div>
</article>`; </send-intro>`;
}; };

4
app/ui/modal.js
View File

@ -2,7 +2,7 @@ const html = require('choo/html');
module.exports = function(state, emit) { module.exports = function(state, emit) {
return html` return html`
<div <send-modal
class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8" class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8"
onclick="${close}" onclick="${close}"
> >
@ -14,7 +14,7 @@ module.exports = function(state, emit) {
${state.modal(state, emit, close)} ${state.modal(state, emit, close)}
</div> </div>
</div> </div>
</div> </send-modal>
`; `;
function close(event) { function close(event) {

4
app/ui/okDialog.js
View File

@ -3,7 +3,7 @@ const html = require('choo/html');
module.exports = function(message) { module.exports = function(message) {
return function(state, emit, close) { return function(state, emit, close) {
return html` return html`
<div class="flex flex-col max-w-xs p-4"> <send-ok-dialog class="flex flex-col max-w-xs p-4">
<div class="text-center m-8 leading-normal">${message}</div> <div class="text-center m-8 leading-normal">${message}</div>
<button <button
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold" class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold"
@ -11,7 +11,7 @@ module.exports = function(message) {
> >
${state.translate('okButton')} ${state.translate('okButton')}
</button> </button>
</div> </send-ok-dialog>
`; `;
}; };
}; };

4
app/ui/promo.js
View File

@ -13,7 +13,7 @@ class Promo extends Component {
createElement() { createElement() {
return html` return html`
<div <send-promo
class="w-full flex-none flex flex-row items-center content-center justify-center text-sm bg-grey-light leading-tight text-grey-darkest px-4 py-3" class="w-full flex-none flex flex-row items-center content-center justify-center text-sm bg-grey-light leading-tight text-grey-darkest px-4 py-3"
> >
<div class="flex items-center mx-auto"> <div class="flex items-center mx-auto">
@ -31,7 +31,7 @@ class Promo extends Component {
> >
</span> </span>
</div> </div>
</div> </send-promo>
`; `;
} }
} }

4
app/ui/signupDialog.js
View File

@ -8,7 +8,7 @@ module.exports = function() {
document.getElementById('email-input').focus(); document.getElementById('email-input').focus();
}); });
return html` return html`
<div class="flex flex-col p-4"> <send-signup-dialog class="flex flex-col p-4">
<p class="p-8"> <p class="p-8">
${state.translate('accountBenefitTitle')} ${state.translate('accountBenefitTitle')}
<ul class="my-2 leading-normal"> <ul class="my-2 leading-normal">
@ -40,7 +40,7 @@ module.exports = function() {
title="${state.translate('deletePopupCancel')}" title="${state.translate('deletePopupCancel')}"
onclick=${close}>${state.translate('deletePopupCancel')} onclick=${close}>${state.translate('deletePopupCancel')}
</button> </button>
</div>`; </send-signup-dialog>`;
function emailish(str) { function emailish(str) {
if (!str) { if (!str) {

7
test/integration/download-tests.js
View File

@ -36,7 +36,6 @@ describe('Firefox Send', function() {
}); });
it('should update the download count on home page after 1 download', function() { it('should update the download count on home page after 1 download', function() {
const expectedExpiresAfterText = 'Expires after 1 download';
browser.chooseFile( browser.chooseFile(
homePage.uploadInput, homePage.uploadInput,
`${testFilesPath}/${testFiles[0]}` `${testFilesPath}/${testFiles[0]}`
@ -51,10 +50,10 @@ describe('Firefox Send', function() {
downloadPage.download(); downloadPage.download();
browser.waitForExist(downloadPage.downloadComplete); browser.waitForExist(downloadPage.downloadComplete);
browser.back(); browser.back();
browser.waitForExist(`#archive-${downloadPage.fileId}`); browser.waitForExist('send-archive');
assert.equal( assert.equal(
browser.getText(`#archive-${downloadPage.fileId} > div`).substring(0, 24), browser.getText('send-archive > div').substring(0, 24),
expectedExpiresAfterText 'Expires after 1 download'
); );
}); });
}); });