some wip. still broken
This commit is contained in:
Danny Coates
parent
5b939d2c95
commit
2b81ff1fb3
28 changed files with 305 additions and 391 deletions
|
|
@ -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')}
|
||||
|
|
|
|||
18
app/pages/split.js
Normal file
18
app/pages/split.js
Normal 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>
|
||||
`;
|
||||
};
|
||||
|
|
@ -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));
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,95 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
.uploadArea__msg {
|
||||
font-size: 15px;
|
||||
color: var(--lightTextColor);
|
||||
margin: 12px 0 0;
|
||||
font-family: 'SF Pro Text', sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.uploadArea__clickMsg {
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
color: var(--lightTextColor);
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.uploadArea--dragging {
|
||||
border: 1px dashed rgba(12, 12, 13, 0.4);
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.uploadArea--faded * {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.uploadArea--noEvents,
|
||||
.uploadArea--noEvents * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn--file {
|
||||
background-color: #737373;
|
||||
}
|
||||
|
||||
.btn--file:hover {
|
||||
background-color: #636363;
|
||||
}
|
||||
|
||||
.btn--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inputFile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inputFile--focused + .btn--file {
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
outline: 1px dotted #000;
|
||||
outline: -webkit-focus-ring-color auto 5px;
|
||||
}
|
||||
|
||||
.uploadArea > .uploadedFiles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.uploadOptions {
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
||||
.uploadOptions--faded {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.uploadCancel {
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
|
||||
.uploadCancel:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue