Chapril/drop.chapril.org-firefoxsend
Chapril/drop.chapril.org-firefoxsend
26
1
Fork 0
Code Issues Releases Activity

Update vnext android ui (#1036)

Browse Source 
* refine android ui

* fix layout
This commit is contained in:
Mark Liang (You-Wen) 2018-12-14 00:36:03 +08:00 committed by Donovan Preston
parent 09a4d7b9ee
commit aa156558b6
6 changed files with 55 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
android/pages/home.js
View File

@ -24,14 +24,18 @@ module.exports = function(state, emit) {
let content = ''; let content = '';
let button = html` let button = html`
<img <div
class="bg-blue rounded-full m-4 flex items-center justify-center shadow-lg"
style="width: 56px; height: 56px"
onclick="${onclick}" onclick="${onclick}"
style="padding: 1em" >
src="${assets.get('addfile.svg')}" <img src="${assets.get('add.svg')}" />
/> </div>
`; `;
if (state.uploading) { if (state.uploading) {
content = archiveTile.uploading(state, emit); content = html`
<div class="p-6 w-full">${archiveTile.uploading(state, emit)}</div>
`;
} else if (state.archive) { } else if (state.archive) {
content = archiveTile.wip(state, emit); content = archiveTile.wip(state, emit);
button = ''; button = '';
@ -39,11 +43,15 @@ module.exports = function(state, emit) {
content = content =
archives.length < 1 archives.length < 1
? intro(state) ? intro(state)
: list(archives, 'list-reset h-full overflow-y-scroll', 'mb-3'); : list(
archives,
'list-reset h-full overflow-y-scroll w-full p-6',
'mb-3 w-full'
);
} }
return html` return html`
<main class="flex relative h-full"> <main class="flex relative h-full w-full">
${state.modal && modal(state, emit)} ${content} ${state.modal && modal(state, emit)} ${content}
<div class="fixed pin-r pin-b"> <div class="fixed pin-r pin-b">
${button} ${button}

20
app/main.css
View File

@ -165,3 +165,23 @@ progress::-webkit-progress-value {
@apply shadow-md; @apply shadow-md;
} }
} }
.rounded-device {
border-radius: 0.25rem;
}
.px-4-device {
padding-left: 0;
padding-right: 0;
}
@media screen and (max-device-width: 576px) {
.rounded-device {
border-radius: 0;
}
.px-4-device {
padding-left: 1rem;
padding-right: 1rem;
}
}

18
app/ui/archiveTile.js
View File

@ -20,7 +20,7 @@ function password(state) {
const MAX_LENGTH = 32; const MAX_LENGTH = 32;
return html` return html`
<div class="my-2"> <div class="my-2 px-4-device">
<div class="checkbox inline-block mr-3"> <div class="checkbox inline-block mr-3">
<input <input
id="add-password" id="add-password"
@ -96,7 +96,7 @@ function password(state) {
function fileInfo(file, action) { function fileInfo(file, action) {
return html` return html`
<article class="flex flex-row items-center p-3"> <article class="flex flex-row items-center p-3 w-full">
<img class="" src="${assets.get('blue_file.svg')}"/> <img class="" src="${assets.get('blue_file.svg')}"/>
<p class="ml-4 w-full"> <p class="ml-4 w-full">
<h1 class="text-sm font-medium word-break-all">${file.name}</h1> <h1 class="text-sm font-medium word-break-all">${file.name}</h1>
@ -143,7 +143,7 @@ module.exports = function(state, emit, archive) {
return html` return html`
<article <article
id="${archive.id}" id="${archive.id}"
class="flex flex-col items-start border border-grey-light bg-white p-4"> class="flex flex-col items-start border border-grey-light bg-white p-4 w-full">
<p class="w-full"> <p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<input <input
@ -189,7 +189,7 @@ module.exports = function(state, emit, archive) {
module.exports.wip = function(state, emit) { module.exports.wip = function(state, emit) {
return html` return html`
<article class="flex flex-col bg-white z-20 md:h-full" id="wip"> <article class="flex flex-col bg-white z-20 md:h-full w-full" id="wip">
${ ${
list( list(
Array.from(state.archive.files) Array.from(state.archive.files)
@ -225,7 +225,7 @@ module.exports.wip = function(state, emit) {
${expiryOptions(state, emit)} ${password(state, emit)} ${expiryOptions(state, emit)} ${password(state, emit)}
<button <button
id="upload-btn" id="upload-btn"
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 flex flex-no-shrink items-center justify-center font-semibold" class="rounded-device bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 flex flex-no-shrink items-center justify-center font-semibold"
title="${state.translate('uploadFilesButton')}" title="${state.translate('uploadFilesButton')}"
onclick="${upload}" onclick="${upload}"
> >
@ -283,7 +283,7 @@ module.exports.uploading = function(state, emit) {
return html` return html`
<article <article
id="${archive.id}" id="${archive.id}"
class="z-20 flex flex-col items-start border border-grey-light bg-white p-4"> class="z-20 flex flex-col items-start border border-grey-light bg-white p-4 w-full">
<p class="w-full"> <p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1> <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -317,7 +317,7 @@ module.exports.uploading = function(state, emit) {
module.exports.empty = function(state, emit) { module.exports.empty = function(state, emit) {
return html` return html`
<article <article
class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full" class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full w-full"
onclick="${ onclick="${
e => { e => {
if (e.target.tagName !== 'LABEL') { if (e.target.tagName !== 'LABEL') {
@ -367,7 +367,7 @@ module.exports.preview = function(state, emit) {
archive.open = true; archive.open = true;
} }
return html` return html`
<article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20"> <article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20 w-full">
<p class="w-full mb-4"> <p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1> <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -397,7 +397,7 @@ module.exports.downloading = function(state, emit) {
const progress = state.transfer.progressRatio; const progress = state.transfer.progressRatio;
const progressPercent = percent(progress); const progressPercent = percent(progress);
return html` return html`
<article class="flex flex-col bg-white border border-grey-light p-4 z-20"> <article class="flex flex-col bg-white border border-grey-light p-4 z-20 w-full">
<p class="w-full mb-4"> <p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/> <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1> <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>

2
app/ui/expiryOptions.js
View File

@ -7,7 +7,7 @@ const signupDialog = require('./signupDialog');
module.exports = function(state, emit) { module.exports = function(state, emit) {
const el = html` const el = html`
<div class=""> <div class="px-4-device">
${ ${
raw( raw(
state.translate('frontPageExpireInfo', { state.translate('frontPageExpireInfo', {

10
app/ui/home.js
View File

@ -20,14 +20,18 @@ module.exports = function(state, emit) {
const right = const right =
archives.length < 1 archives.length < 1
? intro(state) ? intro(state)
: list(archives, 'list-reset h-full overflow-y-scroll', 'mb-3'); : list(
archives,
'list-reset h-full overflow-y-scroll w-full',
'mb-3 w-full'
);
return html` return html`
<main class="main relative"> <main class="main relative">
${state.modal && modal(state, emit)} ${state.modal && modal(state, emit)}
<section class="h-full w-full p-6 md:flex md:flex-row z-10"> <section class="h-full w-full p-6 md:flex md:flex-row z-10">
<div class="md:mr-6 md:w-1/2">${left}</div> <div class="md:mr-6 md:w-1/2 w-full">${left}</div>
<div class="md:w-1/2 mt-6 md:mt-0">${right}</div> <div class="md:w-1/2 mt-6 md:mt-0 w-full">${right}</div>
</section> </section>
</main> </main>
`; `;

3
assets/add.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<polygon fill="#FFF" fill-rule="evenodd" points="6.857 0 6.857 6.857 0 6.857 0 9.143 6.857 9.143 6.857 16 9.143 16 9.143 9.143 16 9.143 16 6.857 9.143 6.857 9.143 0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 261 B