some wip. still broken
This commit is contained in:
Danny Coates
parent
5b939d2c95
commit
2b81ff1fb3
28 changed files with 305 additions and 391 deletions
|
|
@ -4,7 +4,7 @@
|
|||
pointer-events: none;
|
||||
margin: 8px;
|
||||
color: #fff;
|
||||
background-image: url('../assets/red_file.svg');
|
||||
background-image: url('../assets/blue_file.svg');
|
||||
width: 22px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
101
app/templates/fileManager/fileManager.css
Normal file
101
app/templates/fileManager/fileManager.css
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
.fileManager {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.uploadArea {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
overflow: scroll;
|
||||
transition: transform 150ms;
|
||||
flex: 1;
|
||||
min-height: 90px;
|
||||
}
|
||||
|
||||
.uploadArea__msg {
|
||||
font-size: 15px;
|
||||
color: var(--lightTextColor);
|
||||
margin: 12px 0 0;
|
||||
font-family: 'SF Pro Text', sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.uploadArea__clickMsg {
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
color: var(--lightTextColor);
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.uploadArea--dragging {
|
||||
border: 1px dashed rgba(12, 12, 13, 0.4);
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.uploadArea--faded * {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.uploadArea--noEvents,
|
||||
.uploadArea--noEvents * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn--file {
|
||||
background-color: #737373;
|
||||
}
|
||||
|
||||
.btn--file:hover {
|
||||
background-color: #636363;
|
||||
}
|
||||
|
||||
.btn--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inputFile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inputFile--focused + .btn--file {
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
outline: 1px dotted #000;
|
||||
outline: -webkit-focus-ring-color auto 5px;
|
||||
}
|
||||
|
||||
.uploadArea > .uploadedFiles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.uploadOptions {
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
color: var(--lightTextColor);
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.uploadOptions--faded {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.uploadCancel {
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
|
||||
.uploadCancel:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
129
app/templates/fileManager/index.js
Normal file
129
app/templates/fileManager/index.js
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
const html = require('choo/html');
|
||||
const assets = require('../../../common/assets');
|
||||
const setPasswordSection = require('../setPasswordSection');
|
||||
const uploadBox = require('../uploadedFileList');
|
||||
const expireInfo = require('../expireInfo');
|
||||
|
||||
module.exports = function(state, emit) {
|
||||
const hasAnUpload = state.archive && state.archive.numFiles > 0;
|
||||
|
||||
const optionClass = state.uploading ? 'uploadOptions--faded' : '';
|
||||
const btnUploading = state.uploading ? 'btn--stripes' : '';
|
||||
const cancelVisible = state.uploading ? '' : 'noDisplay';
|
||||
const faded = hasAnUpload ? 'noDisplay' : '';
|
||||
const selectFileClass = hasAnUpload > 0 ? 'btn--hidden' : '';
|
||||
const sendFileClass = hasAnUpload > 0 ? 'btn--file' : 'btn--hidden';
|
||||
|
||||
let btnText = '';
|
||||
|
||||
if (state.encrypting) {
|
||||
btnText = state.translate('encryptingFile');
|
||||
} else if (state.uploading) {
|
||||
btnText = `sending... ${Math.floor(state.transfer.progressRatio * 100)}%`;
|
||||
} else {
|
||||
//default pre-upload text
|
||||
btnText = state.translate('uploadSuccessConfirmHeader');
|
||||
}
|
||||
|
||||
return html`<div class="fileManager">
|
||||
<label class="uploadArea"
|
||||
ondragover=${dragover}
|
||||
ondragleave=${dragleave}>
|
||||
|
||||
${uploadBox(state.archive, state, emit)}
|
||||
|
||||
<div class="uploadedFilesWrapper ${faded}">
|
||||
<img
|
||||
src="${assets.get('addfile.svg')}"
|
||||
title="${state.translate('uploadSvgAlt')}"/>
|
||||
<div class="uploadArea__msg">
|
||||
${state.translate('uploadDropDragMessage')}
|
||||
</div>
|
||||
|
||||
<span class="uploadArea__clickMsg">
|
||||
${state.translate('uploadDropClickMessage')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<input id="file-upload"
|
||||
class="inputFile fileBox"
|
||||
type="file"
|
||||
multiple
|
||||
name="fileUploaded"
|
||||
onfocus=${onfocus}
|
||||
onblur=${onblur}
|
||||
onchange=${addFiles} />
|
||||
|
||||
</label>
|
||||
|
||||
<div class="uploadOptions ${optionClass}">
|
||||
${expireInfo(state, emit)}
|
||||
${setPasswordSection(state)}
|
||||
</div>
|
||||
|
||||
<label for="file-upload"
|
||||
class="btn btn--file ${selectFileClass}"
|
||||
title="${state.translate('uploadPageBrowseButton1')}">
|
||||
${state.translate('uploadPageBrowseButton1')}
|
||||
</label>
|
||||
|
||||
<button
|
||||
class="btn ${btnUploading} ${sendFileClass}"
|
||||
onclick=${state.uploading ? noop : upload}
|
||||
title="${btnText}">
|
||||
${btnText}
|
||||
</button>
|
||||
|
||||
<button class="btn--cancel uploadCancel ${cancelVisible}"
|
||||
onclick=${cancel}>
|
||||
${state.translate('uploadingPageCancel')}
|
||||
</button>
|
||||
</div>`;
|
||||
|
||||
function noop() {}
|
||||
|
||||
function dragover(event) {
|
||||
const div = document.querySelector('.uploadArea');
|
||||
div.classList.add('uploadArea--dragging');
|
||||
}
|
||||
|
||||
function dragleave(event) {
|
||||
const div = document.querySelector('.uploadArea');
|
||||
div.classList.remove('uploadArea--dragging');
|
||||
}
|
||||
|
||||
function onfocus(event) {
|
||||
event.target.classList.add('inputFile--focused');
|
||||
}
|
||||
|
||||
function onblur(event) {
|
||||
event.target.classList.remove('inputFile--focused');
|
||||
}
|
||||
|
||||
function cancel(event) {
|
||||
if (state.uploading) {
|
||||
emit('cancel');
|
||||
const cancelBtn = document.querySelector('.uploadCancel');
|
||||
cancelBtn.innerHTML = state.translate('uploadCancelNotification');
|
||||
}
|
||||
}
|
||||
|
||||
function addFiles(event) {
|
||||
event.preventDefault();
|
||||
const newFiles = Array.from(event.target.files);
|
||||
|
||||
emit('addFiles', { files: newFiles });
|
||||
}
|
||||
|
||||
function upload(event) {
|
||||
event.preventDefault();
|
||||
event.target.disabled = true;
|
||||
if (!state.uploading) {
|
||||
emit('upload', {
|
||||
type: 'click',
|
||||
dlimit: state.downloadCount || 1,
|
||||
password: state.password
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,14 +1,11 @@
|
|||
.footer {
|
||||
margin: 0 auto;
|
||||
flex: none;
|
||||
margin: 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-top: var(--grid-basis);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.legalSection {
|
||||
|
|
@ -33,19 +30,13 @@
|
|||
margin: 0 0 -5px calc(var(--grid-basis) * 2);
|
||||
}
|
||||
|
||||
.dropDownArrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown__only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-device-width: 750px), (max-width: 750px) {
|
||||
@media (max-device-width: 720px), (max-width: 720px) {
|
||||
.footer {
|
||||
align-items: flex-end;
|
||||
margin: 0;
|
||||
min-width: 455px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.footer_hiddenIcon {
|
||||
|
|
@ -56,20 +47,9 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.dropDownArrow {
|
||||
display: initial;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.legalSection {
|
||||
flex: 0;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(12, 12, 13, 0.1);
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.legalSection__link {
|
||||
|
|
@ -93,8 +73,4 @@
|
|||
color: var(--primaryControlFGColor);
|
||||
background-color: var(--primaryControlBGColor);
|
||||
}
|
||||
|
||||
.footer__noDisplay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,18 +3,11 @@ const assets = require('../../../common/assets');
|
|||
|
||||
module.exports = function(state) {
|
||||
const footer = html`<footer class="footer">
|
||||
<div class="legalSection"
|
||||
onmouseover=${showDropDown}
|
||||
onmouseout=${hideDropDown}>
|
||||
|
||||
<div class="legalSection__menu">
|
||||
<img class="dropDownArrow" src="${assets.get('dropdown-arrow.svg')}"/>
|
||||
<a class="legalSection__link"
|
||||
href="https://www.mozilla.org/about/legal">
|
||||
${state.translate('footerLinkLegal')}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="legalSection">
|
||||
<a class="legalSection__link"
|
||||
href="https://www.mozilla.org/about/legal">
|
||||
${state.translate('footerLinkLegal')}
|
||||
</a>
|
||||
<a
|
||||
href="https://testpilot.firefox.com/about"
|
||||
class="legalSection__link footer__dropdown footer__noDisplay">
|
||||
|
|
@ -71,18 +64,4 @@ module.exports = function(state) {
|
|||
return target && target.nodeName && target.nodeName === 'FOOTER';
|
||||
};
|
||||
return footer;
|
||||
|
||||
function showDropDown() {
|
||||
const menus = document.querySelectorAll('.footer__dropdown');
|
||||
menus.forEach(element => {
|
||||
element.classList.remove('footer__noDisplay');
|
||||
});
|
||||
}
|
||||
|
||||
function hideDropDown() {
|
||||
const menus = document.querySelectorAll('.footer__dropdown');
|
||||
menus.forEach(element => {
|
||||
element.classList.add('footer__noDisplay');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,10 +10,6 @@
|
|||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fxPromo > div {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,27 @@
|
|||
.header {
|
||||
align-items: flex-end;
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: calc(var(--grid-basis) * 4);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background-color: white;
|
||||
box-shadow: 0 -1px 0 0 #d7d7db7f, 0 2px 6px 0 #0000001e;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header__controls {
|
||||
justify-self: end;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
background-color: #979797;
|
||||
background-image: url('../assets/feedback.svg');
|
||||
|
|
@ -26,6 +37,4 @@
|
|||
text-indent: 2px;
|
||||
transition: all 250ms ease-in-out;
|
||||
white-space: nowrap;
|
||||
margin-left: calc(var(--grid-basis) * 2);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,14 +9,16 @@ module.exports = function(state, emit) {
|
|||
|
||||
const header = html`
|
||||
<header class="header">
|
||||
<h1>Firefox Send</h1>
|
||||
${userAccount(state, emit)}
|
||||
<a href="${feedbackUrl}"
|
||||
rel="noreferrer noopener"
|
||||
class="feedback"
|
||||
alt="Feedback"
|
||||
target="_blank">${state.translate('siteFeedback')}
|
||||
</a>
|
||||
<h1><a href="/">Firefox Send</a></h1>
|
||||
<div class="header__controls">
|
||||
${userAccount(state, emit)}
|
||||
<a href="${feedbackUrl}"
|
||||
rel="noreferrer noopener"
|
||||
class="feedback"
|
||||
alt="Feedback"
|
||||
target="_blank">${state.translate('siteFeedback')}
|
||||
</a>
|
||||
</div>
|
||||
</header>`;
|
||||
// HACK
|
||||
// We only want to render this once because we
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const passwordInput = require('../passwordInput');
|
|||
|
||||
module.exports = function(state) {
|
||||
const checked = state.password ? 'checked' : '';
|
||||
const label = state.password ? 'addPasswordLabel' : 'addPasswordMessage';
|
||||
const label = state.password ? '' : 'addPasswordMessage';
|
||||
|
||||
return html`
|
||||
<div class="setPasswordSection">
|
||||
|
|
@ -15,7 +15,7 @@ module.exports = function(state) {
|
|||
autocomplete="off"
|
||||
onchange=${togglePasswordInput}/>
|
||||
<label class="checkbox__label" for="add-password">
|
||||
${state.translate(label)}
|
||||
${label && state.translate(label)}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -32,7 +32,7 @@ module.exports = function(state) {
|
|||
|
||||
const label = document.querySelector('.checkbox__label');
|
||||
if (boxChecked) {
|
||||
label.innerHTML = state.translate('addPasswordLabel');
|
||||
label.innerHTML = ''; //state.translate('addPasswordLabel');
|
||||
unlockInput.focus();
|
||||
} else {
|
||||
label.innerHTML = state.translate('addPasswordMessage');
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
}
|
||||
|
||||
.checkbox {
|
||||
flex: auto;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ module.exports = function(state) {
|
|||
if (state.user.loggedIn || !state.capabilities.account) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return html`
|
||||
<a href="/signin" class="signupPromo">
|
||||
<div class="signupPromo__title">${state.translate('signInPromoText')}</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@
|
|||
text-align: center;
|
||||
justify-content: center;
|
||||
transition: background 100ms;
|
||||
margin: 24px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.signupPromo:hover {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
.boxTitle {
|
||||
margin: -2px 0 9px;
|
||||
text-align: left;
|
||||
margin: 24px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.boxSubtitle {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,19 +4,11 @@ const bytes = require('../../utils').bytes;
|
|||
const fileIcon = require('../fileIcon');
|
||||
|
||||
module.exports = function(file, index, state, emit, hasPassword) {
|
||||
const transfer = state.transfer;
|
||||
const transferState = transfer ? transfer.state : null;
|
||||
const share = state.route.includes('share/');
|
||||
const complete = share ? 'uploadedFile--completed' : '';
|
||||
|
||||
const cancelVisible =
|
||||
state.route === '/' && !state.uploading
|
||||
? 'uploadedFile__cancel--visible'
|
||||
: '';
|
||||
|
||||
const stampClass =
|
||||
share || transferState === 'complete' ? 'uploadedFile__stamp--visible' : '';
|
||||
|
||||
function cancel(event) {
|
||||
event.preventDefault();
|
||||
if (state.route === '/') {
|
||||
|
|
@ -25,8 +17,7 @@ module.exports = function(file, index, state, emit, hasPassword) {
|
|||
}
|
||||
|
||||
return html`
|
||||
<li class="uploadedFile ${complete}" id="${file.id}"
|
||||
>
|
||||
<li class="uploadedFile" id="${file.id}">
|
||||
|
||||
${fileIcon(file.name, hasPassword)}
|
||||
|
||||
|
|
@ -43,9 +34,6 @@ module.exports = function(file, index, state, emit, hasPassword) {
|
|||
<span>${bytes(file.size)}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img src="${assets.get('sent-done.svg')}"
|
||||
class="uploadedFile__stamp ${stampClass}"/>
|
||||
</li>
|
||||
`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,10 +13,6 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.uploadedFile--completed {
|
||||
background-color: #e8f2fe;
|
||||
}
|
||||
|
||||
.uploadedFile__fileData {
|
||||
margin: 8px 16px 8px 44px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
.uploadedFiles {
|
||||
border: 1px solid rgba(12, 12, 13, 0.1);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(132, 193, 255, 0.1);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-content: center;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.account {
|
||||
padding: 0;
|
||||
margin-bottom: var(--grid-basis);
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
|
|
@ -12,9 +11,6 @@
|
|||
.account_dropdown {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: -15px;
|
||||
min-width: 150px;
|
||||
list-style-type: none;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue