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

6
app/main.css
View File

@ -60,7 +60,11 @@ progress::-webkit-progress-value {
}
.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 {

2
app/routes.js
View File

@ -4,7 +4,6 @@ const nanotiming = require('nanotiming');
const download = require('./ui/download');
const footer = require('./ui/footer');
const fxPromo = require('./ui/fxPromo');
const modal = require('./ui/modal');
const header = require('./ui/header');
nanotiming.disabled = true;
@ -18,7 +17,6 @@ function banner(state, emit) {
function body(main) {
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">
${state.modal && modal(state, emit)}
${banner(state, emit)}
${header(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));
}
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>
${list(
archives,

10
app/ui/archiveTile.js
View File

@ -83,7 +83,7 @@ module.exports = function(state, emit, archive) {
module.exports.wip = function(state, emit) {
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(
state.archive.files.map(f => fileInfo(f, remove(f))),
'list-reset h-full overflow-y-scroll'
@ -153,7 +153,7 @@ module.exports.uploading = function(state, emit) {
return html`
<article
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">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<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) {
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>
<input
id="file-upload"
@ -211,7 +211,7 @@ module.exports.empty = function(state, emit) {
module.exports.preview = function(state, emit) {
const archive = state.fileInfo;
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">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<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 progressPercent = percent(progress);
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">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<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 assets = require('../../common/assets');
const { copyToClipboard } = require('../utils');
module.exports = function(url) {
module.exports = function(name, url) {
return function(state, emit, close) {
return html`
<div class="flex flex-col p-4">
<input
type="image"
class="self-end text-white"
alt="Close"
src="${assets.get('close-16.svg')}"
onclick=${close}/>
<h1 class="font-normal mt-2">${state.translate('notifyUploadDone')}</h1>
<div class="flex flex-col items-center text-center p-4 max-w-md">
<h1 class="font-normal my-4">${state.translate('notifyUploadDone')}</h1>
<p class="font-light text-grey-darker">${state.translate(
'copyUrlFormLabelWithName',
{ filename: name }
)}</p>
<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}>
${state.translate('copyUrlFormButton')}
</button>
<a class="text-blue my-2 cursor-pointer" onclick=${close}>${state.translate(
'okButton'
)}</a>
</div>`;
function copy(event) {

6
app/ui/header.js
View File

@ -3,13 +3,17 @@ const account = require('./account');
module.exports = function(state, emit) {
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
class="header-logo"
href="/">
<h1 class="text-black font-normal">Firefox <b>Send</b></h1>
</a>
${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>`;
// HACK
// 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) {
return html`
<div class="fixed 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 =>
e.stopPropagation()}>
<div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-shades" onclick=${close}>
<div class="border-modal bg-white" onclick=${e => e.stopPropagation()}>
${state.modal(state, emit, close)}
</div>
</div>`;
function close(event) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
state.modal = null;
emit('render');
}

6
app/ui/welcome.js
View File

@ -1,6 +1,10 @@
const html = require('choo/html');
const archiveList = require('./archiveList');
const modal = require('./modal');
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('/legal', language, pages.legal);
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('/completed', language, pages.blank);
app.get('/unsupported/:reason', language, pages.unsupported);
app.get(`/api/download/:id${ID_REGEX}`, auth.hmac, require('./download'));
app.get(