some wip. still broken
This commit is contained in:
Danny Coates
parent
5b939d2c95
commit
2b81ff1fb3
133
app/base.css
133
app/base.css
|
|
@ -31,20 +31,13 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(500px, 1080px);
|
||||
grid-template-rows: 54px 700px 54px;
|
||||
align-content: center;
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
|
||||
'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
|
||||
height: 100vh;
|
||||
background: #f9f9fa;
|
||||
margin: 0;
|
||||
padding: var(--grid-basis);
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
input,
|
||||
|
|
@ -60,12 +53,41 @@ a {
|
|||
}
|
||||
|
||||
.main {
|
||||
flex: 1 1 auto;
|
||||
background: var(--pageBGColor);
|
||||
box-shadow: var(--large-box-shadow);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(400px, 1fr) 1fr;
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
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 {
|
||||
|
|
@ -74,30 +96,6 @@ a {
|
|||
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 {
|
||||
width: 112px;
|
||||
height: 32px;
|
||||
|
|
@ -107,11 +105,10 @@ a {
|
|||
.btn {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
line-height: 1.2;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
padding: 16px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -190,7 +187,9 @@ a {
|
|||
|
||||
.page {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
|
@ -226,13 +225,6 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
.goBackButton {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 18px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--errorColor);
|
||||
font-weight: 600;
|
||||
|
|
@ -261,6 +253,10 @@ a {
|
|||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.noDisplay {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -269,39 +265,34 @@ a {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-device-width: 750px), (max-width: 750px) {
|
||||
.description {
|
||||
margin: 0 auto 25px;
|
||||
@media (max-device-width: 720px), (max-width: 720px) {
|
||||
body {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
box-shadow: none;
|
||||
align-items: center;
|
||||
max-height: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: none;
|
||||
height: 0;
|
||||
.split {
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stripedBox {
|
||||
margin-top: 72px;
|
||||
min-height: 400px;
|
||||
flex: 1;
|
||||
.split__left {
|
||||
border: none;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0 auto 25px;
|
||||
}
|
||||
|
||||
.uploads {
|
||||
flex: none;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-width: 700px), (max-width: 700px) {
|
||||
.stripedBox {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
@import './pages/share/share.css';
|
||||
@import './pages/signin/signin.css';
|
||||
@import './pages/unsupported/unsupported.css';
|
||||
@import './pages/welcome/welcome.css';
|
||||
@import './templates/downloadButton/downloadButton.css';
|
||||
@import './templates/downloadPassword/downloadPassword.css';
|
||||
@import './templates/file/file.css';
|
||||
@import './templates/fileIcon/fileIcon.css';
|
||||
@import './templates/fileList/fileList.css';
|
||||
@import './templates/fileManager/fileManager.css';
|
||||
@import './templates/footer/footer.css';
|
||||
@import './templates/fxPromo/fxPromo.css';
|
||||
@import './templates/header/header.css';
|
||||
|
|
|
|||
|
|
@ -1,14 +1,10 @@
|
|||
const html = require('choo/html');
|
||||
const raw = require('choo/html/raw');
|
||||
const assets = require('../../common/assets');
|
||||
const title = require('../templates/title');
|
||||
|
||||
module.exports = function(state) {
|
||||
return html`
|
||||
<div>
|
||||
<a href="/" class="goBackButton">
|
||||
<img src="${assets.get('back-arrow.svg')}"/>
|
||||
</a>
|
||||
<div class="page">
|
||||
${title(state)}
|
||||
<div class="title">${state.translate('legalHeader')}</div>
|
||||
${raw(
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
const html = require('choo/html');
|
||||
const titleSection = require('../../templates/title');
|
||||
const downloadButton = require('../../templates/downloadButton');
|
||||
const downloadedFiles = require('../../templates/uploadedFileList');
|
||||
const split = require('../split');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const fileInfo = state.fileInfo;
|
||||
|
|
@ -21,18 +21,16 @@ module.exports = function(state, emit) {
|
|||
const bottomLink =
|
||||
state.transfer.state === 'downloading' ? cancelButton : trySendLink;
|
||||
|
||||
return html`
|
||||
<div class="page">
|
||||
${titleSection(state)}
|
||||
|
||||
${downloadedFiles(fileInfo, state, emit)}
|
||||
return split(
|
||||
state,
|
||||
downloadedFiles(fileInfo, state, emit),
|
||||
html`
|
||||
<div class="copySection">
|
||||
<div class="description">${state.translate('downloadMessage2')}</div>
|
||||
${downloadButton(state, emit)}
|
||||
|
||||
${bottomLink}
|
||||
|
||||
</div>
|
||||
`;
|
||||
</div>`
|
||||
);
|
||||
|
||||
function cancel() {
|
||||
if (state.transfer.state === 'downloading') {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
const html = require('choo/html');
|
||||
const raw = require('choo/html/raw');
|
||||
const assets = require('../../../common/assets');
|
||||
const notFound = require('../notFound');
|
||||
const deletePopup = require('../../templates/popup');
|
||||
const uploadedFileList = require('../../templates/uploadedFileList');
|
||||
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) {
|
||||
const file = state.storage.getFileById(state.params.id);
|
||||
|
|
@ -17,16 +17,13 @@ module.exports = function(state, emit) {
|
|||
? ''
|
||||
: 'passwordReminder--hidden';
|
||||
|
||||
return html`
|
||||
<div class="page effect--fadeIn" id="shareWrapper">
|
||||
<a href="/" class="goBackButton">
|
||||
<img src="${assets.get('back-arrow.svg')}"/>
|
||||
</a>
|
||||
${expireInfo(file, state.translate)}
|
||||
|
||||
${uploadedFileList(file, state, emit)}
|
||||
|
||||
return split(
|
||||
state,
|
||||
uploadedFileList(file, state, emit),
|
||||
html`
|
||||
<div class="copySection">
|
||||
<div class="sharePage__copyText">
|
||||
${expireInfo(file, state.translate)}
|
||||
${state.translate('copyUrlLabel')}
|
||||
<div class="sharePage__passwordReminder ${passwordReminderClass}">(don't forget the password too)</div>
|
||||
</div>
|
||||
|
|
@ -43,7 +40,7 @@ module.exports = function(state, emit) {
|
|||
title="${state.translate('copyUrlFormButton')}"
|
||||
onclick=${copyLink}>${state.translate('copyUrlFormButton')}
|
||||
</button>
|
||||
|
||||
|
||||
<div class="sharePage__deletePopup">
|
||||
${deletePopup(
|
||||
state.translate('deletePopupText'),
|
||||
|
|
@ -58,10 +55,8 @@ module.exports = function(state, emit) {
|
|||
title="${state.translate('deleteFileButton')}"
|
||||
onclick=${showDeletePopup}>${state.translate('deleteFileButton')}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
`;
|
||||
</div>`
|
||||
);
|
||||
|
||||
function showDeletePopup() {
|
||||
const popup = document.querySelector('.popup');
|
||||
|
|
@ -91,7 +86,6 @@ module.exports = function(state, emit) {
|
|||
|
||||
async function deleteFile() {
|
||||
emit('delete', { file, location: 'success-screen' });
|
||||
await fadeOut('#shareWrapper');
|
||||
emit('pushState', '/');
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,17 +22,15 @@
|
|||
}
|
||||
|
||||
.shareTitle {
|
||||
color: var(--textColor);
|
||||
margin: 8px auto 15px;
|
||||
text-align: center;
|
||||
font-family: 'SF Pro Text', sans-serif;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.copySection {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 24px auto;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.copySection__url {
|
||||
|
|
@ -48,6 +46,7 @@
|
|||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.copySection__url:disabled {
|
||||
|
|
|
|||
|
|
@ -7,9 +7,6 @@ const bytes = require('../../utils').bytes;
|
|||
module.exports = function(state, emit) {
|
||||
return html`
|
||||
<div class="page signInPage">
|
||||
<a href="/" class="goBackButton">
|
||||
<img src="${assets.get('back-arrow.svg')}"/>
|
||||
</a>
|
||||
${title(state)}
|
||||
<div class="signIn__info flexible">
|
||||
${state.translate('accountBenefitTitle')}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
};
|
||||
|
|
@ -1,163 +1,6 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
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');
|
||||
const fileManager = require('../../templates/fileManager');
|
||||
const split = require('../split');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
// the page flickers if both the server and browser set 'effect--fadeIn'
|
||||
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
|
||||
});
|
||||
}
|
||||
}
|
||||
return split(state, fileManager(state, emit));
|
||||
};
|
||||
|
|
|
|||
|
|
@ -31,17 +31,6 @@ module.exports = function() {
|
|||
${banner(state, emit)}
|
||||
${header(state, emit)}
|
||||
<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)}
|
||||
</main>
|
||||
${footer(state)}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
pointer-events: none;
|
||||
margin: 8px;
|
||||
color: #fff;
|
||||
background-image: url('../assets/red_file.svg');
|
||||
background-image: url('../assets/blue_file.svg');
|
||||
width: 22px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
.fileManager {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.uploadArea {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
border: 2px dashed rgba(12, 12, 13, 0.2);
|
||||
margin: 0 0 10px;
|
||||
height: 400px;
|
||||
overflow: scroll;
|
||||
transition: transform 150ms;
|
||||
flex: 1;
|
||||
min-height: 90px;
|
||||
}
|
||||
|
||||
.uploadArea__msg {
|
||||
|
|
@ -70,6 +74,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
flex: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
z-index: 1;
|
||||
|
|
@ -79,6 +84,7 @@
|
|||
text-align: left;
|
||||
font-size: 13px;
|
||||
color: var(--lightTextColor);
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.uploadOptions--faded {
|
||||
|
|
@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,14 +1,11 @@
|
|||
.footer {
|
||||
margin: 0 auto;
|
||||
flex: none;
|
||||
margin: 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-top: var(--grid-basis);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.legalSection {
|
||||
|
|
@ -33,19 +30,13 @@
|
|||
margin: 0 0 -5px calc(var(--grid-basis) * 2);
|
||||
}
|
||||
|
||||
.dropDownArrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown__only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-device-width: 750px), (max-width: 750px) {
|
||||
@media (max-device-width: 720px), (max-width: 720px) {
|
||||
.footer {
|
||||
align-items: flex-end;
|
||||
margin: 0;
|
||||
min-width: 455px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.footer_hiddenIcon {
|
||||
|
|
@ -56,20 +47,9 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.dropDownArrow {
|
||||
display: initial;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.legalSection {
|
||||
flex: 0;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(12, 12, 13, 0.1);
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.legalSection__link {
|
||||
|
|
@ -93,8 +73,4 @@
|
|||
color: var(--primaryControlFGColor);
|
||||
background-color: var(--primaryControlBGColor);
|
||||
}
|
||||
|
||||
.footer__noDisplay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,18 +3,11 @@ const assets = require('../../../common/assets');
|
|||
|
||||
module.exports = function(state) {
|
||||
const footer = html`<footer class="footer">
|
||||
<div class="legalSection"
|
||||
onmouseover=${showDropDown}
|
||||
onmouseout=${hideDropDown}>
|
||||
|
||||
<div class="legalSection__menu">
|
||||
<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>
|
||||
|
||||
<div class="legalSection">
|
||||
<a class="legalSection__link"
|
||||
href="https://www.mozilla.org/about/legal">
|
||||
${state.translate('footerLinkLegal')}
|
||||
</a>
|
||||
<a
|
||||
href="https://testpilot.firefox.com/about"
|
||||
class="legalSection__link footer__dropdown footer__noDisplay">
|
||||
|
|
@ -71,18 +64,4 @@ module.exports = function(state) {
|
|||
return target && target.nodeName && target.nodeName === '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');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,10 +10,6 @@
|
|||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fxPromo > div {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,27 @@
|
|||
.header {
|
||||
align-items: flex-end;
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: calc(var(--grid-basis) * 4);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background-color: white;
|
||||
box-shadow: 0 -1px 0 0 #d7d7db7f, 0 2px 6px 0 #0000001e;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header__controls {
|
||||
justify-self: end;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
background-color: #979797;
|
||||
background-image: url('../assets/feedback.svg');
|
||||
|
|
@ -26,6 +37,4 @@
|
|||
text-indent: 2px;
|
||||
transition: all 250ms ease-in-out;
|
||||
white-space: nowrap;
|
||||
margin-left: calc(var(--grid-basis) * 2);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,14 +9,16 @@ module.exports = function(state, emit) {
|
|||
|
||||
const header = html`
|
||||
<header class="header">
|
||||
<h1>Firefox Send</h1>
|
||||
${userAccount(state, emit)}
|
||||
<a href="${feedbackUrl}"
|
||||
rel="noreferrer noopener"
|
||||
class="feedback"
|
||||
alt="Feedback"
|
||||
target="_blank">${state.translate('siteFeedback')}
|
||||
</a>
|
||||
<h1><a href="/">Firefox Send</a></h1>
|
||||
<div class="header__controls">
|
||||
${userAccount(state, emit)}
|
||||
<a href="${feedbackUrl}"
|
||||
rel="noreferrer noopener"
|
||||
class="feedback"
|
||||
alt="Feedback"
|
||||
target="_blank">${state.translate('siteFeedback')}
|
||||
</a>
|
||||
</div>
|
||||
</header>`;
|
||||
// HACK
|
||||
// We only want to render this once because we
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const passwordInput = require('../passwordInput');
|
|||
|
||||
module.exports = function(state) {
|
||||
const checked = state.password ? 'checked' : '';
|
||||
const label = state.password ? 'addPasswordLabel' : 'addPasswordMessage';
|
||||
const label = state.password ? '' : 'addPasswordMessage';
|
||||
|
||||
return html`
|
||||
<div class="setPasswordSection">
|
||||
|
|
@ -15,7 +15,7 @@ module.exports = function(state) {
|
|||
autocomplete="off"
|
||||
onchange=${togglePasswordInput}/>
|
||||
<label class="checkbox__label" for="add-password">
|
||||
${state.translate(label)}
|
||||
${label && state.translate(label)}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -32,7 +32,7 @@ module.exports = function(state) {
|
|||
|
||||
const label = document.querySelector('.checkbox__label');
|
||||
if (boxChecked) {
|
||||
label.innerHTML = state.translate('addPasswordLabel');
|
||||
label.innerHTML = ''; //state.translate('addPasswordLabel');
|
||||
unlockInput.focus();
|
||||
} else {
|
||||
label.innerHTML = state.translate('addPasswordMessage');
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
}
|
||||
|
||||
.checkbox {
|
||||
flex: auto;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ module.exports = function(state) {
|
|||
if (state.user.loggedIn || !state.capabilities.account) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return html`
|
||||
<a href="/signin" class="signupPromo">
|
||||
<div class="signupPromo__title">${state.translate('signInPromoText')}</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@
|
|||
text-align: center;
|
||||
justify-content: center;
|
||||
transition: background 100ms;
|
||||
margin: 24px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.signupPromo:hover {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
.boxTitle {
|
||||
margin: -2px 0 9px;
|
||||
text-align: left;
|
||||
margin: 24px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.boxSubtitle {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,19 +4,11 @@ const bytes = require('../../utils').bytes;
|
|||
const fileIcon = require('../fileIcon');
|
||||
|
||||
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 =
|
||||
state.route === '/' && !state.uploading
|
||||
? 'uploadedFile__cancel--visible'
|
||||
: '';
|
||||
|
||||
const stampClass =
|
||||
share || transferState === 'complete' ? 'uploadedFile__stamp--visible' : '';
|
||||
|
||||
function cancel(event) {
|
||||
event.preventDefault();
|
||||
if (state.route === '/') {
|
||||
|
|
@ -25,8 +17,7 @@ module.exports = function(file, index, state, emit, hasPassword) {
|
|||
}
|
||||
|
||||
return html`
|
||||
<li class="uploadedFile ${complete}" id="${file.id}"
|
||||
>
|
||||
<li class="uploadedFile" id="${file.id}">
|
||||
|
||||
${fileIcon(file.name, hasPassword)}
|
||||
|
||||
|
|
@ -43,9 +34,6 @@ module.exports = function(file, index, state, emit, hasPassword) {
|
|||
<span>${bytes(file.size)}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img src="${assets.get('sent-done.svg')}"
|
||||
class="uploadedFile__stamp ${stampClass}"/>
|
||||
</li>
|
||||
`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,10 +13,6 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.uploadedFile--completed {
|
||||
background-color: #e8f2fe;
|
||||
}
|
||||
|
||||
.uploadedFile__fileData {
|
||||
margin: 8px 16px 8px 44px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
.uploadedFiles {
|
||||
border: 1px solid rgba(12, 12, 13, 0.1);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(132, 193, 255, 0.1);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-content: center;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.account {
|
||||
padding: 0;
|
||||
margin-bottom: var(--grid-basis);
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
|
|
@ -12,9 +11,6 @@
|
|||
.account_dropdown {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: -15px;
|
||||
min-width: 150px;
|
||||
list-style-type: none;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
|
|
|
|||
|
|
@ -73,6 +73,17 @@ module.exports = function(state, body = '') {
|
|||
<script defer src="${assets.get('cryptofill.js')}"></script>
|
||||
<script defer src="${assets.get('app.js')}"></script>
|
||||
</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}
|
||||
${initScript(state)}
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue