diff --git a/app/base.css b/app/base.css deleted file mode 100644 index 9c5a0ab3..00000000 --- a/app/base.css +++ /dev/null @@ -1,309 +0,0 @@ -:root { - --pageBGColor: #fff; - --lightControlBGColor: #e6e6e6; - --primaryControlBGColor: #0a84ff; - --primaryControlFGColor: #fff; - --primaryControlHoverColor: #0473e2; - --inputTextColor: #000; - --errorColor: #d70022; - --linkColor: #0094fb; - --textColor: #0c0c0d; - --lightBorderColor: rgba(12, 12, 12, 0.2); - --lightTextColor: #737373; - --successControlBGColor: #12bc00; - --successControlFGColor: #fff; - --large-box-shadow: 0 4px 16px rgba(12, 12, 13, 0.1); - --edge-size: 96px; - --grid-basis: 12px; -} - -*, -*::before, -*::after { - box-sizing: inherit; -} - -html { - font-family: Futura, -apple-system, BlinkMacSystemFont, 'SF Pro Text', - 'segoe ui', 'helvetica neue', helvetica, ubuntu, roboto, noto, arial, - sans-serif; - box-sizing: border-box; -} - -body { - display: flex; - flex-direction: column; - font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui', - 'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif; - height: 100vh; - margin: 0; - background-color: #f8f9fa; -} - -input, -select, -textarea, -button { - font-family: inherit; - margin: 0; -} - -a { - text-decoration: none; -} - -.main { - flex: 1 1 auto; - background: var(--pageBGColor); - box-shadow: var(--large-box-shadow); - width: 90%; - max-width: 960px; - min-height: 550px; - max-height: 600px; - align-self: center; - margin: auto 0; - display: grid; - grid-template-columns: 70px 360px 1fr; - grid-template-areas: 'nav files content'; -} - -.split { - display: flex; - flex-direction: row; - justify-content: space-between; - height: 100%; -} - -.split__left { - height: 100%; - border-right: 1px solid #d7d7db; - display: flex; - flex-direction: column; - text-align: center; - grid-area: files; -} - -.split__right { - flex: 1; - display: flex; - flex-direction: column; - align-items: flex-end; - justify-content: center; - position: relative; - grid-area: content; -} - -.wide { - grid-area: files-start / files-start / content-end / content-end; - overflow: hidden; - display: flex; - flex-direction: column; - margin-left: 12px; - height: 100%; -} - -.noscript { - text-align: center; - border: 3px solid var(--errorColor); - border-radius: 6px; -} - -.footer__mozLogo { - width: 112px; - height: 32px; - margin-bottom: -5px; -} - -.btn { - display: flex; - width: 100%; - line-height: 1.2; - align-items: center; - justify-content: center; - padding: 16px; - font-size: 17px; - font-weight: 500; - text-transform: uppercase; - text-align: center; - letter-spacing: 0.56px; - color: white; - background: black; - cursor: pointer; - border: 0; -} - -.btn:hover { - background-color: var(--primaryControlHoverColor); -} - -.btn--stripes { - background: repeating-linear-gradient( - -65deg, - #7c7c7c 0, - #7c7c7c 17px, - #737373 17px, - #737373 30px - ); - background-size: 300% 300%; - animation: barberpole 12s linear infinite; -} - -@keyframes barberpole { - 0% { - background-position: 100% 0%; - } - - 100% { - background-position: 0% 0%; - } -} - -.btn--cancel { - font-size: 13px; - font-weight: 700; - background: none; - color: var(--errorColor); - border: none; -} - -.input { - border: 1px solid var(--lightBorderColor); - font-size: 20px; - color: var(--inputTextColor); - font-family: 'SF Pro Text', sans-serif; - font-weight: 300; - padding-left: 10px; - padding-right: 10px; -} - -.input--error { - border-color: var(--errorColor); -} - -.link { - color: var(--linkColor); - text-decoration: none; -} - -.link:focus, -.link:active, -.link:hover { - color: var(--primaryControlHoverColor); -} - -.link--action { - font-weight: 500; - font-size: 14px; - text-align: center; -} - -.page { - height: 100%; - padding: 24px; - display: flex; - flex-direction: column; - text-align: center; -} - -.effect--fadeOut { - opacity: 0; - animation: fadeout 200ms linear; -} - -@keyframes fadeout { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -.effect--fadeIn { - opacity: 1; - animation: fadein 200ms linear; -} - -@keyframes fadein { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -.error { - color: var(--errorColor); - font-weight: 600; -} - -.title { - color: var(--lightTextColor); - font-size: 18px; - line-height: 40px; - margin: 20px auto; - max-width: 520px; - font-family: 'SF Pro Text', sans-serif; - font-weight: 700; - word-wrap: break-word; -} - -.description { - font-size: 13px; - text-align: left; - margin: 14px auto; - color: var(--lightTextColor); - width: 95%; -} - -.visible { - visibility: visible !important; -} - -.invisible { - visibility: hidden; -} - -.noDisplay { - display: none !important; -} - -.flexible { - flex: 1; -} - -@media (max-device-width: 720px), (max-width: 720px) { - body { - height: unset; - } - - .main { - box-shadow: none; - align-items: center; - max-height: none; - width: 100%; - grid-template-columns: none; - grid-template-rows: 90px minmax(160px, 30vh) minmax(240px, 30vh) 70px; - grid-template-areas: - 'promo' - 'files' - 'content' - 'nav'; - } - - .split__left { - border: none; - } - - .description { - margin: 0 auto 25px; - } - - .uploads { - flex: none; - padding-top: 6px; - } -} diff --git a/app/fileManager.js b/app/fileManager.js index 7e2eff00..a9a32271 100644 --- a/app/fileManager.js +++ b/app/fileManager.js @@ -5,7 +5,7 @@ import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils'; import * as metrics from './metrics'; import Archive from './archive'; import { bytes } from './utils'; -import okDialog from './templates/okDialog'; +import okDialog from './ui/okDialog'; export default function(state, emitter) { let lastRender = 0; @@ -108,6 +108,9 @@ export default function(state, emitter) { count: LIMITS.MAX_FILES_PER_ARCHIVE }) ); + if (state.archive.numFiles === 0) { + state.archive = null; + } } render(); }); diff --git a/app/pages/blank.js b/app/pages/blank.js deleted file mode 100644 index 6e8decdc..00000000 --- a/app/pages/blank.js +++ /dev/null @@ -1,5 +0,0 @@ -const html = require('choo/html'); - -module.exports = function() { - return html`
`; -}; diff --git a/app/pages/error/index.js b/app/pages/error/index.js deleted file mode 100644 index 5b6167f5..00000000 --- a/app/pages/error/index.js +++ /dev/null @@ -1,22 +0,0 @@ -const html = require('choo/html'); -const assets = require('../../../common/assets'); -const title = require('../../templates/title'); - -module.exports = function(state) { - return html` -
- - ${title(state)} - -
${state.translate('errorPageHeader')}
- - -
- ${state.translate('uploadPageExplainer')} -
- - ${state.translate('sendYourFilesLink')} - - -
`; -}; diff --git a/app/pages/legal.js b/app/pages/legal.js deleted file mode 100644 index 95103a51..00000000 --- a/app/pages/legal.js +++ /dev/null @@ -1,34 +0,0 @@ -const html = require('choo/html'); -const raw = require('choo/html/raw'); -const title = require('../templates/title'); - -module.exports = function(state) { - return html` -
- ${title(state)} -
${state.translate('legalHeader')}
- ${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/' - ]) - )} -
- `; -}; - -function replaceLinks(str, urls) { - let i = 0; - const s = str.replace( - /([^<]+)<\/a>/g, - (m, v) => `${v}` - ); - return `
${s}
`; -} diff --git a/app/pages/notFound/index.js b/app/pages/notFound/index.js deleted file mode 100644 index 6267218b..00000000 --- a/app/pages/notFound/index.js +++ /dev/null @@ -1,18 +0,0 @@ -const html = require('choo/html'); -const assets = require('../../../common/assets'); -const title = require('../../templates/title'); - -module.exports = function(state) { - return html` -
- ${title(state)} -
${state.translate('expiredPageHeader')}
- -
- ${state.translate('uploadPageExplainer')} -
- - ${state.translate('sendYourFilesLink')} - -
`; -}; diff --git a/app/pages/password/index.js b/app/pages/password/index.js deleted file mode 100644 index c54a857e..00000000 --- a/app/pages/password/index.js +++ /dev/null @@ -1,19 +0,0 @@ -const html = require('choo/html'); -const titleSection = require('../../templates/title'); -const downloadPassword = require('../../templates/downloadPassword'); - -module.exports = function(state, emit) { - return html` -
- ${titleSection(state)} - -
${state.translate('downloadMessage2')}
- ${downloadPassword(state, emit)} - - - ${state.translate('sendYourFilesLink')} - - -
- `; -}; diff --git a/app/pages/preview/index.js b/app/pages/preview/index.js deleted file mode 100644 index 12d6aee2..00000000 --- a/app/pages/preview/index.js +++ /dev/null @@ -1,41 +0,0 @@ -const html = require('choo/html'); -const downloadButton = require('../../templates/downloadButton'); -const downloadedFiles = require('../../templates/uploadedFileList'); -const split = require('../split'); - -module.exports = function(state, emit) { - const fileInfo = state.fileInfo; - - const trySendLink = html` - - ${state.translate('sendYourFilesLink')} - `; - const cancelButton = html` - - `; - - const bottomLink = - state.transfer.state === 'downloading' ? cancelButton : trySendLink; - - return split( - state, - emit, - downloadedFiles(fileInfo, state, emit), - html` -
-
${state.translate('downloadMessage2')}
- ${downloadButton(state, emit)} - ${bottomLink} -
` - ); - - function cancel() { - if (state.transfer.state === 'downloading') { - emit('cancel'); - } - } -}; diff --git a/app/pages/share/index.js b/app/pages/share/index.js deleted file mode 100644 index 2ba0d3e3..00000000 --- a/app/pages/share/index.js +++ /dev/null @@ -1,105 +0,0 @@ -const html = require('choo/html'); -const raw = require('choo/html/raw'); -const notFound = require('../notFound'); -const deletePopup = require('../../templates/popup'); -const uploadedFileList = require('../../templates/uploadedFileList'); -const timeLimitText = require('../../templates/timeLimitText'); -const { allowedCopy, delay } = require('../../utils'); -const split = require('../split'); - -module.exports = function(state, emit) { - const file = state.storage.getFileById(state.params.id); - if (!file) { - return notFound(state); - } - - const passwordReminderClass = file._hasPassword - ? '' - : 'passwordReminder--hidden'; - - return split( - state, - emit, - uploadedFileList(file, state, emit), - html` -
-
- ${expireInfo(file, state.translate)} - ${state.translate('copyUrlLabel')} -
(don't forget the password too)
-
- - - - - -
- ${deletePopup( - state.translate('deletePopupText'), - state.translate('deletePopupYes'), - state.translate('deletePopupCancel'), - deleteFile - )} -
- - -
` - ); - - function showDeletePopup() { - const popup = document.querySelector('.popup'); - popup.classList.add('popup--show'); - popup.focus(); - } - - async function copyLink() { - if (allowedCopy()) { - emit('copy', { url: file.url, location: 'success-screen' }); - const input = document.getElementById('fileUrl'); - input.disabled = true; - const copyBtn = document.getElementById('copyBtn'); - copyBtn.disabled = true; - copyBtn.classList.add('copyBtn--copied'); - copyBtn.replaceChild( - html``, - copyBtn.firstChild - ); - await delay(2000); - input.disabled = false; - copyBtn.disabled = false; - copyBtn.classList.remove('copyBtn--copied'); - copyBtn.textContent = state.translate('copyUrlFormButton'); - } - } - - async function deleteFile() { - emit('delete', { file, location: 'success-screen' }); - emit('pushState', '/'); - } -}; - -function expireInfo(file, translate) { - const el = html`
- ${raw( - translate('expireInfo', { - downloadCount: translate('downloadCount', { num: file.dlimit }), - timespan: timeLimitText(translate, file.timeLimit) - }) - )} -
`; - - return el; -} diff --git a/app/pages/share/share.css b/app/pages/share/share.css deleted file mode 100644 index 7a1d1b7f..00000000 --- a/app/pages/share/share.css +++ /dev/null @@ -1,80 +0,0 @@ -.sharePage__copyText { - margin: 8px 0 8px; - word-wrap: break-word; - font-size: 15px; - color: var(--lightTextColor); - text-align: center; -} - -.sharePage__passwordReminder { - font-size: 11px; - font-style: italic; -} - -.passwordReminder--hidden { - display: none; -} - -.sharePage__deletePopup { - position: relative; - margin-top: -70px; - pointer-events: none; -} - -.shareTitle { - margin: 8px auto 15px; -} - -.copySection { - display: flex; - flex-direction: column; - align-items: center; - margin: 24px auto; - width: 80%; -} - -.copySection__url { - box-sizing: border-box; - height: 30px; - border: 1px solid var(--lightBorderColor); - border-radius: 4px; - font-size: 15px; - color: var(--primaryControlBGColor); - margin: 0 0 6px; - padding: 6px; - font-family: 'SF Pro Text', sans-serif; - letter-spacing: 0; - line-height: 18px; - font-weight: 500; - width: 100%; -} - -.copySection__url:disabled { - background: var(--successControlFGColor); -} - -.input--copied { - border-color: var(--successControlBGColor); -} - -.copyBtn--copied, -.copyBtn--copied:hover { - background: var(--successControlBGColor); - color: var(--successControlFGColor); -} - -.btn--delete { - border: none; - align-self: center; - width: 176px; - background: #fff; - margin: 10px 0 0; - font-size: 14px; - line-height: 16px; - color: var(--errorColor); - cursor: pointer; -} - -.btn--delete:hover { - text-decoration: underline; -} diff --git a/app/pages/signin/index.js b/app/pages/signin/index.js deleted file mode 100644 index 16bbeb2e..00000000 --- a/app/pages/signin/index.js +++ /dev/null @@ -1,63 +0,0 @@ -/* globals LIMITS */ -const html = require('choo/html'); -const assets = require('../../../common/assets'); -const title = require('../../templates/title'); -const bytes = require('../../utils').bytes; - -module.exports = function(state, emit) { - return html` -
- ${title(state)} -
- ${state.translate('accountBenefitTitle')} - -
-
- - - ${state.translate('signInContinueMessage')} -
- - -
-
- -
- `; - - function submitEmail(event) { - event.preventDefault(); - const el = document.getElementById('email-input'); - const email = el.value; - if (email) { - // just check if it's the right shape - const a = email.split('@'); - if (a.length === 2 && a.every(s => s.length > 0)) { - return emit('login', email); - } - } - el.value = ''; - } -}; diff --git a/app/pages/signin/signin.css b/app/pages/signin/signin.css deleted file mode 100644 index 85745267..00000000 --- a/app/pages/signin/signin.css +++ /dev/null @@ -1,33 +0,0 @@ -.signInPage { - font-size: 13px; - line-height: 18px; - color: var(--lightTextColor); -} - -.signIn__info { - width: 308px; - margin: 12px auto 0; - text-align: left; -} - -.signIn__firefoxLogo { - display: block; - margin: 0 auto; -} - -.signIn__emailLabel { - font-size: 22px; - margin: 8px 0; -} - -.signIn__emailInput { - box-sizing: border-box; - width: 310px; - height: 40px; - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 4px; - margin: 8px 0; - padding: 0 8px; - font-size: 18px; - color: var(--lightTextColor); -} diff --git a/app/pages/split.js b/app/pages/split.js deleted file mode 100644 index 32652bcd..00000000 --- a/app/pages/split.js +++ /dev/null @@ -1,20 +0,0 @@ -const html = require('choo/html'); -const title = require('../templates/title'); -const signupPromo = require('../templates/signupPromo'); -const controlArea = require('../templates/controlArea'); - -module.exports = function(state, emit, a, b) { - return html` -
- ${controlArea(state, emit)} -
- ${title(state)} - ${a} -
-
- ${b} -
- ${signupPromo(state)} -
- `; -}; diff --git a/app/pages/unsupported/index.js b/app/pages/unsupported/index.js deleted file mode 100644 index cb3c91b4..00000000 --- a/app/pages/unsupported/index.js +++ /dev/null @@ -1,75 +0,0 @@ -const html = require('choo/html'); -const assets = require('../../../common/assets'); -const title = require('../../templates/title'); - -module.exports = function(state) { - let strings = {}; - let why = ''; - let url = ''; - let buttonAction = ''; - - if (state.params.reason !== 'outdated') { - strings = unsupportedStrings(state); - why = html` -
- - ${state.translate('notSupportedLink')} - -
`; - url = - 'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com'; - buttonAction = html` -
- Firefox
${strings.button} -
`; - } else { - strings = outdatedStrings(state); - url = 'https://support.mozilla.org/kb/update-firefox-latest-version'; - buttonAction = html` -
- ${strings.button} -
`; - } - - return html` -
- ${title(state)} -
${strings.header}
-
- ${strings.description} - ${why} -
- -
- - - ${buttonAction} - -
- -
- ${strings.explainer} -
-
`; -}; - -function outdatedStrings(state) { - return { - header: state.translate('notSupportedHeader'), - description: state.translate('notSupportedOutdatedDetail'), - button: state.translate('updateFirefox'), - explainer: state.translate('uploadPageExplainer') - }; -} - -function unsupportedStrings(state) { - return { - header: state.translate('notSupportedHeader'), - description: state.translate('notSupportedDetail'), - button: state.translate('downloadFirefoxButtonSub'), - explainer: state.translate('uploadPageExplainer') - }; -} diff --git a/app/pages/unsupported/unsupported.css b/app/pages/unsupported/unsupported.css deleted file mode 100644 index b34adcae..00000000 --- a/app/pages/unsupported/unsupported.css +++ /dev/null @@ -1,54 +0,0 @@ -.unsupportedPage { - justify-content: center; - align-items: center; -} - -.unsupportedPage__error { - margin: 10px 0 20px; -} - -.unsupportedPage__info { - font-size: 13px; - color: var(--lightTextColor); - margin: 0 auto 10px; -} - -.firefoxDownload { - flex: 2; -} - -.firefoxDownload__button { - margin: 0 auto 20px; - height: 70px; - width: 250px; - background: #12bc00; - border-radius: 3px; - cursor: pointer; - border: 0; - font-family: 'Fira Sans', 'segoe ui', sans-serif; - font-weight: 500; - color: var(--primaryControlFGColor); - font-size: 26px; - display: flex; - justify-content: center; - align-items: center; - line-height: 1; - padding: 8px; -} - -.firefoxDownload__logo { - width: 55px; -} - -.firefoxDownload__action { - text-align: left; - text-transform: uppercase; - margin-left: 20px; -} - -.firefoxDownload__text { - text-transform: none; - font-family: 'Fira Sans', 'segoe ui', sans-serif; - font-weight: 300; - font-size: 17px; -} diff --git a/app/pages/uploads/index.js b/app/pages/uploads/index.js deleted file mode 100644 index 23e6ee05..00000000 --- a/app/pages/uploads/index.js +++ /dev/null @@ -1,18 +0,0 @@ -const html = require('choo/html'); -const controlArea = require('../../templates/controlArea'); -const archiveTile = require('../../templates/archiveTile'); - -module.exports = function(state, emit) { - const fileArea = state.storage.files.length - ? html`` - : html`
nothing to see here
`; - return html`
- ${controlArea(state, emit)} -
-

${state.translate('myUploads')}

- ${fileArea} -
-
`; -}; diff --git a/app/pages/uploads/uploads.css b/app/pages/uploads/uploads.css deleted file mode 100644 index a2a2612e..00000000 --- a/app/pages/uploads/uploads.css +++ /dev/null @@ -1,11 +0,0 @@ -.myUploads { - margin: 0; - padding: 0; - display: grid; - grid-gap: 12px; - grid-template-columns: repeat(auto-fit, 150px); - grid-auto-columns: 150px; - grid-auto-rows: 160px; - list-style-type: none; - overflow: scroll; -} diff --git a/app/pages/welcome/index.js b/app/pages/welcome/index.js deleted file mode 100644 index 0417f1e5..00000000 --- a/app/pages/welcome/index.js +++ /dev/null @@ -1,6 +0,0 @@ -const fileManager = require('../../templates/fileManager'); -const split = require('../split'); - -module.exports = function(state, emit) { - return split(state, emit, fileManager(state, emit)); -}; diff --git a/app/templates/archiveTile/archiveTile.css b/app/templates/archiveTile/archiveTile.css deleted file mode 100644 index 767edcf4..00000000 --- a/app/templates/archiveTile/archiveTile.css +++ /dev/null @@ -1,10 +0,0 @@ -.archiveTile { - border: 1px solid #d7d7db; - border-radius: 4px; - width: 100%; - height: 100%; -} - -.archiveTile:hover { - border: 1px solid lightblue; -} diff --git a/app/templates/archiveTile/index.js b/app/templates/archiveTile/index.js deleted file mode 100644 index 9992b4b5..00000000 --- a/app/templates/archiveTile/index.js +++ /dev/null @@ -1,8 +0,0 @@ -const html = require('choo/html'); - -module.exports = function(archive) { - return html` -
  • - ${archive.name} -
    • `; -}; diff --git a/app/templates/controlArea/controlArea.css b/app/templates/controlArea/controlArea.css deleted file mode 100644 index 05f961ea..00000000 --- a/app/templates/controlArea/controlArea.css +++ /dev/null @@ -1,22 +0,0 @@ -.controlArea { - border-right: 1px solid #d7d7db; -} - -.controlArea > ul { - margin: 0; - padding: 0; - list-style-type: none; - display: flex; - flex-direction: column; - align-items: center; -} - -.controlArea > ul > li { - margin: 12px; -} - -@media (max-device-width: 720px), (max-width: 720px) { - .controlArea > ul { - flex-direction: row; - } -} diff --git a/app/templates/controlArea/index.js b/app/templates/controlArea/index.js deleted file mode 100644 index ca456bc8..00000000 --- a/app/templates/controlArea/index.js +++ /dev/null @@ -1,28 +0,0 @@ -const html = require('choo/html'); -const assets = require('../../../common/assets'); -const userAccount = require('../userAccount'); - -module.exports = function(state, emit) { - const account = state.capabilities.account - ? html`
  • - ${userAccount(state, emit)} -
    • ` - : null; - return html` - - `; -}; diff --git a/app/templates/downloadButton/downloadButton.css b/app/templates/downloadButton/downloadButton.css deleted file mode 100644 index 821bcf18..00000000 --- a/app/templates/downloadButton/downloadButton.css +++ /dev/null @@ -1,20 +0,0 @@ -.btn--download { - margin: 0 0 13px; -} - -.btn--complete, -.btn--complete:hover { - background-color: var(--successControlBGColor); -} - -.btn--blueStripes { - background: repeating-linear-gradient( - -65deg, - #3282f2 0, - #3282f2 17px, - #3c87eb 17px, - #3c87eb 30px - ); - background-size: 300% 300%; - animation: barberpole 12s linear infinite; -} diff --git a/app/templates/downloadButton/index.js b/app/templates/downloadButton/index.js deleted file mode 100644 index fd020cb6..00000000 --- a/app/templates/downloadButton/index.js +++ /dev/null @@ -1,37 +0,0 @@ -const html = require('choo/html'); -const percent = require('../../utils').percent; - -module.exports = function(state, emit) { - const downloadState = state.transfer.state; - const progress = percent(state.transfer.progressRatio); - - let btnText = ''; - let btnClass = ''; - - if (downloadState === 'complete') { - btnText = state.translate('downloadFinish'); - btnClass = 'btn--complete'; - } else if (downloadState === 'decrypting') { - btnText = state.translate('decryptingFile'); - btnClass = 'btn--blueStripes'; - } else if (downloadState === 'downloading') { - btnText = state.translate('downloadProgressButton', { progress }); - btnClass = 'btn--blueStripes'; - } else { - btnText = state.translate('downloadButtonLabel'); - } - - return html` - `; - - function download(event) { - event.preventDefault(); - event.target.disabled = true; - if (downloadState === 'ready') { - emit('download', state.fileInfo); - } - } -}; diff --git a/app/templates/downloadPassword/downloadPassword.css b/app/templates/downloadPassword/downloadPassword.css deleted file mode 100644 index fd07616d..00000000 --- a/app/templates/downloadPassword/downloadPassword.css +++ /dev/null @@ -1,31 +0,0 @@ -.passwordSection { - margin: auto; - text-align: center; - padding: 40px 0; - width: 80%; -} - -.passwordForm { - margin: 13px; -} - -.passwordForm__input { - width: 100%; - height: 40px; - box-sizing: border-box; -} - -.unlockBtn { - margin-top: 48px; -} - -.unlockBtn--error, -.unlockBtn--error:hover { - background-color: var(--errorColor); -} - -.passwordForm__error { - font-size: 13px; - font-weight: 600; - visibility: hidden; -} diff --git a/app/templates/downloadPassword/index.js b/app/templates/downloadPassword/index.js deleted file mode 100644 index a4f74002..00000000 --- a/app/templates/downloadPassword/index.js +++ /dev/null @@ -1,60 +0,0 @@ -const html = require('choo/html'); - -module.exports = function(state, emit) { - const fileInfo = state.fileInfo; - const invalid = fileInfo.password === null; - - const visible = invalid ? 'visible' : ''; - const invalidBtn = invalid ? 'unlockBtn--error' : ''; - - const div = html` -
    - - - -
    - - - - -
    -
    `; - - if (!(div instanceof String)) { - setTimeout(() => document.getElementById('password-input').focus()); - } - - function inputChanged() { - const input = document.querySelector('.passwordForm__error'); - input.classList.remove('visible'); - const btn = document.getElementById('password-btn'); - btn.classList.remove('unlockBtn--error'); - } - - function checkPassword(event) { - event.preventDefault(); - const password = document.getElementById('password-input').value; - if (password.length > 0) { - document.getElementById('password-btn').disabled = true; - state.fileInfo.url = window.location.href; - state.fileInfo.password = password; - emit('getMetadata'); - } - return false; - } - - return div; -}; diff --git a/app/templates/expireInfo/index.js b/app/templates/expireInfo/index.js deleted file mode 100644 index d0aa7ac7..00000000 --- a/app/templates/expireInfo/index.js +++ /dev/null @@ -1,68 +0,0 @@ -/* globals DEFAULTS */ -const html = require('choo/html'); -const raw = require('choo/html/raw'); -const selectbox = require('../selectbox'); -const timeLimitText = require('../timeLimitText'); -const signupDialog = require('../signupDialog'); - -module.exports = function(state, emit) { - const el = html`
    ${raw( - state.translate('frontPageExpireInfo', { - downloadCount: '', - timespan: '' - }) - )} -
    `; - if (el.__encoded) { - // we're rendering on the server - return el; - } - - const counts = DEFAULTS.DOWNLOAD_COUNTS.filter( - i => state.capabilities.account || i <= state.user.maxDownloads - ); - - const dlCountSelect = el.querySelector('#dlCount'); - el.replaceChild( - selectbox( - state.downloadCount || 1, - counts, - num => state.translate('downloadCount', { num }), - value => { - const max = state.user.maxDownloads; - if (value > max) { - state.modal = signupDialog(); - value = max; - } - state.downloadCount = value; - emit('render'); - } - ), - dlCountSelect - ); - - const expires = DEFAULTS.EXPIRE_TIMES_SECONDS.filter( - i => state.capabilities.account || i <= state.user.maxExpireSeconds - ); - - const timeSelect = el.querySelector('#timespan'); - el.replaceChild( - selectbox( - state.timeLimit || 86400, - expires, - num => timeLimitText(state.translate, num), - value => { - const max = state.user.maxExpireSeconds; - if (value > max) { - state.modal = signupDialog(); - value = max; - } - state.timeLimit = value; - emit('render'); - } - ), - timeSelect - ); - - return el; -}; diff --git a/app/templates/file/file.css b/app/templates/file/file.css deleted file mode 100644 index 67e436a0..00000000 --- a/app/templates/file/file.css +++ /dev/null @@ -1,100 +0,0 @@ -.fileToast { - flex: none; - display: block; - margin: 6px 0 0; - overflow: hidden; - font-size: 11px; - line-height: 18px; - color: var(--lightTextColor); - background-color: var(--pageBGColor); - position: relative; - border: 3px solid rgba(12, 12, 12, 0.2); - background-clip: padding-box; - box-sizing: border-box; - height: 53px; - border-radius: 4px; -} - -.fileToast__content { - height: 100%; - position: relative; - z-index: 2; -} - -.fileToast::after { - position: absolute; - z-index: 1; - content: ''; - transition: all 0.25s; - top: 0; - left: 50%; - width: 0; - height: 100%; - background-color: var(--primaryControlBGColor); -} - -.fileToast:hover { - background-color: #eee; -} - -.fileToast--active { - color: var(--primaryControlFGColor); -} - -.fileToast--active::after { - left: 0%; - width: 100%; -} - -.fileData { - margin: 8px 16px 8px 44px; - overflow: hidden; -} - -.fileName { - margin: 0; - font-size: 13px; - font-weight: 500; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -.fileInfo { - margin: 0; -} - -.fileToast .fileIcon { - margin: 0 8px; -} - -@media (max-device-width: 750px), (max-width: 750px) { - .fileToast { - height: 32px; - } - - .fileToast__content { - display: flex; - line-height: 13px; - margin: 0; - align-items: center; - } - - .fileData { - flex: auto; - display: flex; - flex-wrap: nowrap; - margin: 0 6px 0 0; - } - - .fileInfo { - flex: none; - margin-left: auto; - } - - .fileToast .fileIcon { - flex: none; - transform: scale(0.5); - color: transparent; - } -} diff --git a/app/templates/file/index.js b/app/templates/file/index.js deleted file mode 100644 index b0221a42..00000000 --- a/app/templates/file/index.js +++ /dev/null @@ -1,74 +0,0 @@ -const html = require('choo/html'); -const number = require('../../utils').number; -const bytes = require('../../utils').bytes; -const fileIcon = require('../fileIcon'); - -module.exports = function(file, state) { - const ttl = file.expiresAt - Date.now(); - const remainingTime = - timeLeft(ttl, state) || state.translate('linkExpiredAlt'); - const downloadLimit = file.dlimit || 1; - const totalDownloads = file.dtotal || 0; - - const multiFiles = file.manifest.files; - const fileName = - multiFiles.length > 1 - ? `${multiFiles[0].name} + ${state.translate('fileCount', { - num: multiFiles.length - 1 - })}` - : file.name; - - const activeClass = isOnSharePage() ? 'fileToast--active' : ''; - return html` -
  • - -
    - ${fileIcon(file.name, file._hasPassword)} -
    -

    ${fileName}

    -

    - ${bytes(file.size)} · - ${state.translate('downloadCount', { - num: `${number(totalDownloads)} / ${number(downloadLimit)}` - })} - ${remainingTime} -

    -
    -
    -     -
    • - `; - - function toastClick() { - return isOnSharePage() ? '/' : `/share/${file.id}`; - } - - function isOnSharePage() { - return state.href.includes('/share/') && state.params.id === file.id; - } -}; - -function timeLeft(milliseconds, state) { - const minutes = Math.floor(milliseconds / 1000 / 60); - const hours = Math.floor(minutes / 60); - const days = Math.floor(hours / 24); - if (days >= 1) { - return state.translate('expiresDaysHoursMinutes', { - days, - hours: hours % 24, - minutes: minutes % 60 - }); - } - if (hours >= 1) { - return state.translate('expiresHoursMinutes', { - hours, - minutes: minutes % 60 - }); - } else if (hours === 0) { - if (minutes === 0) { - return state.translate('expiresMinutes', { minutes: '< 1' }); - } - return state.translate('expiresMinutes', { minutes }); - } - return null; -} diff --git a/app/templates/fileIcon/fileIcon.css b/app/templates/fileIcon/fileIcon.css deleted file mode 100644 index 08643cd6..00000000 --- a/app/templates/fileIcon/fileIcon.css +++ /dev/null @@ -1,30 +0,0 @@ -.fileIcon { - position: relative; - float: left; - pointer-events: none; - margin: 8px; - color: #fff; - background-image: url('../assets/blue_file.svg'); - width: 22px; - height: 32px; - overflow: hidden; - user-select: none; -} - -.fileIcon__lock { - margin: 7px 0 0 5px; - visibility: hidden; -} - -.fileIcon__lock--visible { - visibility: visible; -} - -.fileIcon__fileType { - position: absolute; - margin: 16px 0 0 2px; - font-size: 7px; - font-weight: 600; - text-transform: uppercase; - user-select: none; -} diff --git a/app/templates/fileIcon/index.js b/app/templates/fileIcon/index.js deleted file mode 100644 index 2ce9e110..00000000 --- a/app/templates/fileIcon/index.js +++ /dev/null @@ -1,17 +0,0 @@ -const html = require('choo/html'); -const assets = require('../../../common/assets'); - -module.exports = function(name, hasPassword) { - let type = ''; - if (name) { - type = name.split('.').pop(); - } - const lockClass = hasPassword ? 'fileIcon__lock--visible' : ''; - return html` -
    -
    ${type}
    - -
    `; -}; diff --git a/app/templates/fileList/fileList.css b/app/templates/fileList/fileList.css deleted file mode 100644 index 787f9c31..00000000 --- a/app/templates/fileList/fileList.css +++ /dev/null @@ -1,28 +0,0 @@ -.fileList { - margin: 0; - padding: 0; - width: 262px; - min-height: 100%; - height: 100%; - flex-grow: 1; - display: flex; - flex-direction: column; - list-style-type: none; - overflow: scroll; - font-family: 'Segoe UI', 'SF Pro Text', sans-serif; -} - -/* hack because justify-content:flex-end and overflow:scroll doesn't work together */ -.fileList > :first-child { - margin-top: auto; -} - -@media (max-device-width: 750px), (max-width: 750px) { - .fileList { - flex: none; - position: static; - width: 406px; - max-height: 160px; - margin: 0; - } -} diff --git a/app/templates/fileList/index.js b/app/templates/fileList/index.js deleted file mode 100644 index 55229f5f..00000000 --- a/app/templates/fileList/index.js +++ /dev/null @@ -1,12 +0,0 @@ -const html = require('choo/html'); -const file = require('../file'); - -module.exports = function(state) { - if (state.storage.files.length) { - return html` - - `; - } -}; diff --git a/app/templates/fileManager/fileManager.css b/app/templates/fileManager/fileManager.css deleted file mode 100644 index b3e85be1..00000000 --- a/app/templates/fileManager/fileManager.css +++ /dev/null @@ -1,101 +0,0 @@ -.fileManager { - display: flex; - flex-direction: column; - height: 100%; -} - -.uploadArea { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; - overflow: scroll; - transition: transform 150ms; - flex: 1; - min-height: 90px; -} - -.uploadArea__msg { - font-size: 15px; - color: var(--lightTextColor); - margin: 12px 0 0; - font-family: 'SF Pro Text', sans-serif; - text-transform: uppercase; - font-weight: bold; -} - -.uploadArea__clickMsg { - font-style: italic; - font-size: 12px; - line-height: 12px; - color: var(--lightTextColor); - margin: 5px; -} - -.uploadArea--dragging { - border: 1px dashed rgba(12, 12, 13, 0.4); - transform: scale(1.04); -} - -.uploadArea--faded * { - opacity: 0.5; -} - -.uploadArea--noEvents, -.uploadArea--noEvents * { - pointer-events: none; -} - -.btn--file { - background-color: #737373; -} - -.btn--file:hover { - background-color: #636363; -} - -.btn--hidden { - display: none; -} - -.inputFile { - display: none; -} - -.inputFile--focused + .btn--file { - background-color: var(--primaryControlHoverColor); - outline: 1px dotted #000; - outline: -webkit-focus-ring-color auto 5px; -} - -.uploadArea > .uploadedFiles { - position: absolute; - top: 0; - left: 0; - flex: none; - height: 100%; - width: 100%; - border: none; - z-index: 1; -} - -.uploadOptions { - text-align: left; - font-size: 13px; - color: var(--lightTextColor); - margin: 24px; -} - -.uploadOptions--faded { - opacity: 0.5; - pointer-events: none; -} - -.uploadCancel { - margin: 6px 0 0; -} - -.uploadCancel:hover { - text-decoration: underline; -} diff --git a/app/templates/fileManager/index.js b/app/templates/fileManager/index.js deleted file mode 100644 index 30c3ec3c..00000000 --- a/app/templates/fileManager/index.js +++ /dev/null @@ -1,129 +0,0 @@ -const html = require('choo/html'); -const assets = require('../../../common/assets'); -const setPasswordSection = require('../setPasswordSection'); -const uploadBox = require('../uploadedFileList'); -const expireInfo = require('../expireInfo'); - -module.exports = function(state, emit) { - const hasAnUpload = state.archive && state.archive.numFiles > 0; - - const optionClass = state.uploading ? 'uploadOptions--faded' : ''; - const btnUploading = state.uploading ? 'btn--stripes' : ''; - const cancelVisible = state.uploading ? '' : 'noDisplay'; - const faded = hasAnUpload ? 'noDisplay' : ''; - const selectFileClass = hasAnUpload > 0 ? 'btn--hidden' : ''; - const sendFileClass = hasAnUpload > 0 ? 'btn--file' : 'btn--hidden'; - - let btnText = ''; - - if (state.encrypting) { - btnText = state.translate('encryptingFile'); - } else if (state.uploading) { - btnText = `sending... ${Math.floor(state.transfer.progressRatio * 100)}%`; - } else { - //default pre-upload text - btnText = state.translate('uploadSuccessConfirmHeader'); - } - - return html`
    - - -
    - ${expireInfo(state, emit)} - ${setPasswordSection(state)} -
    - - - - - - -
    `; - - function noop() {} - - function dragover(event) { - const div = document.querySelector('.uploadArea'); - div.classList.add('uploadArea--dragging'); - } - - function dragleave(event) { - const div = document.querySelector('.uploadArea'); - div.classList.remove('uploadArea--dragging'); - } - - function onfocus(event) { - event.target.classList.add('inputFile--focused'); - } - - function onblur(event) { - event.target.classList.remove('inputFile--focused'); - } - - function cancel(event) { - if (state.uploading) { - emit('cancel'); - const cancelBtn = document.querySelector('.uploadCancel'); - cancelBtn.innerHTML = state.translate('uploadCancelNotification'); - } - } - - function addFiles(event) { - event.preventDefault(); - const newFiles = Array.from(event.target.files); - - emit('addFiles', { files: newFiles }); - } - - function upload(event) { - event.preventDefault(); - event.target.disabled = true; - if (!state.uploading) { - emit('upload', { - type: 'click', - dlimit: state.downloadCount || 1, - password: state.password - }); - } - } -}; diff --git a/app/templates/footer/footer.css b/app/templates/footer/footer.css deleted file mode 100644 index 1a4d05c3..00000000 --- a/app/templates/footer/footer.css +++ /dev/null @@ -1,95 +0,0 @@ -.footer { - flex: none; - margin: 24px; - font-size: 12px; - font-weight: 600; - display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: center; -} - -.legalSection { - display: flex; - align-items: center; - flex-direction: row; -} - -.legalSection__link { - color: var(--lightTextColor); - white-space: nowrap; - margin-left: calc(var(--grid-basis) * 2); -} - -.legalSection__link:hover { - color: var(--textColor); -} - -.socialSection__icon { - width: 32px; - height: 32px; - margin: 0 0 -5px calc(var(--grid-basis) * 2); -} - -.dropdown__only { - display: none; -} - -.feedback { - background-color: #000; - background-image: url('../assets/feedback.svg'); - background-position: 2px 4px; - background-repeat: no-repeat; - background-size: 18px; - color: var(--primaryControlFGColor); - cursor: pointer; - display: block; - font-size: 12px; - line-height: 12px; - padding: 5px 5px 5px 20px; - text-indent: 2px; - transition: all 250ms ease-in-out; - white-space: nowrap; - margin-left: 12px; -} - -@media (max-device-width: 720px), (max-width: 720px) { - .footer { - justify-content: flex-start; - } - - .footer_hiddenIcon { - display: none; - } - - .dropdown__only { - display: block; - } - - .legalSection { - flex-direction: column; - text-align: left; - } - - .legalSection__link { - flex: none; - display: block; - box-sizing: border-box; - height: 24px; - width: 176px; - margin: 0; - padding: 4px 20px 0 8px; - text-shadow: none; - font-weight: 400; - color: var(--lightTextColor); - } - - .legalSection__link:visited { - color: var(--lightTextColor); - } - - .legalSection__link:hover { - color: var(--primaryControlFGColor); - background-color: var(--primaryControlBGColor); - } -} diff --git a/app/templates/footer/index.js b/app/templates/footer/index.js deleted file mode 100644 index 3833ca0f..00000000 --- a/app/templates/footer/index.js +++ /dev/null @@ -1,76 +0,0 @@ -const html = require('choo/html'); -const assets = require('../../../common/assets'); -const version = require('../../../package.json').version; -const { browserName } = require('../../utils'); - -module.exports = function(state) { - const browser = browserName(); - const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`; - const footer = html``; - // HACK - // We only want to render this once because we - // toggle the targets of the links with utils/openLinksInNewTab - footer.isSameNode = function(target) { - return target && target.nodeName && target.nodeName === 'FOOTER'; - }; - return footer; -}; diff --git a/app/templates/fxPromo/fxPromo.css b/app/templates/fxPromo/fxPromo.css deleted file mode 100644 index c1582fcc..00000000 --- a/app/templates/fxPromo/fxPromo.css +++ /dev/null @@ -1,57 +0,0 @@ -.fxPromo { - flex: none; - padding: 0 15px; - height: 48px; - background-color: #efeff1; - color: #4a4a4f; - font-size: 13px; - display: flex; - flex-direction: row; - align-content: center; - align-items: center; - justify-content: center; -} - -.fxPromo > div { - display: flex; - align-items: center; - margin: 0 auto; -} - -.fxPromo > div > span { - margin-left: 10px; -} - -.fxPromo__logo { - width: 24px; -} - -.fxPromo--blue { - background: linear-gradient(-180deg, #45a1ff 0%, #00feff 94%); - color: #fff; -} - -.fxPromo--pink { - background: linear-gradient(-180deg, #ff9400 0%, #ff1ad9 94%); - color: #fff; -} - -.fxPromo--blue a { - color: #fff; - font-weight: bold; -} - -.fxPromo--pink a { - color: #fff; - font-weight: bold; -} - -.fxPromo--blue a:hover { - color: #eee; - font-weight: bold; -} - -.fxPromo--pink a:hover { - color: #eee; - font-weight: bold; -} diff --git a/app/templates/fxPromo/index.js b/app/templates/fxPromo/index.js deleted file mode 100644 index 1b0532d5..00000000 --- a/app/templates/fxPromo/index.js +++ /dev/null @@ -1,34 +0,0 @@ -const html = require('choo/html'); -const assets = require('../../../common/assets'); - -module.exports = function(state, emit) { - let classes = 'fxPromo'; - switch (state.promo) { - case 'blue': - classes = 'fxPromo fxPromo--blue'; - break; - case 'pink': - classes = 'fxPromo fxPromo--pink'; - break; - } - - return html` -
    -
    - - Send is brought to you by the all-new Firefox. - Download Firefox now ≫ -
    -
    `; - - function clicked() { - emit('experiment', { cd3: 'promo' }); - } -}; diff --git a/app/templates/header/header.css b/app/templates/header/header.css deleted file mode 100644 index 908cb0a8..00000000 --- a/app/templates/header/header.css +++ /dev/null @@ -1,15 +0,0 @@ -.header { - flex: none; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - width: 100%; - height: 64px; - background-color: white; - box-shadow: 0 -1px 0 0 #d7d7db7f, 0 2px 6px 0 #0000001e; -} - -.header h1 { - margin: 0; -} diff --git a/app/templates/header/index.js b/app/templates/header/index.js deleted file mode 100644 index e6ff0ef6..00000000 --- a/app/templates/header/index.js +++ /dev/null @@ -1,17 +0,0 @@ -const html = require('choo/html'); -const assets = require('../../../common/assets'); - -module.exports = function() { - const header = html` -
    - -

    Firefox Send

     -
    `; - // HACK - // We only want to render this once because we - // toggle the targets of the links with utils/openLinksInNewTab - header.isSameNode = function(target) { - return target && target.nodeName && target.nodeName === 'HEADER'; - }; - return header; -}; diff --git a/app/templates/modal/index.js b/app/templates/modal/index.js deleted file mode 100644 index 005824bc..00000000 --- a/app/templates/modal/index.js +++ /dev/null @@ -1,15 +0,0 @@ -const html = require('choo/html'); - -module.exports = function(state, emit) { - return html` -
    -
    e.stopPropagation()}> - ${state.modal(state, emit, close)} -
    -
    `; - - function close(event) { - state.modal = null; - emit('render'); - } -}; diff --git a/app/templates/modal/modal.css b/app/templates/modal/modal.css deleted file mode 100644 index ae1608a1..00000000 --- a/app/templates/modal/modal.css +++ /dev/null @@ -1,21 +0,0 @@ -.modal { - display: flex; - justify-content: center; - align-items: center; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: hidden; - z-index: 100; - background: rgba(0, 0, 0, 0.7); - animation: fade-in 0.5s forwards; -} - -.modal__box { - max-width: 480px; - background: var(--pageBGColor); - border-radius: 4px; - color: var(--textColor); -} diff --git a/app/templates/okDialog/index.js b/app/templates/okDialog/index.js deleted file mode 100644 index 4986c1b9..00000000 --- a/app/templates/okDialog/index.js +++ /dev/null @@ -1,13 +0,0 @@ -const html = require('choo/html'); - -module.exports = function(message) { - return function(state, emit, close) { - return html` -
    -
    ${message}
    - -
    `; - }; -}; diff --git a/app/templates/okDialog/okDialog.css b/app/templates/okDialog/okDialog.css deleted file mode 100644 index 5b04d83b..00000000 --- a/app/templates/okDialog/okDialog.css +++ /dev/null @@ -1,11 +0,0 @@ -.okDialog { - display: flex; - flex-direction: column; - max-width: 400px; - padding: 16px; -} - -.okDialog__message { - margin: 32px; - text-align: center; -} diff --git a/app/templates/passwordInput/index.js b/app/templates/passwordInput/index.js deleted file mode 100644 index a1b9c01c..00000000 --- a/app/templates/passwordInput/index.js +++ /dev/null @@ -1,50 +0,0 @@ -const html = require('choo/html'); - -module.exports = function(state) { - const placeholder = - state.route === '/' ? '' : state.translate('unlockInputPlaceholder'); - const hasPassword = !!state.password; - const sectionClass = hasPassword - ? 'passwordInput' - : 'passwordInput passwordInput--hidden'; - - return html` -
    -
    - - -
    -
    `; - - function onSubmit() { - event.preventDefault(); - } - - function inputChanged() { - const password = document.getElementById('password-input').value; - state.password = password; - } - - function focused(event) { - event.preventDefault(); - const el = document.getElementById('password-input'); - if (el.placeholder !== state.translate('unlockInputPlaceholder')) { - el.placeholder = ''; - } - } -}; - -function passwordPlaceholder(password) { - return password ? password.replace(/./g, '•') : '••••••••••••'; -} diff --git a/app/templates/passwordInput/passwordInput.css b/app/templates/passwordInput/passwordInput.css deleted file mode 100644 index ccfab210..00000000 --- a/app/templates/passwordInput/passwordInput.css +++ /dev/null @@ -1,31 +0,0 @@ -.passwordInput { - display: inline; -} - -.passwordInput--hidden { - visibility: hidden; -} - -.passwordInput__fill { - height: 24px; - box-sizing: border-box; - padding: 4px; - font-size: 18px; - border: none; - background-color: var(--lightControlBGColor); - outline: none; -} - -.passwordInput__fill:focus { - border: 1px solid rgba(12, 12, 13, 0.2); - background-color: var(--pageBGColor); -} - -.passwordInput__msg { - font-size: 12px; - color: var(--lightTextColor); -} - -.passwordInput__msg--error { - color: var(--errorColor); -} diff --git a/app/templates/popup/index.js b/app/templates/popup/index.js deleted file mode 100644 index cdf65a89..00000000 --- a/app/templates/popup/index.js +++ /dev/null @@ -1,24 +0,0 @@ -const html = require('choo/html'); - -module.exports = function(msg, confirmText, cancelText, confirmCallback) { - return html` -
    -
    ${msg}
    -
    -
    - ${cancelText} -
    -
    - ${confirmText} -
    -
    -
    `; - - function hide(e) { - e.stopPropagation(); - const popup = document.querySelector('.popup.popup--show'); - if (popup) { - popup.classList.remove('popup--show'); - } - } -}; diff --git a/app/templates/popup/popup.css b/app/templates/popup/popup.css deleted file mode 100644 index 548aedb6..00000000 --- a/app/templates/popup/popup.css +++ /dev/null @@ -1,79 +0,0 @@ -.popup { - display: block; - width: 100%; - height: 70px; - background-color: var(--errorColor); - color: var(--textColor); - padding: 0; - box-sizing: border-box; - text-align: center; - border-radius: 4px; - transition: opacity 0.5s; - outline: 0; - opacity: 0; - visibility: hidden; -} - -.popup::after { - content: ''; - position: absolute; - top: 100%; - left: 50%; - width: 0; - height: 0; - border: 8px solid; - border-color: var(--errorColor) transparent transparent; - margin-left: -8px; - pointer-events: none; -} - -.popup__message { - height: 40px; - padding: 10px; - box-sizing: border-box; - text-align: center; - color: var(--primaryControlFGColor); - font-size: 15px; - font-style: italic; - white-space: nowrap; -} - -.popup__action { - display: flex; - flex-direction: row; - text-transform: uppercase; -} - -.popup__action > div { - flex: auto; -} - -.popup__no { - color: var(--primaryControlFGColor); - padding: 5px; - font-weight: bold; - cursor: pointer; - white-space: nowrap; -} - -.popup__no:hover { - text-decoration: underline; -} - -.popup__yes { - color: var(--primaryControlFGColor); - padding: 5px; - font-weight: normal; - cursor: pointer; - white-space: nowrap; -} - -.popup__yes:hover { - text-decoration: underline; -} - -.popup--show { - visibility: visible; - opacity: 1; - pointer-events: auto; -} diff --git a/app/templates/selectbox/index.js b/app/templates/selectbox/index.js deleted file mode 100644 index 43d2d666..00000000 --- a/app/templates/selectbox/index.js +++ /dev/null @@ -1,26 +0,0 @@ -const html = require('choo/html'); - -module.exports = function(selected, options, translate, changed) { - const id = `select-${Math.random()}`; - let x = selected; - - return html` - `; - - function choose(event) { - const target = event.target; - const value = +target.value; - - if (x !== value) { - x = value; - changed(value); - } - } -}; diff --git a/app/templates/selectbox/selectbox.css b/app/templates/selectbox/selectbox.css deleted file mode 100644 index fcbb196b..00000000 --- a/app/templates/selectbox/selectbox.css +++ /dev/null @@ -1,22 +0,0 @@ -option { - padding: 0; -} - -.selectBox { - appearance: none; - outline: 0; - box-shadow: none; - border: none; - border-radius: 0; - background-color: #e6e6e6; - font-size: 1em; - font-weight: 200; - margin: 0; - padding: 4px 2px 4px 2px; - cursor: pointer; -} - -select:active { - background-color: var(--pageBGColor); - border: 0; -} diff --git a/app/templates/setPasswordSection/index.js b/app/templates/setPasswordSection/index.js deleted file mode 100644 index af9957d2..00000000 --- a/app/templates/setPasswordSection/index.js +++ /dev/null @@ -1,42 +0,0 @@ -const html = require('choo/html'); -const passwordInput = require('../passwordInput'); - -module.exports = function(state) { - const checked = state.password ? 'checked' : ''; - const label = state.password ? '' : 'addPasswordMessage'; - - return html` -
    -
    - - -
    - - ${passwordInput(state)} - -
    `; - - function togglePasswordInput(e) { - const unlockInput = document.getElementById('password-input'); - const boxChecked = e.target.checked; - document - .querySelector('.passwordInput') - .classList.toggle('passwordInput--hidden', !boxChecked); - - const label = document.querySelector('.checkbox__label'); - if (boxChecked) { - label.innerHTML = ''; //state.translate('addPasswordLabel'); - unlockInput.focus(); - } else { - label.innerHTML = state.translate('addPasswordMessage'); - unlockInput.value = ''; - } - } -}; diff --git a/app/templates/setPasswordSection/setPasswordSection.css b/app/templates/setPasswordSection/setPasswordSection.css deleted file mode 100644 index 758f8301..00000000 --- a/app/templates/setPasswordSection/setPasswordSection.css +++ /dev/null @@ -1,57 +0,0 @@ -.setPasswordSection { - display: flex; - padding: 10px 0; - max-width: 100%; -} - -.checkbox { - height: 24px; -} - -.checkbox__input { - position: absolute; - opacity: 0; -} - -.checkbox__label { - font-size: 13px; - line-height: 20px; - cursor: pointer; - color: var(--lightTextColor); - user-select: none; -} - -.checkbox__label::before { - content: ''; - height: 24px; - width: 24px; - margin-right: 10px; - float: left; - background-color: #e6e6e6; -} - -.checkbox__label:hover::before { - background-color: #d6d6d6; -} - -.checkbox__input:checked + .checkbox__label::before { - background-image: url('../assets/lock.svg'); - background-position: 2px 2px; - background-repeat: no-repeat; -} - -.checkbox__input:disabled + .checkbox__label { - cursor: auto; -} - -.checkbox__input:disabled + .checkbox__label::before { - background-image: url('../assets/lock.svg'); - background-repeat: no-repeat; - background-size: 26px 26px; - border: none; - cursor: auto; -} - -.setPasswordSection > .passwordInput--hidden { - display: none; -} diff --git a/app/templates/signupDialog/index.js b/app/templates/signupDialog/index.js deleted file mode 100644 index 83098643..00000000 --- a/app/templates/signupDialog/index.js +++ /dev/null @@ -1,57 +0,0 @@ -/* globals LIMITS */ -const html = require('choo/html'); -const bytes = require('../../utils').bytes; - -// TODO: there's some duplication here with the signin page -module.exports = function() { - return function(state, emit, close) { - return html` -
    -
    - ${state.translate('accountBenefitTitle')} - -
    -
    - - -
    - - -
    `; - - function submitEmail(event) { - event.preventDefault(); - const el = document.getElementById('email-input'); - const email = el.value; - if (email) { - // just check if it's the right shape - const a = email.split('@'); - if (a.length === 2 && a.every(s => s.length > 0)) { - return emit('login', email); - } - } - el.value = ''; - } - }; -}; diff --git a/app/templates/signupDialog/signupDialog.css b/app/templates/signupDialog/signupDialog.css deleted file mode 100644 index 018dbcad..00000000 --- a/app/templates/signupDialog/signupDialog.css +++ /dev/null @@ -1,22 +0,0 @@ -.signupDialog { - display: flex; - flex-direction: column; - max-width: 400px; - padding: 16px; -} - -.signupDialog__message { - margin: 32px 32px 0 32px; -} - -.signupDialog__emailInput { - box-sizing: border-box; - height: 40px; - width: 100%; - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 4px; - margin: 16px 0; - padding: 0 8px; - font-size: 18px; - color: var(--lightTextColor); -} diff --git a/app/templates/signupPromo/index.js b/app/templates/signupPromo/index.js deleted file mode 100644 index 9faab9ec..00000000 --- a/app/templates/signupPromo/index.js +++ /dev/null @@ -1,14 +0,0 @@ -const html = require('choo/html'); - -module.exports = function(state) { - if (state.user.loggedIn || !state.capabilities.account) { - return null; - } - - return html` - -
    ${state.translate('signInPromoText')}
    -
    ${state.translate('signInExplanation')}
    -     - `; -}; diff --git a/app/templates/signupPromo/signupPromo.css b/app/templates/signupPromo/signupPromo.css deleted file mode 100644 index 749d4c96..00000000 --- a/app/templates/signupPromo/signupPromo.css +++ /dev/null @@ -1,42 +0,0 @@ -.signupPromo { - display: flex; - flex-direction: column; - height: calc(var(--grid-basis) * 12.5); - width: calc(var(--grid-basis) * 12.5); - border: 3px solid black; - font-size: 13px; - font-weight: 500; - text-align: center; - justify-content: center; - transition: background 100ms; - margin: 24px; - grid-area: content; - justify-self: right; - z-index: 1; -} - -.signupPromo:hover { - background: #ff1ad9; -} - -.signupPromo__title { - color: black; - font-size: 22px; - font-weight: 900; - padding: 6px; -} - -.signupPromo__info { - padding: 6px; - color: black; -} - -@media (max-device-width: 720px), (max-width: 720px) { - .signupPromo { - grid-area: promo; - margin: 0; - justify-self: auto; - height: 100%; - width: 100%; - } -} diff --git a/app/templates/timeLimitText/index.js b/app/templates/timeLimitText/index.js deleted file mode 100644 index 3de88db5..00000000 --- a/app/templates/timeLimitText/index.js +++ /dev/null @@ -1,14 +0,0 @@ -module.exports = function(translate, seconds) { - const displayText = { - 300: translate('timespanMinutes', { num: 5 }), - 3600: translate('timespanHours', { num: 1 }), - 86400: translate('timespanHours', { num: 24 }), - 604800: translate('timespanWeeks', { num: 1 }), - 1209600: translate('timespanWeeks', { num: 2 }) - }; - - if (displayText[seconds]) { - return displayText[seconds]; - } - return seconds; -}; diff --git a/app/templates/title/index.js b/app/templates/title/index.js deleted file mode 100644 index 6e0b0e01..00000000 --- a/app/templates/title/index.js +++ /dev/null @@ -1,11 +0,0 @@ -const html = require('choo/html'); - -module.exports = function(state) { - return html` -
    - ${state.translate('uploadPageHeader')} -
    - ${state.translate('pageHeaderCredits')} -
    -
    `; -}; diff --git a/app/templates/title/title.css b/app/templates/title/title.css deleted file mode 100644 index e0889e99..00000000 --- a/app/templates/title/title.css +++ /dev/null @@ -1,9 +0,0 @@ -.boxTitle { - margin: 24px; - text-align: center; - font-weight: bold; -} - -.boxSubtitle { - font-weight: normal; -} diff --git a/app/templates/uploadedFile/index.js b/app/templates/uploadedFile/index.js deleted file mode 100644 index 32f144bf..00000000 --- a/app/templates/uploadedFile/index.js +++ /dev/null @@ -1,39 +0,0 @@ -const html = require('choo/html'); -const assets = require('../../../common/assets'); -const bytes = require('../../utils').bytes; -const fileIcon = require('../fileIcon'); - -module.exports = function(file, index, state, emit, hasPassword) { - const cancelVisible = - state.route === '/' && !state.uploading - ? 'uploadedFile__cancel--visible' - : ''; - - function cancel(event) { - event.preventDefault(); - if (state.route === '/') { - emit('removeUpload', { index }); - } - } - - return html` -
  • - - ${fileIcon(file.name, hasPassword)} - -
    - cancel -
    - -
    -

    ${file.name}

    -

    - ${bytes(file.size)} -

    -
    -
    • - `; -}; diff --git a/app/templates/uploadedFile/uploadedFile.css b/app/templates/uploadedFile/uploadedFile.css deleted file mode 100644 index 179d22b4..00000000 --- a/app/templates/uploadedFile/uploadedFile.css +++ /dev/null @@ -1,66 +0,0 @@ -.uploadedFile { - margin: 11px; - list-style-type: none; - font-size: 11px; - line-height: 18px; - text-align: initial; - color: var(--lightTextColor); - background-color: var(--pageBGColor); - border: 1px solid #cececf; - box-sizing: border-box; - height: 53px; - border-radius: 4px; - position: relative; -} - -.uploadedFile__fileData { - margin: 8px 16px 8px 44px; -} - -.uploadedFile__fileName { - margin: 0; - font-size: 13px; - font-weight: 500; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -.uploadedFile__fileInfo { - margin: 0; -} - -.uploadedFile__cancel { - float: right; - margin: 6px; - visibility: hidden; -} - -.uploadedFile:hover .uploadedFile__cancel--visible { - visibility: visible; -} - -.uploadedFile__stamp { - position: absolute; - top: -4px; - right: -8px; - visibility: hidden; - opacity: 0; -} - -.uploadedFile__stamp--visible { - visibility: visible; - opacity: 1; - animation: stampDown 0.2s linear; -} - -@keyframes stampDown { - 0% { - opacity: 0; - transform: scale(1.5); - } - - 100% { - opacity: 1; - } -} diff --git a/app/templates/uploadedFileList/index.js b/app/templates/uploadedFileList/index.js deleted file mode 100644 index 1175af02..00000000 --- a/app/templates/uploadedFileList/index.js +++ /dev/null @@ -1,15 +0,0 @@ -const html = require('choo/html'); -const file = require('../uploadedFile'); - -module.exports = function(archive, state, emit) { - let files = []; - if (archive) { - files = Array.from(archive.manifest.files); - } - - return html` - - `; -}; diff --git a/app/templates/uploadedFileList/uploadedFileList.css b/app/templates/uploadedFileList/uploadedFileList.css deleted file mode 100644 index 21d0cdc1..00000000 --- a/app/templates/uploadedFileList/uploadedFileList.css +++ /dev/null @@ -1,9 +0,0 @@ -.uploadedFiles { - background: rgba(132, 193, 255, 0.1); - margin: 0; - padding: 0; - align-content: center; - flex: 1; - overflow-y: scroll; - overflow-x: hidden; -} diff --git a/app/templates/userAccount/index.js b/app/templates/userAccount/index.js deleted file mode 100644 index f852bdec..00000000 --- a/app/templates/userAccount/index.js +++ /dev/null @@ -1,70 +0,0 @@ -const html = require('choo/html'); - -module.exports = function(state, emit) { - if (!state.capabilities.account) { - return null; - } - const user = state.user; - const menu = user.loggedIn - ? html` - ` - : html` - - `; - - return html` -
    -
    - -
    - ${menu} -
    `; - - function avatarClick(event) { - event.preventDefault(); - const dropdown = document.querySelector('.account_dropdown'); - dropdown.classList.toggle('visible'); - dropdown.focus(); - } - - function login(event) { - event.preventDefault(); - emit('login'); - } - - function logout(event) { - event.preventDefault(); - emit('logout'); - } - - function hideMenu(event) { - event.stopPropagation(); - const dropdown = document.querySelector('.account_dropdown'); - dropdown.classList.remove('visible'); - } -}; diff --git a/app/templates/userAccount/userAccount.css b/app/templates/userAccount/userAccount.css deleted file mode 100644 index 546aefb2..00000000 --- a/app/templates/userAccount/userAccount.css +++ /dev/null @@ -1,74 +0,0 @@ -.account { - /* padding: 12px; */ - position: relative; -} - -.account__avatar { - height: 32px; - width: 32px; - border-radius: 50%; -} - -.account_dropdown { - z-index: 2; - position: absolute; - list-style-type: none; - border: 1px solid #ccc; - border-radius: 4px; - background-color: var(--pageBGColor); - box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2); - padding: 11px 0; - visibility: hidden; - white-space: nowrap; - outline: 0; -} - -.account_dropdown::after, -.account_dropdown::before { - position: absolute; - bottom: 100%; - left: 18px; - height: 0; - width: 0; - border: 1px solid transparent; - content: ''; - pointer-events: none; -} - -.account_dropdown::after { - border-bottom-color: var(--pageBGColor); - border-width: 12px; -} - -.account_dropdown::before { - border-bottom-color: #ccc; - border-width: 13px; - margin-left: -1px; -} - -.account_dropdown__link { - display: block; - padding: 0 14px; - font-size: 13px; - line-height: 24px; - color: var(--lightTextColor); - position: relative; - z-index: 999; -} - -.account_dropdown__link:visited { - color: var(--lightTextColor); -} - -.account_dropdown__link:hover { - background-color: var(--primaryControlBGColor); - color: var(--primaryControlFGColor); -} - -.account_dropdown__text { - display: block; - padding: 0 14px; - font-size: 13px; - color: var(--lightTextColor); - line-height: 24px; -} diff --git a/app/ui/okDialog.js b/app/ui/okDialog.js new file mode 100644 index 00000000..bc420f4b --- /dev/null +++ b/app/ui/okDialog.js @@ -0,0 +1,13 @@ +const html = require('choo/html'); + +module.exports = function(message) { + return function(state, emit, close) { + return html` +
    +
    ${message}
    + +
    `; + }; +};