add fxA ui elements
This commit is contained in:
Emily
parent
4c64593262
commit
894545a6f0
29 changed files with 612 additions and 370 deletions
|
|
@ -15,7 +15,7 @@
|
|||
.fileList {
|
||||
position: static;
|
||||
width: 400px;
|
||||
max-height: 200px;
|
||||
max-height: 160px;
|
||||
margin: 6px 0 0 -3px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
.footer {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
padding: 50px 31px 41px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.legalSection {
|
||||
max-width: 81vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
|
@ -35,60 +33,116 @@
|
|||
color: #d7d7db;
|
||||
}
|
||||
|
||||
.legalSection__mozLogo {
|
||||
.footer__mozLogo {
|
||||
width: 112px;
|
||||
height: 32px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.socialSection {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 94px;
|
||||
}
|
||||
|
||||
.socialSection__link {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.socialSection__link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.socialSection__icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: -5px;
|
||||
margin: 0 0 -5px 4px;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
background-color: var(--primaryControlBGColor);
|
||||
background-image: url('../assets/feedback.svg');
|
||||
background-position: 2px 4px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 18px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--primaryControlBGColor);
|
||||
color: var(--primaryControlFGColor);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
min-width: 12px;
|
||||
max-width: 12px;
|
||||
text-indent: 17px;
|
||||
transition: all 250ms ease-in-out;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.feedback:hover,
|
||||
.feedback:focus {
|
||||
min-width: 30px;
|
||||
max-width: 300px;
|
||||
text-indent: 2px;
|
||||
padding: 5px 5px 5px 20px;
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
.feedback:active {
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
.dropDownArrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown__only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-device-width: 750px), (max-width: 750px) {
|
||||
.footer {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
max-width: 630px;
|
||||
padding: 20px 31px;
|
||||
margin: auto;
|
||||
align-items: flex-end;
|
||||
padding: 20px 25px;
|
||||
margin: 0;
|
||||
min-width: 455px;
|
||||
}
|
||||
|
||||
.legalSection__mozLogo {
|
||||
margin-left: -7px;
|
||||
.footer_hiddenIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown__only {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropDownArrow {
|
||||
display: initial;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.legalSection {
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
flex: 0;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(12, 12, 13, 0.1);
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.legalSection__link {
|
||||
flex: none;
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
align-self: flex-start;
|
||||
box-sizing: border-box;
|
||||
height: 24px;
|
||||
width: 176px;
|
||||
margin: 0;
|
||||
padding: 4px 20px 0 8px;
|
||||
text-shadow: none;
|
||||
font-weight: 400;
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
||||
.socialSection {
|
||||
margin-top: 20px;
|
||||
align-self: flex-start;
|
||||
.legalSection__link:visited {
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
||||
.legalSection__link:hover {
|
||||
color: var(--primaryControlFGColor);
|
||||
background-color: var(--primaryControlBGColor);
|
||||
}
|
||||
|
||||
.footer__noDisplay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,62 +1,89 @@
|
|||
const html = require('choo/html');
|
||||
const version = require('../../../package.json').version;
|
||||
const assets = require('../../../common/assets');
|
||||
const { browserName } = require('../../utils');
|
||||
|
||||
module.exports = function(state) {
|
||||
const browser = browserName();
|
||||
const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
|
||||
|
||||
const footer = html`<footer class="footer">
|
||||
<div class="legalSection">
|
||||
<a
|
||||
href="https://www.mozilla.org/about/legal"
|
||||
class="legalSection__link">
|
||||
${state.translate('footerLinkLegal')}
|
||||
</a>
|
||||
<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>
|
||||
|
||||
<a
|
||||
href="https://testpilot.firefox.com/about"
|
||||
class="legalSection__link">
|
||||
class="legalSection__link footer__dropdown footer__noDisplay">
|
||||
${state.translate('footerLinkAbout')}
|
||||
</a>
|
||||
<a
|
||||
href="/legal"
|
||||
class="legalSection__link">${state.translate('footerLinkPrivacy')}</a>
|
||||
<a
|
||||
href="/legal"
|
||||
class="legalSection__link">${state.translate('footerLinkTerms')}</a>
|
||||
class="legalSection__link footer__dropdown footer__noDisplay">
|
||||
${state.translate('footerLinkTerms')}
|
||||
</a>
|
||||
<a
|
||||
href="https://www.mozilla.org/privacy/websites/#cookies"
|
||||
class="legalSection__link">
|
||||
class="legalSection__link footer__dropdown footer__noDisplay">
|
||||
${state.translate('footerLinkCookies')}
|
||||
</a>
|
||||
<a
|
||||
href="https://www.mozilla.org/about/legal/report-infringement/"
|
||||
class="legalSection__link">
|
||||
class="legalSection__link footer__dropdown footer__noDisplay">
|
||||
${state.translate('reportIPInfringement')}
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://www.mozilla.org"
|
||||
class="legalSection__link">
|
||||
<img
|
||||
class="legalSection__mozLogo"
|
||||
src="${assets.get('mozilla-logo.svg')}"
|
||||
alt="mozilla"/>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/mozilla/send"
|
||||
class="socialSection__link">
|
||||
<img
|
||||
class="socialSection__icon"
|
||||
src="${assets.get('github-icon.svg')}"
|
||||
alt="github"/>
|
||||
class="legalSection__link footer__dropdown dropdown__only footer__noDisplay">
|
||||
Github
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/FxTestPilot"
|
||||
class="socialSection__link">
|
||||
<img
|
||||
class="socialSection__icon"
|
||||
src="${assets.get('twitter-icon.svg')}"
|
||||
alt="twitter"/>
|
||||
class="legalSection__link footer__dropdown dropdown__only footer__noDisplay">
|
||||
Twitter
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a href="${feedbackUrl}"
|
||||
rel="noreferrer noopener"
|
||||
class="feedback"
|
||||
alt="Feedback"
|
||||
target="_blank">${state.translate('siteFeedback')}
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/mozilla/send"
|
||||
class="socialSection__link footer_hiddenIcon">
|
||||
<img
|
||||
class="socialSection__icon"
|
||||
src="${assets.get('github-icon.svg')}"
|
||||
alt="Github"/>
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/FxTestPilot"
|
||||
class="socialSection__link footer_hiddenIcon">
|
||||
<img
|
||||
class="socialSection__icon"
|
||||
src="${assets.get('twitter-icon.svg')}"
|
||||
alt="Twitter"/>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://www.mozilla.org"
|
||||
class="socialSection__link">
|
||||
<img
|
||||
class="footer__mozLogo"
|
||||
src="${assets.get('mozilla-logo.svg')}"
|
||||
alt="mozilla"/>
|
||||
</a>
|
||||
</footer>`;
|
||||
// HACK
|
||||
// We only want to render this once because we
|
||||
|
|
@ -65,4 +92,18 @@ 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');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,95 +3,7 @@
|
|||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
height: 32px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo__link {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.logo__title {
|
||||
color: #3e3d40;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
letter-spacing: 1px;
|
||||
margin-left: 8px;
|
||||
transition: color 50ms;
|
||||
}
|
||||
|
||||
.logo__title:hover {
|
||||
color: var(--primaryControlBGColor);
|
||||
}
|
||||
|
||||
.logo__subtitle {
|
||||
color: #3e3d40;
|
||||
font-size: 12px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.logo__subtitle-link {
|
||||
font-weight: bold;
|
||||
color: #3e3d40;
|
||||
transition: color 50ms;
|
||||
}
|
||||
|
||||
.logo__subtitle-link:hover {
|
||||
color: var(--primaryControlBGColor);
|
||||
}
|
||||
|
||||
.feedback {
|
||||
background-color: var(--primaryControlBGColor);
|
||||
background-image: url('../assets/feedback.svg');
|
||||
background-position: 2px 4px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 18px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--primaryControlBGColor);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
color: var(--primaryControlFGColor);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
opacity: 0.9;
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
min-width: 12px;
|
||||
max-width: 12px;
|
||||
text-indent: 17px;
|
||||
transition: all 250ms ease-in-out;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.feedback:hover,
|
||||
.feedback:focus {
|
||||
min-width: 30px;
|
||||
max-width: 300px;
|
||||
text-indent: 2px;
|
||||
padding: 5px 5px 5px 20px;
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
.feedback:active {
|
||||
background-color: var(--primaryControlHoverColor);
|
||||
}
|
||||
|
||||
@media (max-device-width: 750px), (max-width: 750px) {
|
||||
.header {
|
||||
padding-top: 60px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,8 @@
|
|||
const html = require('choo/html');
|
||||
const version = require('../../../package.json').version;
|
||||
const browser = browserName();
|
||||
|
||||
module.exports = function(state) {
|
||||
const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
|
||||
module.exports = function() {
|
||||
const header = html`
|
||||
<header class="header">
|
||||
<a href="${feedbackUrl}"
|
||||
rel="noreferrer noopener"
|
||||
class="feedback"
|
||||
target="_blank">${state.translate('siteFeedback')}</a>
|
||||
</header>`;
|
||||
// HACK
|
||||
// We only want to render this once because we
|
||||
|
|
@ -19,26 +12,3 @@ module.exports = function(state) {
|
|||
};
|
||||
return header;
|
||||
};
|
||||
|
||||
function browserName() {
|
||||
try {
|
||||
if (/firefox/i.test(navigator.userAgent)) {
|
||||
return 'firefox';
|
||||
}
|
||||
if (/edge/i.test(navigator.userAgent)) {
|
||||
return 'edge';
|
||||
}
|
||||
if (/trident/i.test(navigator.userAgent)) {
|
||||
return 'ie';
|
||||
}
|
||||
if (/chrome/i.test(navigator.userAgent)) {
|
||||
return 'chrome';
|
||||
}
|
||||
if (/safari/i.test(navigator.userAgent)) {
|
||||
return 'safari';
|
||||
}
|
||||
return 'other';
|
||||
} catch (e) {
|
||||
return 'unknown';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const assets = require('../../../common/assets');
|
|||
const bytes = require('../../utils').bytes;
|
||||
const fileIcon = require('../fileIcon');
|
||||
|
||||
module.exports = function(file, state, emit) {
|
||||
module.exports = function(file, index, state, emit, hasPassword) {
|
||||
const transfer = state.transfer;
|
||||
const transferState = transfer ? transfer.state : null;
|
||||
const share = state.route.includes('share/');
|
||||
|
|
@ -20,25 +20,15 @@ module.exports = function(file, state, emit) {
|
|||
function cancel(event) {
|
||||
event.preventDefault();
|
||||
if (state.route === '/') {
|
||||
emit('removeUpload', { file });
|
||||
emit('removeUpload', { index });
|
||||
}
|
||||
}
|
||||
|
||||
//const percent = share ? 100 : Math.floor(progressRatio * 100);
|
||||
/*
|
||||
style="
|
||||
background: linear-gradient(to right,
|
||||
#e8f2fe 0%,
|
||||
#e8f2fe ${percent}%,
|
||||
#fff ${percent}%,
|
||||
#fff 100%);"
|
||||
*/
|
||||
|
||||
return html`
|
||||
<li class="uploadedFile ${complete}" id="${file.id}"
|
||||
>
|
||||
|
||||
${fileIcon(file.name, file._hasPassword)}
|
||||
${fileIcon(file.name, hasPassword)}
|
||||
|
||||
<div class="uploadedFile__cancel ${cancelVisible}"
|
||||
onclick=${cancel}>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
const html = require('choo/html');
|
||||
const file = require('../uploadedFile');
|
||||
|
||||
module.exports = function(files, state, emit) {
|
||||
//const progressRatio = state.transfer ? state.transfer.progressRatio : 0;
|
||||
module.exports = function(archive, state, emit) {
|
||||
let files = [];
|
||||
if (archive) {
|
||||
files = Array.from(archive.manifest.files);
|
||||
}
|
||||
|
||||
return html`
|
||||
<ul class="uploadedFiles">
|
||||
${files.map(f => file(f, state, emit))}
|
||||
${files.map((f, i) => file(f, i, state, emit, archive._hasPassword))}
|
||||
</ul>
|
||||
`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,22 +3,46 @@ const assets = require('../../../common/assets');
|
|||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
module.exports = function(state) {
|
||||
const notLoggedInMenu = html`
|
||||
<ul class="account_dropdown"
|
||||
tabindex="-1"
|
||||
>
|
||||
<li>
|
||||
<a class=account_dropdown__link>${state.translate(
|
||||
'accountMenuOption'
|
||||
)}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/signin"
|
||||
class=account_dropdown__link>${state.translate(
|
||||
'signInMenuOption'
|
||||
)}</a>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
return html`
|
||||
<div class="account">
|
||||
<img
|
||||
src="${assets.get('user.svg')}"
|
||||
onclick=${onclick}
|
||||
onclick=${avatarClick}
|
||||
alt="account"/>
|
||||
|
||||
<ul class=account_dropdown>
|
||||
<li class=account_dropdown__item>Placeholder</li>
|
||||
<li class=account_dropdown__item>Placeholder</li>
|
||||
</ul>
|
||||
${notLoggedInMenu}
|
||||
</div>`;
|
||||
|
||||
function onclick(event) {
|
||||
function avatarClick(event) {
|
||||
event.preventDefault();
|
||||
const dropdown = document.querySelector('.account_dropdown');
|
||||
dropdown.classList.toggle('visible');
|
||||
dropdown.focus();
|
||||
}
|
||||
|
||||
//the onblur trick makes links unclickable wtf
|
||||
/*
|
||||
function hideMenu(event) {
|
||||
event.stopPropagation();
|
||||
const dropdown = document.querySelector('.account_dropdown');
|
||||
dropdown.classList.remove('visible');
|
||||
}
|
||||
*/
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,28 +6,59 @@
|
|||
}
|
||||
|
||||
.account_dropdown {
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: -10px;
|
||||
top: 30px;
|
||||
left: -15px;
|
||||
width: 150px;
|
||||
list-style-type: none;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: var(--pageBGColor);
|
||||
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2);
|
||||
padding: 11px 0;
|
||||
visibility: hidden;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.account_dropdown__item {
|
||||
.account_dropdown::after,
|
||||
.account_dropdown::before {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 18px;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: 1px solid transparent;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.account_dropdown::after {
|
||||
border-bottom-color: var(--pageBGColor);
|
||||
border-width: 12px;
|
||||
}
|
||||
|
||||
.account_dropdown::before {
|
||||
border-bottom-color: #ccc;
|
||||
border-width: 13px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.account_dropdown__link {
|
||||
display: block;
|
||||
padding: 0 14px;
|
||||
color: var(--lightTextColor);
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
color: var(--lightTextColor);
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.account_dropdown__item:hover {
|
||||
.account_dropdown__link:visited {
|
||||
color: var(--lightTextColor);
|
||||
}
|
||||
|
||||
.account_dropdown__link:hover {
|
||||
background-color: var(--primaryControlBGColor);
|
||||
color: var(--primaryControlFGColor);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue