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

Work in progress on latest design

Browse source
This commit is contained in:
Danny Coates 2019-02-11 13:48:06 -08:00
parent 0fa963f1ab
commit fc37fd1fe3
No known key found for this signature in database
GPG key ID: 4C442633C62E00CB
23 changed files with 215 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

48
app/main.css
View file

@ -13,8 +13,15 @@ a {
text-decoration: none;
}
body {
background-image: url('../assets/bg.svg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.btn {
@apply bg-blue;
@apply bg-blue-dark;
@apply text-white;
@apply font-semibold;
@apply cursor-pointer;
@ -24,11 +31,11 @@ a {
}
.btn:hover {
@apply bg-blue-dark;
@apply bg-blue-darker;
}
.btn:focus {
@apply bg-blue-dark;
@apply bg-blue-darker;
}
.checkbox {
@ -46,7 +53,7 @@ a {
}
.checkbox > label::before {
@apply bg-blue-lightest;
/* @apply bg-grey-lightest; */
@apply border;
@apply rounded-sm;
@ -58,14 +65,17 @@ a {
}
.checkbox > label:hover::before {
@apply border-blue;
@apply border-blue-dark;
}
.checkbox > input:focus + label::before {
@apply border-blue;
@apply border-blue-dark;
}
.checkbox > input:checked + label::before {
@apply bg-blue-dark;
@apply border-blue-dark;
background-image: url('../assets/lock.svg');
background-position: center;
background-size: 1.25rem;
@ -77,6 +87,9 @@ a {
}
.checkbox > input:disabled + label::before {
@apply bg-blue-dark;
@apply border-blue-dark;
background-image: url('../assets/lock.svg');
background-position: center;
background-size: 1.25rem;
@ -116,11 +129,11 @@ footer li:hover {
}
.header-logo {
background-image: url('../assets/send_logo_white.svg');
background-image: url('../assets/logo.svg');
background-position: left;
background-repeat: no-repeat;
background-size: 1.8rem;
padding-left: 2.4rem;
background-size: 2.25rem;
padding-left: 3rem;
text-decoration: none;
}
@ -220,7 +233,7 @@ progress::-moz-progress-bar {
@screen md {
.header-logo {
background-image: url('../assets/send_logo.svg');
background-image: url('../assets/logo.svg');
}
.main {
@ -234,10 +247,6 @@ progress::-moz-progress-bar {
max-height: 40rem;
width: calc(100% - 3rem);
}
.main > section {
@apply shadow-md;
}
}
@tailwind utilities;
@ -245,3 +254,14 @@ progress::-moz-progress-bar {
.word-break-all {
word-break: break-all;
}
@responsive {
.shadow-light {
box-shadow: 0 0 8px 0 rgba(12, 12, 13, 0.1);
}
.shadow-big {
box-shadow: 0 0 32px 0 rgba(12, 12, 13, 0.1),
0 2px 16px 0 rgba(12, 12, 13, 0.05);
}
}

2
app/ui/account.js
View file

@ -62,7 +62,7 @@ class Account extends Component {
return html`
<send-account>
<button
class="p-2 border rounded border-white text-white hover:bg-white hover:text-blue md:text-blue md:border-blue md:hover:text-white md:hover:bg-blue"
class="p-2 border rounded border-white text-white hover:bg-white hover:text-black md:text-blue-dark md:border-blue-dark md:hover:text-white md:hover:bg-blue-dark"
onclick="${e => this.login(e)}"
>
${translate('signInMenuOption')}

44
app/ui/archiveTile.js
View file

@ -29,7 +29,7 @@ function password(state) {
const MAX_LENGTH = 32;
return html`
<div class="my-2 px-4">
<div class="my-2 px-1">
<div class="checkbox inline-block mr-3">
<input
id="add-password"
@ -46,7 +46,7 @@ function password(state) {
id="password-input"
class="${state.archive.password
? ''
: 'invisible'} border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8"
: 'invisible'} border rounded-sm focus:border-blue-dark leading-normal my-2 py-1 px-2 h-8"
autocomplete="off"
maxlength="${MAX_LENGTH}"
type="password"
@ -126,7 +126,7 @@ function archiveDetails(translate, archive) {
${archive.open ? 'open' : ''}
ontoggle="${toggled}"
>
<summary
<summary class="text-blue-dark text-sm cursor-pointer"
>${translate('fileCount', {
num: archive.manifest.files.length
})}</summary
@ -149,7 +149,7 @@ module.exports = function(state, emit, archive) {
platform() !== 'android'
? html`
<button
class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center"
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium flex items-center"
onclick=${copy}
>
<img src="${assets.get('copy-16.svg')}" class="mr-2" />
@ -158,7 +158,7 @@ module.exports = function(state, emit, archive) {
`
: html`
<button
class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center"
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium flex items-center"
onclick=${share}
>
<img src="${assets.get('share-24.svg')}" class="mr-2" /> Share
@ -168,10 +168,10 @@ module.exports = function(state, emit, archive) {
platform() === 'web'
? html`
<a
class="flex items-end text-blue hover:text-blue-dark focus:text-blue-darker font-medium"
class="flex items-baseline text-blue-dark hover:text-blue-darker focus:text-blue-darker font-medium"
href="${archive.url}"
>
<img src="${assets.get('download.svg')}" class="mr-1" />
<img src="${assets.get('dl.svg')}" class="mr-2" />
${state.translate('downloadButtonLabel')}
</a>
`
@ -181,7 +181,7 @@ module.exports = function(state, emit, archive) {
return html`
<send-archive
id="archive-${archive.id}"
class="flex flex-col items-start border border-grey-light bg-white p-4 w-full">
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full">
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<input
@ -235,11 +235,11 @@ module.exports.wip = function(state, emit) {
Array.from(state.archive.files)
.reverse()
.map(f => fileInfo(f, remove(f))),
'list-reset overflow-y-auto px-4 bg-blue-lightest md:h-full md:max-h-half-screen',
'bg-white px-2 mt-3 border border-grey-light rounded'
'bg-grey-lightest rounded-t list-reset overflow-y-auto px-4 md:h-full md:max-h-half-screen',
'bg-white px-2 my-2 shadow-light rounded'
)}
<div
class="flex-grow flex items-end p-4 bg-blue-lightest mb-6 font-medium"
class="flex-grow flex items-end p-4 bg-grey-lightest rounded-b mb-6 font-medium"
>
<input
id="file-upload"
@ -265,7 +265,7 @@ module.exports.wip = function(state, emit) {
${expiryOptions(state, emit)} ${password(state, emit)}
<button
id="upload-btn"
class="btn rounded flex-no-shrink"
class="btn rounded-lg flex-no-shrink"
title="${state.translate('uploadFilesButton')}"
onclick="${upload}"
>
@ -319,7 +319,7 @@ module.exports.uploading = function(state, emit) {
return html`
<send-upload-area
id="${archive.id}"
class="flex flex-col items-start border border-grey-light bg-white p-4 w-full">
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full">
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -334,10 +334,10 @@ module.exports.uploading = function(state, emit) {
expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
})}
</div>
<div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
<div class="text-blue-dark text-sm font-medium mt-2">${progressPercent}</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
<button
class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium"
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium"
onclick=${cancel}>
${state.translate('uploadingPageCancel')}
</button>
@ -353,7 +353,7 @@ module.exports.uploading = function(state, emit) {
module.exports.empty = function(state, emit) {
return html`
<send-upload-area
class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full w-full"
class="flex flex-col items-center justify-center border-2 border-dashed border-grey rounded px-6 py-16 h-full w-full"
onclick="${e => {
if (e.target.tagName !== 'LABEL') {
document.getElementById('file-upload').click();
@ -362,7 +362,7 @@ module.exports.empty = function(state, emit) {
>
<img src="${assets.get('addfiles.svg')}" width="48" height="48" />
<div
class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide"
class="pt-6 pb-2 text-center text-lg font-bold capitalize tracking-wide"
>
${state.translate('uploadDropDragMessage')}
</div>
@ -380,7 +380,7 @@ module.exports.empty = function(state, emit) {
<label
for="file-upload"
role="button"
class="btn rounded flex items-center mt-4"
class="btn rounded-lg flex items-center mt-4"
title="${state.translate('addFilesButton')}"
>
${state.translate('addFilesButton')}
@ -402,7 +402,7 @@ module.exports.preview = function(state, emit) {
archive.open = true;
}
return html`
<send-archive class="flex flex-col max-h-full bg-white border border-grey-light p-4 w-full md:w-4/5">
<send-archive class="flex flex-col max-h-full bg-white rounded shadow-light p-4 w-full md:w-4/5">
<p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -415,7 +415,7 @@ module.exports.preview = function(state, emit) {
</div>
<button
id="download-btn"
class="btn rounded mt-4 w-full flex-no-shrink"
class="btn rounded-lg mt-4 w-full flex-no-shrink"
title="${state.translate('downloadButtonLabel')}"
onclick=${download}>
${state.translate('downloadButtonLabel')}
@ -434,7 +434,7 @@ module.exports.downloading = function(state) {
const progress = state.transfer.progressRatio;
const progressPercent = percent(progress);
return html`
<send-archive class="flex flex-col bg-white border border-grey-light p-4 w-full md:w-4/5">
<send-archive class="flex flex-col bg-white rounded shadow-light p-4 w-full md:w-4/5">
<p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -442,7 +442,7 @@ module.exports.downloading = function(state) {
archive.size
)}</div>
</p>
<div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
<div class="text-blue-dark text-sm font-medium mt-2">${progressPercent}</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
</send-archive>`;
};

4
app/ui/blank.js
View file

@ -3,7 +3,9 @@ const html = require('choo/html');
module.exports = function() {
return html`
<main class="main relative">
<section class="h-full w-full p-6 md:flex md:flex-row z-10">
<section
class="h-full w-full p-6 z-10 md:flex md:flex-row md:rounded-lg md:shadow-big"
>
<div class="md:mr-6 md:w-1/2 w-full"></div>
<div class="md:w-1/2 mt-6 md:mt-0 w-full"></div>
</section>

2
app/ui/body.js
View file

@ -13,7 +13,7 @@ module.exports = 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"
class="flex flex-col items-center font-sans md:h-screen md:bg-grey-lightest"
>
${banner(state, emit)} ${state.cache(Header, 'header').render()}
${main(state, emit)} ${state.cache(Footer, 'footer').render()}

2
app/ui/copyDialog.js
View file

@ -18,7 +18,7 @@ module.exports = function(name, url) {
value="${url}"
readonly="true"
/>
<button class="btn rounded w-full flex-no-shrink" onclick="${copy}">
<button class="btn rounded-lg w-full flex-no-shrink" onclick="${copy}">
${state.translate('copyUrlFormButton')}
</button>
<a

4
app/ui/download.js
View file

@ -145,7 +145,9 @@ module.exports = function(state, emit) {
return html`
<main class="main container">
${state.modal && modal(state, emit)}
<section class="relative h-full w-full p-6 md:flex md:flex-row">
<section
class="relative h-full w-full p-6 md:flex md:flex-row md:rounded-lg md:shadow-big"
>
${content}
</section>
</main>

2
app/ui/expiryOptions.js
View file

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

2
app/ui/footer.js
View file

@ -19,7 +19,7 @@ class Footer extends Component {
const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
return html`
<footer
class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 font-medium text-xs text-grey-dark md:items-center justify-between bg-grey-lightest"
class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 font-medium text-xs text-grey-dark md:items-center justify-between"
>
<a
class="mozilla-logo pb-10 md:pb-0 m-2"

10
app/ui/header.js
View file

@ -21,21 +21,21 @@ class Header extends Component {
platform() === 'android'
? html`
<a class="header-logo">
<h1 class="text-2xl text-white md:text-black font-normal">
Firefox <b>Send</b>
<h1 class="text-3xl text-white md:text-black font-normal">
<b>Firefox</b> Send
</h1>
</a>
`
: html`
<a class="header-logo" href="/">
<h1 class="text-2xl text-white md:text-black font-normal">
Firefox <b>Send</b>
<h1 class="text-3xl text-white md:text-black font-normal">
<b>Firefox</b> Send
</h1>
</a>
`;
return html`
<header
class="relative flex-none flex flex-row items-center justify-between bg-blue md:bg-white w-full px-6 h-16 md:shadow z-20"
class="relative flex-none flex flex-row items-center justify-between bg-black w-full px-6 h-16 z-20 md:bg-transparent"
>
${title} ${this.account.render()}
</header>

12
app/ui/home.js
View file

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

2
app/ui/okDialog.js
View file

@ -5,7 +5,7 @@ module.exports = function(message) {
return html`
<send-ok-dialog class="flex flex-col max-w-xs p-4">
<div class="text-center m-8 leading-normal">${message}</div>
<button class="btn rounded w-full flex-no-shrink" onclick="${close}">
<button class="btn rounded-lg w-full flex-no-shrink" onclick="${close}">
${state.translate('okButton')}
</button>
</send-ok-dialog>

2
app/ui/selectbox.js
View file

@ -6,7 +6,7 @@ module.exports = function(selected, options, translate, changed, htmlId) {
return html`
<select
id="${htmlId}"
class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 my-2 h-8"
class="appearance-none cursor-pointer border rounded-sm bg-grey-lightest hover:border-blue-dark focus:border-blue-dark px-2 py-1 my-2 h-8"
onchange="${choose}"
>
${options.map(

2
app/ui/signupDialog.js
View file

@ -32,7 +32,7 @@ module.exports = function(trigger) {
id="email-submit"
type="submit" />
</form>
<label class="btn rounded w-full flex flex-no-shrink items-center justify-center" for="email-submit">
<label class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center" for="email-submit">
${state.translate('signInMenuOption')}
</label>
<button