some wip. still broken

This commit is contained in:
Danny Coates 2018-10-09 18:17:40 -07:00
parent 5b939d2c95
commit 2b81ff1fb3
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
28 changed files with 305 additions and 391 deletions

View File

@ -31,20 +31,13 @@ html {
} }
body { body {
display: grid; display: flex;
grid-template-columns: minmax(500px, 1080px); flex-direction: column;
grid-template-rows: 54px 700px 54px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
align-content: center; 'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
align-items: center;
justify-items: stretch;
justify-content: center;
font-family: Futura, -apple-system, BlinkMacSystemFont, 'SF Pro Text',
'segoe ui', 'helvetica neue', helvetica, ubuntu, roboto, noto, arial,
sans-serif;
height: 100vh; height: 100vh;
background: #f9f9fa;
margin: 0; margin: 0;
padding: var(--grid-basis); background-color: #f8f9fa;
} }
input, input,
@ -60,12 +53,41 @@ a {
} }
.main { .main {
flex: 1 1 auto;
background: var(--pageBGColor); background: var(--pageBGColor);
box-shadow: var(--large-box-shadow); box-shadow: var(--large-box-shadow);
display: grid; width: 90%;
grid-template-columns: minmax(400px, 1fr) 1fr;
width: 100%;
height: 100%; height: 100%;
max-width: 960px;
max-height: 600px;
align-self: center;
margin: auto 0;
}
.split {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 100%;
}
.split__left {
height: 100%;
width: 360px;
margin: 0;
border-right: 1px solid #d7d7db;
display: flex;
flex-direction: column;
text-align: center;
}
.split__right {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
position: relative;
} }
.noscript { .noscript {
@ -74,30 +96,6 @@ a {
border-radius: 6px; border-radius: 6px;
} }
.main__file-manager,
.main__context {
padding: calc(var(--grid-basis) * 2);
}
.main__file-manager {
border-right: 2px solid black;
}
.main__context {
display: flex;
flex-direction: column;
}
.main__context-footer,
.main__signup-promo {
display: flex;
justify-content: flex-end;
}
.main__file-list {
flex: 1;
}
.footer__mozLogo { .footer__mozLogo {
width: 112px; width: 112px;
height: 32px; height: 32px;
@ -107,11 +105,10 @@ a {
.btn { .btn {
display: flex; display: flex;
width: 100%; width: 100%;
height: 70px;
line-height: 1.2; line-height: 1.2;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 10px; padding: 16px;
font-size: 17px; font-size: 17px;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
@ -190,7 +187,9 @@ a {
.page { .page {
height: 100%; height: 100%;
margin: 0; width: 75%;
margin: 0 auto;
padding: 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
@ -226,13 +225,6 @@ a {
} }
} }
.goBackButton {
position: absolute;
top: 0;
left: 0;
margin: 18px;
}
.error { .error {
color: var(--errorColor); color: var(--errorColor);
font-weight: 600; font-weight: 600;
@ -261,6 +253,10 @@ a {
visibility: visible !important; visibility: visible !important;
} }
.invisible {
visibility: hidden;
}
.noDisplay { .noDisplay {
display: none !important; display: none !important;
} }
@ -269,39 +265,34 @@ a {
flex: 1; flex: 1;
} }
@media (max-device-width: 750px), (max-width: 750px) { @media (max-device-width: 720px), (max-width: 720px) {
.description { body {
margin: 0 auto 25px; height: unset;
} }
.main { .main {
flex-direction: column; box-shadow: none;
height: 100%; align-items: center;
max-height: none;
width: 100%;
} }
.spacer { .split {
flex: none; flex-direction: column-reverse;
height: 0; align-items: center;
} }
.stripedBox { .split__left {
margin-top: 72px; border: none;
min-height: 400px; height: 600px;
flex: 1; }
.description {
margin: 0 auto 25px;
} }
.uploads { .uploads {
flex: none; flex: none;
padding-top: 6px; padding-top: 6px;
} }
.footer {
margin: 15px;
}
}
@media (max-device-width: 700px), (max-width: 700px) {
.stripedBox {
margin-top: 72px;
}
} }

View File

@ -2,12 +2,12 @@
@import './pages/share/share.css'; @import './pages/share/share.css';
@import './pages/signin/signin.css'; @import './pages/signin/signin.css';
@import './pages/unsupported/unsupported.css'; @import './pages/unsupported/unsupported.css';
@import './pages/welcome/welcome.css';
@import './templates/downloadButton/downloadButton.css'; @import './templates/downloadButton/downloadButton.css';
@import './templates/downloadPassword/downloadPassword.css'; @import './templates/downloadPassword/downloadPassword.css';
@import './templates/file/file.css'; @import './templates/file/file.css';
@import './templates/fileIcon/fileIcon.css'; @import './templates/fileIcon/fileIcon.css';
@import './templates/fileList/fileList.css'; @import './templates/fileList/fileList.css';
@import './templates/fileManager/fileManager.css';
@import './templates/footer/footer.css'; @import './templates/footer/footer.css';
@import './templates/fxPromo/fxPromo.css'; @import './templates/fxPromo/fxPromo.css';
@import './templates/header/header.css'; @import './templates/header/header.css';

View File

@ -1,14 +1,10 @@
const html = require('choo/html'); const html = require('choo/html');
const raw = require('choo/html/raw'); const raw = require('choo/html/raw');
const assets = require('../../common/assets');
const title = require('../templates/title'); const title = require('../templates/title');
module.exports = function(state) { module.exports = function(state) {
return html` return html`
<div> <div class="page">
<a href="/" class="goBackButton">
<img src="${assets.get('back-arrow.svg')}"/>
</a>
${title(state)} ${title(state)}
<div class="title">${state.translate('legalHeader')}</div> <div class="title">${state.translate('legalHeader')}</div>
${raw( ${raw(

View File

@ -1,7 +1,7 @@
const html = require('choo/html'); const html = require('choo/html');
const titleSection = require('../../templates/title');
const downloadButton = require('../../templates/downloadButton'); const downloadButton = require('../../templates/downloadButton');
const downloadedFiles = require('../../templates/uploadedFileList'); const downloadedFiles = require('../../templates/uploadedFileList');
const split = require('../split');
module.exports = function(state, emit) { module.exports = function(state, emit) {
const fileInfo = state.fileInfo; const fileInfo = state.fileInfo;
@ -21,18 +21,16 @@ module.exports = function(state, emit) {
const bottomLink = const bottomLink =
state.transfer.state === 'downloading' ? cancelButton : trySendLink; state.transfer.state === 'downloading' ? cancelButton : trySendLink;
return html` return split(
<div class="page"> state,
${titleSection(state)} downloadedFiles(fileInfo, state, emit),
html`
${downloadedFiles(fileInfo, state, emit)} <div class="copySection">
<div class="description">${state.translate('downloadMessage2')}</div> <div class="description">${state.translate('downloadMessage2')}</div>
${downloadButton(state, emit)} ${downloadButton(state, emit)}
${bottomLink} ${bottomLink}
</div>`
</div> );
`;
function cancel() { function cancel() {
if (state.transfer.state === 'downloading') { if (state.transfer.state === 'downloading') {

View File

@ -1,11 +1,11 @@
const html = require('choo/html'); const html = require('choo/html');
const raw = require('choo/html/raw'); const raw = require('choo/html/raw');
const assets = require('../../../common/assets');
const notFound = require('../notFound'); const notFound = require('../notFound');
const deletePopup = require('../../templates/popup'); const deletePopup = require('../../templates/popup');
const uploadedFileList = require('../../templates/uploadedFileList'); const uploadedFileList = require('../../templates/uploadedFileList');
const timeLimitText = require('../../templates/timeLimitText'); const timeLimitText = require('../../templates/timeLimitText');
const { allowedCopy, delay, fadeOut } = require('../../utils'); const { allowedCopy, delay } = require('../../utils');
const split = require('../split');
module.exports = function(state, emit) { module.exports = function(state, emit) {
const file = state.storage.getFileById(state.params.id); const file = state.storage.getFileById(state.params.id);
@ -17,16 +17,13 @@ module.exports = function(state, emit) {
? '' ? ''
: 'passwordReminder--hidden'; : 'passwordReminder--hidden';
return html` return split(
<div class="page effect--fadeIn" id="shareWrapper"> state,
<a href="/" class="goBackButton"> uploadedFileList(file, state, emit),
<img src="${assets.get('back-arrow.svg')}"/> html`
</a> <div class="copySection">
${expireInfo(file, state.translate)}
${uploadedFileList(file, state, emit)}
<div class="sharePage__copyText"> <div class="sharePage__copyText">
${expireInfo(file, state.translate)}
${state.translate('copyUrlLabel')} ${state.translate('copyUrlLabel')}
<div class="sharePage__passwordReminder ${passwordReminderClass}">(don't forget the password too)</div> <div class="sharePage__passwordReminder ${passwordReminderClass}">(don't forget the password too)</div>
</div> </div>
@ -58,10 +55,8 @@ module.exports = function(state, emit) {
title="${state.translate('deleteFileButton')}" title="${state.translate('deleteFileButton')}"
onclick=${showDeletePopup}>${state.translate('deleteFileButton')} onclick=${showDeletePopup}>${state.translate('deleteFileButton')}
</button> </button>
</div>`
</div> );
`;
function showDeletePopup() { function showDeletePopup() {
const popup = document.querySelector('.popup'); const popup = document.querySelector('.popup');
@ -91,7 +86,6 @@ module.exports = function(state, emit) {
async function deleteFile() { async function deleteFile() {
emit('delete', { file, location: 'success-screen' }); emit('delete', { file, location: 'success-screen' });
await fadeOut('#shareWrapper');
emit('pushState', '/'); emit('pushState', '/');
} }
}; };

View File

@ -22,17 +22,15 @@
} }
.shareTitle { .shareTitle {
color: var(--textColor);
margin: 8px auto 15px; margin: 8px auto 15px;
text-align: center;
font-family: 'SF Pro Text', sans-serif;
font-size: 12px;
font-style: italic;
width: 280px;
} }
.copySection { .copySection {
width: 100%; display: flex;
flex-direction: column;
align-items: center;
margin: 24px auto;
width: 80%;
} }
.copySection__url { .copySection__url {
@ -48,6 +46,7 @@
letter-spacing: 0; letter-spacing: 0;
line-height: 18px; line-height: 18px;
font-weight: 500; font-weight: 500;
width: 100%;
} }
.copySection__url:disabled { .copySection__url:disabled {

View File

@ -7,9 +7,6 @@ const bytes = require('../../utils').bytes;
module.exports = function(state, emit) { module.exports = function(state, emit) {
return html` return html`
<div class="page signInPage"> <div class="page signInPage">
<a href="/" class="goBackButton">
<img src="${assets.get('back-arrow.svg')}"/>
</a>
${title(state)} ${title(state)}
<div class="signIn__info flexible"> <div class="signIn__info flexible">
${state.translate('accountBenefitTitle')} ${state.translate('accountBenefitTitle')}

18
app/pages/split.js Normal file
View File

@ -0,0 +1,18 @@
const html = require('choo/html');
const title = require('../templates/title');
const signupPromo = require('../templates/signupPromo');
module.exports = function(state, a, b) {
return html`
<div class="split">
<div class="split__left">
${title(state)}
${a}
</div>
<div class="split__right">
${signupPromo(state)}
${b}
</div>
</div>
`;
};

View File

@ -1,163 +1,6 @@
const html = require('choo/html'); const fileManager = require('../../templates/fileManager');
const assets = require('../../../common/assets'); const split = require('../split');
const title = require('../../templates/title');
const signupPromo = require('../../templates/signupPromo');
const fileList = require('../../templates/fileList');
const setPasswordSection = require('../../templates/setPasswordSection');
const uploadBox = require('../../templates/uploadedFileList');
const expireInfo = require('../../templates/expireInfo');
module.exports = function(state, emit) { module.exports = function(state, emit) {
// the page flickers if both the server and browser set 'effect--fadeIn' return split(state, fileManager(state, emit));
const fade = state.layout ? '' : 'effect--fadeIn';
const hasAnUpload = state.archive && state.archive.numFiles > 0;
const optionClass = state.uploading ? 'uploadOptions--faded' : '';
const btnUploading = state.uploading ? 'btn--stripes' : '';
const cancelVisible = state.uploading ? '' : 'noDisplay';
const faded = hasAnUpload ? 'uploadArea--faded' : '';
const selectFileClass = hasAnUpload > 0 ? 'btn--hidden' : '';
const sendFileClass = hasAnUpload > 0 ? '' : 'btn--hidden';
let btnText = '';
if (state.encrypting) {
btnText = state.translate('encryptingFile');
} else if (state.uploading) {
btnText = `sending... ${Math.floor(state.transfer.progressRatio * 100)}%`;
} else {
//default pre-upload text
btnText = state.translate('uploadSuccessConfirmHeader');
}
return html`
<div class="${fade} welcome">
${title(state)}
<div class="welcome__file-manager">
</div>
<div class="welcome__context">
<div class="welcome__signup-promo">
${signupPromo(state)}
</div>
<div class="welcome__file-list">
${fileList(state)}
</div>
<div class="welcome__context-footer">
<a
href="https://www.mozilla.org"
class="socialSection__link">
<img
class="footer__mozLogo"
src="${assets.get('mozilla-logo.svg')}"
alt="mozilla"/>
</a>
</div>
</div>
<label class="uploadArea"
ondragover=${dragover}
ondragleave=${dragleave}>
${uploadBox(state.archive, state, emit)}
<div class="uploadedFilesWrapper ${faded}">
<img
class="uploadArea__icon"
src="${assets.get('addfile.svg')}"
title="${state.translate('uploadSvgAlt')}"/>
<div class="uploadArea__msg">
${state.translate('uploadDropDragMessage')}
</div>
<span class="uploadArea__clickMsg">
${state.translate('uploadDropClickMessage')}
</span>
</div>
<input id="file-upload"
class="inputFile fileBox"
type="file"
multiple
name="fileUploaded"
onfocus=${onfocus}
onblur=${onblur}
onchange=${addFiles} />
</label>
<div class="uploadOptions ${optionClass}">
${expireInfo(state, emit)}
${setPasswordSection(state)}
</div>
<label for="file-upload"
class="btn btn--file ${selectFileClass}"
title="${state.translate('uploadPageBrowseButton1')}">
${state.translate('uploadPageBrowseButton1')}
</label>
<button
class="btn ${btnUploading} ${sendFileClass}"
onclick=${state.uploading ? noop : upload}
title="${btnText}">
${btnText}
</button>
<button class="btn--cancel uploadCancel ${cancelVisible}"
onclick=${cancel}>
${state.translate('uploadingPageCancel')}
</button>
</div>
`;
function noop() {}
function dragover(event) {
const div = document.querySelector('.uploadArea');
div.classList.add('uploadArea--dragging');
}
function dragleave(event) {
const div = document.querySelector('.uploadArea');
div.classList.remove('uploadArea--dragging');
}
function onfocus(event) {
event.target.classList.add('inputFile--focused');
}
function onblur(event) {
event.target.classList.remove('inputFile--focused');
}
function cancel(event) {
if (state.uploading) {
emit('cancel');
const cancelBtn = document.querySelector('.uploadCancel');
cancelBtn.innerHTML = state.translate('uploadCancelNotification');
}
}
function addFiles(event) {
event.preventDefault();
const newFiles = Array.from(event.target.files);
emit('addFiles', { files: newFiles });
}
function upload(event) {
event.preventDefault();
event.target.disabled = true;
if (!state.uploading) {
emit('upload', {
type: 'click',
dlimit: state.downloadCount || 1,
password: state.password
});
}
}
}; };

View File

@ -31,17 +31,6 @@ module.exports = function() {
${banner(state, emit)} ${banner(state, emit)}
${header(state, emit)} ${header(state, emit)}
<main class="main"> <main class="main">
<noscript>
<div class="noscript">
<h2>${state.translate('javascriptRequired')}</h2>
<p>
<a class="link" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">
${state.translate('whyJavascript')}
</a>
</p>
<p>${state.translate('enableJavascript')}</p>
</div>
</noscript>
${page(state, emit)} ${page(state, emit)}
</main> </main>
${footer(state)} ${footer(state)}

View File

@ -4,7 +4,7 @@
pointer-events: none; pointer-events: none;
margin: 8px; margin: 8px;
color: #fff; color: #fff;
background-image: url('../assets/red_file.svg'); background-image: url('../assets/blue_file.svg');
width: 22px; width: 22px;
height: 32px; height: 32px;
overflow: hidden; overflow: hidden;

View File

@ -1,15 +1,19 @@
.fileManager {
display: flex;
flex-direction: column;
height: 100%;
}
.uploadArea { .uploadArea {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
border: 2px dashed rgba(12, 12, 13, 0.2);
margin: 0 0 10px;
height: 400px;
overflow: scroll; overflow: scroll;
transition: transform 150ms; transition: transform 150ms;
flex: 1; flex: 1;
min-height: 90px;
} }
.uploadArea__msg { .uploadArea__msg {
@ -70,6 +74,7 @@
top: 0; top: 0;
left: 0; left: 0;
flex: none; flex: none;
height: 100%;
width: 100%; width: 100%;
border: none; border: none;
z-index: 1; z-index: 1;
@ -79,6 +84,7 @@
text-align: left; text-align: left;
font-size: 13px; font-size: 13px;
color: var(--lightTextColor); color: var(--lightTextColor);
margin: 24px;
} }
.uploadOptions--faded { .uploadOptions--faded {

View File

@ -0,0 +1,129 @@
const html = require('choo/html');
const assets = require('../../../common/assets');
const setPasswordSection = require('../setPasswordSection');
const uploadBox = require('../uploadedFileList');
const expireInfo = require('../expireInfo');
module.exports = function(state, emit) {
const hasAnUpload = state.archive && state.archive.numFiles > 0;
const optionClass = state.uploading ? 'uploadOptions--faded' : '';
const btnUploading = state.uploading ? 'btn--stripes' : '';
const cancelVisible = state.uploading ? '' : 'noDisplay';
const faded = hasAnUpload ? 'noDisplay' : '';
const selectFileClass = hasAnUpload > 0 ? 'btn--hidden' : '';
const sendFileClass = hasAnUpload > 0 ? 'btn--file' : 'btn--hidden';
let btnText = '';
if (state.encrypting) {
btnText = state.translate('encryptingFile');
} else if (state.uploading) {
btnText = `sending... ${Math.floor(state.transfer.progressRatio * 100)}%`;
} else {
//default pre-upload text
btnText = state.translate('uploadSuccessConfirmHeader');
}
return html`<div class="fileManager">
<label class="uploadArea"
ondragover=${dragover}
ondragleave=${dragleave}>
${uploadBox(state.archive, state, emit)}
<div class="uploadedFilesWrapper ${faded}">
<img
src="${assets.get('addfile.svg')}"
title="${state.translate('uploadSvgAlt')}"/>
<div class="uploadArea__msg">
${state.translate('uploadDropDragMessage')}
</div>
<span class="uploadArea__clickMsg">
${state.translate('uploadDropClickMessage')}
</span>
</div>
<input id="file-upload"
class="inputFile fileBox"
type="file"
multiple
name="fileUploaded"
onfocus=${onfocus}
onblur=${onblur}
onchange=${addFiles} />
</label>
<div class="uploadOptions ${optionClass}">
${expireInfo(state, emit)}
${setPasswordSection(state)}
</div>
<label for="file-upload"
class="btn btn--file ${selectFileClass}"
title="${state.translate('uploadPageBrowseButton1')}">
${state.translate('uploadPageBrowseButton1')}
</label>
<button
class="btn ${btnUploading} ${sendFileClass}"
onclick=${state.uploading ? noop : upload}
title="${btnText}">
${btnText}
</button>
<button class="btn--cancel uploadCancel ${cancelVisible}"
onclick=${cancel}>
${state.translate('uploadingPageCancel')}
</button>
</div>`;
function noop() {}
function dragover(event) {
const div = document.querySelector('.uploadArea');
div.classList.add('uploadArea--dragging');
}
function dragleave(event) {
const div = document.querySelector('.uploadArea');
div.classList.remove('uploadArea--dragging');
}
function onfocus(event) {
event.target.classList.add('inputFile--focused');
}
function onblur(event) {
event.target.classList.remove('inputFile--focused');
}
function cancel(event) {
if (state.uploading) {
emit('cancel');
const cancelBtn = document.querySelector('.uploadCancel');
cancelBtn.innerHTML = state.translate('uploadCancelNotification');
}
}
function addFiles(event) {
event.preventDefault();
const newFiles = Array.from(event.target.files);
emit('addFiles', { files: newFiles });
}
function upload(event) {
event.preventDefault();
event.target.disabled = true;
if (!state.uploading) {
emit('upload', {
type: 'click',
dlimit: state.downloadCount || 1,
password: state.password
});
}
}
};

View File

@ -1,14 +1,11 @@
.footer { .footer {
margin: 0 auto; flex: none;
margin: 24px;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
box-sizing: border-box;
justify-content: flex-end; justify-content: flex-end;
align-items: center;
padding-top: var(--grid-basis);
width: 100%;
} }
.legalSection { .legalSection {
@ -33,19 +30,13 @@
margin: 0 0 -5px calc(var(--grid-basis) * 2); margin: 0 0 -5px calc(var(--grid-basis) * 2);
} }
.dropDownArrow {
display: none;
}
.dropdown__only { .dropdown__only {
display: none; display: none;
} }
@media (max-device-width: 750px), (max-width: 750px) { @media (max-device-width: 720px), (max-width: 720px) {
.footer { .footer {
align-items: flex-end; justify-content: flex-start;
margin: 0;
min-width: 455px;
} }
.footer_hiddenIcon { .footer_hiddenIcon {
@ -56,20 +47,9 @@
display: block; display: block;
} }
.dropDownArrow {
display: initial;
float: right;
}
.legalSection { .legalSection {
flex: 0; flex-direction: column;
background-color: #fff;
display: block;
border-radius: 4px;
border: 1px solid rgba(12, 12, 13, 0.1);
box-sizing: border-box;
text-align: left; text-align: left;
margin-right: auto;
} }
.legalSection__link { .legalSection__link {
@ -93,8 +73,4 @@
color: var(--primaryControlFGColor); color: var(--primaryControlFGColor);
background-color: var(--primaryControlBGColor); background-color: var(--primaryControlBGColor);
} }
.footer__noDisplay {
display: none;
}
} }

View File

@ -3,18 +3,11 @@ const assets = require('../../../common/assets');
module.exports = function(state) { module.exports = function(state) {
const footer = html`<footer class="footer"> const footer = html`<footer class="footer">
<div class="legalSection" <div class="legalSection">
onmouseover=${showDropDown} <a class="legalSection__link"
onmouseout=${hideDropDown}> href="https://www.mozilla.org/about/legal">
${state.translate('footerLinkLegal')}
<div class="legalSection__menu"> </a>
<img class="dropDownArrow" src="${assets.get('dropdown-arrow.svg')}"/>
<a class="legalSection__link"
href="https://www.mozilla.org/about/legal">
${state.translate('footerLinkLegal')}
</a>
</div>
<a <a
href="https://testpilot.firefox.com/about" href="https://testpilot.firefox.com/about"
class="legalSection__link footer__dropdown footer__noDisplay"> class="legalSection__link footer__dropdown footer__noDisplay">
@ -71,18 +64,4 @@ module.exports = function(state) {
return target && target.nodeName && target.nodeName === 'FOOTER'; return target && target.nodeName && target.nodeName === 'FOOTER';
}; };
return footer; return footer;
function showDropDown() {
const menus = document.querySelectorAll('.footer__dropdown');
menus.forEach(element => {
element.classList.remove('footer__noDisplay');
});
}
function hideDropDown() {
const menus = document.querySelectorAll('.footer__dropdown');
menus.forEach(element => {
element.classList.add('footer__noDisplay');
});
}
}; };

View File

@ -10,10 +10,6 @@
align-content: center; align-content: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: fixed;
top: 0;
right: 0;
left: 0;
} }
.fxPromo > div { .fxPromo > div {

View File

@ -1,16 +1,27 @@
.header { .header {
align-items: flex-end; flex: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: calc(var(--grid-basis) * 4); align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
height: 64px;
background-color: white;
box-shadow: 0 -1px 0 0 #d7d7db7f, 0 2px 6px 0 #0000001e;
} }
.header h1 { .header h1 {
margin: 0; margin: 0;
} }
.header__controls {
justify-self: end;
display: grid;
grid-auto-flow: column;
grid-gap: 8px;
align-items: center;
}
.feedback { .feedback {
background-color: #979797; background-color: #979797;
background-image: url('../assets/feedback.svg'); background-image: url('../assets/feedback.svg');
@ -26,6 +37,4 @@
text-indent: 2px; text-indent: 2px;
transition: all 250ms ease-in-out; transition: all 250ms ease-in-out;
white-space: nowrap; white-space: nowrap;
margin-left: calc(var(--grid-basis) * 2);
margin-bottom: 8px;
} }

View File

@ -9,14 +9,16 @@ module.exports = function(state, emit) {
const header = html` const header = html`
<header class="header"> <header class="header">
<h1>Firefox Send</h1> <h1><a href="/">Firefox Send</a></h1>
${userAccount(state, emit)} <div class="header__controls">
<a href="${feedbackUrl}" ${userAccount(state, emit)}
rel="noreferrer noopener" <a href="${feedbackUrl}"
class="feedback" rel="noreferrer noopener"
alt="Feedback" class="feedback"
target="_blank">${state.translate('siteFeedback')} alt="Feedback"
</a> target="_blank">${state.translate('siteFeedback')}
</a>
</div>
</header>`; </header>`;
// HACK // HACK
// We only want to render this once because we // We only want to render this once because we

View File

@ -3,7 +3,7 @@ const passwordInput = require('../passwordInput');
module.exports = function(state) { module.exports = function(state) {
const checked = state.password ? 'checked' : ''; const checked = state.password ? 'checked' : '';
const label = state.password ? 'addPasswordLabel' : 'addPasswordMessage'; const label = state.password ? '' : 'addPasswordMessage';
return html` return html`
<div class="setPasswordSection"> <div class="setPasswordSection">
@ -15,7 +15,7 @@ module.exports = function(state) {
autocomplete="off" autocomplete="off"
onchange=${togglePasswordInput}/> onchange=${togglePasswordInput}/>
<label class="checkbox__label" for="add-password"> <label class="checkbox__label" for="add-password">
${state.translate(label)} ${label && state.translate(label)}
</label> </label>
</div> </div>
@ -32,7 +32,7 @@ module.exports = function(state) {
const label = document.querySelector('.checkbox__label'); const label = document.querySelector('.checkbox__label');
if (boxChecked) { if (boxChecked) {
label.innerHTML = state.translate('addPasswordLabel'); label.innerHTML = ''; //state.translate('addPasswordLabel');
unlockInput.focus(); unlockInput.focus();
} else { } else {
label.innerHTML = state.translate('addPasswordMessage'); label.innerHTML = state.translate('addPasswordMessage');

View File

@ -5,7 +5,6 @@
} }
.checkbox { .checkbox {
flex: auto;
height: 24px; height: 24px;
} }

View File

@ -4,6 +4,7 @@ module.exports = function(state) {
if (state.user.loggedIn || !state.capabilities.account) { if (state.user.loggedIn || !state.capabilities.account) {
return null; return null;
} }
return html` return html`
<a href="/signin" class="signupPromo"> <a href="/signin" class="signupPromo">
<div class="signupPromo__title">${state.translate('signInPromoText')}</div> <div class="signupPromo__title">${state.translate('signInPromoText')}</div>

View File

@ -9,6 +9,10 @@
text-align: center; text-align: center;
justify-content: center; justify-content: center;
transition: background 100ms; transition: background 100ms;
margin: 24px;
position: absolute;
top: 0;
right: 0;
} }
.signupPromo:hover { .signupPromo:hover {

View File

@ -1,10 +1,9 @@
.boxTitle { .boxTitle {
margin: -2px 0 9px; margin: 24px;
text-align: left; text-align: center;
font-weight: bold; font-weight: bold;
} }
.boxSubtitle { .boxSubtitle {
text-align: left;
font-weight: normal; font-weight: normal;
} }

View File

@ -4,19 +4,11 @@ const bytes = require('../../utils').bytes;
const fileIcon = require('../fileIcon'); const fileIcon = require('../fileIcon');
module.exports = function(file, index, state, emit, hasPassword) { module.exports = function(file, index, state, emit, hasPassword) {
const transfer = state.transfer;
const transferState = transfer ? transfer.state : null;
const share = state.route.includes('share/');
const complete = share ? 'uploadedFile--completed' : '';
const cancelVisible = const cancelVisible =
state.route === '/' && !state.uploading state.route === '/' && !state.uploading
? 'uploadedFile__cancel--visible' ? 'uploadedFile__cancel--visible'
: ''; : '';
const stampClass =
share || transferState === 'complete' ? 'uploadedFile__stamp--visible' : '';
function cancel(event) { function cancel(event) {
event.preventDefault(); event.preventDefault();
if (state.route === '/') { if (state.route === '/') {
@ -25,8 +17,7 @@ module.exports = function(file, index, state, emit, hasPassword) {
} }
return html` return html`
<li class="uploadedFile ${complete}" id="${file.id}" <li class="uploadedFile" id="${file.id}">
>
${fileIcon(file.name, hasPassword)} ${fileIcon(file.name, hasPassword)}
@ -43,9 +34,6 @@ module.exports = function(file, index, state, emit, hasPassword) {
<span>${bytes(file.size)}</span> <span>${bytes(file.size)}</span>
</p> </p>
</div> </div>
<img src="${assets.get('sent-done.svg')}"
class="uploadedFile__stamp ${stampClass}"/>
</li> </li>
`; `;
}; };

View File

@ -13,10 +13,6 @@
position: relative; position: relative;
} }
.uploadedFile--completed {
background-color: #e8f2fe;
}
.uploadedFile__fileData { .uploadedFile__fileData {
margin: 8px 16px 8px 44px; margin: 8px 16px 8px 44px;
} }

View File

@ -1,7 +1,5 @@
.uploadedFiles { .uploadedFiles {
border: 1px solid rgba(12, 12, 13, 0.1); background: rgba(132, 193, 255, 0.1);
border-radius: 4px;
box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
align-content: center; align-content: center;

View File

@ -1,6 +1,5 @@
.account { .account {
padding: 0; padding: 0;
margin-bottom: var(--grid-basis);
} }
.account__avatar { .account__avatar {
@ -12,9 +11,6 @@
.account_dropdown { .account_dropdown {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
top: 30px;
left: -15px;
min-width: 150px;
list-style-type: none; list-style-type: none;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;

View File

@ -73,6 +73,17 @@ module.exports = function(state, body = '') {
<script defer src="${assets.get('cryptofill.js')}"></script> <script defer src="${assets.get('cryptofill.js')}"></script>
<script defer src="${assets.get('app.js')}"></script> <script defer src="${assets.get('app.js')}"></script>
</head> </head>
<noscript>
<div class="noscript">
<h2>${state.translate('javascriptRequired')}</h2>
<p>
<a class="link" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">
${state.translate('whyJavascript')}
</a>
</p>
<p>${state.translate('enableJavascript')}</p>
</div>
</noscript>
${body} ${body}
${initScript(state)} ${initScript(state)}
</html> </html>