updated modal
This commit is contained in:
Danny Coates
parent
7ad63ae004
commit
0e5202c470
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
Loading…
Reference in New Issue