stubbed in modal dialog
This commit is contained in:
parent
20528eb0d1
commit
cdc15596df
@ -6,6 +6,7 @@ import * as metrics from './metrics';
|
|||||||
import Archive from './archive';
|
import Archive from './archive';
|
||||||
import { bytes } from './utils';
|
import { bytes } from './utils';
|
||||||
import { prepareWrapKey } from './fxa';
|
import { prepareWrapKey } from './fxa';
|
||||||
|
import okDialog from './templates/okDialog';
|
||||||
|
|
||||||
export default function(state, emitter) {
|
export default function(state, emitter) {
|
||||||
let lastRender = 0;
|
let lastRender = 0;
|
||||||
@ -97,7 +98,7 @@ export default function(state, emitter) {
|
|||||||
try {
|
try {
|
||||||
state.archive.addFiles(files, maxSize);
|
state.archive.addFiles(files, maxSize);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
alert(
|
state.modal = okDialog(
|
||||||
state.translate(e.message, {
|
state.translate(e.message, {
|
||||||
size: bytes(maxSize),
|
size: bytes(maxSize),
|
||||||
count: LIMITS.MAX_FILES_PER_ARCHIVE
|
count: LIMITS.MAX_FILES_PER_ARCHIVE
|
||||||
@ -110,11 +111,12 @@ export default function(state, emitter) {
|
|||||||
emitter.on('upload', async ({ type, dlimit, password }) => {
|
emitter.on('upload', async ({ type, dlimit, password }) => {
|
||||||
if (!state.archive) return;
|
if (!state.archive) return;
|
||||||
if (state.storage.files.length >= LIMITS.MAX_ARCHIVES_PER_USER) {
|
if (state.storage.files.length >= LIMITS.MAX_ARCHIVES_PER_USER) {
|
||||||
return alert(
|
state.modal = okDialog(
|
||||||
state.translate('tooManyArchives', {
|
state.translate('tooManyArchives', {
|
||||||
count: LIMITS.MAX_ARCHIVES_PER_USER
|
count: LIMITS.MAX_ARCHIVES_PER_USER
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
return render();
|
||||||
}
|
}
|
||||||
const size = state.archive.size;
|
const size = state.archive.size;
|
||||||
if (!state.timeLimit) state.timeLimit = DEFAULTS.EXPIRE_SECONDS;
|
if (!state.timeLimit) state.timeLimit = DEFAULTS.EXPIRE_SECONDS;
|
||||||
|
40
app/main.css
40
app/main.css
@ -1,23 +1,25 @@
|
|||||||
@import './base.css';
|
@import './base.css';
|
||||||
@import './templates/activeBackground/activeBackground.css';
|
|
||||||
@import './templates/header/header.css';
|
|
||||||
@import './templates/downloadButton/downloadButton.css';
|
|
||||||
@import './templates/passwordInput/passwordInput.css';
|
|
||||||
@import './templates/downloadPassword/downloadPassword.css';
|
|
||||||
@import './templates/setPasswordSection/setPasswordSection.css';
|
|
||||||
@import './templates/footer/footer.css';
|
|
||||||
@import './templates/fxPromo/fxPromo.css';
|
|
||||||
@import './templates/selectbox/selectbox.css';
|
|
||||||
@import './templates/fileList/fileList.css';
|
|
||||||
@import './templates/file/file.css';
|
|
||||||
@import './templates/uploadedFile/uploadedFile.css';
|
|
||||||
@import './templates/uploadedFileList/uploadedFileList.css';
|
|
||||||
@import './templates/popup/popup.css';
|
|
||||||
@import './templates/title/title.css';
|
|
||||||
@import './templates/fileIcon/fileIcon.css';
|
|
||||||
@import './templates/signupPromo/signupPromo.css';
|
|
||||||
@import './templates/userAccount/userAccount.css';
|
|
||||||
@import './pages/welcome/welcome.css';
|
|
||||||
@import './pages/share/share.css';
|
@import './pages/share/share.css';
|
||||||
@import './pages/signin/signin.css';
|
@import './pages/signin/signin.css';
|
||||||
@import './pages/unsupported/unsupported.css';
|
@import './pages/unsupported/unsupported.css';
|
||||||
|
@import './pages/welcome/welcome.css';
|
||||||
|
@import './templates/activeBackground/activeBackground.css';
|
||||||
|
@import './templates/downloadButton/downloadButton.css';
|
||||||
|
@import './templates/downloadPassword/downloadPassword.css';
|
||||||
|
@import './templates/file/file.css';
|
||||||
|
@import './templates/fileIcon/fileIcon.css';
|
||||||
|
@import './templates/fileList/fileList.css';
|
||||||
|
@import './templates/footer/footer.css';
|
||||||
|
@import './templates/fxPromo/fxPromo.css';
|
||||||
|
@import './templates/header/header.css';
|
||||||
|
@import './templates/modal/modal.css';
|
||||||
|
@import './templates/okDialog/okDialog.css';
|
||||||
|
@import './templates/passwordInput/passwordInput.css';
|
||||||
|
@import './templates/popup/popup.css';
|
||||||
|
@import './templates/selectbox/selectbox.css';
|
||||||
|
@import './templates/setPasswordSection/setPasswordSection.css';
|
||||||
|
@import './templates/signupPromo/signupPromo.css';
|
||||||
|
@import './templates/title/title.css';
|
||||||
|
@import './templates/uploadedFile/uploadedFile.css';
|
||||||
|
@import './templates/uploadedFileList/uploadedFileList.css';
|
||||||
|
@import './templates/userAccount/userAccount.css';
|
||||||
|
@ -35,6 +35,7 @@ import { getFileListKey } from './fxa';
|
|||||||
state.raven = Raven;
|
state.raven = Raven;
|
||||||
state.user = new User(userInfo, storage);
|
state.user = new User(userInfo, storage);
|
||||||
window.appState = state;
|
window.appState = state;
|
||||||
|
window.appEmit = emitter.emit.bind(emitter);
|
||||||
let unsupportedReason = null;
|
let unsupportedReason = null;
|
||||||
if (
|
if (
|
||||||
// Firefox < 50
|
// Firefox < 50
|
||||||
|
@ -8,6 +8,7 @@ const signupPromo = require('../templates/signupPromo');
|
|||||||
const activeBackground = require('../templates/activeBackground');
|
const activeBackground = require('../templates/activeBackground');
|
||||||
const fileList = require('../templates/fileList');
|
const fileList = require('../templates/fileList');
|
||||||
const profile = require('../templates/userAccount');
|
const profile = require('../templates/userAccount');
|
||||||
|
const modal = require('../templates/modal');
|
||||||
|
|
||||||
nanotiming.disabled = true;
|
nanotiming.disabled = true;
|
||||||
const app = choo();
|
const app = choo();
|
||||||
@ -18,9 +19,16 @@ function banner(state, emit) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function modalDialog(state, emit) {
|
||||||
|
if (state.modal) {
|
||||||
|
return modal(state, emit);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function body(template) {
|
function body(template) {
|
||||||
return function(state, emit) {
|
return function(state, emit) {
|
||||||
const b = html`<body class="background ${activeBackground(state)}">
|
const b = html`<body class="background ${activeBackground(state)}">
|
||||||
|
${modalDialog(state, emit)}
|
||||||
${banner(state, emit)}
|
${banner(state, emit)}
|
||||||
<main class="main">
|
<main class="main">
|
||||||
<noscript>
|
<noscript>
|
||||||
|
@ -71,7 +71,7 @@ async function decryptStream(id) {
|
|||||||
return new Response(null, {
|
return new Response(null, {
|
||||||
status: 302,
|
status: 302,
|
||||||
headers: {
|
headers: {
|
||||||
Location: `/download/${id}`
|
Location: `/download/${id}/#${file.key}`
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -2,6 +2,7 @@ const html = require('choo/html');
|
|||||||
const raw = require('choo/html/raw');
|
const raw = require('choo/html/raw');
|
||||||
const selectbox = require('../selectbox');
|
const selectbox = require('../selectbox');
|
||||||
const timeLimitText = require('../timeLimitText');
|
const timeLimitText = require('../timeLimitText');
|
||||||
|
const okDialog = require('../okDialog');
|
||||||
|
|
||||||
module.exports = function(state, emit) {
|
module.exports = function(state, emit) {
|
||||||
const el = html`<div> ${raw(
|
const el = html`<div> ${raw(
|
||||||
@ -25,7 +26,7 @@ module.exports = function(state, emit) {
|
|||||||
value => {
|
value => {
|
||||||
const max = state.user.maxDownloads;
|
const max = state.user.maxDownloads;
|
||||||
if (value > max) {
|
if (value > max) {
|
||||||
alert('todo: this setting requires an account');
|
state.modal = okDialog('todo: this setting requires an account');
|
||||||
value = max;
|
value = max;
|
||||||
}
|
}
|
||||||
state.downloadCount = value;
|
state.downloadCount = value;
|
||||||
@ -44,7 +45,7 @@ module.exports = function(state, emit) {
|
|||||||
value => {
|
value => {
|
||||||
const max = state.user.maxExpireSeconds;
|
const max = state.user.maxExpireSeconds;
|
||||||
if (value > max) {
|
if (value > max) {
|
||||||
alert('todo: this setting requires an account');
|
state.modal = okDialog('todo: this setting requires an account');
|
||||||
value = max;
|
value = max;
|
||||||
}
|
}
|
||||||
state.timeLimit = value;
|
state.timeLimit = value;
|
||||||
|
15
app/templates/modal/index.js
Normal file
15
app/templates/modal/index.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const html = require('choo/html');
|
||||||
|
|
||||||
|
module.exports = function(state, emit) {
|
||||||
|
return html`
|
||||||
|
<div class="modal" onclick=${close}>
|
||||||
|
<div class="modal__box" onclick=${e => e.stopPropagation()}>
|
||||||
|
${state.modal(state, close)}
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
function close(event) {
|
||||||
|
state.modal = null;
|
||||||
|
emit('render');
|
||||||
|
}
|
||||||
|
};
|
22
app/templates/modal/modal.css
Normal file
22
app/templates/modal/modal.css
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
.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;
|
||||||
|
max-height: 300px;
|
||||||
|
background: var(--pageBGColor);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--textColor);
|
||||||
|
}
|
13
app/templates/okDialog/index.js
Normal file
13
app/templates/okDialog/index.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
const html = require('choo/html');
|
||||||
|
|
||||||
|
module.exports = function(message) {
|
||||||
|
return function(state, close) {
|
||||||
|
return html`
|
||||||
|
<div class="okDialog">
|
||||||
|
<div class="okDialog__message">${message}</div>
|
||||||
|
<button class="btn" onclick=${close}>${state.translate(
|
||||||
|
'okButton'
|
||||||
|
)}</button>
|
||||||
|
</div>`;
|
||||||
|
};
|
||||||
|
};
|
11
app/templates/okDialog/okDialog.css
Normal file
11
app/templates/okDialog/okDialog.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
.okDialog {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100px;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.okDialog__message {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
@ -172,3 +172,4 @@ accountBenefitNotify = Be notified when your files are downloaded
|
|||||||
accountBenefitMore = Do a lot more!
|
accountBenefitMore = Do a lot more!
|
||||||
manageAccount = Manage Account
|
manageAccount = Manage Account
|
||||||
logOut = Sign Out
|
logOut = Sign Out
|
||||||
|
okButton = Ok
|
||||||
|
Loading…
Reference in New Issue
Block a user