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;
if (!this.local.loggedIn) {
return html`
<div>
<send-account>
<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"
onclick="${e => this.login(e)}"
>
${translate('signInMenuOption')}
</button>
</div>
</send-account>
`;
}
return html`
<div class="relative h-8">
<send-account class="relative h-8">
<input
type="image"
alt="${user.email}"
@ -97,7 +97,7 @@ class Account extends Component {
</a>
</li>
</ul>
</div>
</send-account>
`;
}
}

31
app/ui/archiveTile.js
View File

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

6
app/ui/copyDialog.js
View File

@ -4,7 +4,9 @@ const { copyToClipboard } = require('../utils');
module.exports = function(name, url) {
return function(state, emit, close) {
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>
<p class="font-normal leading-normal text-grey-darker word-break-all">
${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}"
>${state.translate('okButton')}</a
>
</div>
</send-copy-dialog>
`;
function copy(event) {

4
app/ui/intro.js
View File

@ -3,7 +3,7 @@ const assets = require('../../common/assets');
module.exports = function intro(state) {
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">
<p class="text-center">
<div class="font-semibold leading-normal">${state.translate(
@ -18,5 +18,5 @@ module.exports = function intro(state) {
'uploadPageExplainer'
)}</p>
</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) {
return html`
<div
<send-modal
class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8"
onclick="${close}"
>
@ -14,7 +14,7 @@ module.exports = function(state, emit) {
${state.modal(state, emit, close)}
</div>
</div>
</div>
</send-modal>
`;
function close(event) {

4
app/ui/okDialog.js
View File

@ -3,7 +3,7 @@ const html = require('choo/html');
module.exports = function(message) {
return function(state, emit, close) {
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>
<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"
@ -11,7 +11,7 @@ module.exports = function(message) {
>
${state.translate('okButton')}
</button>
</div>
</send-ok-dialog>
`;
};
};

4
app/ui/promo.js
View File

@ -13,7 +13,7 @@ class Promo extends Component {
createElement() {
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"
>
<div class="flex items-center mx-auto">
@ -31,7 +31,7 @@ class Promo extends Component {
>
</span>
</div>
</div>
</send-promo>
`;
}
}

4
app/ui/signupDialog.js
View File

@ -8,7 +8,7 @@ module.exports = function() {
document.getElementById('email-input').focus();
});
return html`
<div class="flex flex-col p-4">
<send-signup-dialog class="flex flex-col p-4">
<p class="p-8">
${state.translate('accountBenefitTitle')}
<ul class="my-2 leading-normal">
@ -40,7 +40,7 @@ module.exports = function() {
title="${state.translate('deletePopupCancel')}"
onclick=${close}>${state.translate('deletePopupCancel')}
</button>
</div>`;
</send-signup-dialog>`;
function emailish(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() {
const expectedExpiresAfterText = 'Expires after 1 download';
browser.chooseFile(
homePage.uploadInput,
`${testFilesPath}/${testFiles[0]}`
@ -51,10 +50,10 @@ describe('Firefox Send', function() {
downloadPage.download();
browser.waitForExist(downloadPage.downloadComplete);
browser.back();
browser.waitForExist(`#archive-${downloadPage.fileId}`);
browser.waitForExist('send-archive');
assert.equal(
browser.getText(`#archive-${downloadPage.fileId} > div`).substring(0, 24),
expectedExpiresAfterText
browser.getText('send-archive > div').substring(0, 24),
'Expires after 1 download'
);
});
});