dylan.derr/Send
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip on download page

Browse source
This commit is contained in:
Danny Coates 2018-10-30 11:37:33 -07:00
parent 12e6eb1666
commit 26a943939d
No known key found for this signature in database
GPG key ID: 4C442633C62E00CB
11 changed files with 39 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

22
app/ui/archiveTile.js
View file

@ -107,13 +107,22 @@ function fileInfo(file, action) {
function archiveDetails(translate, archive) {
if (archive.manifest.files.length > 1) {
return html`
<details class="w-full">
<details class="w-full pb-1 overflow-y-hidden" ${
archive.open ? 'open' : ''
} ontoggle=${toggled}>
<summary>${translate('fileCount', {
num: archive.manifest.files.length
})}</summary>
${list(archive.manifest.files.map(f => fileInfo(f)), 'list-reset')}
${list(
archive.manifest.files.map(f => fileInfo(f)),
'list-reset h-full overflow-y-scroll'
)}
</details>`;
}
function toggled(event) {
event.stopPropagation();
archive.open = event.target.open;
}
}
module.exports = function(state, emit, archive) {
@ -286,9 +295,12 @@ module.exports.empty = function(state, emit) {
module.exports.preview = function(state, emit) {
const archive = state.fileInfo;
if (archive.open === undefined) {
archive.open = true;
}
return html`
<article class="flex flex-col bg-white border border-grey-light p-2 z-20">
<p class="w-full mb-4">
<article class="flex flex-col max-h-full bg-white border border-grey-light p-2 z-20">
<p class="flex-none 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>
<div class="text-sm font-light">${bytes(archive.size)}</div>
@ -296,7 +308,7 @@ module.exports.preview = function(state, emit) {
${archiveDetails(state.translate, archive)}
<hr class="w-full border-t">
<button
class="border rounded bg-blue text-white mt-2 py-2 px-6"
class="flex-none border rounded bg-blue text-white mt-2 py-2 px-6"
title="${state.translate('downloadButtonLabel')}"
onclick=${download}>
${state.translate('downloadButtonLabel')}

2
app/ui/blank.js
View file

@ -1,5 +1,5 @@
const html = require('choo/html');
module.exports = function() {
return html`<main class="main"></main>`;
return html`<main class="main container"></main>`;
};

6
app/ui/download.js
View file

@ -1,6 +1,7 @@
/* global downloadMetadata */
const html = require('choo/html');
const archiveTile = require('./archiveTile');
const intro = require('./intro');
function password(state, emit) {
const fileInfo = state.fileInfo;
@ -96,8 +97,9 @@ module.exports = function(state, emit) {
}
return html`
<main class="main container">
<section class="relative h-full w-full my-4 px-6">
${content}
<section class="relative h-full w-full px-6 md:flex md:flex-row">
<div class="pt-4 md:mr-6 md:pb-4 md:w-1/2">${content}</div>
<div class="pt-4 md:w-1/2">${intro(state)}</div>
</section>
</main>`;
};

2
app/ui/error.js
View file

@ -3,7 +3,7 @@ const assets = require('../../common/assets');
module.exports = function(state) {
return html`
<main class="main">
<main class="main container">
<div class="flex flex-col items-center text-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
<h1 class="">${state.translate('errorPageHeader')}</h1>
<img class="my-8" src="${assets.get('illustration_error.svg')}"/>

20
app/ui/archiveList.js → app/ui/home.js
View file

@ -1,6 +1,7 @@
const html = require('choo/html');
const { list } = require('../utils');
const archiveTile = require('./archiveTile');
const modal = require('./modal');
const intro = require('./intro');
module.exports = function(state, emit) {
@ -20,12 +21,15 @@ module.exports = function(state, emit) {
archives.push(intro(state));
}
return html`
<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,
'list-reset h-full md:w-1/2 overflow-y-scroll foo pt-2',
'py-2'
)}
</section>`;
<main class="main container relative">
${state.modal && modal(state, emit)}
<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,
'list-reset h-full md:w-1/2 overflow-y-scroll pt-2',
'py-2'
)}
</section>
</main>`;
};

2
app/ui/legal.js
View file

@ -3,7 +3,7 @@ const raw = require('choo/html/raw');
module.exports = function(state) {
return html`
<main class="main">
<main class="main container">
<div class="flex flex-col items-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
<h1 class="">${state.translate('legalHeader')}</h1>
${raw(

2
app/ui/notFound.js
View file

@ -3,7 +3,7 @@ const assets = require('../../common/assets');
module.exports = function(state) {
return html`
<main class="main">
<main class="main container">
<div class="flex flex-col items-center text-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
<h1 class="text-pink-dark">${state.translate('expiredPageHeader')}</h1>
<img src="${assets.get('illustration_expired.svg')}" id="expired-img">

2
app/ui/unsupported.js
View file

@ -30,7 +30,7 @@ module.exports = function(state) {
}
return html`
<main class="main">
<main class="main container">
<div class="flex flex-col items-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
<h1 class="text-center">${strings.header}</h1>
<p class="my-16">

10
app/ui/welcome.js
View file

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