removed old ui
This commit is contained in:
Danny Coates
parent
f0cfc19f8c
commit
7838ad586d
309
app/base.css
309
app/base.css
|
|
@ -1,309 +0,0 @@
|
|||
:root {
|
||||
--pageBGColor: #fff;
|
||||
--lightControlBGColor: #e6e6e6;
|
||||
--primaryControlBGColor: #0a84ff;
|
||||
--primaryControlFGColor: #fff;
|
||||
--primaryControlHoverColor: #0473e2;
|
||||
--inputTextColor: #000;
|
||||
--errorColor: #d70022;
|
||||
--linkColor: #0094fb;
|
||||
--textColor: #0c0c0d;
|
||||
--lightBorderColor: rgba(12, 12, 12, 0.2);
|
||||
--lightTextColor: #737373;
|
||||
--successControlBGColor: #12bc00;
|
||||
--successControlFGColor: #fff;
|
||||
--large-box-shadow: 0 4px 16px rgba(12, 12, 13, 0.1);
|
||||
--edge-size: 96px;
|
||||
--grid-basis: 12px;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: Futura, -apple-system, BlinkMacSystemFont, 'SF Pro Text',
|
||||
'segoe ui', 'helvetica neue', helvetica, ubuntu, roboto, noto, arial,
|
||||
sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
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;
|
||||
margin: 0;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1 1 auto;
|
||||
background: var(--pageBGColor);
|
||||
box-shadow: var(--large-box-shadow);
|
||||
width: 90%;
|
||||
max-width: 960px;
|
||||
min-height: 550px;
|
||||
max-height: 600px;
|
||||
align-self: center;
|
||||
margin: auto 0;
|
||||
display: grid;
|
||||
grid-template-columns: 70px 360px 1fr;
|
||||
grid-template-areas: 'nav files content';
|
||||
}
|
||||
|
||||
.split {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.split__left {
|
||||
height: 100%;
|
||||
border-right: 1px solid #d7d7db;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
grid-area: files;
|
||||
}
|
||||
|
||||
.split__right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
.wide {
|
||||
grid-area: files-start / files-start / content-end / content-end;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 12px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.noscript {
|
||||
text-align: center;
|
||||
border: 3px solid var(--errorColor);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.footer__mozLogo {
|
||||
width: 112px;
|
||||
height: 32px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
line-height: 1.2;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
letter-spacing: 0.56px;
|
||||
color: white;
|
||||
background: black;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
.btn--stripes {
|
||||
background: repeating-linear-gradient(
|
||||
-65deg,
|
||||
#7c7c7c 0,
|
||||
#7c7c7c 17px,
|
||||
#737373 17px,
|
||||
#737373 30px
|
||||
);
|
||||
background-size: 300% 300%;
|
||||
animation: barberpole 12s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes barberpole {
|
||||
0% {
|
||||
background-position: 100% 0%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--cancel {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
background: none;
|
||||
color: var(--errorColor);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: 1px solid var(--lightBorderColor);
|
||||
font-size: 20px;
|
||||
color: var(--inputTextColor);
|
||||
font-family: 'SF Pro Text', sans-serif;
|
||||
font-weight: 300;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.input--error {
|
||||
border-color: var(--errorColor);
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--linkColor);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link:focus,
|
||||
.link:active,
|
||||
.link:hover {
|
||||
color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
.link--action {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page {
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.effect--fadeOut {
|
||||
opacity: 0;
|
||||
animation: fadeout 200ms linear;
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.effect--fadeIn {
|
||||
opacity: 1;
|
||||
animation: fadein 200ms linear;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--errorColor);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--lightTextColor);
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
margin: 20px auto;
|
||||
max-width: 520px;
|
||||
font-family: 'SF Pro Text', sans-serif;
|
||||
font-weight: 700;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
margin: 14px auto;
|
||||
color: var(--lightTextColor);
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.noDisplay {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.flexible {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-device-width: 720px), (max-width: 720px) {
|
||||
body {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.main {
|
||||
box-shadow: none;
|
||||
align-items: center;
|
||||
max-height: none;
|
||||
width: 100%;
|
||||
grid-template-columns: none;
|
||||
grid-template-rows: 90px minmax(160px, 30vh) minmax(240px, 30vh) 70px;
|
||||
grid-template-areas:
|
||||
'promo'
|
||||
'files'
|
||||
'content'
|
||||
'nav';
|
||||
}
|
||||
|
||||
.split__left {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0 auto 25px;
|
||||
}
|
||||
|
||||
.uploads {
|
||||
flex: none;
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils';
|
|||
import * as metrics from './metrics';
|
||||
import Archive from './archive';
|
||||
import { bytes } from './utils';
|
||||
import okDialog from './templates/okDialog';
|
||||
import okDialog from './ui/okDialog';
|
||||
|
||||
export default function(state, emitter) {
|
||||
let lastRender = 0;
|
||||
|
|
@ -108,6 +108,9 @@ export default function(state, emitter) {
|
|||
count: LIMITS.MAX_FILES_PER_ARCHIVE
|
||||
})
|
||||
);
|
||||
if (state.archive.numFiles === 0) {
|
||||
state.archive = null;
|
||||
}
|
||||
}
|
||||
render();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function() {
|
||||
return html`<main class="main"></main>`;
|
||||
};
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
const title = require('../../templates/title');
|
||||
|
||||
module.exports = function(state) {
|
||||
return html`
|
||||
<div class="page">
|
||||
|
||||
${title(state)}
|
||||
|
||||
<div class="error">${state.translate('errorPageHeader')}</div>
|
||||
<img class="flexible" src="${assets.get('illustration_error.svg')}"/>
|
||||
|
||||
<div class="description">
|
||||
${state.translate('uploadPageExplainer')}
|
||||
</div>
|
||||
<a class="link link--action" href="/">
|
||||
${state.translate('sendYourFilesLink')}
|
||||
</a>
|
||||
|
||||
</div>`;
|
||||
};
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const raw = require('choo/html/raw');
|
||||
const title = require('../templates/title');
|
||||
|
||||
module.exports = function(state) {
|
||||
return html`
|
||||
<main class="main page">
|
||||
${title(state)}
|
||||
<div class="title">${state.translate('legalHeader')}</div>
|
||||
${raw(
|
||||
replaceLinks(state.translate('legalNoticeTestPilot'), [
|
||||
'https://testpilot.firefox.com/terms',
|
||||
'https://testpilot.firefox.com/privacy',
|
||||
'https://testpilot.firefox.com/experiments/send'
|
||||
])
|
||||
)}
|
||||
${raw(
|
||||
replaceLinks(state.translate('legalNoticeMozilla'), [
|
||||
'https://www.mozilla.org/privacy/websites/',
|
||||
'https://www.mozilla.org/about/legal/terms/mozilla/'
|
||||
])
|
||||
)}
|
||||
</main>
|
||||
`;
|
||||
};
|
||||
|
||||
function replaceLinks(str, urls) {
|
||||
let i = 0;
|
||||
const s = str.replace(
|
||||
/<a>([^<]+)<\/a>/g,
|
||||
(m, v) => `<a href="${urls[i++]}">${v}</a>`
|
||||
);
|
||||
return `<div class="description">${s}</div>`;
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
const title = require('../../templates/title');
|
||||
|
||||
module.exports = function(state) {
|
||||
return html`
|
||||
<main class="main page">
|
||||
${title(state)}
|
||||
<div class="error">${state.translate('expiredPageHeader')}</div>
|
||||
<img src="${assets.get('illustration_expired.svg')}" id="expired-img">
|
||||
<div class="description">
|
||||
${state.translate('uploadPageExplainer')}
|
||||
</div>
|
||||
<a class="link link--action" href="/">
|
||||
${state.translate('sendYourFilesLink')}
|
||||
</a>
|
||||
</main>`;
|
||||
};
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const titleSection = require('../../templates/title');
|
||||
const downloadPassword = require('../../templates/downloadPassword');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
return html`
|
||||
<main class="main page">
|
||||
${titleSection(state)}
|
||||
|
||||
<div class="description">${state.translate('downloadMessage2')}</div>
|
||||
${downloadPassword(state, emit)}
|
||||
|
||||
<a class="link link--action" href="/">
|
||||
${state.translate('sendYourFilesLink')}
|
||||
</a>
|
||||
|
||||
</main>
|
||||
`;
|
||||
};
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const downloadButton = require('../../templates/downloadButton');
|
||||
const downloadedFiles = require('../../templates/uploadedFileList');
|
||||
const split = require('../split');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const fileInfo = state.fileInfo;
|
||||
|
||||
const trySendLink = html`
|
||||
<a class="link link--action" href="/">
|
||||
${state.translate('sendYourFilesLink')}
|
||||
</a>`;
|
||||
const cancelButton = html`
|
||||
<button class="btn--cancel"
|
||||
onclick=${cancel}
|
||||
>
|
||||
${state.translate('downloadCancel')}
|
||||
</button>
|
||||
`;
|
||||
|
||||
const bottomLink =
|
||||
state.transfer.state === 'downloading' ? cancelButton : trySendLink;
|
||||
|
||||
return split(
|
||||
state,
|
||||
emit,
|
||||
downloadedFiles(fileInfo, state, emit),
|
||||
html`
|
||||
<div class="copySection">
|
||||
<div class="description">${state.translate('downloadMessage2')}</div>
|
||||
${downloadButton(state, emit)}
|
||||
${bottomLink}
|
||||
</div>`
|
||||
);
|
||||
|
||||
function cancel() {
|
||||
if (state.transfer.state === 'downloading') {
|
||||
emit('cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const raw = require('choo/html/raw');
|
||||
const notFound = require('../notFound');
|
||||
const deletePopup = require('../../templates/popup');
|
||||
const uploadedFileList = require('../../templates/uploadedFileList');
|
||||
const timeLimitText = require('../../templates/timeLimitText');
|
||||
const { allowedCopy, delay } = require('../../utils');
|
||||
const split = require('../split');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const file = state.storage.getFileById(state.params.id);
|
||||
if (!file) {
|
||||
return notFound(state);
|
||||
}
|
||||
|
||||
const passwordReminderClass = file._hasPassword
|
||||
? ''
|
||||
: 'passwordReminder--hidden';
|
||||
|
||||
return split(
|
||||
state,
|
||||
emit,
|
||||
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>
|
||||
|
||||
<input
|
||||
id="fileUrl"
|
||||
class="copySection__url"
|
||||
type="url"
|
||||
value="${file.url}"
|
||||
readonly="true"/>
|
||||
|
||||
<button id="copyBtn"
|
||||
class="btn copyBtn"
|
||||
title="${state.translate('copyUrlFormButton')}"
|
||||
onclick=${copyLink}>${state.translate('copyUrlFormButton')}
|
||||
</button>
|
||||
|
||||
<div class="sharePage__deletePopup">
|
||||
${deletePopup(
|
||||
state.translate('deletePopupText'),
|
||||
state.translate('deletePopupYes'),
|
||||
state.translate('deletePopupCancel'),
|
||||
deleteFile
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn--cancel btn--delete"
|
||||
title="${state.translate('deleteFileButton')}"
|
||||
onclick=${showDeletePopup}>${state.translate('deleteFileButton')}
|
||||
</button>
|
||||
</div>`
|
||||
);
|
||||
|
||||
function showDeletePopup() {
|
||||
const popup = document.querySelector('.popup');
|
||||
popup.classList.add('popup--show');
|
||||
popup.focus();
|
||||
}
|
||||
|
||||
async function copyLink() {
|
||||
if (allowedCopy()) {
|
||||
emit('copy', { url: file.url, location: 'success-screen' });
|
||||
const input = document.getElementById('fileUrl');
|
||||
input.disabled = true;
|
||||
const copyBtn = document.getElementById('copyBtn');
|
||||
copyBtn.disabled = true;
|
||||
copyBtn.classList.add('copyBtn--copied');
|
||||
copyBtn.replaceChild(
|
||||
html`<label>${state.translate('copiedUrl')}</label>`,
|
||||
copyBtn.firstChild
|
||||
);
|
||||
await delay(2000);
|
||||
input.disabled = false;
|
||||
copyBtn.disabled = false;
|
||||
copyBtn.classList.remove('copyBtn--copied');
|
||||
copyBtn.textContent = state.translate('copyUrlFormButton');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteFile() {
|
||||
emit('delete', { file, location: 'success-screen' });
|
||||
emit('pushState', '/');
|
||||
}
|
||||
};
|
||||
|
||||
function expireInfo(file, translate) {
|
||||
const el = html`<div class="shareTitle">
|
||||
${raw(
|
||||
translate('expireInfo', {
|
||||
downloadCount: translate('downloadCount', { num: file.dlimit }),
|
||||
timespan: timeLimitText(translate, file.timeLimit)
|
||||
})
|
||||
)}
|
||||
</div>`;
|
||||
|
||||
return el;
|
||||
}
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
.sharePage__copyText {
|
||||
margin: 8px 0 8px;
|
||||
word-wrap: break-word;
|
||||
font-size: 15px;
|
||||
color: var(--lightTextColor);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sharePage__passwordReminder {
|
||||
font-size: 11px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.passwordReminder--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sharePage__deletePopup {
|
||||
position: relative;
|
||||
margin-top: -70px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.shareTitle {
|
||||
margin: 8px auto 15px;
|
||||
}
|
||||
|
||||
.copySection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 24px auto;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.copySection__url {
|
||||
box-sizing: border-box;
|
||||
height: 30px;
|
||||
border: 1px solid var(--lightBorderColor);
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
color: var(--primaryControlBGColor);
|
||||
margin: 0 0 6px;
|
||||
padding: 6px;
|
||||
font-family: 'SF Pro Text', sans-serif;
|
||||
letter-spacing: 0;
|
||||
line-height: 18px;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.copySection__url:disabled {
|
||||
background: var(--successControlFGColor);
|
||||
}
|
||||
|
||||
.input--copied {
|
||||
border-color: var(--successControlBGColor);
|
||||
}
|
||||
|
||||
.copyBtn--copied,
|
||||
.copyBtn--copied:hover {
|
||||
background: var(--successControlBGColor);
|
||||
color: var(--successControlFGColor);
|
||||
}
|
||||
|
||||
.btn--delete {
|
||||
border: none;
|
||||
align-self: center;
|
||||
width: 176px;
|
||||
background: #fff;
|
||||
margin: 10px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: var(--errorColor);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn--delete:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
/* globals LIMITS */
|
||||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
const title = require('../../templates/title');
|
||||
const bytes = require('../../utils').bytes;
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
return html`
|
||||
<main class="main page signInPage">
|
||||
${title(state)}
|
||||
<div class="signIn__info flexible">
|
||||
${state.translate('accountBenefitTitle')}
|
||||
<ul>
|
||||
<li>${state.translate('accountBenefitLargeFiles', {
|
||||
size: bytes(LIMITS.MAX_FILE_SIZE)
|
||||
})}</li>
|
||||
<li>${state.translate('accountBenefitExpiry')}</li>
|
||||
<li>${state.translate('accountBenefitSync')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="signIn__form flexible">
|
||||
<img class="signIn__firefoxLogo"
|
||||
src="${assets.get('firefox_logo-only.svg')}"
|
||||
width=56 height=56
|
||||
alt="Firefox logo"/>
|
||||
<div class="signIn__emailLabel">
|
||||
${state.translate('signInEmailEnter')}
|
||||
</div>
|
||||
${state.translate('signInContinueMessage')}
|
||||
<form
|
||||
onsubmit=${submitEmail}
|
||||
data-no-csrf>
|
||||
<input
|
||||
id="email-input"
|
||||
type="text"
|
||||
class="signIn__emailInput"
|
||||
placeholder=${state.translate('emailEntryPlaceholder')}/>
|
||||
<input
|
||||
class='noDisplay'
|
||||
id="email-submit"
|
||||
type="submit"/>
|
||||
</form>
|
||||
</div>
|
||||
<label class="btn" for="email-submit">
|
||||
${state.translate('signInContinueButton')}
|
||||
</label>
|
||||
</main>
|
||||
`;
|
||||
|
||||
function submitEmail(event) {
|
||||
event.preventDefault();
|
||||
const el = document.getElementById('email-input');
|
||||
const email = el.value;
|
||||
if (email) {
|
||||
// just check if it's the right shape
|
||||
const a = email.split('@');
|
||||
if (a.length === 2 && a.every(s => s.length > 0)) {
|
||||
return emit('login', email);
|
||||
}
|
||||
}
|
||||
el.value = '';
|
||||
}
|
||||
};
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
.signInPage {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
||||
.signIn__info {
|
||||
width: 308px;
|
||||
margin: 12px auto 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.signIn__firefoxLogo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.signIn__emailLabel {
|
||||
font-size: 22px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.signIn__emailInput {
|
||||
box-sizing: border-box;
|
||||
width: 310px;
|
||||
height: 40px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
margin: 8px 0;
|
||||
padding: 0 8px;
|
||||
font-size: 18px;
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const title = require('../templates/title');
|
||||
const signupPromo = require('../templates/signupPromo');
|
||||
const controlArea = require('../templates/controlArea');
|
||||
|
||||
module.exports = function(state, emit, a, b) {
|
||||
return html`
|
||||
<main class="main">
|
||||
${controlArea(state, emit)}
|
||||
<div class="split__left">
|
||||
${title(state)}
|
||||
${a}
|
||||
</div>
|
||||
<div class="split__right">
|
||||
${b}
|
||||
</div>
|
||||
${signupPromo(state)}
|
||||
</main>
|
||||
`;
|
||||
};
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
const title = require('../../templates/title');
|
||||
|
||||
module.exports = function(state) {
|
||||
let strings = {};
|
||||
let why = '';
|
||||
let url = '';
|
||||
let buttonAction = '';
|
||||
|
||||
if (state.params.reason !== 'outdated') {
|
||||
strings = unsupportedStrings(state);
|
||||
why = html`
|
||||
<div class="description">
|
||||
<a href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported">
|
||||
${state.translate('notSupportedLink')}
|
||||
</a>
|
||||
</div>`;
|
||||
url =
|
||||
'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com';
|
||||
buttonAction = html`
|
||||
<div class="firefoxDownload__action">
|
||||
Firefox<br><span class="firefoxDownload__text">${strings.button}</span>
|
||||
</div>`;
|
||||
} else {
|
||||
strings = outdatedStrings(state);
|
||||
url = 'https://support.mozilla.org/kb/update-firefox-latest-version';
|
||||
buttonAction = html`
|
||||
<div class="firefoxDownload__action">
|
||||
${strings.button}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<main class="main page unsupportedPage">
|
||||
${title(state)}
|
||||
<div class="error unsupportedPage__error">${strings.header}</div>
|
||||
<div class="description flexible">
|
||||
${strings.description}
|
||||
${why}
|
||||
</div>
|
||||
|
||||
<div class="flexible firefoxDownload">
|
||||
<a href="${url}" class="firefoxDownload__button">
|
||||
<img
|
||||
src="${assets.get('firefox_logo-only.svg')}"
|
||||
class="firefoxDownload__logo"
|
||||
alt="Firefox"/>
|
||||
${buttonAction}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="unsupportedPage__info">
|
||||
${strings.explainer}
|
||||
</div>
|
||||
</main>`;
|
||||
};
|
||||
|
||||
function outdatedStrings(state) {
|
||||
return {
|
||||
header: state.translate('notSupportedHeader'),
|
||||
description: state.translate('notSupportedOutdatedDetail'),
|
||||
button: state.translate('updateFirefox'),
|
||||
explainer: state.translate('uploadPageExplainer')
|
||||
};
|
||||
}
|
||||
|
||||
function unsupportedStrings(state) {
|
||||
return {
|
||||
header: state.translate('notSupportedHeader'),
|
||||
description: state.translate('notSupportedDetail'),
|
||||
button: state.translate('downloadFirefoxButtonSub'),
|
||||
explainer: state.translate('uploadPageExplainer')
|
||||
};
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
.unsupportedPage {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.unsupportedPage__error {
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
|
||||
.unsupportedPage__info {
|
||||
font-size: 13px;
|
||||
color: var(--lightTextColor);
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
|
||||
.firefoxDownload {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.firefoxDownload__button {
|
||||
margin: 0 auto 20px;
|
||||
height: 70px;
|
||||
width: 250px;
|
||||
background: #12bc00;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
font-family: 'Fira Sans', 'segoe ui', sans-serif;
|
||||
font-weight: 500;
|
||||
color: var(--primaryControlFGColor);
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.firefoxDownload__logo {
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
.firefoxDownload__action {
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.firefoxDownload__text {
|
||||
text-transform: none;
|
||||
font-family: 'Fira Sans', 'segoe ui', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const controlArea = require('../../templates/controlArea');
|
||||
const archiveTile = require('../../templates/archiveTile');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const fileArea = state.storage.files.length
|
||||
? html`<ul class="myUploads">
|
||||
${state.storage.files.map(f => archiveTile(f, state))}
|
||||
</ul>`
|
||||
: html`<div>nothing to see here</div>`;
|
||||
return html`<main class="main">
|
||||
${controlArea(state, emit)}
|
||||
<div class="wide">
|
||||
<h1>${state.translate('myUploads')}</h1>
|
||||
${fileArea}
|
||||
</div>
|
||||
</main>`;
|
||||
};
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.myUploads {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-gap: 12px;
|
||||
grid-template-columns: repeat(auto-fit, 150px);
|
||||
grid-auto-columns: 150px;
|
||||
grid-auto-rows: 160px;
|
||||
list-style-type: none;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
const fileManager = require('../../templates/fileManager');
|
||||
const split = require('../split');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
return split(state, emit, fileManager(state, emit));
|
||||
};
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
.archiveTile {
|
||||
border: 1px solid #d7d7db;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.archiveTile:hover {
|
||||
border: 1px solid lightblue;
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(archive) {
|
||||
return html`
|
||||
<li id="${archive.id}" class="archiveTile">
|
||||
<a href="/share/${archive.id}">${archive.name}</a>
|
||||
</li>`;
|
||||
};
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.controlArea {
|
||||
border-right: 1px solid #d7d7db;
|
||||
}
|
||||
|
||||
.controlArea > ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.controlArea > ul > li {
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
@media (max-device-width: 720px), (max-width: 720px) {
|
||||
.controlArea > ul {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
const userAccount = require('../userAccount');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const account = state.capabilities.account
|
||||
? html`<li>
|
||||
${userAccount(state, emit)}
|
||||
</li>`
|
||||
: null;
|
||||
return html`
|
||||
<nav class="controlArea">
|
||||
<ul>
|
||||
${account}
|
||||
<li>
|
||||
<a href="/">
|
||||
<img src="${assets.get('addfile.svg')}"/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/uploads">
|
||||
<img src="${assets.get('blue_file.svg')}"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
`;
|
||||
};
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
.btn--download {
|
||||
margin: 0 0 13px;
|
||||
}
|
||||
|
||||
.btn--complete,
|
||||
.btn--complete:hover {
|
||||
background-color: var(--successControlBGColor);
|
||||
}
|
||||
|
||||
.btn--blueStripes {
|
||||
background: repeating-linear-gradient(
|
||||
-65deg,
|
||||
#3282f2 0,
|
||||
#3282f2 17px,
|
||||
#3c87eb 17px,
|
||||
#3c87eb 30px
|
||||
);
|
||||
background-size: 300% 300%;
|
||||
animation: barberpole 12s linear infinite;
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const percent = require('../../utils').percent;
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const downloadState = state.transfer.state;
|
||||
const progress = percent(state.transfer.progressRatio);
|
||||
|
||||
let btnText = '';
|
||||
let btnClass = '';
|
||||
|
||||
if (downloadState === 'complete') {
|
||||
btnText = state.translate('downloadFinish');
|
||||
btnClass = 'btn--complete';
|
||||
} else if (downloadState === 'decrypting') {
|
||||
btnText = state.translate('decryptingFile');
|
||||
btnClass = 'btn--blueStripes';
|
||||
} else if (downloadState === 'downloading') {
|
||||
btnText = state.translate('downloadProgressButton', { progress });
|
||||
btnClass = 'btn--blueStripes';
|
||||
} else {
|
||||
btnText = state.translate('downloadButtonLabel');
|
||||
}
|
||||
|
||||
return html`
|
||||
<button class="btn btn--download ${btnClass}"
|
||||
onclick=${download}>
|
||||
${btnText}
|
||||
</button>`;
|
||||
|
||||
function download(event) {
|
||||
event.preventDefault();
|
||||
event.target.disabled = true;
|
||||
if (downloadState === 'ready') {
|
||||
emit('download', state.fileInfo);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
.passwordSection {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.passwordForm {
|
||||
margin: 13px;
|
||||
}
|
||||
|
||||
.passwordForm__input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.unlockBtn {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.unlockBtn--error,
|
||||
.unlockBtn--error:hover {
|
||||
background-color: var(--errorColor);
|
||||
}
|
||||
|
||||
.passwordForm__error {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const fileInfo = state.fileInfo;
|
||||
const invalid = fileInfo.password === null;
|
||||
|
||||
const visible = invalid ? 'visible' : '';
|
||||
const invalidBtn = invalid ? 'unlockBtn--error' : '';
|
||||
|
||||
const div = html`
|
||||
<div class="passwordSection">
|
||||
|
||||
<label
|
||||
class="error passwordForm__error ${visible}"
|
||||
for="password-input">
|
||||
${state.translate('passwordTryAgain')}
|
||||
</label>
|
||||
|
||||
<form class="passwordForm" onsubmit=${checkPassword} data-no-csrf>
|
||||
<input id="password-input"
|
||||
class="input passwordForm__input"
|
||||
maxlength="64"
|
||||
autocomplete="off"
|
||||
placeholder="${state.translate('unlockInputPlaceholder')}"
|
||||
oninput=${inputChanged}
|
||||
type="password" />
|
||||
|
||||
<input type="submit"
|
||||
id="password-btn"
|
||||
class="btn unlockBtn ${invalidBtn}"
|
||||
value="${state.translate('unlockInputLabel')}"/>
|
||||
|
||||
</form>
|
||||
</div>`;
|
||||
|
||||
if (!(div instanceof String)) {
|
||||
setTimeout(() => document.getElementById('password-input').focus());
|
||||
}
|
||||
|
||||
function inputChanged() {
|
||||
const input = document.querySelector('.passwordForm__error');
|
||||
input.classList.remove('visible');
|
||||
const btn = document.getElementById('password-btn');
|
||||
btn.classList.remove('unlockBtn--error');
|
||||
}
|
||||
|
||||
function checkPassword(event) {
|
||||
event.preventDefault();
|
||||
const password = document.getElementById('password-input').value;
|
||||
if (password.length > 0) {
|
||||
document.getElementById('password-btn').disabled = true;
|
||||
state.fileInfo.url = window.location.href;
|
||||
state.fileInfo.password = password;
|
||||
emit('getMetadata');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return div;
|
||||
};
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
/* globals DEFAULTS */
|
||||
const html = require('choo/html');
|
||||
const raw = require('choo/html/raw');
|
||||
const selectbox = require('../selectbox');
|
||||
const timeLimitText = require('../timeLimitText');
|
||||
const signupDialog = require('../signupDialog');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const el = html`<div> ${raw(
|
||||
state.translate('frontPageExpireInfo', {
|
||||
downloadCount: '<select id=dlCount></select>',
|
||||
timespan: '<select id=timespan></select>'
|
||||
})
|
||||
)}
|
||||
</div>`;
|
||||
if (el.__encoded) {
|
||||
// we're rendering on the server
|
||||
return el;
|
||||
}
|
||||
|
||||
const counts = DEFAULTS.DOWNLOAD_COUNTS.filter(
|
||||
i => state.capabilities.account || i <= state.user.maxDownloads
|
||||
);
|
||||
|
||||
const dlCountSelect = el.querySelector('#dlCount');
|
||||
el.replaceChild(
|
||||
selectbox(
|
||||
state.downloadCount || 1,
|
||||
counts,
|
||||
num => state.translate('downloadCount', { num }),
|
||||
value => {
|
||||
const max = state.user.maxDownloads;
|
||||
if (value > max) {
|
||||
state.modal = signupDialog();
|
||||
value = max;
|
||||
}
|
||||
state.downloadCount = value;
|
||||
emit('render');
|
||||
}
|
||||
),
|
||||
dlCountSelect
|
||||
);
|
||||
|
||||
const expires = DEFAULTS.EXPIRE_TIMES_SECONDS.filter(
|
||||
i => state.capabilities.account || i <= state.user.maxExpireSeconds
|
||||
);
|
||||
|
||||
const timeSelect = el.querySelector('#timespan');
|
||||
el.replaceChild(
|
||||
selectbox(
|
||||
state.timeLimit || 86400,
|
||||
expires,
|
||||
num => timeLimitText(state.translate, num),
|
||||
value => {
|
||||
const max = state.user.maxExpireSeconds;
|
||||
if (value > max) {
|
||||
state.modal = signupDialog();
|
||||
value = max;
|
||||
}
|
||||
state.timeLimit = value;
|
||||
emit('render');
|
||||
}
|
||||
),
|
||||
timeSelect
|
||||
);
|
||||
|
||||
return el;
|
||||
};
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
.fileToast {
|
||||
flex: none;
|
||||
display: block;
|
||||
margin: 6px 0 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
color: var(--lightTextColor);
|
||||
background-color: var(--pageBGColor);
|
||||
position: relative;
|
||||
border: 3px solid rgba(12, 12, 12, 0.2);
|
||||
background-clip: padding-box;
|
||||
box-sizing: border-box;
|
||||
height: 53px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.fileToast__content {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.fileToast::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
content: '';
|
||||
transition: all 0.25s;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: var(--primaryControlBGColor);
|
||||
}
|
||||
|
||||
.fileToast:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.fileToast--active {
|
||||
color: var(--primaryControlFGColor);
|
||||
}
|
||||
|
||||
.fileToast--active::after {
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fileData {
|
||||
margin: 8px 16px 8px 44px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fileName {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fileInfo {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fileToast .fileIcon {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
@media (max-device-width: 750px), (max-width: 750px) {
|
||||
.fileToast {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.fileToast__content {
|
||||
display: flex;
|
||||
line-height: 13px;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fileData {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0 6px 0 0;
|
||||
}
|
||||
|
||||
.fileInfo {
|
||||
flex: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.fileToast .fileIcon {
|
||||
flex: none;
|
||||
transform: scale(0.5);
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const number = require('../../utils').number;
|
||||
const bytes = require('../../utils').bytes;
|
||||
const fileIcon = require('../fileIcon');
|
||||
|
||||
module.exports = function(file, state) {
|
||||
const ttl = file.expiresAt - Date.now();
|
||||
const remainingTime =
|
||||
timeLeft(ttl, state) || state.translate('linkExpiredAlt');
|
||||
const downloadLimit = file.dlimit || 1;
|
||||
const totalDownloads = file.dtotal || 0;
|
||||
|
||||
const multiFiles = file.manifest.files;
|
||||
const fileName =
|
||||
multiFiles.length > 1
|
||||
? `${multiFiles[0].name} + ${state.translate('fileCount', {
|
||||
num: multiFiles.length - 1
|
||||
})}`
|
||||
: file.name;
|
||||
|
||||
const activeClass = isOnSharePage() ? 'fileToast--active' : '';
|
||||
return html`
|
||||
<li id="${file.id}">
|
||||
<a class="fileToast ${activeClass}" href=${toastClick()}>
|
||||
<div class="fileToast__content">
|
||||
${fileIcon(file.name, file._hasPassword)}
|
||||
<div class="fileData">
|
||||
<p class="fileName">${fileName}</p>
|
||||
<p class="fileInfo">
|
||||
<span>${bytes(file.size)}</span> ·
|
||||
<span>${state.translate('downloadCount', {
|
||||
num: `${number(totalDownloads)} / ${number(downloadLimit)}`
|
||||
})}</span>
|
||||
<span>${remainingTime}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
|
||||
function toastClick() {
|
||||
return isOnSharePage() ? '/' : `/share/${file.id}`;
|
||||
}
|
||||
|
||||
function isOnSharePage() {
|
||||
return state.href.includes('/share/') && state.params.id === file.id;
|
||||
}
|
||||
};
|
||||
|
||||
function timeLeft(milliseconds, state) {
|
||||
const minutes = Math.floor(milliseconds / 1000 / 60);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
if (days >= 1) {
|
||||
return state.translate('expiresDaysHoursMinutes', {
|
||||
days,
|
||||
hours: hours % 24,
|
||||
minutes: minutes % 60
|
||||
});
|
||||
}
|
||||
if (hours >= 1) {
|
||||
return state.translate('expiresHoursMinutes', {
|
||||
hours,
|
||||
minutes: minutes % 60
|
||||
});
|
||||
} else if (hours === 0) {
|
||||
if (minutes === 0) {
|
||||
return state.translate('expiresMinutes', { minutes: '< 1' });
|
||||
}
|
||||
return state.translate('expiresMinutes', { minutes });
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
.fileIcon {
|
||||
position: relative;
|
||||
float: left;
|
||||
pointer-events: none;
|
||||
margin: 8px;
|
||||
color: #fff;
|
||||
background-image: url('../assets/blue_file.svg');
|
||||
width: 22px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.fileIcon__lock {
|
||||
margin: 7px 0 0 5px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.fileIcon__lock--visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fileIcon__fileType {
|
||||
position: absolute;
|
||||
margin: 16px 0 0 2px;
|
||||
font-size: 7px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
|
||||
module.exports = function(name, hasPassword) {
|
||||
let type = '';
|
||||
if (name) {
|
||||
type = name.split('.').pop();
|
||||
}
|
||||
const lockClass = hasPassword ? 'fileIcon__lock--visible' : '';
|
||||
return html`
|
||||
<div class="fileIcon">
|
||||
<div class="fileIcon__fileType">${type}</div>
|
||||
<img class="fileIcon__lock ${lockClass}"src="${assets.get(
|
||||
'lock-white.svg'
|
||||
)}"/>
|
||||
</div>`;
|
||||
};
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
.fileList {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 262px;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style-type: none;
|
||||
overflow: scroll;
|
||||
font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
|
||||
}
|
||||
|
||||
/* hack because justify-content:flex-end and overflow:scroll doesn't work together */
|
||||
.fileList > :first-child {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
@media (max-device-width: 750px), (max-width: 750px) {
|
||||
.fileList {
|
||||
flex: none;
|
||||
position: static;
|
||||
width: 406px;
|
||||
max-height: 160px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const file = require('../file');
|
||||
|
||||
module.exports = function(state) {
|
||||
if (state.storage.files.length) {
|
||||
return html`
|
||||
<ul class="fileList">
|
||||
${state.storage.files.map(f => file(f, state))}
|
||||
</ul>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
.fileManager {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.uploadArea {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
overflow: scroll;
|
||||
transition: transform 150ms;
|
||||
flex: 1;
|
||||
min-height: 90px;
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.uploadOptions {
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
color: var(--lightTextColor);
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.uploadOptions--faded {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.uploadCancel {
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
|
||||
.uploadCancel:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
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,95 +0,0 @@
|
|||
.footer {
|
||||
flex: none;
|
||||
margin: 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.legalSection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.legalSection__link {
|
||||
color: var(--lightTextColor);
|
||||
white-space: nowrap;
|
||||
margin-left: calc(var(--grid-basis) * 2);
|
||||
}
|
||||
|
||||
.legalSection__link:hover {
|
||||
color: var(--textColor);
|
||||
}
|
||||
|
||||
.socialSection__icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 0 -5px calc(var(--grid-basis) * 2);
|
||||
}
|
||||
|
||||
.dropdown__only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
background-color: #000;
|
||||
background-image: url('../assets/feedback.svg');
|
||||
background-position: 2px 4px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 18px;
|
||||
color: var(--primaryControlFGColor);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
padding: 5px 5px 5px 20px;
|
||||
text-indent: 2px;
|
||||
transition: all 250ms ease-in-out;
|
||||
white-space: nowrap;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
@media (max-device-width: 720px), (max-width: 720px) {
|
||||
.footer {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.footer_hiddenIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown__only {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.legalSection {
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.legalSection__link {
|
||||
flex: none;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
height: 24px;
|
||||
width: 176px;
|
||||
margin: 0;
|
||||
padding: 4px 20px 0 8px;
|
||||
text-shadow: none;
|
||||
font-weight: 400;
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
||||
.legalSection__link:visited {
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
||||
.legalSection__link:hover {
|
||||
color: var(--primaryControlFGColor);
|
||||
background-color: var(--primaryControlBGColor);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
const version = require('../../../package.json').version;
|
||||
const { browserName } = require('../../utils');
|
||||
|
||||
module.exports = function(state) {
|
||||
const browser = browserName();
|
||||
const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
|
||||
const footer = html`<footer class="footer">
|
||||
<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">
|
||||
${state.translate('footerLinkAbout')}
|
||||
</a>
|
||||
<a
|
||||
href="/legal"
|
||||
class="legalSection__link footer__dropdown footer__noDisplay">
|
||||
${state.translate('footerLinkTerms')}
|
||||
</a>
|
||||
<a
|
||||
href="https://www.mozilla.org/privacy/websites/#cookies"
|
||||
class="legalSection__link footer__dropdown footer__noDisplay">
|
||||
${state.translate('footerLinkCookies')}
|
||||
</a>
|
||||
<a
|
||||
href="https://www.mozilla.org/about/legal/report-infringement/"
|
||||
class="legalSection__link footer__dropdown footer__noDisplay">
|
||||
${state.translate('reportIPInfringement')}
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/mozilla/send"
|
||||
class="legalSection__link footer__dropdown dropdown__only footer__noDisplay">
|
||||
Github
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/FxTestPilot"
|
||||
class="legalSection__link footer__dropdown dropdown__only footer__noDisplay">
|
||||
Twitter
|
||||
</a>
|
||||
</div>
|
||||
<a href="${feedbackUrl}"
|
||||
rel="noreferrer noopener"
|
||||
class="feedback"
|
||||
alt="Feedback"
|
||||
target="_blank">${state.translate('siteFeedback')}
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/mozilla/send"
|
||||
class="socialSection__link footer_hiddenIcon">
|
||||
<img
|
||||
class="socialSection__icon"
|
||||
src="${assets.get('github-icon.svg')}"
|
||||
alt="Github"/>
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/FxTestPilot"
|
||||
class="socialSection__link footer_hiddenIcon">
|
||||
<img
|
||||
class="socialSection__icon"
|
||||
src="${assets.get('twitter-icon.svg')}"
|
||||
alt="Twitter"/>
|
||||
</a>
|
||||
</footer>`;
|
||||
// HACK
|
||||
// We only want to render this once because we
|
||||
// toggle the targets of the links with utils/openLinksInNewTab
|
||||
footer.isSameNode = function(target) {
|
||||
return target && target.nodeName && target.nodeName === 'FOOTER';
|
||||
};
|
||||
return footer;
|
||||
};
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
.fxPromo {
|
||||
flex: none;
|
||||
padding: 0 15px;
|
||||
height: 48px;
|
||||
background-color: #efeff1;
|
||||
color: #4a4a4f;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fxPromo > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.fxPromo > div > span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.fxPromo__logo {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.fxPromo--blue {
|
||||
background: linear-gradient(-180deg, #45a1ff 0%, #00feff 94%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fxPromo--pink {
|
||||
background: linear-gradient(-180deg, #ff9400 0%, #ff1ad9 94%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fxPromo--blue a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fxPromo--pink a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fxPromo--blue a:hover {
|
||||
color: #eee;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fxPromo--pink a:hover {
|
||||
color: #eee;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
let classes = 'fxPromo';
|
||||
switch (state.promo) {
|
||||
case 'blue':
|
||||
classes = 'fxPromo fxPromo--blue';
|
||||
break;
|
||||
case 'pink':
|
||||
classes = 'fxPromo fxPromo--pink';
|
||||
break;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="${classes}">
|
||||
<div>
|
||||
<img
|
||||
src="${assets.get('firefox_logo-only.svg')}"
|
||||
class="fxPromo__logo"
|
||||
alt="Firefox"/>
|
||||
<span>Send is brought to you by the all-new Firefox.
|
||||
<a
|
||||
class="link"
|
||||
href="https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com"
|
||||
onclick=${clicked}
|
||||
>Download Firefox now ≫</a></span>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
function clicked() {
|
||||
emit('experiment', { cd3: 'promo' });
|
||||
}
|
||||
};
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
.header {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background-color: white;
|
||||
box-shadow: 0 -1px 0 0 #d7d7db7f, 0 2px 6px 0 #0000001e;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
|
||||
module.exports = function() {
|
||||
const header = html`
|
||||
<header class="header">
|
||||
<a href="/"><img src="${assets.get('send_logo.svg')}"/></a>
|
||||
<a href="/"><h1>Firefox Send</h1></a>
|
||||
</header>`;
|
||||
// HACK
|
||||
// We only want to render this once because we
|
||||
// toggle the targets of the links with utils/openLinksInNewTab
|
||||
header.isSameNode = function(target) {
|
||||
return target && target.nodeName && target.nodeName === 'HEADER';
|
||||
};
|
||||
return header;
|
||||
};
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
return html`
|
||||
<div class="modal" onclick=${close}>
|
||||
<div class="modal__box" onclick=${e => e.stopPropagation()}>
|
||||
${state.modal(state, emit, close)}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
function close(event) {
|
||||
state.modal = null;
|
||||
emit('render');
|
||||
}
|
||||
};
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
.modal {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
animation: fade-in 0.5s forwards;
|
||||
}
|
||||
|
||||
.modal__box {
|
||||
max-width: 480px;
|
||||
background: var(--pageBGColor);
|
||||
border-radius: 4px;
|
||||
color: var(--textColor);
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(message) {
|
||||
return function(state, emit, close) {
|
||||
return html`
|
||||
<div class="okDialog">
|
||||
<div class="okDialog__message">${message}</div>
|
||||
<button class="btn" onclick=${close}>${state.translate(
|
||||
'okButton'
|
||||
)}</button>
|
||||
</div>`;
|
||||
};
|
||||
};
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.okDialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 400px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.okDialog__message {
|
||||
margin: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(state) {
|
||||
const placeholder =
|
||||
state.route === '/' ? '' : state.translate('unlockInputPlaceholder');
|
||||
const hasPassword = !!state.password;
|
||||
const sectionClass = hasPassword
|
||||
? 'passwordInput'
|
||||
: 'passwordInput passwordInput--hidden';
|
||||
|
||||
return html`
|
||||
<div class="${sectionClass}">
|
||||
<form
|
||||
onsubmit=${onSubmit}
|
||||
data-no-csrf>
|
||||
|
||||
<input id="password-input"
|
||||
class="input passwordInput__fill"
|
||||
autocomplete="off"
|
||||
type="password"
|
||||
oninput=${inputChanged}
|
||||
onfocus=${focused}
|
||||
placeholder="${
|
||||
hasPassword ? passwordPlaceholder(state.password) : placeholder
|
||||
}"
|
||||
>
|
||||
</form>
|
||||
</div>`;
|
||||
|
||||
function onSubmit() {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function inputChanged() {
|
||||
const password = document.getElementById('password-input').value;
|
||||
state.password = password;
|
||||
}
|
||||
|
||||
function focused(event) {
|
||||
event.preventDefault();
|
||||
const el = document.getElementById('password-input');
|
||||
if (el.placeholder !== state.translate('unlockInputPlaceholder')) {
|
||||
el.placeholder = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function passwordPlaceholder(password) {
|
||||
return password ? password.replace(/./g, '•') : '••••••••••••';
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
.passwordInput {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.passwordInput--hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.passwordInput__fill {
|
||||
height: 24px;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
background-color: var(--lightControlBGColor);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.passwordInput__fill:focus {
|
||||
border: 1px solid rgba(12, 12, 13, 0.2);
|
||||
background-color: var(--pageBGColor);
|
||||
}
|
||||
|
||||
.passwordInput__msg {
|
||||
font-size: 12px;
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
||||
.passwordInput__msg--error {
|
||||
color: var(--errorColor);
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(msg, confirmText, cancelText, confirmCallback) {
|
||||
return html`
|
||||
<div class="popup" onblur=${hide} tabindex="-1">
|
||||
<div class="popup__message">${msg}</div>
|
||||
<div class="popup__action">
|
||||
<div>
|
||||
<span class="popup__no" onclick=${hide}>${cancelText}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="popup__yes" onclick=${confirmCallback}>${confirmText}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
function hide(e) {
|
||||
e.stopPropagation();
|
||||
const popup = document.querySelector('.popup.popup--show');
|
||||
if (popup) {
|
||||
popup.classList.remove('popup--show');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
.popup {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-color: var(--errorColor);
|
||||
color: var(--textColor);
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
transition: opacity 0.5s;
|
||||
outline: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.popup::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 8px solid;
|
||||
border-color: var(--errorColor) transparent transparent;
|
||||
margin-left: -8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.popup__message {
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
color: var(--primaryControlFGColor);
|
||||
font-size: 15px;
|
||||
font-style: italic;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.popup__action {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.popup__action > div {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.popup__no {
|
||||
color: var(--primaryControlFGColor);
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.popup__no:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.popup__yes {
|
||||
color: var(--primaryControlFGColor);
|
||||
padding: 5px;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.popup__yes:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.popup--show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(selected, options, translate, changed) {
|
||||
const id = `select-${Math.random()}`;
|
||||
let x = selected;
|
||||
|
||||
return html`
|
||||
<select class="selectBox" id="${id}" onchange=${choose}>
|
||||
${options.map(
|
||||
i =>
|
||||
html`<option value="${i}" ${
|
||||
i === selected ? 'selected' : ''
|
||||
}>${translate(i)}</option>`
|
||||
)}
|
||||
</select>`;
|
||||
|
||||
function choose(event) {
|
||||
const target = event.target;
|
||||
const value = +target.value;
|
||||
|
||||
if (x !== value) {
|
||||
x = value;
|
||||
changed(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
option {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.selectBox {
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: #e6e6e6;
|
||||
font-size: 1em;
|
||||
font-weight: 200;
|
||||
margin: 0;
|
||||
padding: 4px 2px 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select:active {
|
||||
background-color: var(--pageBGColor);
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const passwordInput = require('../passwordInput');
|
||||
|
||||
module.exports = function(state) {
|
||||
const checked = state.password ? 'checked' : '';
|
||||
const label = state.password ? '' : 'addPasswordMessage';
|
||||
|
||||
return html`
|
||||
<div class="setPasswordSection">
|
||||
<div class="checkbox">
|
||||
<input
|
||||
class="checkbox__input" id="add-password"
|
||||
type="checkbox"
|
||||
${checked}
|
||||
autocomplete="off"
|
||||
onchange=${togglePasswordInput}/>
|
||||
<label class="checkbox__label" for="add-password">
|
||||
${label && state.translate(label)}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
${passwordInput(state)}
|
||||
|
||||
</div>`;
|
||||
|
||||
function togglePasswordInput(e) {
|
||||
const unlockInput = document.getElementById('password-input');
|
||||
const boxChecked = e.target.checked;
|
||||
document
|
||||
.querySelector('.passwordInput')
|
||||
.classList.toggle('passwordInput--hidden', !boxChecked);
|
||||
|
||||
const label = document.querySelector('.checkbox__label');
|
||||
if (boxChecked) {
|
||||
label.innerHTML = ''; //state.translate('addPasswordLabel');
|
||||
unlockInput.focus();
|
||||
} else {
|
||||
label.innerHTML = state.translate('addPasswordMessage');
|
||||
unlockInput.value = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
.setPasswordSection {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.checkbox__input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.checkbox__label {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
color: var(--lightTextColor);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.checkbox__label::before {
|
||||
content: '';
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.checkbox__label:hover::before {
|
||||
background-color: #d6d6d6;
|
||||
}
|
||||
|
||||
.checkbox__input:checked + .checkbox__label::before {
|
||||
background-image: url('../assets/lock.svg');
|
||||
background-position: 2px 2px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.checkbox__input:disabled + .checkbox__label {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.checkbox__input:disabled + .checkbox__label::before {
|
||||
background-image: url('../assets/lock.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 26px 26px;
|
||||
border: none;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.setPasswordSection > .passwordInput--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
/* globals LIMITS */
|
||||
const html = require('choo/html');
|
||||
const bytes = require('../../utils').bytes;
|
||||
|
||||
// TODO: there's some duplication here with the signin page
|
||||
module.exports = function() {
|
||||
return function(state, emit, close) {
|
||||
return html`
|
||||
<div class="signupDialog">
|
||||
<div class="signupDialog__message">
|
||||
${state.translate('accountBenefitTitle')}
|
||||
<ul>
|
||||
<li>${state.translate('accountBenefitLargeFiles', {
|
||||
size: bytes(LIMITS.MAX_FILE_SIZE)
|
||||
})}</li>
|
||||
<li>${state.translate('accountBenefitExpiry')}</li>
|
||||
<li>${state.translate('accountBenefitSync')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<form
|
||||
onsubmit=${submitEmail}
|
||||
data-no-csrf>
|
||||
<input
|
||||
id="email-input"
|
||||
type="text"
|
||||
class="signupDialog__emailInput"
|
||||
placeholder=${state.translate('emailEntryPlaceholder')}/>
|
||||
<input
|
||||
class='noDisplay'
|
||||
id="email-submit"
|
||||
type="submit"/>
|
||||
</form>
|
||||
<label class="btn" for="email-submit">
|
||||
${state.translate('signInMenuOption')}
|
||||
</label>
|
||||
<button
|
||||
class="btn--cancel"
|
||||
title="${state.translate('deletePopupCancel')}"
|
||||
onclick=${close}>${state.translate('deletePopupCancel')}
|
||||
</button>
|
||||
</div>`;
|
||||
|
||||
function submitEmail(event) {
|
||||
event.preventDefault();
|
||||
const el = document.getElementById('email-input');
|
||||
const email = el.value;
|
||||
if (email) {
|
||||
// just check if it's the right shape
|
||||
const a = email.split('@');
|
||||
if (a.length === 2 && a.every(s => s.length > 0)) {
|
||||
return emit('login', email);
|
||||
}
|
||||
}
|
||||
el.value = '';
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.signupDialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 400px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.signupDialog__message {
|
||||
margin: 32px 32px 0 32px;
|
||||
}
|
||||
|
||||
.signupDialog__emailInput {
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
margin: 16px 0;
|
||||
padding: 0 8px;
|
||||
font-size: 18px;
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
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>
|
||||
<div class="signupPromo__info">${state.translate('signInExplanation')}</div>
|
||||
</a>
|
||||
`;
|
||||
};
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
.signupPromo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(var(--grid-basis) * 12.5);
|
||||
width: calc(var(--grid-basis) * 12.5);
|
||||
border: 3px solid black;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
transition: background 100ms;
|
||||
margin: 24px;
|
||||
grid-area: content;
|
||||
justify-self: right;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.signupPromo:hover {
|
||||
background: #ff1ad9;
|
||||
}
|
||||
|
||||
.signupPromo__title {
|
||||
color: black;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.signupPromo__info {
|
||||
padding: 6px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
@media (max-device-width: 720px), (max-width: 720px) {
|
||||
.signupPromo {
|
||||
grid-area: promo;
|
||||
margin: 0;
|
||||
justify-self: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
module.exports = function(translate, seconds) {
|
||||
const displayText = {
|
||||
300: translate('timespanMinutes', { num: 5 }),
|
||||
3600: translate('timespanHours', { num: 1 }),
|
||||
86400: translate('timespanHours', { num: 24 }),
|
||||
604800: translate('timespanWeeks', { num: 1 }),
|
||||
1209600: translate('timespanWeeks', { num: 2 })
|
||||
};
|
||||
|
||||
if (displayText[seconds]) {
|
||||
return displayText[seconds];
|
||||
}
|
||||
return seconds;
|
||||
};
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(state) {
|
||||
return html`
|
||||
<div class="boxTitle">
|
||||
${state.translate('uploadPageHeader')}
|
||||
<div class="boxSubtitle">
|
||||
${state.translate('pageHeaderCredits')}
|
||||
</div>
|
||||
</div>`;
|
||||
};
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.boxTitle {
|
||||
margin: 24px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.boxSubtitle {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
const bytes = require('../../utils').bytes;
|
||||
const fileIcon = require('../fileIcon');
|
||||
|
||||
module.exports = function(file, index, state, emit, hasPassword) {
|
||||
const cancelVisible =
|
||||
state.route === '/' && !state.uploading
|
||||
? 'uploadedFile__cancel--visible'
|
||||
: '';
|
||||
|
||||
function cancel(event) {
|
||||
event.preventDefault();
|
||||
if (state.route === '/') {
|
||||
emit('removeUpload', { index });
|
||||
}
|
||||
}
|
||||
|
||||
return html`
|
||||
<li class="uploadedFile" id="${file.id}">
|
||||
|
||||
${fileIcon(file.name, hasPassword)}
|
||||
|
||||
<div class="uploadedFile__cancel ${cancelVisible}"
|
||||
onclick=${cancel}>
|
||||
<img
|
||||
src="${assets.get('close-16.svg')}"
|
||||
alt="cancel"/>
|
||||
</div>
|
||||
|
||||
<div class="uploadedFile__fileData">
|
||||
<p class="uploadedFile__fileName">${file.name}</p>
|
||||
<p class="uploadedFile__fileInfo">
|
||||
<span>${bytes(file.size)}</span>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
};
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
.uploadedFile {
|
||||
margin: 11px;
|
||||
list-style-type: none;
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
text-align: initial;
|
||||
color: var(--lightTextColor);
|
||||
background-color: var(--pageBGColor);
|
||||
border: 1px solid #cececf;
|
||||
box-sizing: border-box;
|
||||
height: 53px;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uploadedFile__fileData {
|
||||
margin: 8px 16px 8px 44px;
|
||||
}
|
||||
|
||||
.uploadedFile__fileName {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uploadedFile__fileInfo {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.uploadedFile__cancel {
|
||||
float: right;
|
||||
margin: 6px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.uploadedFile:hover .uploadedFile__cancel--visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.uploadedFile__stamp {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -8px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.uploadedFile__stamp--visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
animation: stampDown 0.2s linear;
|
||||
}
|
||||
|
||||
@keyframes stampDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
const file = require('../uploadedFile');
|
||||
|
||||
module.exports = function(archive, state, emit) {
|
||||
let files = [];
|
||||
if (archive) {
|
||||
files = Array.from(archive.manifest.files);
|
||||
}
|
||||
|
||||
return html`
|
||||
<ul class="uploadedFiles">
|
||||
${files.map((f, i) => file(f, i, state, emit, archive._hasPassword))}
|
||||
</ul>
|
||||
`;
|
||||
};
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.uploadedFiles {
|
||||
background: rgba(132, 193, 255, 0.1);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-content: center;
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
if (!state.capabilities.account) {
|
||||
return null;
|
||||
}
|
||||
const user = state.user;
|
||||
const menu = user.loggedIn
|
||||
? html`
|
||||
<ul
|
||||
class="account_dropdown"
|
||||
onblur=${hideMenu}
|
||||
tabindex="-1">
|
||||
<li class="account_dropdown__text">
|
||||
${user.email}
|
||||
</li>
|
||||
<li>
|
||||
<a class="account_dropdown__link" onclick=${logout}>${state.translate(
|
||||
'logOut'
|
||||
)}</a>
|
||||
</li>
|
||||
</ul>`
|
||||
: html`
|
||||
<ul
|
||||
class="account_dropdown"
|
||||
onblur=${hideMenu}
|
||||
tabindex="-1">
|
||||
<li>
|
||||
<a class="account_dropdown__link" onclick=${login}>${state.translate(
|
||||
'signInMenuOption'
|
||||
)}</a>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
return html`
|
||||
<div class="account">
|
||||
<div class="account__avatar">
|
||||
<img
|
||||
class="account__avatar"
|
||||
src="${user.avatar}"
|
||||
onclick=${avatarClick}
|
||||
/>
|
||||
</div>
|
||||
${menu}
|
||||
</div>`;
|
||||
|
||||
function avatarClick(event) {
|
||||
event.preventDefault();
|
||||
const dropdown = document.querySelector('.account_dropdown');
|
||||
dropdown.classList.toggle('visible');
|
||||
dropdown.focus();
|
||||
}
|
||||
|
||||
function login(event) {
|
||||
event.preventDefault();
|
||||
emit('login');
|
||||
}
|
||||
|
||||
function logout(event) {
|
||||
event.preventDefault();
|
||||
emit('logout');
|
||||
}
|
||||
|
||||
function hideMenu(event) {
|
||||
event.stopPropagation();
|
||||
const dropdown = document.querySelector('.account_dropdown');
|
||||
dropdown.classList.remove('visible');
|
||||
}
|
||||
};
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
.account {
|
||||
/* padding: 12px; */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.account_dropdown {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: var(--pageBGColor);
|
||||
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2);
|
||||
padding: 11px 0;
|
||||
visibility: hidden;
|
||||
white-space: nowrap;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.account_dropdown::after,
|
||||
.account_dropdown::before {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 18px;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: 1px solid transparent;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.account_dropdown::after {
|
||||
border-bottom-color: var(--pageBGColor);
|
||||
border-width: 12px;
|
||||
}
|
||||
|
||||
.account_dropdown::before {
|
||||
border-bottom-color: #ccc;
|
||||
border-width: 13px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.account_dropdown__link {
|
||||
display: block;
|
||||
padding: 0 14px;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
color: var(--lightTextColor);
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.account_dropdown__link:visited {
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
||||
.account_dropdown__link:hover {
|
||||
background-color: var(--primaryControlBGColor);
|
||||
color: var(--primaryControlFGColor);
|
||||
}
|
||||
|
||||
.account_dropdown__text {
|
||||
display: block;
|
||||
padding: 0 14px;
|
||||
font-size: 13px;
|
||||
color: var(--lightTextColor);
|
||||
line-height: 24px;
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(message) {
|
||||
return function(state, emit, close) {
|
||||
return html`
|
||||
<div class="flex flex-col max-w-xs p-4">
|
||||
<div class="text-center m-8">${message}</div>
|
||||
<button class="border rounded bg-blue text-white leading-loose w-full" onclick=${close}>${state.translate(
|
||||
'okButton'
|
||||
)}</button>
|
||||
</div>`;
|
||||
};
|
||||
};
|
||||
Loading…
Reference in New Issue