diff --git a/app/fileManager.js b/app/fileManager.js index 6d285b0a..bd15a046 100644 --- a/app/fileManager.js +++ b/app/fileManager.js @@ -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 diff --git a/app/main.css b/app/main.css index 22196b9e..bd277e91 100644 --- a/app/main.css +++ b/app/main.css @@ -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 { diff --git a/app/routes.js b/app/routes.js index 270cb578..4992df5c 100644 --- a/app/routes.js +++ b/app/routes.js @@ -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` - ${state.modal && modal(state, emit)} ${banner(state, emit)} ${header(state, emit)} ${main(state, emit)} diff --git a/app/ui/archiveList.js b/app/ui/archiveList.js index 026a651e..bb7adfc7 100644 --- a/app/ui/archiveList.js +++ b/app/ui/archiveList.js @@ -34,7 +34,7 @@ module.exports = function(state, emit) { archives.push(intro(state)); } return html` -
+
${wip}
${list( archives, diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js index a16ce009..d17b6851 100644 --- a/app/ui/archiveTile.js +++ b/app/ui/archiveTile.js @@ -83,7 +83,7 @@ module.exports = function(state, emit, archive) { module.exports.wip = function(state, emit) { return html` -
+
${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`
+ class="z-20 flex flex-col items-start border border-grey-light bg-white p-3">

${archive.name}

@@ -184,7 +184,7 @@ module.exports.uploading = function(state, emit) { module.exports.empty = function(state, emit) { return html` -
+
${state.translate('uploadDropDragMessage')}
+

${archive.name}

@@ -239,7 +239,7 @@ module.exports.downloading = function(state, emit) { const progress = state.transfer.progressRatio; const progressPercent = percent(progress); return html` -
+

${archive.name}

diff --git a/app/ui/copyDialog.js b/app/ui/copyDialog.js index 8c823dc6..d3ddc11c 100644 --- a/app/ui/copyDialog.js +++ b/app/ui/copyDialog.js @@ -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` -
- -

${state.translate('notifyUploadDone')}

+
+

${state.translate('notifyUploadDone')}

+

${state.translate( + 'copyUrlFormLabelWithName', + { filename: name } + )}

+ ${state.translate( + 'okButton' + )}
`; function copy(event) { diff --git a/app/ui/header.js b/app/ui/header.js index 62423941..81c0a797 100644 --- a/app/ui/header.js +++ b/app/ui/header.js @@ -3,13 +3,17 @@ const account = require('./account'); module.exports = function(state, emit) { const header = html` -
+
${account(state, emit)} +
`; // HACK // We only want to render this once because we diff --git a/app/ui/modal.js b/app/ui/modal.js index 03edd51c..10d0ff48 100644 --- a/app/ui/modal.js +++ b/app/ui/modal.js @@ -2,14 +2,17 @@ const html = require('choo/html'); module.exports = function(state, emit) { return html` -
-
- e.stopPropagation()}> +
+
e.stopPropagation()}> ${state.modal(state, emit, close)}
`; function close(event) { + if (event) { + event.preventDefault(); + event.stopPropagation(); + } state.modal = null; emit('render'); } diff --git a/app/ui/welcome.js b/app/ui/welcome.js index 533094cb..98e7b897 100644 --- a/app/ui/welcome.js +++ b/app/ui/welcome.js @@ -1,6 +1,10 @@ const html = require('choo/html'); const archiveList = require('./archiveList'); +const modal = require('./modal'); module.exports = function(state, emit) { - return html`
${archiveList(state, emit)}
`; + return html`
+ ${state.modal && modal(state, emit)} + ${archiveList(state, emit)} +
`; }; diff --git a/server/routes/index.js b/server/routes/index.js index f0dd0ce5..1a73a286 100644 --- a/server/routes/index.js +++ b/server/routes/index.js @@ -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(