natty
/
fox-send
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated modal

This commit is contained in:
Danny Coates 2018-10-29 09:52:24 -07:00
parent 7ad63ae004
commit 0e5202c470
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
10 changed files with 38 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/fileManager.js
View File

@ -157,7 +157,7 @@ export default function(state, emitter) {
if (password) { if (password) {
emitter.emit('password', { password, file: ownedFile }); emitter.emit('password', { password, file: ownedFile });
} }
state.modal = copyDialog(ownedFile.url); state.modal = copyDialog(ownedFile.name, ownedFile.url);
state.animation = () => { state.animation = () => {
const x = document.querySelector('.foo'); const x = document.querySelector('.foo');
const y = x.previousElementSibling; const y = x.previousElementSibling;
@ -177,7 +177,6 @@ export default function(state, emitter) {
fill: 'both' fill: 'both'
}); });
}; };
// emitter.emit('pushState', `/share/${ownedFile.id}`);
} catch (err) { } catch (err) {
if (err.message === '0') { if (err.message === '0') {
//cancelled. do nothing //cancelled. do nothing

6
app/main.css
View File

@ -60,7 +60,11 @@ progress::-webkit-progress-value {
} }
.bg-shades { .bg-shades {
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(255, 255, 255, 0.8);
}
.border-modal {
box-shadow: 0 0 5rem 5rem white;
} }
@screen md { @screen md {

2
app/routes.js
View File

@ -4,7 +4,6 @@ const nanotiming = require('nanotiming');
const download = require('./ui/download'); const download = require('./ui/download');
const footer = require('./ui/footer'); const footer = require('./ui/footer');
const fxPromo = require('./ui/fxPromo'); const fxPromo = require('./ui/fxPromo');
const modal = require('./ui/modal');
const header = require('./ui/header'); const header = require('./ui/header');
nanotiming.disabled = true; nanotiming.disabled = true;
@ -18,7 +17,6 @@ function banner(state, emit) {
function body(main) { function body(main) {
return function(state, emit) { return function(state, emit) {
const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest"> const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest">
${state.modal && modal(state, emit)}
${banner(state, emit)} ${banner(state, emit)}
${header(state, emit)} ${header(state, emit)}
${main(state, emit)} ${main(state, emit)}

2
app/ui/archiveList.js
View File

@ -34,7 +34,7 @@ module.exports = function(state, emit) {
archives.push(intro(state)); archives.push(intro(state));
} }
return html` return html`
<section class="relative h-full w-full px-6 md:flex md:flex-row"> <section class="h-full w-full px-6 md:flex md:flex-row">
<div class="pt-4 md:pb-4 md:mr-6 md:w-1/2">${wip}</div> <div class="pt-4 md:pb-4 md:mr-6 md:w-1/2">${wip}</div>
${list( ${list(
archives, archives,

10
app/ui/archiveTile.js
View File

@ -83,7 +83,7 @@ module.exports = function(state, emit, archive) {
module.exports.wip = function(state, emit) { module.exports.wip = function(state, emit) {
return html` return html`
<article class="relative h-full flex flex-col bg-white border border-grey-light p-2 z-20"> <article class="h-full flex flex-col bg-white border border-grey-light p-2 z-20">
${list( ${list(
state.archive.files.map(f => fileInfo(f, remove(f))), state.archive.files.map(f => fileInfo(f, remove(f))),
'list-reset h-full overflow-y-scroll' 'list-reset h-full overflow-y-scroll'
@ -153,7 +153,7 @@ module.exports.uploading = function(state, emit) {
return html` return html`
<article <article
id="${archive.id}" id="${archive.id}"
class="relative z-20 flex flex-col items-start border border-grey-light bg-white p-3"> class="z-20 flex flex-col items-start border border-grey-light bg-white p-3">
<p class="w-full"> <p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-base font-semibold">${archive.name}</h1> <h1 class="text-base font-semibold">${archive.name}</h1>
@ -184,7 +184,7 @@ module.exports.uploading = function(state, emit) {
module.exports.empty = function(state, emit) { module.exports.empty = function(state, emit) {
return html` return html`
<article class="flex flex-col items-center justify-center border border-dashed border-blue-light p-8 h-full"> <article class="flex flex-col items-center justify-center border border-dashed border-blue-light p-16 h-full">
<div class="p-1">${state.translate('uploadDropDragMessage')}</div> <div class="p-1">${state.translate('uploadDropDragMessage')}</div>
<input <input
id="file-upload" id="file-upload"
@ -211,7 +211,7 @@ module.exports.empty = function(state, emit) {
module.exports.preview = function(state, emit) { module.exports.preview = function(state, emit) {
const archive = state.fileInfo; const archive = state.fileInfo;
return html` return html`
<article class="relative flex flex-col bg-white border border-grey-light p-2 z-20"> <article class="flex flex-col bg-white border border-grey-light p-2 z-20">
<p class="w-full mb-4"> <p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-base font-semibold">${archive.name}</h1> <h1 class="text-base font-semibold">${archive.name}</h1>
@ -239,7 +239,7 @@ module.exports.downloading = function(state, emit) {
const progress = state.transfer.progressRatio; const progress = state.transfer.progressRatio;
const progressPercent = percent(progress); const progressPercent = percent(progress);
return html` return html`
<article class="relative flex flex-col bg-white border border-grey-light p-2 z-20"> <article class="flex flex-col bg-white border border-grey-light p-2 z-20">
<p class="w-full mb-4"> <p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-base font-semibold">${archive.name}</h1> <h1 class="text-base font-semibold">${archive.name}</h1>

20
app/ui/copyDialog.js
View File

@ -1,22 +1,22 @@
const html = require('choo/html'); const html = require('choo/html');
const assets = require('../../common/assets');
const { copyToClipboard } = require('../utils'); const { copyToClipboard } = require('../utils');
module.exports = function(url) { module.exports = function(name, url) {
return function(state, emit, close) { return function(state, emit, close) {
return html` return html`
<div class="flex flex-col p-4"> <div class="flex flex-col items-center text-center p-4 max-w-md">
<input <h1 class="font-normal my-4">${state.translate('notifyUploadDone')}</h1>
type="image" <p class="font-light text-grey-darker">${state.translate(
class="self-end text-white" 'copyUrlFormLabelWithName',
alt="Close" { filename: name }
src="${assets.get('close-16.svg')}" )}</p>
onclick=${close}/>
<h1 class="font-normal mt-2">${state.translate('notifyUploadDone')}</h1>
<input type="text" class="w-full my-4 border rounded leading-loose" value=${url} readonly="true"/> <input type="text" class="w-full my-4 border rounded leading-loose" value=${url} readonly="true"/>
<button class="border rounded bg-blue text-white leading-loose w-full" onclick=${copy}> <button class="border rounded bg-blue text-white leading-loose w-full" onclick=${copy}>
${state.translate('copyUrlFormButton')} ${state.translate('copyUrlFormButton')}
</button> </button>
<a class="text-blue my-2 cursor-pointer" onclick=${close}>${state.translate(
'okButton'
)}</a>
</div>`; </div>`;
function copy(event) { function copy(event) {

6
app/ui/header.js
View File

@ -3,13 +3,17 @@ const account = require('./account');
module.exports = function(state, emit) { module.exports = function(state, emit) {
const header = html` const header = html`
<header class="flex-none flex flex-row items-center justify-between bg-white w-full px-4 h-12 md:shadow-md"> <header class="relative flex-none flex flex-row items-center justify-between bg-white w-full px-4 h-12 md:shadow-md">
<a <a
class="header-logo" class="header-logo"
href="/"> href="/">
<h1 class="text-black font-normal">Firefox <b>Send</b></h1> <h1 class="text-black font-normal">Firefox <b>Send</b></h1>
</a> </a>
${account(state, emit)} ${account(state, emit)}
<div class="invisible absolute pin-t pin-l mt-12 w-full flex flex-col items-center pointer-events-none">
<div class="border rounded bg-grey-darkest text-white mt-2 p-2">Your upload has finished.<button class="border border-blue rounded-sm bg-blue text-white inline-block p-1 ml-2">Copy Link</button><button class="text-white inline-block p-1 ml-2">ⓧ</button></div>
${state.toast ? state.toast() : ''}
</div>
</header>`; </header>`;
// HACK // HACK
// We only want to render this once because we // We only want to render this once because we

9
app/ui/modal.js
View File

@ -2,14 +2,17 @@ const html = require('choo/html');
module.exports = function(state, emit) { module.exports = function(state, emit) {
return html` return html`
<div class="fixed pin flex items-center justify-center overflow-hidden z-40 bg-shades" onclick=${close}> <div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-shades" onclick=${close}>
<div class="rounded max-w-md bg-white m-1" onclick=${e => <div class="border-modal bg-white" onclick=${e => e.stopPropagation()}>
e.stopPropagation()}>
${state.modal(state, emit, close)} ${state.modal(state, emit, close)}
</div> </div>
</div>`; </div>`;
function close(event) { function close(event) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
state.modal = null; state.modal = null;
emit('render'); emit('render');
} }

6
app/ui/welcome.js
View File

@ -1,6 +1,10 @@
const html = require('choo/html'); const html = require('choo/html');
const archiveList = require('./archiveList'); const archiveList = require('./archiveList');
const modal = require('./modal');
module.exports = function(state, emit) { module.exports = function(state, emit) {
return html`<main class="main container">${archiveList(state, emit)}</main>`; return html`<main class="main container relative">
${state.modal && modal(state, emit)}
${archiveList(state, emit)}
</main>`;
}; };

2
server/routes/index.js
View File

@ -72,9 +72,7 @@ module.exports = function(app) {
app.get('/oauth', language, pages.blank); app.get('/oauth', language, pages.blank);
app.get('/legal', language, pages.legal); app.get('/legal', language, pages.legal);
app.get('/jsconfig.js', require('./jsconfig')); app.get('/jsconfig.js', require('./jsconfig'));
app.get(`/share/:id${ID_REGEX}`, language, pages.blank);
app.get(`/download/:id${ID_REGEX}`, language, pages.download); app.get(`/download/:id${ID_REGEX}`, language, pages.download);
app.get('/completed', language, pages.blank);
app.get('/unsupported/:reason', language, pages.unsupported); app.get('/unsupported/:reason', language, pages.unsupported);
app.get(`/api/download/:id${ID_REGEX}`, auth.hmac, require('./download')); app.get(`/api/download/:id${ID_REGEX}`, auth.hmac, require('./download'));
app.get( app.get(