Merge pull request #760 from mozilla/refactor-css
refactored css: phase 1
This commit is contained in:
Danny Coates
GitHub
commit
677edffb80
249
app/base.css
Normal file
249
app/base.css
Normal file
@ -0,0 +1,249 @@
|
||||
:root {
|
||||
--pageBGColor: #fff;
|
||||
--primaryControlBGColor: #0297f8;
|
||||
--primaryControlFGColor: #fff;
|
||||
--primaryControlHoverColor: #0287e8;
|
||||
--inputTextColor: #737373;
|
||||
--errorColor: #d70022;
|
||||
--linkColor: #0094fb;
|
||||
--textColor: #0c0c0d;
|
||||
--lightTextColor: #737373;
|
||||
--successControlBGColor: #05a700;
|
||||
--successControlFGColor: #fff;
|
||||
}
|
||||
|
||||
html {
|
||||
background: url('../assets/send_bg.svg');
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
|
||||
'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
|
||||
font-weight: 200;
|
||||
background-size: 110%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
|
||||
'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.all {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
max-width: 650px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--primaryControlFGColor);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
background: var(--primaryControlBGColor);
|
||||
border: 1px solid var(--primaryControlBGColor);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn--cancel {
|
||||
color: var(--errorColor);
|
||||
background: var(--pageBGColor);
|
||||
font-size: 15px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.btn--cancel:disabled {
|
||||
text-decoration: none;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: 1px solid var(--primaryControlBGColor);
|
||||
border-radius: 6px 0 0 6px;
|
||||
font-size: 20px;
|
||||
color: var(--inputTextColor);
|
||||
font-family: 'SF Pro Text', sans-serif;
|
||||
letter-spacing: 0;
|
||||
line-height: 23px;
|
||||
font-weight: 300;
|
||||
height: 46px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.input--noBtn {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.inputBtn {
|
||||
background: var(--primaryControlBGColor);
|
||||
border-radius: 0 6px 6px 0;
|
||||
border: 1px solid var(--primaryControlBGColor);
|
||||
color: var(--primaryControlFGColor);
|
||||
cursor: pointer;
|
||||
|
||||
/* Force flat button look */
|
||||
appearance: none;
|
||||
font-size: 15px;
|
||||
padding-bottom: 3px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.inputBtn:disabled {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.inputBtn:hover {
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
.inputBtn--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cursor--pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--linkColor);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link:focus,
|
||||
.link:active,
|
||||
.link:hover {
|
||||
color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
.link--action {
|
||||
text-decoration: underline;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin: 0 auto 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progressSection {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.progressSection__text {
|
||||
color: var(--lightTextColor);
|
||||
letter-spacing: -0.4px;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 74px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 33px;
|
||||
line-height: 40px;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
max-width: 520px;
|
||||
font-family: 'SF Pro Text', sans-serif;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 15px;
|
||||
line-height: 23px;
|
||||
max-width: 630px;
|
||||
text-align: center;
|
||||
margin: 0 auto 60px;
|
||||
color: var(--textColor);
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
@media (max-device-width: 768px), (max-width: 768px) {
|
||||
.description {
|
||||
margin: 0 auto 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.input {
|
||||
font-size: 22px;
|
||||
padding: 10px 10px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
|
||||
.inputBtn {
|
||||
border-radius: 0 0 6px 6px;
|
||||
flex: 0 1 65px;
|
||||
}
|
||||
|
||||
.input--noBtn {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
@ -108,7 +108,7 @@ export default function(state, emitter) {
|
||||
|
||||
document.getElementById('cancel-upload').hidden = 'hidden';
|
||||
await delay(1000);
|
||||
await fadeOut('upload-progress');
|
||||
await fadeOut('.page');
|
||||
openLinksInNewTab(links, false);
|
||||
emitter.emit('pushState', `/share/${ownedFile.id}`);
|
||||
} catch (err) {
|
||||
@ -130,9 +130,13 @@ export default function(state, emitter) {
|
||||
|
||||
emitter.on('password', async ({ password, file }) => {
|
||||
try {
|
||||
state.settingPassword = true;
|
||||
render();
|
||||
await file.setPassword(password);
|
||||
state.storage.writeFile(file);
|
||||
metrics.addedPassword({ size: file.size });
|
||||
await delay(1000);
|
||||
state.settingPassword = false;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
@ -170,7 +174,7 @@ export default function(state, emitter) {
|
||||
const time = Date.now() - start;
|
||||
const speed = size / (time / 1000);
|
||||
await delay(1000);
|
||||
await fadeOut('download-progress');
|
||||
await fadeOut('.page');
|
||||
saveFile(f);
|
||||
state.storage.totalDownloads += 1;
|
||||
state.transfer.reset();
|
||||
|
||||
18
app/main.css
Normal file
18
app/main.css
Normal file
@ -0,0 +1,18 @@
|
||||
@import './base.css';
|
||||
@import './templates/header/header.css';
|
||||
@import './templates/downloadButton/downloadButton.css';
|
||||
@import './templates/progress/progress.css';
|
||||
@import './templates/passwordInput/passwordInput.css';
|
||||
@import './templates/downloadPassword/downloadPassword.css';
|
||||
@import './templates/setPasswordSection/setPasswordSection.css';
|
||||
@import './templates/footer/footer.css';
|
||||
@import './templates/fxPromo/fxPromo.css';
|
||||
@import './templates/selectbox/selectbox.css';
|
||||
@import './templates/fileList/fileList.css';
|
||||
@import './templates/file/file.css';
|
||||
@import './templates/popup/popup.css';
|
||||
@import './pages/welcome/welcome.css';
|
||||
@import './pages/preview/preview.css';
|
||||
@import './pages/share/share.css';
|
||||
@import './pages/notFound/notFound.css';
|
||||
@import './pages/unsupported/unsupported.css';
|
||||
@ -1,6 +1,5 @@
|
||||
const html = require('choo/html');
|
||||
|
||||
module.exports = function() {
|
||||
const div = html`<div></div>`;
|
||||
return div;
|
||||
return html`<div></div>`;
|
||||
};
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
const html = require('choo/html');
|
||||
const progress = require('../templates/progress');
|
||||
const { fadeOut } = require('../utils');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const div = html`
|
||||
<div id="page-one">
|
||||
<div id="download" class="fadeIn">
|
||||
<div id="download-progress">
|
||||
<div id="dl-title" class="title">
|
||||
${state.translate('downloadFinish')}
|
||||
</div>
|
||||
<div class="description"></div>
|
||||
${progress(1)}
|
||||
<div class="upload">
|
||||
<div class="progress-text"></div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="send-new"
|
||||
data-state="completed"
|
||||
href="/"
|
||||
onclick=${sendNew}>${state.translate('sendYourFilesLink')}</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
async function sendNew(e) {
|
||||
e.preventDefault();
|
||||
await fadeOut('download');
|
||||
emit('pushState', '/');
|
||||
}
|
||||
|
||||
return div;
|
||||
};
|
||||
26
app/pages/completed/index.js
Normal file
26
app/pages/completed/index.js
Normal file
@ -0,0 +1,26 @@
|
||||
const html = require('choo/html');
|
||||
const progress = require('../../templates/progress');
|
||||
const { fadeOut } = require('../../utils');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
return html`
|
||||
<div class="page effect--fadeIn">
|
||||
<div class="title">
|
||||
${state.translate('downloadFinish')}
|
||||
</div>
|
||||
<div class="description"></div>
|
||||
${progress(1)}
|
||||
<div class="progressSection">
|
||||
<div class="progressSection__text"></div>
|
||||
</div>
|
||||
<a class="link link--action"
|
||||
href="/"
|
||||
onclick=${sendNew}>${state.translate('sendYourFilesLink')}</a>
|
||||
</div>`;
|
||||
|
||||
async function sendNew(e) {
|
||||
e.preventDefault();
|
||||
await fadeOut('.page');
|
||||
emit('pushState', '/');
|
||||
}
|
||||
};
|
||||
@ -1,46 +0,0 @@
|
||||
const html = require('choo/html');
|
||||
const progress = require('../templates/progress');
|
||||
const { bytes } = require('../utils');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const transfer = state.transfer;
|
||||
const cancelBtn = html`
|
||||
<button
|
||||
id="cancel-upload"
|
||||
title="${state.translate('deletePopupCancel')}"
|
||||
onclick=${cancel}>
|
||||
${state.translate('deletePopupCancel')}
|
||||
</button>`;
|
||||
|
||||
const div = html`
|
||||
<div id="page-one">
|
||||
<div id="download">
|
||||
<div id="download-progress" class="fadeIn">
|
||||
<div id="dl-title" class="title">
|
||||
${state.translate('downloadingPageProgress', {
|
||||
filename: state.fileInfo.name,
|
||||
size: bytes(state.fileInfo.size)
|
||||
})}
|
||||
</div>
|
||||
<div class="description">
|
||||
${state.translate('downloadingPageMessage')}
|
||||
</div>
|
||||
${progress(transfer.progressRatio)}
|
||||
<div class="upload">
|
||||
<div class="progress-text">
|
||||
${state.translate(transfer.msg, transfer.sizes)}
|
||||
</div>
|
||||
${transfer.state === 'downloading' ? cancelBtn : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function cancel() {
|
||||
const btn = document.getElementById('cancel-upload');
|
||||
btn.remove();
|
||||
emit('cancel');
|
||||
}
|
||||
return div;
|
||||
};
|
||||
42
app/pages/download/index.js
Normal file
42
app/pages/download/index.js
Normal file
@ -0,0 +1,42 @@
|
||||
const html = require('choo/html');
|
||||
const progress = require('../../templates/progress');
|
||||
const { bytes } = require('../../utils');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const transfer = state.transfer;
|
||||
const cancelBtn = html`
|
||||
<button
|
||||
id="cancel"
|
||||
class="btn btn--cancel"
|
||||
title="${state.translate('deletePopupCancel')}"
|
||||
onclick=${cancel}>
|
||||
${state.translate('deletePopupCancel')}
|
||||
</button>`;
|
||||
|
||||
return html`
|
||||
<div class="page effect--fadeIn">
|
||||
<div class="title">
|
||||
${state.translate('downloadingPageProgress', {
|
||||
filename: state.fileInfo.name,
|
||||
size: bytes(state.fileInfo.size)
|
||||
})}
|
||||
</div>
|
||||
<div class="description">
|
||||
${state.translate('downloadingPageMessage')}
|
||||
</div>
|
||||
${progress(transfer.progressRatio)}
|
||||
<div class="progressSection">
|
||||
<div class="progressSection__text">
|
||||
${state.translate(transfer.msg, transfer.sizes)}
|
||||
</div>
|
||||
${transfer.state === 'downloading' ? cancelBtn : null}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function cancel() {
|
||||
const btn = document.getElementById('cancel');
|
||||
btn.remove();
|
||||
emit('cancel');
|
||||
}
|
||||
};
|
||||
11
app/pages/error/error.css
Normal file
11
app/pages/error/error.css
Normal file
@ -0,0 +1,11 @@
|
||||
.errorPage {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.errorPage__img {
|
||||
margin: 51px 0 71px;
|
||||
}
|
||||
@ -1,10 +1,10 @@
|
||||
const html = require('choo/html');
|
||||
const assets = require('../../common/assets');
|
||||
const assets = require('../../../common/assets');
|
||||
|
||||
module.exports = function(state) {
|
||||
return html`
|
||||
<div id="upload-error">
|
||||
<div class="errorPage">
|
||||
<div class="title">${state.translate('errorPageHeader')}</div>
|
||||
<img id="upload-error-img" src="${assets.get('illustration_error.svg')}"/>
|
||||
<img class="errorPage__img" src="${assets.get('illustration_error.svg')}"/>
|
||||
</div>`;
|
||||
};
|
||||
@ -1,35 +1,32 @@
|
||||
const html = require('choo/html');
|
||||
const raw = require('choo/html/raw');
|
||||
|
||||
function replaceLinks(str, urls) {
|
||||
let i = -1;
|
||||
const s = str.replace(/<a>([^<]+)<\/a>/g, (m, v) => {
|
||||
i++;
|
||||
return `<a href="${urls[i]}">${v}</a>`;
|
||||
});
|
||||
return `<div class="description">${s}</div>`;
|
||||
}
|
||||
|
||||
module.exports = function(state) {
|
||||
const div = html`
|
||||
<div id="page-one">
|
||||
<div id="legal">
|
||||
<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/'
|
||||
])
|
||||
)}
|
||||
</div>
|
||||
return html`
|
||||
<div id="legal">
|
||||
<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/'
|
||||
])
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
return div;
|
||||
};
|
||||
|
||||
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,21 +1,18 @@
|
||||
const html = require('choo/html');
|
||||
const assets = require('../../common/assets');
|
||||
const assets = require('../../../common/assets');
|
||||
|
||||
module.exports = function(state) {
|
||||
const div = html`
|
||||
<div id="page-one">
|
||||
<div id="download">
|
||||
return html`
|
||||
<div class="notFoundPage">
|
||||
<div class="title">${state.translate('expiredPageHeader')}</div>
|
||||
<div class="share-window">
|
||||
<div class="notFoundPage__img">
|
||||
<img src="${assets.get('illustration_expired.svg')}" id="expired-img">
|
||||
</div>
|
||||
<div class="expired-description">
|
||||
<div class="description">
|
||||
${state.translate('uploadPageExplainer')}
|
||||
</div>
|
||||
<a class="send-new" href="/" data-state="notfound">
|
||||
<a class="link link--action" href="/">
|
||||
${state.translate('sendYourFilesLink')}
|
||||
</a>
|
||||
</div>
|
||||
</div>`;
|
||||
return div;
|
||||
</div>`;
|
||||
};
|
||||
17
app/pages/notFound/notFound.css
Normal file
17
app/pages/notFound/notFound.css
Normal file
@ -0,0 +1,17 @@
|
||||
.notFoundPage {
|
||||
margin: 0 auto 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.notFoundPage__img {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
const html = require('choo/html');
|
||||
const assets = require('../../common/assets');
|
||||
const { bytes } = require('../utils');
|
||||
|
||||
module.exports = function(state, pageAction) {
|
||||
const fileInfo = state.fileInfo;
|
||||
|
||||
const size = fileInfo.size
|
||||
? state.translate('downloadFileSize', { size: bytes(fileInfo.size) })
|
||||
: '';
|
||||
|
||||
const title = fileInfo.name
|
||||
? state.translate('downloadFileName', { filename: fileInfo.name })
|
||||
: state.translate('downloadFileTitle');
|
||||
|
||||
const info = html`
|
||||
<div id="dl-file"
|
||||
data-nonce="${fileInfo.nonce}"
|
||||
data-requires-password="${fileInfo.requiresPassword}"></div>`;
|
||||
if (!pageAction) {
|
||||
return info;
|
||||
}
|
||||
const div = html`
|
||||
<div id="page-one">
|
||||
<div id="download">
|
||||
<div id="download-page-one">
|
||||
<div class="title">
|
||||
<span>${title}</span>
|
||||
<span id="dl-filesize">${' ' + size}</span>
|
||||
</div>
|
||||
<div class="description">${state.translate('downloadMessage')}</div>
|
||||
<img
|
||||
src="${assets.get('illustration_download.svg')}"
|
||||
id="download-img"
|
||||
title="${state.translate('downloadAltText')}"/>
|
||||
${pageAction}
|
||||
</div>
|
||||
<a class="send-new" href="/">${state.translate('sendYourFilesLink')}</a>
|
||||
</div>
|
||||
${info}
|
||||
</div>
|
||||
`;
|
||||
return div;
|
||||
};
|
||||
41
app/pages/preview/index.js
Normal file
41
app/pages/preview/index.js
Normal file
@ -0,0 +1,41 @@
|
||||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
const { bytes } = require('../../utils');
|
||||
|
||||
module.exports = function(state, pageAction) {
|
||||
const fileInfo = state.fileInfo;
|
||||
|
||||
const size = fileInfo.size
|
||||
? state.translate('downloadFileSize', { size: bytes(fileInfo.size) })
|
||||
: '';
|
||||
|
||||
const title = fileInfo.name
|
||||
? state.translate('downloadFileName', { filename: fileInfo.name })
|
||||
: state.translate('downloadFileTitle');
|
||||
|
||||
const info = html`
|
||||
<div id="dl-file"
|
||||
data-nonce="${fileInfo.nonce}"
|
||||
data-requires-password="${fileInfo.requiresPassword}"></div>`;
|
||||
if (!pageAction) {
|
||||
return info;
|
||||
}
|
||||
return html`
|
||||
<div class="page">
|
||||
<div class="title">
|
||||
<span>${title}</span>
|
||||
<span>${' ' + size}</span>
|
||||
</div>
|
||||
<div class="description">${state.translate('downloadMessage')}</div>
|
||||
<img
|
||||
src="${assets.get('illustration_download.svg')}"
|
||||
class="preview__img"
|
||||
title="${state.translate('downloadAltText')}"/>
|
||||
${pageAction}
|
||||
<a class="link link--action" href="/">
|
||||
${state.translate('sendYourFilesLink')}
|
||||
</a>
|
||||
${info}
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
4
app/pages/preview/preview.css
Normal file
4
app/pages/preview/preview.css
Normal file
@ -0,0 +1,4 @@
|
||||
.preview__img {
|
||||
width: 283px;
|
||||
height: 196px;
|
||||
}
|
||||
@ -1,127 +0,0 @@
|
||||
/* global EXPIRE_SECONDS */
|
||||
const html = require('choo/html');
|
||||
const raw = require('choo/html/raw');
|
||||
const assets = require('../../common/assets');
|
||||
const notFound = require('./notFound');
|
||||
const uploadPasswordSet = require('../templates/uploadPasswordSet');
|
||||
const uploadPasswordUnset = require('../templates/uploadPasswordUnset');
|
||||
const selectbox = require('../templates/selectbox');
|
||||
const { allowedCopy, delay, fadeOut } = require('../utils');
|
||||
|
||||
function expireInfo(file, translate, emit) {
|
||||
const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
|
||||
const el = html`<div>${raw(
|
||||
translate('expireInfo', {
|
||||
downloadCount: '<select></select>',
|
||||
timespan: translate('timespanHours', { num: hours })
|
||||
})
|
||||
)}</div>`;
|
||||
const select = el.querySelector('select');
|
||||
const options = [1, 2, 3, 4, 5, 20].filter(i => i > (file.dtotal || 0));
|
||||
const t = num => translate('downloadCount', { num });
|
||||
const changed = value => emit('changeLimit', { file, value });
|
||||
select.parentNode.replaceChild(
|
||||
selectbox(file.dlimit || 1, options, t, changed),
|
||||
select
|
||||
);
|
||||
return el;
|
||||
}
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const file = state.storage.getFileById(state.params.id);
|
||||
if (!file) {
|
||||
return notFound(state, emit);
|
||||
}
|
||||
|
||||
const passwordSection = file.hasPassword
|
||||
? uploadPasswordSet(state, emit)
|
||||
: uploadPasswordUnset(state, emit);
|
||||
const div = html`
|
||||
<div id="share-link" class="fadeIn">
|
||||
<div class="title">${expireInfo(file, state.translate, emit)}</div>
|
||||
<div id="share-window">
|
||||
<div id="copy-text">
|
||||
${state.translate('copyUrlFormLabelWithName', { filename: file.name })}
|
||||
</div>
|
||||
<div id="copy">
|
||||
<input id="link" type="url" value="${file.url}" readonly="true"/>
|
||||
<button id="copy-btn"
|
||||
class="btn"
|
||||
title="${state.translate('copyUrlFormButton')}"
|
||||
onclick=${copyLink}>${state.translate('copyUrlFormButton')}</button>
|
||||
</div>
|
||||
${passwordSection}
|
||||
<button id="delete-file"
|
||||
class="btn"
|
||||
title="${state.translate('deleteFileButton')}"
|
||||
onclick=${showPopup}>${state.translate('deleteFileButton')}
|
||||
</button>
|
||||
<div id="deletePopup" class="popup">
|
||||
<div class="popuptext" onblur=${cancel} tabindex="-1">
|
||||
<div class="popup-message">${state.translate('deletePopupText')}
|
||||
</div>
|
||||
<div class="popup-action">
|
||||
<span class="popup-no" onclick=${cancel}>
|
||||
${state.translate('deletePopupCancel')}
|
||||
</span>
|
||||
<span class="popup-yes" onclick=${deleteFile}>
|
||||
${state.translate('deletePopupYes')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="send-new"
|
||||
data-state="completed"
|
||||
href="/"
|
||||
onclick=${sendNew}>${state.translate('sendAnotherFileLink')}</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function showPopup() {
|
||||
const popupText = document.querySelector('.popuptext');
|
||||
popupText.classList.add('show');
|
||||
popupText.focus();
|
||||
}
|
||||
|
||||
function cancel(e) {
|
||||
e.stopPropagation();
|
||||
const popupText = document.querySelector('.popuptext');
|
||||
popupText.classList.remove('show');
|
||||
}
|
||||
|
||||
async function sendNew(e) {
|
||||
e.preventDefault();
|
||||
await fadeOut('share-link');
|
||||
emit('pushState', '/');
|
||||
}
|
||||
|
||||
async function copyLink() {
|
||||
if (allowedCopy()) {
|
||||
emit('copy', { url: file.url, location: 'success-screen' });
|
||||
const input = document.getElementById('link');
|
||||
input.disabled = true;
|
||||
const copyBtn = document.getElementById('copy-btn');
|
||||
copyBtn.disabled = true;
|
||||
copyBtn.classList.add('success');
|
||||
copyBtn.replaceChild(
|
||||
html`<img src="${assets.get('check-16.svg')}" class="icon-check">`,
|
||||
copyBtn.firstChild
|
||||
);
|
||||
await delay(2000);
|
||||
input.disabled = false;
|
||||
if (!copyBtn.parentNode.classList.contains('wait-password')) {
|
||||
copyBtn.disabled = false;
|
||||
}
|
||||
copyBtn.classList.remove('success');
|
||||
copyBtn.textContent = state.translate('copyUrlFormButton');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteFile() {
|
||||
emit('delete', { file, location: 'success-screen' });
|
||||
await fadeOut('share-link');
|
||||
emit('pushState', '/');
|
||||
}
|
||||
return div;
|
||||
};
|
||||
115
app/pages/share/index.js
Normal file
115
app/pages/share/index.js
Normal file
@ -0,0 +1,115 @@
|
||||
/* global EXPIRE_SECONDS */
|
||||
const html = require('choo/html');
|
||||
const raw = require('choo/html/raw');
|
||||
const assets = require('../../../common/assets');
|
||||
const notFound = require('../notFound');
|
||||
const setPasswordSection = require('../../templates/setPasswordSection');
|
||||
const selectbox = require('../../templates/selectbox');
|
||||
const deletePopup = require('../../templates/popup');
|
||||
const { allowedCopy, delay, fadeOut } = require('../../utils');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const file = state.storage.getFileById(state.params.id);
|
||||
if (!file) {
|
||||
return notFound(state, emit);
|
||||
}
|
||||
|
||||
return html`
|
||||
<div id="shareWrapper" class="effect--fadeIn">
|
||||
<div class="title">${expireInfo(file, state.translate, emit)}</div>
|
||||
<div class="sharePage">
|
||||
<div class="sharePage__copyText">
|
||||
${state.translate('copyUrlFormLabelWithName', { filename: file.name })}
|
||||
</div>
|
||||
<div class="copySection">
|
||||
<input
|
||||
id="fileUrl"
|
||||
class="copySection__url"
|
||||
type="url"
|
||||
value="${file.url}"
|
||||
readonly="true"/>
|
||||
<button id="copyBtn"
|
||||
class="inputBtn inputBtn--copy"
|
||||
title="${state.translate('copyUrlFormButton')}"
|
||||
onclick=${copyLink}>${state.translate('copyUrlFormButton')}</button>
|
||||
</div>
|
||||
${setPasswordSection(state, emit)}
|
||||
<button
|
||||
class="btn btn--delete"
|
||||
title="${state.translate('deleteFileButton')}"
|
||||
onclick=${showPopup}>${state.translate('deleteFileButton')}
|
||||
</button>
|
||||
<div class="sharePage__deletePopup">
|
||||
${deletePopup(
|
||||
state.translate('deletePopupText'),
|
||||
state.translate('deletePopupYes'),
|
||||
state.translate('deletePopupCancel'),
|
||||
deleteFile
|
||||
)}
|
||||
</div>
|
||||
<a class="link link--action"
|
||||
href="/"
|
||||
onclick=${sendNew}>${state.translate('sendAnotherFileLink')}</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function showPopup() {
|
||||
const popup = document.querySelector('.popup');
|
||||
popup.classList.add('popup--show');
|
||||
popup.focus();
|
||||
}
|
||||
|
||||
async function sendNew(e) {
|
||||
e.preventDefault();
|
||||
await fadeOut('#shareWrapper');
|
||||
emit('pushState', '/');
|
||||
}
|
||||
|
||||
async function copyLink() {
|
||||
if (allowedCopy()) {
|
||||
emit('copy', { url: file.url, location: 'success-screen' });
|
||||
const input = document.getElementById('fileUrl');
|
||||
input.disabled = true;
|
||||
input.classList.add('input--copied');
|
||||
const copyBtn = document.getElementById('copyBtn');
|
||||
copyBtn.disabled = true;
|
||||
copyBtn.classList.add('inputBtn--copied');
|
||||
copyBtn.replaceChild(
|
||||
html`<img src="${assets.get('check-16.svg')}" class="cursor--pointer">`,
|
||||
copyBtn.firstChild
|
||||
);
|
||||
await delay(2000);
|
||||
input.disabled = false;
|
||||
input.classList.remove('input--copied');
|
||||
copyBtn.disabled = false;
|
||||
copyBtn.classList.remove('inputBtn--copied');
|
||||
copyBtn.textContent = state.translate('copyUrlFormButton');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteFile() {
|
||||
emit('delete', { file, location: 'success-screen' });
|
||||
await fadeOut('#shareWrapper');
|
||||
emit('pushState', '/');
|
||||
}
|
||||
};
|
||||
|
||||
function expireInfo(file, translate, emit) {
|
||||
const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
|
||||
const el = html`<div>${raw(
|
||||
translate('expireInfo', {
|
||||
downloadCount: '<select></select>',
|
||||
timespan: translate('timespanHours', { num: hours })
|
||||
})
|
||||
)}</div>`;
|
||||
const select = el.querySelector('select');
|
||||
const options = [1, 2, 3, 4, 5, 20].filter(i => i > (file.dtotal || 0));
|
||||
const t = num => translate('downloadCount', { num });
|
||||
const changed = value => emit('changeLimit', { file, value });
|
||||
select.parentNode.replaceChild(
|
||||
selectbox(file.dlimit || 1, options, t, changed),
|
||||
select
|
||||
);
|
||||
return el;
|
||||
}
|
||||
112
app/pages/share/share.css
Normal file
112
app/pages/share/share.css
Normal file
@ -0,0 +1,112 @@
|
||||
.sharePage {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.sharePage__copyText {
|
||||
align-self: flex-start;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 10px;
|
||||
color: var(--textColor);
|
||||
max-width: 614px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.sharePage__deletePopup {
|
||||
position: relative;
|
||||
align-self: center;
|
||||
bottom: 50px;
|
||||
}
|
||||
|
||||
.copySection {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.copySection__url {
|
||||
flex: 1;
|
||||
height: 56px;
|
||||
border: 1px solid var(--primaryControlBGColor);
|
||||
border-radius: 6px 0 0 6px;
|
||||
font-size: 20px;
|
||||
color: var(--inputTextColor);
|
||||
font-family: 'SF Pro Text', sans-serif;
|
||||
letter-spacing: 0;
|
||||
line-height: 23px;
|
||||
font-weight: 300;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.copySection__url:disabled {
|
||||
border: 1px solid var(--successControlBGColor);
|
||||
background: var(--successControlFGColor);
|
||||
}
|
||||
|
||||
.inputBtn--copy {
|
||||
flex: 0 1 165px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.input--copied {
|
||||
border-color: var(--successControlBGColor);
|
||||
}
|
||||
|
||||
.inputBtn--copied,
|
||||
.inputBtn--copied:hover {
|
||||
background: var(--successControlBGColor);
|
||||
border: 1px solid var(--successControlBGColor);
|
||||
color: var(--successControlFGColor);
|
||||
}
|
||||
|
||||
.btn--delete {
|
||||
align-self: center;
|
||||
width: 176px;
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
border-color: rgba(12, 12, 13, 0.3);
|
||||
margin-top: 50px;
|
||||
margin-bottom: 12px;
|
||||
color: #313131;
|
||||
}
|
||||
|
||||
.btn--delete:hover {
|
||||
background: #efeff1;
|
||||
}
|
||||
|
||||
@media (max-device-width: 768px), (max-width: 768px) {
|
||||
.copySection {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.copySection__url {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.copySection {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.copySection__url {
|
||||
font-size: 22px;
|
||||
padding: 15px 10px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
|
||||
.sharePage__copyText {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inputBtn--copy {
|
||||
border-radius: 0 0 6px 6px;
|
||||
flex: 0 1 65px;
|
||||
}
|
||||
}
|
||||
@ -1,52 +0,0 @@
|
||||
const html = require('choo/html');
|
||||
const assets = require('../../common/assets');
|
||||
|
||||
module.exports = function(state) {
|
||||
const msg =
|
||||
state.params.reason === 'outdated'
|
||||
? html`
|
||||
<div id="unsupported-browser">
|
||||
<div class="title">${state.translate('notSupportedHeader')}</div>
|
||||
<div class="description">
|
||||
${state.translate('notSupportedOutdatedDetail')}
|
||||
</div>
|
||||
<a
|
||||
id="update-firefox"
|
||||
href="https://support.mozilla.org/kb/update-firefox-latest-version">
|
||||
<img
|
||||
src="${assets.get('firefox_logo-only.svg')}"
|
||||
class="firefox-logo"
|
||||
alt="Firefox"/>
|
||||
<div class="unsupported-button-text">
|
||||
${state.translate('updateFirefox')}
|
||||
</div>
|
||||
</a>
|
||||
<div class="unsupported-description">
|
||||
${state.translate('uploadPageExplainer')}
|
||||
</div>
|
||||
</div>`
|
||||
: html`
|
||||
<div id="unsupported-browser">
|
||||
<div class="title">${state.translate('notSupportedHeader')}</div>
|
||||
<div class="description">${state.translate('notSupportedDetail')}</div>
|
||||
<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>
|
||||
<a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com">
|
||||
<img
|
||||
src="${assets.get('firefox_logo-only.svg')}"
|
||||
class="firefox-logo"
|
||||
alt="Firefox"/>
|
||||
<div class="unsupported-button-text">Firefox<br>
|
||||
<span>${state.translate('downloadFirefoxButtonSub')}</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="unsupported-description">
|
||||
${state.translate('uploadPageExplainer')}
|
||||
</div>
|
||||
</div>`;
|
||||
const div = html`<div id="page-one">${msg}</div>`;
|
||||
return div;
|
||||
};
|
||||
67
app/pages/unsupported/index.js
Normal file
67
app/pages/unsupported/index.js
Normal file
@ -0,0 +1,67 @@
|
||||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
|
||||
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`
|
||||
<div class="unsupportedPage">
|
||||
<div class="title">${strings.title}</div>
|
||||
<div class="description">
|
||||
${strings.description}
|
||||
</div>
|
||||
${why}
|
||||
<a href="${url}" class="firefoxDownload">
|
||||
<img
|
||||
src="${assets.get('firefox_logo-only.svg')}"
|
||||
class="firefoxDownload__logo"
|
||||
alt="Firefox"/>
|
||||
${buttonAction}
|
||||
</a>
|
||||
<div class="unsupportedPage__info">
|
||||
${strings.explainer}
|
||||
</div>
|
||||
</div>`;
|
||||
};
|
||||
|
||||
function outdatedStrings(state) {
|
||||
return {
|
||||
title: state.translate('notSupportedHeader'),
|
||||
description: state.translate('notSupportedOutdatedDetail'),
|
||||
button: state.translate('updateFirefox'),
|
||||
explainer: state.translate('uploadPageExplainer')
|
||||
};
|
||||
}
|
||||
|
||||
function unsupportedStrings(state) {
|
||||
return {
|
||||
title: state.translate('notSupportedHeader'),
|
||||
description: state.translate('notSupportedDetail'),
|
||||
button: state.translate('downloadFirefoxButtonSub'),
|
||||
explainer: state.translate('uploadPageExplainer')
|
||||
};
|
||||
}
|
||||
49
app/pages/unsupported/unsupported.css
Normal file
49
app/pages/unsupported/unsupported.css
Normal file
@ -0,0 +1,49 @@
|
||||
.unsupportedPage {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.unsupportedPage__info {
|
||||
font-size: 13px;
|
||||
line-height: 23px;
|
||||
text-align: center;
|
||||
color: var(--lightTextColor);
|
||||
margin: 0 auto 23px;
|
||||
}
|
||||
|
||||
.firefoxDownload {
|
||||
margin-bottom: 181px;
|
||||
height: 80px;
|
||||
background: #98e02b;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
box-shadow: 0 5px 3px rgb(234, 234, 234);
|
||||
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: 0 25px;
|
||||
}
|
||||
|
||||
.firefoxDownload__logo {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.firefoxDownload__action {
|
||||
text-align: left;
|
||||
margin-left: 20.4px;
|
||||
}
|
||||
|
||||
.firefoxDownload__text {
|
||||
font-family: 'Fira Sans', 'segoe ui', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
letter-spacing: -0.69px;
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
const html = require('choo/html');
|
||||
const progress = require('../templates/progress');
|
||||
const { bytes } = require('../utils');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const transfer = state.transfer;
|
||||
|
||||
const div = html`
|
||||
<div id="download">
|
||||
<div id="upload-progress" class="fadeIn">
|
||||
<div class="title" id="upload-filename">
|
||||
${state.translate('uploadingPageProgress', {
|
||||
filename: transfer.file.name,
|
||||
size: bytes(transfer.file.size)
|
||||
})}
|
||||
</div>
|
||||
<div class="description"></div>
|
||||
${progress(transfer.progressRatio)}
|
||||
<div class="upload">
|
||||
<div class="progress-text">
|
||||
${state.translate(transfer.msg, transfer.sizes)}
|
||||
</div>
|
||||
<button
|
||||
id="cancel-upload"
|
||||
title="${state.translate('uploadingPageCancel')}"
|
||||
onclick=${cancel}>
|
||||
${state.translate('uploadingPageCancel')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function cancel() {
|
||||
const btn = document.getElementById('cancel-upload');
|
||||
btn.disabled = true;
|
||||
btn.textContent = state.translate('uploadCancelNotification');
|
||||
emit('cancel');
|
||||
}
|
||||
return div;
|
||||
};
|
||||
39
app/pages/upload/index.js
Normal file
39
app/pages/upload/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
const html = require('choo/html');
|
||||
const progress = require('../../templates/progress');
|
||||
const { bytes } = require('../../utils');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const transfer = state.transfer;
|
||||
|
||||
return html`
|
||||
<div class="page effect--fadeIn">
|
||||
<div class="title">
|
||||
${state.translate('uploadingPageProgress', {
|
||||
filename: transfer.file.name,
|
||||
size: bytes(transfer.file.size)
|
||||
})}
|
||||
</div>
|
||||
<div class="description"></div>
|
||||
${progress(transfer.progressRatio)}
|
||||
<div class="progressSection">
|
||||
<div class="progressSection__text">
|
||||
${state.translate(transfer.msg, transfer.sizes)}
|
||||
</div>
|
||||
<button
|
||||
id="cancel-upload"
|
||||
class="btn btn--cancel"
|
||||
title="${state.translate('uploadingPageCancel')}"
|
||||
onclick=${cancel}>
|
||||
${state.translate('uploadingPageCancel')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function cancel() {
|
||||
const btn = document.getElementById('cancel-upload');
|
||||
btn.disabled = true;
|
||||
btn.textContent = state.translate('uploadCancelNotification');
|
||||
emit('cancel');
|
||||
}
|
||||
};
|
||||
@ -1,13 +1,13 @@
|
||||
/* global MAXFILESIZE */
|
||||
const html = require('choo/html');
|
||||
const assets = require('../../common/assets');
|
||||
const fileList = require('../templates/fileList');
|
||||
const { bytes, fadeOut } = require('../utils');
|
||||
const assets = require('../../../common/assets');
|
||||
const fileList = require('../../templates/fileList');
|
||||
const { bytes, fadeOut } = require('../../utils');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
// the page flickers if both the server and browser set 'fadeIn'
|
||||
const fade = state.layout ? '' : 'fadeIn';
|
||||
const div = html`
|
||||
// the page flickers if both the server and browser set 'effect--fadeIn'
|
||||
const fade = state.layout ? '' : 'effect--fadeIn';
|
||||
return html`
|
||||
<div id="page-one" class="${fade}">
|
||||
<div class="title">${state.translate('uploadPageHeader')}</div>
|
||||
<div class="description">
|
||||
@ -18,7 +18,7 @@ module.exports = function(state, emit) {
|
||||
${state.translate('uploadPageLearnMore')}
|
||||
</a>
|
||||
</div>
|
||||
<div class="upload-window"
|
||||
<div class="uploadArea"
|
||||
ondragover=${dragover}
|
||||
ondragleave=${dragleave}>
|
||||
<div id="upload-img">
|
||||
@ -26,19 +26,21 @@ module.exports = function(state, emit) {
|
||||
src="${assets.get('upload.svg')}"
|
||||
title="${state.translate('uploadSvgAlt')}"/>
|
||||
</div>
|
||||
<div id="upload-text">${state.translate('uploadPageDropMessage')}</div>
|
||||
<span id="file-size-msg">
|
||||
<em>${state.translate('uploadPageSizeMessage')}</em>
|
||||
<div class="uploadArea__msg">
|
||||
${state.translate('uploadPageDropMessage')}
|
||||
</div>
|
||||
<span class="uploadArea__sizeMsg">
|
||||
${state.translate('uploadPageSizeMessage')}
|
||||
</span>
|
||||
<input id="file-upload"
|
||||
class="inputFile"
|
||||
type="file"
|
||||
name="fileUploaded"
|
||||
onfocus=${onfocus}
|
||||
onblur=${onblur}
|
||||
onchange=${upload} />
|
||||
<label for="file-upload"
|
||||
id="browse"
|
||||
class="btn browse"
|
||||
class="btn btn--file"
|
||||
title="${state.translate('uploadPageBrowseButton1')}">
|
||||
${state.translate('uploadPageBrowseButton1')}
|
||||
</label>
|
||||
@ -48,21 +50,21 @@ module.exports = function(state, emit) {
|
||||
`;
|
||||
|
||||
function dragover(event) {
|
||||
const div = document.querySelector('.upload-window');
|
||||
div.classList.add('ondrag');
|
||||
const div = document.querySelector('.uploadArea');
|
||||
div.classList.add('uploadArea--dragging');
|
||||
}
|
||||
|
||||
function dragleave(event) {
|
||||
const div = document.querySelector('.upload-window');
|
||||
div.classList.remove('ondrag');
|
||||
const div = document.querySelector('.uploadArea');
|
||||
div.classList.remove('uploadArea--dragging');
|
||||
}
|
||||
|
||||
function onfocus(event) {
|
||||
event.target.classList.add('has-focus');
|
||||
event.target.classList.add('inputFile--focused');
|
||||
}
|
||||
|
||||
function onblur(event) {
|
||||
event.target.classList.remove('has-focus');
|
||||
event.target.classList.remove('inputFile--focused');
|
||||
}
|
||||
|
||||
async function upload(event) {
|
||||
@ -77,8 +79,7 @@ module.exports = function(state, emit) {
|
||||
return;
|
||||
}
|
||||
|
||||
await fadeOut('page-one');
|
||||
await fadeOut('#page-one');
|
||||
emit('upload', { file, type: 'click' });
|
||||
}
|
||||
return div;
|
||||
};
|
||||
71
app/pages/welcome/welcome.css
Normal file
71
app/pages/welcome/welcome.css
Normal file
@ -0,0 +1,71 @@
|
||||
.uploadArea {
|
||||
border: 3px dashed rgba(0, 148, 251, 0.5);
|
||||
margin: 0 auto 10px;
|
||||
height: 255px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
transition: transform 150ms;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.uploadArea__msg {
|
||||
font-size: 22px;
|
||||
color: var(--lightTextColor);
|
||||
margin: 20px 0 10px;
|
||||
font-family: 'SF Pro Text', sans-serif;
|
||||
}
|
||||
|
||||
.uploadArea__sizeMsg {
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: var(--lightTextColor);
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.uploadArea--dragging {
|
||||
border: 5px dashed rgba(0, 148, 251, 0.5);
|
||||
height: 251px;
|
||||
transform: scale(1.04);
|
||||
border-radius: 4.2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uploadArea--dragging * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn--file {
|
||||
font-size: 20px;
|
||||
min-width: 240px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.btn--file:hover {
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
.inputFile {
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.btn--file .inputFile--focused {
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
outline: 1px dotted #000;
|
||||
outline: -webkit-focus-ring-color auto 5px;
|
||||
}
|
||||
10
app/templates/downloadButton/downloadButton.css
Normal file
10
app/templates/downloadButton/downloadButton.css
Normal file
@ -0,0 +1,10 @@
|
||||
.btn--download {
|
||||
width: 180px;
|
||||
height: 44px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.btn--download:hover {
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
@ -1,16 +1,13 @@
|
||||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
return html`
|
||||
<button class="btn btn--download"
|
||||
onclick=${download}>${state.translate('downloadButtonLabel')}
|
||||
</button>`;
|
||||
|
||||
function download(event) {
|
||||
event.preventDefault();
|
||||
emit('download', state.fileInfo);
|
||||
}
|
||||
|
||||
return html`
|
||||
<div>
|
||||
<button id="download-btn"
|
||||
class="btn"
|
||||
onclick=${download}>${state.translate('downloadButtonLabel')}
|
||||
</button>
|
||||
</div>`;
|
||||
};
|
||||
30
app/templates/downloadPassword/downloadPassword.css
Normal file
30
app/templates/downloadPassword/downloadPassword.css
Normal file
@ -0,0 +1,30 @@
|
||||
.passwordSection {
|
||||
text-align: left;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.passwordForm {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.input--password {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.inputBtn--password {
|
||||
flex: 0 1 165px;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.passwordForm {
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@ -5,52 +5,52 @@ module.exports = function(state, emit) {
|
||||
const label =
|
||||
fileInfo.password === null
|
||||
? html`
|
||||
<label class="red" for="unlock-input">
|
||||
<label class="red" for="password-input">
|
||||
${state.translate('passwordTryAgain')}
|
||||
</label>`
|
||||
: html`
|
||||
<label for="unlock-input">
|
||||
<label for="password-input">
|
||||
${state.translate('unlockInputLabel')}
|
||||
</label>`;
|
||||
const div = html`
|
||||
<div class="enterPassword">
|
||||
<div class="passwordSection">
|
||||
${label}
|
||||
<form id="unlock" onsubmit=${checkPassword} data-no-csrf>
|
||||
<input id="unlock-input"
|
||||
class="unlock-input input-no-btn"
|
||||
<form class="passwordForm" onsubmit=${checkPassword} data-no-csrf>
|
||||
<input id="password-input"
|
||||
class="input input--password input--noBtn"
|
||||
maxlength="64"
|
||||
autocomplete="off"
|
||||
placeholder="${state.translate('unlockInputPlaceholder')}"
|
||||
oninput=${inputChanged}
|
||||
type="password" />
|
||||
<input type="submit"
|
||||
id="unlock-btn"
|
||||
class="btn btn-hidden"
|
||||
id="password-btn"
|
||||
class="inputBtn inputBtn--password inputBtn--hidden"
|
||||
value="${state.translate('unlockButtonLabel')}"/>
|
||||
</form>
|
||||
</div>`;
|
||||
|
||||
if (!(div instanceof String)) {
|
||||
setTimeout(() => document.querySelector('#unlock-input').focus());
|
||||
setTimeout(() => document.getElementById('password-input').focus());
|
||||
}
|
||||
|
||||
function inputChanged() {
|
||||
const input = document.getElementById('unlock-input');
|
||||
const btn = document.getElementById('unlock-btn');
|
||||
const input = document.getElementById('password-input');
|
||||
const btn = document.getElementById('password-btn');
|
||||
if (input.value.length > 0) {
|
||||
btn.classList.remove('btn-hidden');
|
||||
input.classList.remove('input-no-btn');
|
||||
btn.classList.remove('inputBtn--hidden');
|
||||
input.classList.remove('input--noBtn');
|
||||
} else {
|
||||
btn.classList.add('btn-hidden');
|
||||
input.classList.add('input-no-btn');
|
||||
btn.classList.add('inputBtn--hidden');
|
||||
input.classList.add('input--noBtn');
|
||||
}
|
||||
}
|
||||
|
||||
function checkPassword(event) {
|
||||
event.preventDefault();
|
||||
const password = document.getElementById('unlock-input').value;
|
||||
const password = document.getElementById('password-input').value;
|
||||
if (password.length > 0) {
|
||||
document.getElementById('unlock-btn').disabled = true;
|
||||
document.getElementById('password-btn').disabled = true;
|
||||
state.fileInfo.url = window.location.href;
|
||||
state.fileInfo.password = password;
|
||||
emit('getMetadata');
|
||||
26
app/templates/file/file.css
Normal file
26
app/templates/file/file.css
Normal file
@ -0,0 +1,26 @@
|
||||
.fileData {
|
||||
font-size: 15px;
|
||||
vertical-align: top;
|
||||
color: var(--lightTextColor);
|
||||
padding: 17px 19px 0;
|
||||
line-height: 23px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fileData--overflow {
|
||||
text-overflow: ellipsis;
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fileData--center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.fileData {
|
||||
font-size: 13px;
|
||||
padding: 17px 5px 0;
|
||||
}
|
||||
}
|
||||
@ -1,23 +1,7 @@
|
||||
const html = require('choo/html');
|
||||
const assets = require('../../common/assets');
|
||||
const number = require('../utils').number;
|
||||
|
||||
function timeLeft(milliseconds, state) {
|
||||
const minutes = Math.floor(milliseconds / 1000 / 60);
|
||||
const hours = Math.floor(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;
|
||||
}
|
||||
const assets = require('../../../common/assets');
|
||||
const number = require('../../utils').number;
|
||||
const deletePopup = require('../popup');
|
||||
|
||||
module.exports = function(file, state, emit) {
|
||||
const ttl = file.expiresAt - Date.now();
|
||||
@ -25,44 +9,37 @@ module.exports = function(file, state, emit) {
|
||||
timeLeft(ttl, state) || state.translate('linkExpiredAlt');
|
||||
const downloadLimit = file.dlimit || 1;
|
||||
const totalDownloads = file.dtotal || 0;
|
||||
const row = html`
|
||||
return html`
|
||||
<tr id="${file.id}">
|
||||
<td class="overflow-col" title="${file.name}">
|
||||
<td class="fileData fileData--overflow" title="${file.name}">
|
||||
<a class="link" href="/share/${file.id}">${file.name}</a>
|
||||
</td>
|
||||
<td class="center-col">
|
||||
<td class="fileData fileData--center">
|
||||
<img
|
||||
onclick=${copyClick}
|
||||
src="${assets.get('copy-16.svg')}"
|
||||
class="icon-copy"
|
||||
class="cursor--pointer"
|
||||
title="${state.translate('copyUrlHover')}">
|
||||
<span class="text-copied" hidden="true">
|
||||
<span hidden="true">
|
||||
${state.translate('copiedUrl')}
|
||||
</span>
|
||||
</td>
|
||||
<td class="overflow-col">${remainingTime}</td>
|
||||
<td class="center-col">${number(totalDownloads)} / ${number(
|
||||
<td class="fileData fileData--overflow">${remainingTime}</td>
|
||||
<td class="fileData fileData--center">${number(totalDownloads)} / ${number(
|
||||
downloadLimit
|
||||
)}</td>
|
||||
<td class="center-col">
|
||||
<td class="fileData fileData--center">
|
||||
<img
|
||||
onclick=${showPopup}
|
||||
src="${assets.get('close-16.svg')}"
|
||||
class="icon-delete"
|
||||
class="cursor--pointer"
|
||||
title="${state.translate('deleteButtonHover')}">
|
||||
<div class="popup">
|
||||
<div class="popuptext" onblur=${cancel} tabindex="-1">
|
||||
<div class="popup-message">${state.translate('deletePopupText')}</div>
|
||||
<div class="popup-action">
|
||||
<span class="popup-no" onclick=${cancel}>
|
||||
${state.translate('deletePopupCancel')}
|
||||
</span>
|
||||
<span class="popup-yes" onclick=${deleteFile}>
|
||||
${state.translate('deletePopupYes')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
${deletePopup(
|
||||
state.translate('deletePopupText'),
|
||||
state.translate('deletePopupYes'),
|
||||
state.translate('deletePopupCancel'),
|
||||
deleteFile
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
@ -81,22 +58,30 @@ module.exports = function(file, state, emit) {
|
||||
|
||||
function showPopup() {
|
||||
const tr = document.getElementById(file.id);
|
||||
const popup = tr.querySelector('.popuptext');
|
||||
popup.classList.add('show');
|
||||
const popup = tr.querySelector('.popup');
|
||||
popup.classList.add('popup--show');
|
||||
popup.focus();
|
||||
}
|
||||
|
||||
function cancel(e) {
|
||||
e.stopPropagation();
|
||||
const tr = document.getElementById(file.id);
|
||||
const popup = tr.querySelector('.popuptext');
|
||||
popup.classList.remove('show');
|
||||
}
|
||||
|
||||
function deleteFile() {
|
||||
emit('delete', { file, location: 'upload-list' });
|
||||
emit('render');
|
||||
}
|
||||
|
||||
return row;
|
||||
};
|
||||
|
||||
function timeLeft(milliseconds, state) {
|
||||
const minutes = Math.floor(milliseconds / 1000 / 60);
|
||||
const hours = Math.floor(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;
|
||||
}
|
||||
52
app/templates/fileList/fileList.css
Normal file
52
app/templates/fileList/fileList.css
Normal file
@ -0,0 +1,52 @@
|
||||
.fileList {
|
||||
margin: 45.3px auto;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
|
||||
}
|
||||
|
||||
.fileList__header {
|
||||
font-size: 16px;
|
||||
color: var(--lightTextColor);
|
||||
font-weight: lighter;
|
||||
text-align: left;
|
||||
background: rgba(0, 148, 251, 0.05);
|
||||
height: 40px;
|
||||
border-top: 1px solid rgba(0, 148, 251, 0.1);
|
||||
padding: 0 19px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fileList__body {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.fileList__nameCol {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.fileList__copyCol {
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.fileList__expireCol {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.fileList__dlCol {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
.fileList__delCol {
|
||||
text-align: center;
|
||||
width: 7%;
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.fileList__header {
|
||||
font-size: 14px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
@ -1,37 +1,33 @@
|
||||
const html = require('choo/html');
|
||||
const file = require('./file');
|
||||
const file = require('../file');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
let table = '';
|
||||
if (state.storage.files.length) {
|
||||
table = html`
|
||||
<table id="uploaded-files">
|
||||
return html`
|
||||
<table class="fileList">
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="uploaded-file">${state.translate('uploadedFile')}</th>
|
||||
<th id="copy-file-list" class="center-col">
|
||||
<th class="fileList__header fileList__nameCol">
|
||||
${state.translate('uploadedFile')}
|
||||
</th>
|
||||
<th class="fileList__header fileList__copyCol">
|
||||
${state.translate('copyFileList')}
|
||||
</th>
|
||||
<th id="expiry-time-file-list" >
|
||||
<th class="fileList__header fileList__expireCol" >
|
||||
${state.translate('timeFileList')}
|
||||
</th>
|
||||
<th id="expiry-downloads-file-list" >
|
||||
<th class="fileList__header fileList__dlCol" >
|
||||
${state.translate('downloadsFileList')}
|
||||
</th>
|
||||
<th id="delete-file-list" class="center-col">
|
||||
<th class="fileList__header fileList__delCol">
|
||||
${state.translate('deleteFileList')}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody class="fileList__body">
|
||||
${state.storage.files.map(f => file(f, state, emit))}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
return html`
|
||||
<div id="file-list">
|
||||
${table}
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
@ -1,43 +0,0 @@
|
||||
const html = require('choo/html');
|
||||
const assets = require('../../common/assets');
|
||||
|
||||
module.exports = function(state) {
|
||||
return html`<div class="footer">
|
||||
<div class="legal-links">
|
||||
<a href="https://www.mozilla.org" role="presentation">
|
||||
<img
|
||||
class="mozilla-logo"
|
||||
src="${assets.get('mozilla-logo.svg')}"
|
||||
alt="mozilla"/>
|
||||
</a>
|
||||
<a href="https://www.mozilla.org/about/legal">
|
||||
${state.translate('footerLinkLegal')}
|
||||
</a>
|
||||
<a href="https://testpilot.firefox.com/about">
|
||||
${state.translate('footerLinkAbout')}
|
||||
</a>
|
||||
<a href="/legal">${state.translate('footerLinkPrivacy')}</a>
|
||||
<a href="/legal">${state.translate('footerLinkTerms')}</a>
|
||||
<a href="https://www.mozilla.org/privacy/websites/#cookies">
|
||||
${state.translate('footerLinkCookies')}
|
||||
</a>
|
||||
<a href="https://www.mozilla.org/about/legal/report-infringement/">
|
||||
${state.translate('reportIPInfringement')}
|
||||
</a>
|
||||
</div>
|
||||
<div class="social-links">
|
||||
<a href="https://github.com/mozilla/send" role="presentation">
|
||||
<img
|
||||
class="github"
|
||||
src="${assets.get('github-icon.svg')}"
|
||||
alt="github"/>
|
||||
</a>
|
||||
<a href="https://twitter.com/FxTestPilot" role="presentation">
|
||||
<img
|
||||
class="twitter"
|
||||
src="${assets.get('twitter-icon.svg')}"
|
||||
alt="twitter"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>`;
|
||||
};
|
||||
93
app/templates/footer/footer.css
Normal file
93
app/templates/footer/footer.css
Normal file
@ -0,0 +1,93 @@
|
||||
.footer {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 50px 31px 41px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.legalSection {
|
||||
max-width: 81vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.legalSection__link {
|
||||
color: var(--lightTextColor);
|
||||
opacity: 0.9;
|
||||
white-space: nowrap;
|
||||
margin-right: 2vw;
|
||||
}
|
||||
|
||||
.legalSection__link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.legalSection__link:visited {
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
||||
.legalSection__mozLogo {
|
||||
width: 112px;
|
||||
height: 32px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.socialSection {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 94px;
|
||||
}
|
||||
|
||||
.socialSection__link {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.socialSection__link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.socialSection__icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
@media (max-device-width: 768px), (max-width: 768px) {
|
||||
.footer {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
max-width: 630px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.legalSection__mozLogo {
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
.legalSection {
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.legalSection__link {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.socialSection {
|
||||
margin-top: 20px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
64
app/templates/footer/index.js
Normal file
64
app/templates/footer/index.js
Normal file
@ -0,0 +1,64 @@
|
||||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
|
||||
module.exports = function(state) {
|
||||
return html`<div class="footer">
|
||||
<div class="legalSection">
|
||||
<a
|
||||
href="https://www.mozilla.org"
|
||||
class="legalSection__link"
|
||||
role="presentation">
|
||||
<img
|
||||
class="legalSection__mozLogo"
|
||||
src="${assets.get('mozilla-logo.svg')}"
|
||||
alt="mozilla"/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.mozilla.org/about/legal"
|
||||
class="legalSection__link">
|
||||
${state.translate('footerLinkLegal')}
|
||||
</a>
|
||||
<a
|
||||
href="https://testpilot.firefox.com/about"
|
||||
class="legalSection__link">
|
||||
${state.translate('footerLinkAbout')}
|
||||
</a>
|
||||
<a
|
||||
href="/legal"
|
||||
class="legalSection__link">${state.translate('footerLinkPrivacy')}</a>
|
||||
<a
|
||||
href="/legal"
|
||||
class="legalSection__link">${state.translate('footerLinkTerms')}</a>
|
||||
<a
|
||||
href="https://www.mozilla.org/privacy/websites/#cookies"
|
||||
class="legalSection__link">
|
||||
${state.translate('footerLinkCookies')}
|
||||
</a>
|
||||
<a
|
||||
href="https://www.mozilla.org/about/legal/report-infringement/"
|
||||
class="legalSection__link">
|
||||
${state.translate('reportIPInfringement')}
|
||||
</a>
|
||||
</div>
|
||||
<div class="socialSection">
|
||||
<a
|
||||
href="https://github.com/mozilla/send"
|
||||
class="socialSection__link"
|
||||
role="presentation">
|
||||
<img
|
||||
class="socialSection__icon"
|
||||
src="${assets.get('github-icon.svg')}"
|
||||
alt="github"/>
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/FxTestPilot"
|
||||
class="socialSection__link"
|
||||
role="presentation">
|
||||
<img
|
||||
class="socialSection__icon"
|
||||
src="${assets.get('twitter-icon.svg')}"
|
||||
alt="twitter"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>`;
|
||||
};
|
||||
56
app/templates/fxPromo/fxPromo.css
Normal file
56
app/templates/fxPromo/fxPromo.css
Normal file
@ -0,0 +1,56 @@
|
||||
.fxPromo {
|
||||
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,17 +1,14 @@
|
||||
const html = require('choo/html');
|
||||
const assets = require('../../common/assets');
|
||||
const assets = require('../../../common/assets');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
function clicked() {
|
||||
emit('experiment', { cd3: 'promo' });
|
||||
}
|
||||
let classes = 'banner';
|
||||
let classes = 'fxPromo';
|
||||
switch (state.promo) {
|
||||
case 'blue':
|
||||
classes = 'banner banner-blue';
|
||||
classes = 'fxPromo fxPromo--blue';
|
||||
break;
|
||||
case 'pink':
|
||||
classes = 'banner banner-pink';
|
||||
classes = 'fxPromo fxPromo--pink';
|
||||
break;
|
||||
}
|
||||
|
||||
@ -20,7 +17,7 @@ module.exports = function(state, emit) {
|
||||
<div>
|
||||
<img
|
||||
src="${assets.get('firefox_logo-only.svg')}"
|
||||
class="firefox-logo-small"
|
||||
class="fxPromo__logo"
|
||||
alt="Firefox"/>
|
||||
<span>Send is brought to you by the all-new Firefox.
|
||||
<a
|
||||
@ -30,4 +27,8 @@ module.exports = function(state, emit) {
|
||||
>Download Firefox now ≫</a></span>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
function clicked() {
|
||||
emit('experiment', { cd3: 'promo' });
|
||||
}
|
||||
};
|
||||
104
app/templates/header/header.css
Normal file
104
app/templates/header/header.css
Normal file
@ -0,0 +1,104 @@
|
||||
.header {
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 31px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo__link {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.logo__title {
|
||||
color: #3e3d40;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
letter-spacing: 1px;
|
||||
margin-left: 8px;
|
||||
transition: color 50ms;
|
||||
}
|
||||
|
||||
.logo__title:hover {
|
||||
color: var(--primaryControlBGColor);
|
||||
}
|
||||
|
||||
.logo__subtitle {
|
||||
color: #3e3d40;
|
||||
font-size: 12px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.logo__subtitle-link {
|
||||
font-weight: bold;
|
||||
color: #3e3d40;
|
||||
transition: color 50ms;
|
||||
}
|
||||
|
||||
.logo__subtitle-link:hover {
|
||||
color: var(--primaryControlBGColor);
|
||||
}
|
||||
|
||||
.feedback {
|
||||
background-color: var(--primaryControlBGColor);
|
||||
background-image: url('../assets/feedback.svg');
|
||||
background-position: 2px 4px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 18px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--primaryControlBGColor);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
color: var(--primaryControlFGColor);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
opacity: 0.9;
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
min-width: 12px;
|
||||
max-width: 12px;
|
||||
text-indent: 17px;
|
||||
transition: all 250ms ease-in-out;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.feedback:hover,
|
||||
.feedback:focus {
|
||||
min-width: 30px;
|
||||
max-width: 300px;
|
||||
text-indent: 2px;
|
||||
padding: 5px 5px 5px 20px;
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
.feedback:active {
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.header {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
margin-top: 10px;
|
||||
min-width: 30px;
|
||||
max-width: 300px;
|
||||
text-indent: 2px;
|
||||
padding: 5px 5px 5px 20px;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
const html = require('choo/html');
|
||||
const assets = require('../../common/assets');
|
||||
const assets = require('../../../common/assets');
|
||||
/*
|
||||
The current weback config uses package.json to generate
|
||||
version.json for /__version__ meaning `require` returns the
|
||||
@ -10,7 +10,29 @@ const assets = require('../../common/assets');
|
||||
has a custom loader (/build/version_loader.js) just to replace
|
||||
string with the value from package.json. 🤢
|
||||
*/
|
||||
const version = require('../../package.json').version || 'VERSION';
|
||||
const version = require('../../../package.json').version || 'VERSION';
|
||||
const browser = browserName();
|
||||
|
||||
module.exports = function(state) {
|
||||
return html`<header class="header">
|
||||
<div class="logo">
|
||||
<a class="logo__link" href="/">
|
||||
<img
|
||||
src="${assets.get('send_logo.svg')}"
|
||||
alt="Send"/>
|
||||
<h1 class="logo__title">Send</h1>
|
||||
</a>
|
||||
<div class="logo__subtitle">
|
||||
<a class="logo__subtitle-link" href="https://testpilot.firefox.com">Firefox Test Pilot</a>
|
||||
<div>${state.translate('siteSubtitle')}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}"
|
||||
rel="noreferrer noopener"
|
||||
class="feedback"
|
||||
target="_blank">${state.translate('siteFeedback')}</a>
|
||||
</header>`;
|
||||
};
|
||||
|
||||
function browserName() {
|
||||
try {
|
||||
@ -34,26 +56,3 @@ function browserName() {
|
||||
return 'unknown';
|
||||
}
|
||||
}
|
||||
|
||||
const browser = browserName();
|
||||
|
||||
module.exports = function(state) {
|
||||
return html`<header class="header">
|
||||
<div class="send-logo">
|
||||
<a href="/">
|
||||
<img
|
||||
src="${assets.get('send_logo.svg')}"
|
||||
alt="Send"/>
|
||||
<h1 class="site-title">Send</h1>
|
||||
</a>
|
||||
<div class="site-subtitle">
|
||||
<a href="https://testpilot.firefox.com">Firefox Test Pilot</a>
|
||||
<div>${state.translate('siteSubtitle')}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}"
|
||||
rel="noreferrer noopener"
|
||||
class="feedback"
|
||||
target="_blank">${state.translate('siteFeedback')}</a>
|
||||
</header>`;
|
||||
};
|
||||
82
app/templates/passwordInput/index.js
Normal file
82
app/templates/passwordInput/index.js
Normal file
@ -0,0 +1,82 @@
|
||||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(file, state, emit) {
|
||||
const setting = state.settingPassword;
|
||||
const formClass = file.hasPassword
|
||||
? 'passwordInput'
|
||||
: 'passwordInput passwordInput--hidden';
|
||||
const inputClass = setting ? 'input input--copied' : 'input input--noBtn';
|
||||
const btnClass = setting
|
||||
? 'inputBtn inputBtn--loading'
|
||||
: 'inputBtn inputBtn--hidden';
|
||||
const action = file.hasPassword
|
||||
? state.translate('changePasswordButton')
|
||||
: state.translate('addPasswordButton');
|
||||
return html`
|
||||
<div>
|
||||
<form
|
||||
class="${formClass}"
|
||||
onsubmit=${setPassword}
|
||||
data-no-csrf>
|
||||
<input id="password-input"
|
||||
${setting ? 'disabled' : ''}
|
||||
class="${inputClass}"
|
||||
maxlength="32"
|
||||
autocomplete="off"
|
||||
type="password"
|
||||
oninput=${inputChanged}
|
||||
placeholder="${
|
||||
file.hasPassword
|
||||
? passwordPlaceholder(file.password)
|
||||
: state.translate('unlockInputPlaceholder')
|
||||
}">
|
||||
<input type="submit"
|
||||
id="password-btn"
|
||||
${setting ? 'disabled' : ''}
|
||||
class="${btnClass}"
|
||||
value="${setting ? '' : action}">
|
||||
</form>
|
||||
<div class="passwordInput__msg">${message(
|
||||
setting,
|
||||
file.hasPassword,
|
||||
state.translate('passwordIsSet')
|
||||
)}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function inputChanged() {
|
||||
const pwdmsg = document.querySelector('.passwordInput__msg');
|
||||
if (pwdmsg) {
|
||||
pwdmsg.textContent = '';
|
||||
}
|
||||
const resetInput = document.getElementById('password-input');
|
||||
const resetBtn = document.getElementById('password-btn');
|
||||
if (resetInput.value.length > 0) {
|
||||
resetBtn.classList.remove('inputBtn--hidden');
|
||||
resetInput.classList.remove('input--noBtn');
|
||||
} else {
|
||||
resetBtn.classList.add('inputBtn--hidden');
|
||||
resetInput.classList.add('input--noBtn');
|
||||
}
|
||||
}
|
||||
|
||||
function setPassword(event) {
|
||||
event.preventDefault();
|
||||
const password = document.getElementById('password-input').value;
|
||||
if (password.length > 0) {
|
||||
emit('password', { password, file });
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
function passwordPlaceholder(password) {
|
||||
return password ? password.replace(/./g, '●') : '●●●●●●●●●●●●';
|
||||
}
|
||||
|
||||
function message(setting, pwd, deflt) {
|
||||
if (setting || !pwd) {
|
||||
return '';
|
||||
}
|
||||
return deflt;
|
||||
}
|
||||
44
app/templates/passwordInput/passwordInput.css
Normal file
44
app/templates/passwordInput/passwordInput.css
Normal file
@ -0,0 +1,44 @@
|
||||
.passwordInput {
|
||||
align-self: left;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 80%;
|
||||
padding: 10px 5px 5px;
|
||||
}
|
||||
|
||||
.passwordInput__msg {
|
||||
height: 100px;
|
||||
margin: 0 5px;
|
||||
font-size: 15px;
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
||||
.passwordInput--hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.inputBtn--loading {
|
||||
background-image: url('../assets/spinner.svg');
|
||||
background-position: center;
|
||||
background-size: 30px 30px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: var(--successControlBGColor);
|
||||
border: 1px solid var(--successControlBGColor);
|
||||
color: var(--successControlFGColor);
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
.inputBtn--loading:hover {
|
||||
background-color: var(--successControlBGColor);
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.passwordInput {
|
||||
flex-direction: column;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.inputBtn--loading {
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
26
app/templates/popup/index.js
Normal file
26
app/templates/popup/index.js
Normal file
@ -0,0 +1,26 @@
|
||||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(msg, confirmText, cancelText, confirmCallback) {
|
||||
return html`
|
||||
<div class="popup__wrapper">
|
||||
<div class="popup" onblur=${hide} tabindex="-1">
|
||||
<div class="popup__message">${msg}</div>
|
||||
<div class="popup__action">
|
||||
<span class="popup__no" onclick=${hide}>
|
||||
${cancelText}
|
||||
</span>
|
||||
<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');
|
||||
}
|
||||
}
|
||||
};
|
||||
122
app/templates/popup/popup.css
Normal file
122
app/templates/popup/popup.css
Normal file
@ -0,0 +1,122 @@
|
||||
.popup {
|
||||
visibility: hidden;
|
||||
min-width: 204px;
|
||||
min-height: 105px;
|
||||
background-color: var(--pageBGColor);
|
||||
color: var(--textColor);
|
||||
border: 1px solid #d7d7db;
|
||||
padding: 15px 24px;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 20px;
|
||||
left: -40px;
|
||||
transition: opacity 0.5s;
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
box-shadow: 3px 3px 7px rgba(136, 136, 136, 0.3);
|
||||
}
|
||||
|
||||
.popup::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -11px;
|
||||
left: 20px;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transform: rotate(45deg);
|
||||
border-radius: 0 0 5px;
|
||||
border-right: 1px solid #d7d7db;
|
||||
border-bottom: 1px solid #d7d7db;
|
||||
border-left: 1px solid #fff;
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
|
||||
.popup__wrapper {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.popup__message {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 1px #ebebeb solid;
|
||||
color: var(--textColor);
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
padding-bottom: 15px;
|
||||
white-space: nowrap;
|
||||
width: calc(100% + 48px);
|
||||
margin-left: -24px;
|
||||
}
|
||||
|
||||
.popup__action {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.popup__no {
|
||||
color: #4a4a4a;
|
||||
background-color: #fbfbfb;
|
||||
border: 1px #c1c1c1 solid;
|
||||
border-radius: 5px;
|
||||
padding: 5px 25px;
|
||||
font-weight: normal;
|
||||
min-width: 94px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.popup__no:hover {
|
||||
background-color: #efeff1;
|
||||
}
|
||||
|
||||
.popup__yes {
|
||||
color: var(--primaryControlFGColor);
|
||||
background-color: var(--primaryControlBGColor);
|
||||
border-radius: 5px;
|
||||
padding: 5px 25px;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
min-width: 94px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.popup__yes:hover {
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
.popup--show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-device-width: 992px), (max-width: 992px) {
|
||||
.popup {
|
||||
left: auto;
|
||||
right: -40px;
|
||||
}
|
||||
|
||||
.popup::after {
|
||||
left: auto;
|
||||
right: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.popup::after {
|
||||
left: 125px;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
const html = require('choo/html');
|
||||
const percent = require('../utils').percent;
|
||||
const percent = require('../../utils').percent;
|
||||
|
||||
const radius = 73;
|
||||
const oRadius = radius + 10;
|
||||
@ -9,21 +9,21 @@ const circumference = 2 * Math.PI * radius;
|
||||
module.exports = function(progressRatio) {
|
||||
const dashOffset = (1 - progressRatio) * circumference;
|
||||
const percentComplete = percent(progressRatio);
|
||||
const div = html`
|
||||
<div class="progress-bar">
|
||||
return html`
|
||||
<div class="progress">
|
||||
<svg
|
||||
id="progress"
|
||||
width="${oDiameter}"
|
||||
height="${oDiameter}"
|
||||
viewPort="0 0 ${oDiameter} ${oDiameter}"
|
||||
version="1.1">
|
||||
<circle
|
||||
class="progress__bg"
|
||||
r="${radius}"
|
||||
cx="${oRadius}"
|
||||
cy="${oRadius}"
|
||||
fill="transparent"/>
|
||||
<circle
|
||||
id="bar"
|
||||
class="progress__bar"
|
||||
r="${radius}"
|
||||
cx="${oRadius}"
|
||||
cy="${oRadius}"
|
||||
@ -31,11 +31,10 @@ module.exports = function(progressRatio) {
|
||||
transform="rotate(-90 ${oRadius} ${oRadius})"
|
||||
stroke-dasharray="${circumference}"
|
||||
stroke-dashoffset="${dashOffset}"/>
|
||||
<text class="percentage" text-anchor="middle" x="50%" y="98">
|
||||
<tspan class="percent-number">${percentComplete}</tspan>
|
||||
<text class="progress__percent" text-anchor="middle" x="50%" y="98">
|
||||
${percentComplete}
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
return div;
|
||||
};
|
||||
27
app/templates/progress/progress.css
Normal file
27
app/templates/progress/progress.css
Normal file
@ -0,0 +1,27 @@
|
||||
.progress {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 3px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress__bg {
|
||||
stroke: #eee;
|
||||
stroke-width: 0.75em;
|
||||
}
|
||||
|
||||
.progress__bar {
|
||||
stroke: #3b9dff;
|
||||
stroke-width: 0.75em;
|
||||
transition: stroke-dashoffset 300ms linear;
|
||||
}
|
||||
|
||||
.progress__percent {
|
||||
font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
|
||||
font-size: 43.2px;
|
||||
letter-spacing: -0.78px;
|
||||
line-height: 58px;
|
||||
user-select: none;
|
||||
}
|
||||
@ -1,24 +1,43 @@
|
||||
const html = require('choo/html');
|
||||
const number = require('../utils').number;
|
||||
const number = require('../../utils').number;
|
||||
|
||||
module.exports = function(selected, options, translate, changed) {
|
||||
const id = `select-${Math.random()}`;
|
||||
let x = selected;
|
||||
|
||||
return html`
|
||||
<div class="selectbox">
|
||||
<div onclick=${toggle}>
|
||||
<span class="link">${translate(selected)}</span>
|
||||
<svg width="32" height="32">
|
||||
<polygon points="8 18 17 28 26 18" fill="#0094fb"/>
|
||||
</svg>
|
||||
</div>
|
||||
<ul id="${id}" class="selectbox__options">
|
||||
${options.map(
|
||||
i => html`
|
||||
<li
|
||||
class="selectbox__option"
|
||||
onclick=${choose}
|
||||
data-value="${i}">${number(i)}</li>`
|
||||
)}
|
||||
</ul>
|
||||
</div>`;
|
||||
|
||||
function close() {
|
||||
const ul = document.getElementById(id);
|
||||
const body = document.querySelector('body');
|
||||
ul.classList.remove('active');
|
||||
ul.classList.remove('selectbox__options--active');
|
||||
body.removeEventListener('click', close);
|
||||
}
|
||||
|
||||
function toggle(event) {
|
||||
event.stopPropagation();
|
||||
const ul = document.getElementById(id);
|
||||
if (ul.classList.contains('active')) {
|
||||
if (ul.classList.contains('selectbox__options--active')) {
|
||||
close();
|
||||
} else {
|
||||
ul.classList.add('active');
|
||||
ul.classList.add('selectbox__options--active');
|
||||
const body = document.querySelector('body');
|
||||
body.addEventListener('click', close);
|
||||
}
|
||||
@ -37,21 +56,4 @@ module.exports = function(selected, options, translate, changed) {
|
||||
}
|
||||
close();
|
||||
}
|
||||
return html`
|
||||
<div class="selectbox">
|
||||
<div onclick=${toggle}>
|
||||
<span class="link">${translate(selected)}</span>
|
||||
<svg width="32" height="32">
|
||||
<polygon points="8 18 17 28 26 18" fill="#0094fb"/>
|
||||
</svg>
|
||||
</div>
|
||||
<ul id="${id}" class="selectOptions">
|
||||
${options.map(
|
||||
i =>
|
||||
html`<li class="selectOption" onclick=${choose} data-value="${i}">${number(
|
||||
i
|
||||
)}</li>`
|
||||
)}
|
||||
</ul>
|
||||
</div>`;
|
||||
};
|
||||
36
app/templates/selectbox/selectbox.css
Normal file
36
app/templates/selectbox/selectbox.css
Normal file
@ -0,0 +1,36 @@
|
||||
.selectbox {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectbox__options {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.selectbox__options--active {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
margin: 40px 0;
|
||||
background-color: var(--pageBGColor);
|
||||
border: 1px solid rgba(12, 12, 13, 0.3);
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 2px 4px rgba(12, 12, 13, 0.3);
|
||||
}
|
||||
|
||||
.selectbox__option {
|
||||
color: var(--lightTextColor);
|
||||
font-size: 12pt;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
padding: 0 60px;
|
||||
border-bottom: 1px solid rgba(12, 12, 13, 0.3);
|
||||
}
|
||||
|
||||
.selectbox__option:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
37
app/templates/setPasswordSection/index.js
Normal file
37
app/templates/setPasswordSection/index.js
Normal file
@ -0,0 +1,37 @@
|
||||
const html = require('choo/html');
|
||||
const passwordInput = require('../passwordInput');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const file = state.storage.getFileById(state.params.id);
|
||||
|
||||
return html`
|
||||
<div class="setPasswordSection">
|
||||
<div class="checkbox">
|
||||
<input
|
||||
${file.hasPassword ? 'disabled' : ''}
|
||||
${file.hasPassword ? 'checked' : ''}
|
||||
class="checkbox__input"
|
||||
id="add-password"
|
||||
type="checkbox"
|
||||
autocomplete="off"
|
||||
onchange=${togglePasswordInput}/>
|
||||
<label class="checkbox__label" for="add-password">
|
||||
${state.translate('requirePasswordCheckbox')}
|
||||
</label>
|
||||
</div>
|
||||
${passwordInput(file, state, emit)}
|
||||
</div>`;
|
||||
|
||||
function togglePasswordInput(e) {
|
||||
const unlockInput = document.getElementById('password-input');
|
||||
const boxChecked = e.target.checked;
|
||||
document
|
||||
.querySelector('form.passwordInput')
|
||||
.classList.toggle('passwordInput--hidden', !boxChecked);
|
||||
if (boxChecked) {
|
||||
unlockInput.focus();
|
||||
} else {
|
||||
unlockInput.value = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
70
app/templates/setPasswordSection/setPasswordSection.css
Normal file
70
app/templates/setPasswordSection/setPasswordSection.css
Normal file
@ -0,0 +1,70 @@
|
||||
.setPasswordSection {
|
||||
padding: 10px 0;
|
||||
align-self: left;
|
||||
max-width: 100%;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.checkbox__input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.checkbox__label {
|
||||
line-height: 23px;
|
||||
cursor: pointer;
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
||||
.checkbox__label::before {
|
||||
content: '';
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
margin-left: 5px;
|
||||
float: left;
|
||||
border: 1px solid rgba(12, 12, 13, 0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.checkbox__input:focus + .checkbox__label::before,
|
||||
.checkbox:hover .checkbox__label::before {
|
||||
border: 1px solid var(--primaryControlBGColor);
|
||||
}
|
||||
|
||||
.checkbox__input:checked + .checkbox__label {
|
||||
color: var(--textColor);
|
||||
}
|
||||
|
||||
.checkbox__input:checked + .checkbox__label::before {
|
||||
background-image: url('../assets/check-16-blue.svg');
|
||||
background-position: 2px 1px;
|
||||
}
|
||||
|
||||
.checkbox__input:disabled + .checkbox__label {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.checkbox__input:disabled + .checkbox__label::before {
|
||||
background-image: url('../assets/check-16.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 18px 18px;
|
||||
border-color: var(--successControlBGColor);
|
||||
background-color: var(--successControlBGColor);
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
@media (max-device-width: 520px), (max-width: 520px) {
|
||||
.setPasswordSection {
|
||||
align-self: center;
|
||||
min-width: 95%;
|
||||
}
|
||||
|
||||
.checkbox__label::before {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@ -1,81 +0,0 @@
|
||||
const html = require('choo/html');
|
||||
const raw = require('choo/html/raw');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const file = state.storage.getFileById(state.params.id);
|
||||
|
||||
return html`<div class="selectPassword">
|
||||
${passwordSpan(file.password)}
|
||||
<button
|
||||
id="resetButton"
|
||||
onclick=${toggleResetInput}
|
||||
>${state.translate('changePasswordButton')}</button>
|
||||
<form
|
||||
id='reset-form'
|
||||
class="setPassword hidden"
|
||||
onsubmit=${resetPassword}
|
||||
data-no-csrf>
|
||||
<input id="unlock-reset-input"
|
||||
class="unlock-input input-no-btn"
|
||||
maxlength="32"
|
||||
autocomplete="off"
|
||||
type="password"
|
||||
oninput=${inputChanged}
|
||||
placeholder="${state.translate('unlockInputPlaceholder')}">
|
||||
<input type="submit"
|
||||
id="unlock-reset-btn"
|
||||
class="btn btn-hidden"
|
||||
value="${state.translate('changePasswordButton')}"/>
|
||||
</form>
|
||||
</div>`;
|
||||
|
||||
function passwordSpan(password) {
|
||||
password = password || '●●●●●';
|
||||
const span = html`<span>${raw(
|
||||
state.translate('passwordResult', {
|
||||
password:
|
||||
'<pre class="passwordOriginal"></pre><pre class="passwordMask"></pre>'
|
||||
})
|
||||
)}</span>`;
|
||||
const og = span.querySelector('.passwordOriginal');
|
||||
const masked = span.querySelector('.passwordMask');
|
||||
og.textContent = password;
|
||||
masked.textContent = password.replace(/./g, '●');
|
||||
return span;
|
||||
}
|
||||
|
||||
function inputChanged() {
|
||||
const resetInput = document.getElementById('unlock-reset-input');
|
||||
const resetBtn = document.getElementById('unlock-reset-btn');
|
||||
if (resetInput.value.length > 0) {
|
||||
resetBtn.classList.remove('btn-hidden');
|
||||
resetInput.classList.remove('input-no-btn');
|
||||
} else {
|
||||
resetBtn.classList.add('btn-hidden');
|
||||
resetInput.classList.add('input-no-btn');
|
||||
}
|
||||
}
|
||||
|
||||
function resetPassword(event) {
|
||||
event.preventDefault();
|
||||
const password = document.querySelector('#unlock-reset-input').value;
|
||||
if (password.length > 0) {
|
||||
document.getElementById('copy').classList.remove('wait-password');
|
||||
document.getElementById('copy-btn').disabled = false;
|
||||
emit('password', { password, file });
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function toggleResetInput(event) {
|
||||
const form = event.target.parentElement.querySelector('form');
|
||||
const input = document.getElementById('unlock-reset-input');
|
||||
if (form.style.visibility === 'hidden' || form.style.visibility === '') {
|
||||
form.style.visibility = 'visible';
|
||||
input.focus();
|
||||
} else {
|
||||
form.style.visibility = 'hidden';
|
||||
}
|
||||
inputChanged();
|
||||
}
|
||||
};
|
||||
@ -1,70 +0,0 @@
|
||||
const html = require('choo/html');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const file = state.storage.getFileById(state.params.id);
|
||||
const div = html`
|
||||
<div class="selectPassword">
|
||||
<div id="addPasswordWrapper">
|
||||
<input
|
||||
id="addPassword"
|
||||
type="checkbox"
|
||||
autocomplete="off"
|
||||
onchange=${togglePasswordInput}/>
|
||||
<label for="addPassword">
|
||||
${state.translate('requirePasswordCheckbox')}
|
||||
</label>
|
||||
</div>
|
||||
<form class="setPassword hidden" onsubmit=${setPassword} data-no-csrf>
|
||||
<input id="unlock-input"
|
||||
class="unlock-input input-no-btn"
|
||||
maxlength="32"
|
||||
autocomplete="off"
|
||||
placeholder="${state.translate('unlockInputPlaceholder')}"
|
||||
type="password"
|
||||
oninput=${inputChanged}/>
|
||||
<input type="submit"
|
||||
id="unlock-btn"
|
||||
class="btn btn-hidden"
|
||||
value="${state.translate('addPasswordButton')}"/>
|
||||
</form>
|
||||
</div>`;
|
||||
|
||||
function inputChanged() {
|
||||
const input = document.getElementById('unlock-input');
|
||||
const btn = document.getElementById('unlock-btn');
|
||||
if (input.value.length > 0) {
|
||||
btn.classList.remove('btn-hidden');
|
||||
input.classList.remove('input-no-btn');
|
||||
} else {
|
||||
btn.classList.add('btn-hidden');
|
||||
input.classList.add('input-no-btn');
|
||||
}
|
||||
}
|
||||
|
||||
function togglePasswordInput(e) {
|
||||
const unlockInput = document.getElementById('unlock-input');
|
||||
const boxChecked = e.target.checked;
|
||||
document
|
||||
.querySelector('.setPassword')
|
||||
.classList.toggle('hidden', !boxChecked);
|
||||
if (boxChecked) {
|
||||
unlockInput.focus();
|
||||
} else {
|
||||
unlockInput.value = '';
|
||||
}
|
||||
inputChanged();
|
||||
}
|
||||
|
||||
function setPassword(event) {
|
||||
event.preventDefault();
|
||||
const password = document.getElementById('unlock-input').value;
|
||||
if (password.length > 0) {
|
||||
document.getElementById('copy').classList.remove('wait-password');
|
||||
document.getElementById('copy-btn').disabled = false;
|
||||
emit('password', { password, file });
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return div;
|
||||
};
|
||||
@ -134,10 +134,10 @@ function delay(delay = 100) {
|
||||
return new Promise(resolve => setTimeout(resolve, delay));
|
||||
}
|
||||
|
||||
function fadeOut(id) {
|
||||
const classes = document.getElementById(id).classList;
|
||||
classes.remove('fadeIn');
|
||||
classes.add('fadeOut');
|
||||
function fadeOut(selector) {
|
||||
const classes = document.querySelector(selector).classList;
|
||||
classes.remove('effect--fadeIn');
|
||||
classes.add('effect--fadeOut');
|
||||
return delay(300);
|
||||
}
|
||||
|
||||
|
||||
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path class="icon-copy" fill="#0A8DFF" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#0A8DFF" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/></svg>
|
||||
|
Before Width: | Height: | Size: 416 B After Width: | Height: | Size: 398 B |
1236
assets/main.css
1236
assets/main.css
File diff suppressed because it is too large
Load Diff
17
assets/spinner.svg
Normal file
17
assets/spinner.svg
Normal file
@ -0,0 +1,17 @@
|
||||
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
|
||||
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(1 1)" stroke-width="2">
|
||||
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
|
||||
<path d="M36 18c0-9.94-8.06-18-18-18">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
from="0 18 18"
|
||||
to="360 18 18"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 694 B |
@ -1,5 +1,4 @@
|
||||
last 2 chrome versions
|
||||
last 2 firefox versions
|
||||
firefox esr
|
||||
ie >= 9
|
||||
safari >= 9
|
||||
safari > 9
|
||||
|
||||
6107
package-lock.json
generated
6107
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -12,7 +12,7 @@
|
||||
"clean": "rimraf dist",
|
||||
"build": "npm run clean && webpack -p",
|
||||
"lint": "npm-run-all lint:*",
|
||||
"lint:css": "stylelint -v",
|
||||
"lint:css": "stylelint app/*.css app/**/*.css",
|
||||
"lint:js": "eslint .",
|
||||
"lint-locales": "node scripts/lint-locales",
|
||||
"lint-locales:dev": "npm run lint-locales",
|
||||
@ -51,7 +51,6 @@
|
||||
"node": ">=8.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^8.0.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-yo-yoify": "^1.0.2",
|
||||
@ -64,13 +63,13 @@
|
||||
"cross-env": "^5.1.3",
|
||||
"css-loader": "^0.28.9",
|
||||
"css-mqpacker": "^6.0.2",
|
||||
"cssnano": "^3.10.0",
|
||||
"eslint": "^4.17.0",
|
||||
"eslint-plugin-mocha": "^4.11.0",
|
||||
"eslint-plugin-node": "^6.0.0",
|
||||
"eslint-plugin-security": "^1.4.0",
|
||||
"expose-loader": "^0.7.4",
|
||||
"extract-loader": "^1.0.2",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"file-loader": "^1.1.6",
|
||||
"fluent-intl-polyfill": "^0.1.0",
|
||||
"git-rev-sync": "^1.9.1",
|
||||
@ -80,9 +79,12 @@
|
||||
"lint-staged": "^6.1.0",
|
||||
"mocha": "^5.0.0",
|
||||
"nanobus": "^4.3.2",
|
||||
"nanotiming": "^7.3.0",
|
||||
"npm-run-all": "^4.1.2",
|
||||
"nsp": "^3.1.0",
|
||||
"nyc": "^11.4.1",
|
||||
"nyc": "^11.5.0",
|
||||
"postcss-cssnext": "^3.1.0",
|
||||
"postcss-import": "^11.1.0",
|
||||
"postcss-loader": "^2.1.0",
|
||||
"prettier": "^1.10.2",
|
||||
"proxyquire": "^1.8.0",
|
||||
@ -105,7 +107,7 @@
|
||||
"webpack-unassert-loader": "^1.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"aws-sdk": "^2.192.0",
|
||||
"aws-sdk": "^2.196.0",
|
||||
"body-parser": "^1.18.2",
|
||||
"choo": "^6.7.0",
|
||||
"cldr-core": "^32.0.0",
|
||||
|
||||
@ -1,14 +1,12 @@
|
||||
const autoprefixer = require('autoprefixer');
|
||||
const cssnano = require('cssnano');
|
||||
const mqpacker = require('css-mqpacker');
|
||||
|
||||
const config = require('./server/config');
|
||||
|
||||
const options = {
|
||||
plugins: [autoprefixer, mqpacker, cssnano]
|
||||
plugins: {
|
||||
'postcss-import': {},
|
||||
'postcss-cssnext': {},
|
||||
'css-mqpacker': {}
|
||||
}
|
||||
};
|
||||
|
||||
if (config.env === 'development') {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
options.map = { inline: true };
|
||||
}
|
||||
|
||||
|
||||
@ -113,3 +113,5 @@ enableJavascript = Please enable JavaScript and try again.
|
||||
expiresHoursMinutes = { $hours }h { $minutes }m
|
||||
# A short representation of a countdown timer containing the number of minutes remaining as digits, example "56m"
|
||||
expiresMinutes = { $minutes }m
|
||||
# A short status message shown when a password is successfully set
|
||||
passwordIsSet = Password set
|
||||
|
||||
@ -30,7 +30,7 @@ module.exports = function(state, body = '') {
|
||||
|
||||
<title>${state.title}</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="${assets.get('main.css')}" />
|
||||
<link rel="stylesheet" type="text/css" href="${assets.get('style.css')}" />
|
||||
|
||||
<!-- generic favicons -->
|
||||
<link rel="icon" href="${assets.get('favicon-32.png')}" sizes="32x32">
|
||||
|
||||
@ -2,6 +2,7 @@ const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const ManifestPlugin = require('webpack-manifest-plugin');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const IS_DEV = process.env.NODE_ENV === 'development';
|
||||
|
||||
const regularJSOptions = {
|
||||
@ -13,7 +14,8 @@ const regularJSOptions = {
|
||||
module.exports = {
|
||||
entry: {
|
||||
vendor: ['babel-polyfill', 'fluent'],
|
||||
app: ['./app/main.js']
|
||||
app: ['./app/main.js'],
|
||||
style: ['./app/main.css']
|
||||
},
|
||||
output: {
|
||||
filename: '[name].[chunkhash:8].js',
|
||||
@ -88,17 +90,15 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[hash:8].[ext]'
|
||||
}
|
||||
},
|
||||
'extract-loader',
|
||||
{ loader: 'css-loader', options: { importLoaders: 1 } },
|
||||
'postcss-loader'
|
||||
]
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: { modules: false, importLoaders: 1 }
|
||||
},
|
||||
'postcss-loader'
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
test: require.resolve('./package.json'),
|
||||
@ -153,6 +153,7 @@ module.exports = {
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'runtime'
|
||||
}),
|
||||
new ExtractTextPlugin('style.[chunkhash:8].css'),
|
||||
new ManifestPlugin()
|
||||
],
|
||||
devServer: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user