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

Merge pull request #995 from mozilla/ui-fix 

fix #985-#988, #990-#993
This commit is contained in:
Danny Coates 2018-11-05 15:53:20 -08:00 committed by GitHub
parent 77a5a377e3 1ef80febcb
commit d60eb5e022
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 62 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/main.css
View File

@ -31,19 +31,23 @@ progress::-webkit-progress-value {
@apply rounded-sm; @apply rounded-sm;
} }
.word-break-all {
word-break: break-all;
}
.main { .main {
display: flex; display: flex;
max-width: 64rem; max-width: 64rem;
width: 100%; width: 100%;
height: 100%;
} }
.main > section { .main > section {
@apply bg-white; @apply bg-white;
@apply shadow;
} }
.header-logo { .header-logo {
background-image: url('../assets/send_logo.svg'); background-image: url('../assets/send_logo_white.svg');
background-position: left; background-position: left;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1.8rem; background-size: 1.8rem;
@ -145,11 +149,16 @@ progress::-webkit-progress-value {
@apply flex-1; @apply flex-1;
@apply self-center; @apply self-center;
@apply items-center; @apply items-center;
@apply my-10; @apply m-auto;
@apply py-8;
width: calc(100% - 3rem); min-height: 33rem;
min-height: 30rem;
max-height: 40rem; max-height: 40rem;
width: calc(100% - 3rem);
}
.header-logo {
background-image: url('../assets/send_logo.svg');
} }
.main > section { .main > section {

2
app/routes.js
View File

@ -16,7 +16,7 @@ function banner(state, emit) {
function body(main) { function body(main) {
return function(state, emit) { return function(state, emit) {
const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest justify-between"> const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest">
${banner(state, emit)} ${banner(state, emit)}
${header(state, emit)} ${header(state, emit)}
${main(state, emit)} ${main(state, emit)}

17
app/ui/archiveTile.js
View File

@ -36,7 +36,7 @@ function password(state) {
id="password-input" id="password-input"
class="${ class="${
state.password ? '' : 'invisible' state.password ? '' : 'invisible'
} border rounded-sm focus:border-blue leading-normal mt-2 py-1 px-2 h-8" } border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8"
autocomplete="off" autocomplete="off"
maxlength="${MAX_LENGTH}" maxlength="${MAX_LENGTH}"
type="password" type="password"
@ -96,7 +96,7 @@ function fileInfo(file, action) {
<article class="flex flex-row items-center p-3"> <article class="flex flex-row items-center p-3">
<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">${file.name}</h1> <h1 class="text-sm font-medium word-break-all">${file.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes( <div class="text-xs font-normal opacity-75 pt-1">${bytes(
file.size file.size
)}</div> )}</div>
@ -137,7 +137,7 @@ module.exports = function(state, emit, archive) {
alt="Delete" alt="Delete"
src="${assets.get('close-16.svg')}" src="${assets.get('close-16.svg')}"
onclick=${del}/> onclick=${del}/>
<h1 class="text-sm font-medium">${archive.name}</h1> <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes( <div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size archive.size
)}</div> )}</div>
@ -199,7 +199,7 @@ module.exports.wip = function(state, emit) {
${password(state, emit)} ${password(state, emit)}
<button <button
id="upload-btn" id="upload-btn"
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 mt-4 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 flex flex-no-shrink items-center justify-center font-semibold"
title="${state.translate('uploadSuccessConfirmHeader')}" title="${state.translate('uploadSuccessConfirmHeader')}"
onclick=${upload}> onclick=${upload}>
${state.translate('uploadSuccessConfirmHeader')} ${state.translate('uploadSuccessConfirmHeader')}
@ -207,6 +207,7 @@ module.exports.wip = function(state, emit) {
</article>`; </article>`;
function upload(event) { function upload(event) {
window.scrollTo(0, 0);
event.preventDefault(); event.preventDefault();
event.target.disabled = true; event.target.disabled = true;
if (!state.uploading) { if (!state.uploading) {
@ -250,7 +251,7 @@ module.exports.uploading = function(state, emit) {
class="z-20 flex flex-col items-start border border-grey-light bg-white p-4"> class="z-20 flex flex-col items-start border border-grey-light bg-white p-4">
<p class="w-full"> <p class="w-full">
<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">${archive.name}</h1> <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes( <div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size archive.size
)}</div> )}</div>
@ -280,7 +281,7 @@ module.exports.uploading = function(state, emit) {
module.exports.empty = function(state, emit) { module.exports.empty = function(state, emit) {
return html` return html`
<article class="flex flex-col items-center justify-center border border-dashed border-blue-light px-6 py-16 h-full"> <article class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full">
<img src="${assets.get('addfiles.svg')}" width="48" height="48"/> <img src="${assets.get('addfiles.svg')}" width="48" height="48"/>
<div class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide">${state.translate( <div class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide">${state.translate(
'uploadDropDragMessage' 'uploadDropDragMessage'
@ -319,7 +320,7 @@ module.exports.preview = function(state, emit) {
<article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20"> <article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20">
<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">${archive.name}</h1> <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes( <div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size archive.size
)}</div> )}</div>
@ -349,7 +350,7 @@ module.exports.downloading = function(state, emit) {
<article class="flex flex-col bg-white border border-grey-light p-4 z-20"> <article class="flex flex-col bg-white border border-grey-light p-4 z-20">
<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">${archive.name}</h1> <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes( <div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size archive.size
)}</div> )}</div>

2
app/ui/copyDialog.js
View File

@ -6,7 +6,7 @@ module.exports = function(name, url) {
return html` return html`
<div class="flex flex-col items-center text-center p-4 max-w-sm"> <div 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">${state.translate( <p class="font-normal leading-normal text-grey-darker word-break-all">${state.translate(
'copyUrlFormLabelWithName', 'copyUrlFormLabelWithName',
{ filename: name } { filename: name }
)}</p> )}</p>

8
app/ui/error.js
View File

@ -4,13 +4,15 @@ const assets = require('../../common/assets');
module.exports = function(state) { module.exports = function(state) {
return html` return html`
<main class="main container"> <main class="main container">
<div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"> <div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
<h1 class="text-2xl">${state.translate('errorPageHeader')}</h1> <h1 class="text-2xl text-center">${state.translate(
'errorPageHeader'
)}</h1>
<img class="my-16" src="${assets.get('illustration_error.svg')}"/> <img class="my-16" src="${assets.get('illustration_error.svg')}"/>
<p class="max-w-md leading-normal"> <p class="max-w-md leading-normal">
${state.translate('uploadPageExplainer')} ${state.translate('uploadPageExplainer')}
</p> </p>
<a class="text-blue my-10 font-medium" href="/"> <a class="text-blue mt-10 font-medium" href="/">
${state.translate('sendYourFilesLink')} ${state.translate('sendYourFilesLink')}
</a> </a>
</div> </div>

3
app/ui/expiryOptions.js
View File

@ -10,7 +10,8 @@ module.exports = function(state, emit) {
<div class=""> <div class="">
${raw( ${raw(
state.translate('frontPageExpireInfo', { state.translate('frontPageExpireInfo', {
downloadCount: '<select id="dlCount"></select>', downloadCount:
'<span class="lg:inline-block md:block sm:inline-block block"></span><select id="dlCount"></select>',
timespan: '<select id="timespan"></select>' timespan: '<select id="timespan"></select>'
}) })
)} )}

4
app/ui/footer.js
View File

@ -15,10 +15,6 @@ module.exports = function(state) {
href="https://www.mozilla.org/about/legal"> href="https://www.mozilla.org/about/legal">
${state.translate('footerLinkLegal')} ${state.translate('footerLinkLegal')}
</a></li> </a></li>
<li class="m-2"><a
href="https://testpilot.firefox.com/about">
${state.translate('footerLinkAbout')}
</a></li>
<li class="m-2"><a <li class="m-2"><a
href="/legal"> href="/legal">
${state.translate('footerLinkTerms')} ${state.translate('footerLinkTerms')}

2
app/ui/fxPromo.js
View File

@ -3,7 +3,7 @@ const assets = require('../../common/assets');
module.exports = function() { module.exports = function() {
return html` return html`
<div class="w-full flex-none flex flex-row items-center content-center justify-center text-sm bg-grey-light text-grey-darkest h-12 px-4"> <div 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">
<img <img
src="${assets.get('firefox_logo-only.svg')}" src="${assets.get('firefox_logo-only.svg')}"

4
app/ui/header.js
View File

@ -3,11 +3,11 @@ const account = require('./account');
module.exports = function(state, emit) { module.exports = function(state, emit) {
const header = html` const header = html`
<header class="relative flex-none flex flex-row items-center justify-between bg-white w-full px-6 h-16 shadow z-20"> <header class="relative flex-none flex flex-row items-center justify-between bg-blue md:bg-white w-full px-6 h-16 md:shadow z-20">
<a <a
class="header-logo" class="header-logo"
href="/"> href="/">
<h1 class="text-black font-normal">Firefox <b>Send</b></h1> <h1 class="text-white md:text-black font-normal">Firefox <b>Send</b></h1>
</a> </a>
${account(state, emit)} ${account(state, emit)}
<div class="invisible absolute pin-t pin-l mt-12 w-full flex flex-col items-center pointer-events-none"> <div class="invisible absolute pin-t pin-l mt-12 w-full flex flex-col items-center pointer-events-none">

4
app/ui/home.js
View File

@ -23,11 +23,11 @@ module.exports = function(state, emit) {
: list(archives, 'list-reset h-full overflow-y-scroll', 'mb-3'); : list(archives, 'list-reset h-full overflow-y-scroll', 'mb-3');
return html` return html`
<main class="main md:relative"> <main class="main relative">
${state.modal && modal(state, emit)} ${state.modal && modal(state, emit)}
<section class="h-full w-full p-6 md:flex md:flex-row z-10"> <section class="h-full w-full p-6 md:flex md:flex-row z-10">
<div class="md:mr-6 md:w-1/2">${left}</div> <div class="md:mr-6 md:w-1/2">${left}</div>
<div class="md:w-1/2 overflow-y-scroll mt-6 md:mt-0">${right}</div> <div class="md:w-1/2 mt-6 md:mt-0">${right}</div>
</section> </section>
</main>`; </main>`;
}; };

28
app/ui/intro.js
View File

@ -3,18 +3,20 @@ 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-between bg-white border border-grey-light md:border-none px-6 md:py-10 py-6 md:mb-0 mb-6"> <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">
<p class="text-center"> <div class="flex flex-col items-center justify-between h-full py-8">
<div class="font-semibold leading-normal">${state.translate( <p class="text-center">
'uploadPageHeader' <div class="font-semibold leading-normal">${state.translate(
)}</div> 'uploadPageHeader'
<div class="italic text-sm opacity-75 leading-normal">${state.translate( )}</div>
'pageHeaderCredits' <div class="italic text-sm opacity-75 leading-normal">${state.translate(
)}</div> 'pageHeaderCredits'
</p> )}</div>
<img class="my-6" src="${assets.get('illustration_download.svg')}"/> </p>
<p class="md:mx-6 max-w-sm text-sm opacity-50 leading-normal">${state.translate( <img class="my-6" src="${assets.get('illustration_download.svg')}"/>
'uploadPageExplainer' <p class="md:mx-6 max-w-sm text-sm opacity-50 leading-normal">${state.translate(
)}</p> 'uploadPageExplainer'
)}</p>
</div>
</article>`; </article>`;
}; };

4
app/ui/legal.js
View File

@ -4,8 +4,8 @@ const raw = require('choo/html/raw');
module.exports = function(state) { module.exports = function(state) {
return html` return html`
<main class="main container"> <main class="main container">
<div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"> <div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
<h1 class="text-2xl">${state.translate('legalHeader')}</h1> <h1 class="text-2xl text-center">${state.translate('legalHeader')}</h1>
${raw( ${raw(
replaceLinks(state.translate('legalNoticeTestPilot'), [ replaceLinks(state.translate('legalNoticeTestPilot'), [
'https://testpilot.firefox.com/terms', 'https://testpilot.firefox.com/terms',

2
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 class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud" onclick=${close}> <div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8" onclick=${close}>
<div class="h-full max-h-screen absolute pin-t flex items-center"> <div class="h-full max-h-screen absolute pin-t flex items-center">
<div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}> <div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
${state.modal(state, emit, close)} ${state.modal(state, emit, close)}

6
app/ui/notFound.js
View File

@ -4,8 +4,8 @@ const assets = require('../../common/assets');
module.exports = function(state) { module.exports = function(state) {
return html` return html`
<main class="main container"> <main class="main container">
<div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"> <div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
<h1 class="text-pink-dark text-2xl">${state.translate( <h1 class="text-pink-dark text-2xl text-center">${state.translate(
'expiredPageHeader' 'expiredPageHeader'
)}</h1> )}</h1>
<img class="my-16" src="${assets.get( <img class="my-16" src="${assets.get(
@ -14,7 +14,7 @@ module.exports = function(state) {
<p class="max-w-md leading-normal"> <p class="max-w-md leading-normal">
${state.translate('uploadPageExplainer')} ${state.translate('uploadPageExplainer')}
</p> </p>
<a class="text-blue my-10 font-medium" href="/"> <a class="text-blue mt-10 font-medium" href="/">
${state.translate('sendYourFilesLink')} ${state.translate('sendYourFilesLink')}
</a> </a>
</div> </div>

2
app/ui/selectbox.js
View File

@ -4,7 +4,7 @@ module.exports = function(selected, options, translate, changed) {
let x = selected; let x = selected;
return html` return html`
<select class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 mx-1 h-8" onchange=${choose}> <select class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 my-2 h-8" onchange=${choose}>
${options.map( ${options.map(
i => i =>
html`<option value="${i}" ${ html`<option value="${i}" ${

4
app/ui/unsupported.js
View File

@ -31,13 +31,13 @@ module.exports = function(state) {
return html` return html`
<main class="main container"> <main class="main container">
<div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"> <div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
<h1 class="text-center text-2xl">${strings.header}</h1> <h1 class="text-center text-2xl">${strings.header}</h1>
<p class="my-10 max-w-md leading-normal"> <p class="my-10 max-w-md leading-normal">
${strings.description} ${strings.description}
</p> </p>
${why} ${why}
<a href="${url}" class="border border-green-light rounded bg-green hover\:bg-green-dark focus\:bg-green-darker flex items-center justify-center text-2xl text-white my-10 py-4 px-6"> <a href="${url}" class="border border-green-light rounded bg-green hover\:bg-green-dark focus\:bg-green-darker flex items-center justify-center text-2xl text-white mt-10 py-4 px-6">
<img <img
src="${assets.get('firefox_logo-only.svg')}" src="${assets.get('firefox_logo-only.svg')}"
class="w-10" class="w-10"

1
assets/send_logo_white.svg Normal file
View File

@ -0,0 +1 @@
<svg width="30" height="27" viewBox="0 0 30 27" xmlns="http://www.w3.org/2000/svg"><title>send logo</title><g stroke="#ffffff" fill="none" fill-rule="evenodd" transform="translate(-0.231,0.11948695)"><path d="M22.364 19.989l-2.153-2.103a2.046 2.046 0 0 0-2.665-.151l3.402 3.323a.531.531 0 0 1 0 .766l-2.466 2.408a.563.563 0 0 1-.784 0l-3.398-3.32a1.932 1.932 0 0 0 .188 2.564l2.153 2.103c.788.77 2.066.77 2.855 0l2.868-2.802a1.94 1.94 0 0 0 0-2.788M8.77 14.745a.534.534 0 0 0 0 .766l3.399 3.32a2.05 2.05 0 0 1-2.625-.184l-2.153-2.102a1.94 1.94 0 0 1 0-2.79l2.869-2.801a2.052 2.052 0 0 1 2.854 0l2.153 2.103c.73.713.775 1.83.154 2.603l-3.401-3.323a.565.565 0 0 0-.784 0L8.77 14.745zm9.464 5.682a.777.777 0 0 1 0 1.118.822.822 0 0 1-1.144 0l-5.6-5.47a.777.777 0 0 1 0-1.118.822.822 0 0 1 1.144 0l5.6 5.47z" stroke-width=".618" fill="#ffffff"/><path d="M6.065 20.606c-2.913-1.586-3.988-3.656-3.988-6.468 0-2.81 2.265-6.425 5.786-6.289.1.004.55-.006.649 0 .895-3.27 2.508-6.353 6.898-6.353 4.557 0 7.336 3.716 6.75 7.785.08-.005 1.232.17 1.31.186 3.096.644 4.915 3.275 4.915 5.18 0 1.905-.107 3.029-2.023 4.947" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
test/integration/homepage-tests.js
View File

@ -8,7 +8,6 @@ describe('Firefox Send homepage', function() {
const footerLinks = [ const footerLinks = [
'mozilla', 'mozilla',
'legal', 'legal',
'about',
'legal', 'legal',
'cookies', 'cookies',
'report-infringement', 'report-infringement',