wip

2018-10-16 16:53:33 -07:00 · 2018-10-16 16:53:33 -07:00 · cc85486414
parent 2b81ff1fb3
commit cc85486414
28 changed files with 207 additions and 97 deletions
--- a/app/base.css
+++ b/app/base.css
@ -57,11 +57,14 @@ a {
  background: var(--pageBGColor);
  box-shadow: var(--large-box-shadow);
  width: 90%;
-  height: 100%;
  max-width: 960px;
+  min-height: 550px;
  max-height: 600px;
  align-self: center;
  margin: auto 0;
+  display: grid;
+  grid-template-columns: 70px 360px 1fr;
+  grid-template-areas: 'nav files content';
 }

 .split {
@ -73,12 +76,11 @@ a {

 .split__left {
  height: 100%;
-  width: 360px;
-  margin: 0;
  border-right: 1px solid #d7d7db;
  display: flex;
  flex-direction: column;
  text-align: center;
+  grid-area: files;
 }

 .split__right {
@ -88,6 +90,16 @@ a {
  align-items: flex-end;
  justify-content: center;
  position: relative;
+  grid-area: content;
+}
+
+.wide {
+  grid-area: files-start / files-start / content-end / content-end;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  margin-left: 12px;
+  height: 100%;
 }

 .noscript {
@ -187,8 +199,6 @@ a {

 .page {
  height: 100%;
-  width: 75%;
-  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
@ -275,16 +285,17 @@ a {
    align-items: center;
    max-height: none;
    width: 100%;
-  }
-
-  .split {
-    flex-direction: column-reverse;
-    align-items: center;
+    grid-template-columns: none;
+    grid-template-rows: 90px minmax(160px, 30vh) minmax(240px, 30vh) 70px;
+    grid-template-areas:
+      'promo'
+      'files'
+      'content'
+      'nav';
  }

  .split__left {
    border: none;
-    height: 600px;
  }

  .description {
--- a/app/main.css
+++ b/app/main.css
@ -1,7 +1,10 @@
@import './base.css';
@import './pages/share/share.css';
@import './pages/signin/signin.css';
+@import './pages/uploads/uploads.css';
@import './pages/unsupported/unsupported.css';
+@import './templates/archiveTile/archiveTile.css';
+@import './templates/controlArea/controlArea.css';
@import './templates/downloadButton/downloadButton.css';
@import './templates/downloadPassword/downloadPassword.css';
@import './templates/file/file.css';
--- a/app/pages/blank.js
+++ b/app/pages/blank.js
@ -1,5 +1,5 @@
 const html = require('choo/html');

 module.exports = function() {
-  return html`<div></div>`;
+  return html`<main class="main"></main>`;
 };
--- a/app/pages/legal.js
+++ b/app/pages/legal.js
@ -4,7 +4,7 @@ const title = require('../templates/title');

 module.exports = function(state) {
  return html`
-    <div class="page">
+    <main class="main page">
      ${title(state)}
      <div class="title">${state.translate('legalHeader')}</div>
        ${raw(
@ -20,7 +20,7 @@ module.exports = function(state) {
            'https://www.mozilla.org/about/legal/terms/mozilla/'
          ])
        )}
-    </div>
+    </main>
  `;
 };

--- a/app/pages/notFound/index.js
+++ b/app/pages/notFound/index.js
@ -4,19 +4,15 @@ const title = require('../../templates/title');

 module.exports = function(state) {
  return html`
-    <div class="page">
-      
+    <main class="main page">
      ${title(state)}
-
      <div class="error">${state.translate('expiredPageHeader')}</div>
-      <img src="${assets.get(
-        'illustration_expired.svg'
-      )}" class="flexible" id="expired-img">
+      <img src="${assets.get('illustration_expired.svg')}" id="expired-img">
      <div class="description">
        ${state.translate('uploadPageExplainer')}
      </div>
      <a class="link link--action" href="/">
        ${state.translate('sendYourFilesLink')}
      </a>
-    </div>`;
+    </main>`;
 };
--- a/app/pages/password/index.js
+++ b/app/pages/password/index.js
@ -4,7 +4,7 @@ const downloadPassword = require('../../templates/downloadPassword');

 module.exports = function(state, emit) {
  return html`
-    <div class="page">
+    <main class="main page">
      ${titleSection(state)}

      <div class="description">${state.translate('downloadMessage2')}</div>
@ -14,6 +14,6 @@ module.exports = function(state, emit) {
        ${state.translate('sendYourFilesLink')}
      </a>

-    </div>
+    </main>
  `;
 };
--- a/app/pages/preview/index.js
+++ b/app/pages/preview/index.js
@ -23,6 +23,7 @@ module.exports = function(state, emit) {

  return split(
    state,
+    emit,
    downloadedFiles(fileInfo, state, emit),
    html`
    <div class="copySection">
--- a/app/pages/share/index.js
+++ b/app/pages/share/index.js
@ -19,6 +19,7 @@ module.exports = function(state, emit) {

  return split(
    state,
+    emit,
    uploadedFileList(file, state, emit),
    html`
    <div class="copySection">
--- a/app/pages/signin/index.js
+++ b/app/pages/signin/index.js
@ -6,7 +6,7 @@ const bytes = require('../../utils').bytes;

 module.exports = function(state, emit) {
  return html`
-    <div class="page signInPage">
+    <main class="main page signInPage">
      ${title(state)}
      <div class="signIn__info flexible">
        ${state.translate('accountBenefitTitle')}
@ -44,7 +44,7 @@ module.exports = function(state, emit) {
      <label class="btn" for="email-submit">
        ${state.translate('signInContinueButton')}
      </label>
-    </div>
+    </main>
  `;

  function submitEmail(event) {
--- a/app/pages/split.js
+++ b/app/pages/split.js
@ -1,18 +1,20 @@
 const html = require('choo/html');
 const title = require('../templates/title');
 const signupPromo = require('../templates/signupPromo');
+const controlArea = require('../templates/controlArea');

-module.exports = function(state, a, b) {
+module.exports = function(state, emit, a, b) {
  return html`
-    <div class="split">
+  <main class="main">
+    ${controlArea(state, emit)}
    <div class="split__left">
      ${title(state)}
      ${a}
    </div>
    <div class="split__right">
-        ${signupPromo(state)}
      ${b}
    </div>
-    </div>
+    ${signupPromo(state)}
+  </main>
  `;
 };
--- a/app/pages/unsupported/index.js
+++ b/app/pages/unsupported/index.js
@ -32,7 +32,7 @@ module.exports = function(state) {
  }

  return html`
-    <div class="page unsupportedPage">
+    <main class="main page unsupportedPage">
      ${title(state)}
      <div class="error unsupportedPage__error">${strings.header}</div>
      <div class="description flexible">
@ -53,7 +53,7 @@ module.exports = function(state) {
      <div class="unsupportedPage__info">
        ${strings.explainer}
      </div>
-    </div>`;
+    </main>`;
 };

 function outdatedStrings(state) {
--- a/app/pages/uploads/index.js
+++ b/app/pages/uploads/index.js
@ -0,0 +1,18 @@
+const html = require('choo/html');
+const controlArea = require('../../templates/controlArea');
+const archiveTile = require('../../templates/archiveTile');
+
+module.exports = function(state, emit) {
+  const fileArea = state.storage.files.length
+    ? html`<ul class="myUploads">
+      ${state.storage.files.map(f => archiveTile(f, state))}
+    </ul>`
+    : html`<div>nothing to see here</div>`;
+  return html`<main class="main">
+    ${controlArea(state, emit)}
+    <div class="wide">
+      <h1>${state.translate('myUploads')}</h1>
+      ${fileArea}
+    </div>
+  </main>`;
+};
--- a/app/pages/uploads/uploads.css
+++ b/app/pages/uploads/uploads.css
@ -0,0 +1,11 @@
+.myUploads {
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-gap: 12px;
+  grid-template-columns: repeat(auto-fit, 150px);
+  grid-auto-columns: 150px;
+  grid-auto-rows: 160px;
+  list-style-type: none;
+  overflow: scroll;
+}
--- a/app/pages/welcome/index.js
+++ b/app/pages/welcome/index.js
@ -2,5 +2,5 @@ const fileManager = require('../../templates/fileManager');
 const split = require('../split');

 module.exports = function(state, emit) {
-  return split(state, fileManager(state, emit));
+  return split(state, emit, fileManager(state, emit));
 };
--- a/app/routes/index.js
+++ b/app/routes/index.js
@ -30,9 +30,7 @@ module.exports = function() {
      ${modalDialog(state, emit)}
      ${banner(state, emit)}
      ${header(state, emit)}
-      <main class="main">
      ${page(state, emit)}
-      </main>
      ${footer(state)}
      </body>`;
      if (state.layout) {
@ -45,6 +43,7 @@ module.exports = function() {

  app.route('/', body(require('../pages/welcome')));
  app.route('/share/:id', body(require('../pages/share')));
+  app.route('/uploads', body(require('../pages/uploads')));
  app.route('/download/:id', body(download));
  app.route('/download/:id/:key', body(download));
  app.route('/unsupported/:reason', body(require('../pages/unsupported')));
--- a/app/templates/archiveTile/archiveTile.css
+++ b/app/templates/archiveTile/archiveTile.css
@ -0,0 +1,10 @@
+.archiveTile {
+  border: 1px solid #d7d7db;
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+}
+
+.archiveTile:hover {
+  border: 1px solid lightblue;
+}
--- a/app/templates/archiveTile/index.js
+++ b/app/templates/archiveTile/index.js
@ -0,0 +1,8 @@
+const html = require('choo/html');
+
+module.exports = function(archive) {
+  return html`
+  <li id="${archive.id}" class="archiveTile">
+    <a href="/share/${archive.id}">${archive.name}</a>
+  </li>`;
+};
--- a/app/templates/controlArea/controlArea.css
+++ b/app/templates/controlArea/controlArea.css
@ -0,0 +1,22 @@
+.controlArea {
+  border-right: 1px solid #d7d7db;
+}
+
+.controlArea > ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.controlArea > ul > li {
+  margin: 12px;
+}
+
+@media (max-device-width: 720px), (max-width: 720px) {
+  .controlArea > ul {
+    flex-direction: row;
+  }
+}
--- a/app/templates/controlArea/index.js
+++ b/app/templates/controlArea/index.js
@ -0,0 +1,28 @@
+const html = require('choo/html');
+const assets = require('../../../common/assets');
+const userAccount = require('../userAccount');
+
+module.exports = function(state, emit) {
+  const account = state.capabilities.account
+    ? html`<li>
+  ${userAccount(state, emit)}
+</li>`
+    : null;
+  return html`
+    <nav class="controlArea">
+      <ul>
+        ${account}
+        <li>
+          <a href="/">
+            <img src="${assets.get('addfile.svg')}"/>
+          </a>
+        </li>
+        <li>
+          <a href="/uploads">
+            <img src="${assets.get('blue_file.svg')}"/>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  `;
+};
--- a/app/templates/footer/footer.css
+++ b/app/templates/footer/footer.css
@ -6,6 +6,7 @@
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
+  align-items: center;
 }

 .legalSection {
@ -34,6 +35,24 @@
  display: none;
 }

+.feedback {
+  background-color: #000;
+  background-image: url('../assets/feedback.svg');
+  background-position: 2px 4px;
+  background-repeat: no-repeat;
+  background-size: 18px;
+  color: var(--primaryControlFGColor);
+  cursor: pointer;
+  display: block;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 5px 5px 5px 20px;
+  text-indent: 2px;
+  transition: all 250ms ease-in-out;
+  white-space: nowrap;
+  margin-left: 12px;
+}
+
@media (max-device-width: 720px), (max-width: 720px) {
  .footer {
    justify-content: flex-start;
--- a/app/templates/footer/index.js
+++ b/app/templates/footer/index.js
@ -1,7 +1,11 @@
 const html = require('choo/html');
 const assets = require('../../../common/assets');
+const version = require('../../../package.json').version;
+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 class="legalSection__link"
@ -39,7 +43,12 @@ module.exports = function(state) {
        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">
--- a/app/templates/header/header.css
+++ b/app/templates/header/header.css
@ -3,7 +3,7 @@
  display: flex;
  flex-direction: row;
  align-items: center;
-  justify-content: space-between;
+  justify-content: center;
  width: 100%;
  height: 64px;
  background-color: white;
@ -13,28 +13,3 @@
 .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');
-  background-position: 2px 4px;
-  background-repeat: no-repeat;
-  background-size: 18px;
-  color: var(--primaryControlFGColor);
-  cursor: pointer;
-  display: block;
-  font-size: 12px;
-  line-height: 12px;
-  padding: 5px 5px 5px 20px;
-  text-indent: 2px;
-  transition: all 250ms ease-in-out;
-  white-space: nowrap;
-}
--- a/app/templates/header/index.js
+++ b/app/templates/header/index.js
@ -1,24 +1,11 @@
 const html = require('choo/html');
-const userAccount = require('../../templates/userAccount');
-const version = require('../../../package.json').version;
-const { browserName } = require('../../utils');
-
-module.exports = function(state, emit) {
-  const browser = browserName();
-  const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
+const assets = require('../../../common/assets');

+module.exports = function() {
  const header = html`
  <header class="header">
-    <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>
+    <a href="/"><img src="${assets.get('send_logo.svg')}"/></a>
+    <a href="/"><h1>Firefox Send</h1></a>
  </header>`;
  // HACK
  // We only want to render this once because we
--- a/app/templates/signupPromo/signupPromo.css
+++ b/app/templates/signupPromo/signupPromo.css
@ -10,9 +10,9 @@
  justify-content: center;
  transition: background 100ms;
  margin: 24px;
-  position: absolute;
-  top: 0;
-  right: 0;
+  grid-area: content;
+  justify-self: right;
+  z-index: 1;
 }

 .signupPromo:hover {
@ -30,3 +30,13 @@
  padding: 6px;
  color: black;
 }
+
+@media (max-device-width: 720px), (max-width: 720px) {
+  .signupPromo {
+    grid-area: promo;
+    margin: 0;
+    justify-self: auto;
+    height: 100%;
+    width: 100%;
+  }
+}
--- a/app/templates/userAccount/userAccount.css
+++ b/app/templates/userAccount/userAccount.css
@ -1,5 +1,6 @@
 .account {
-  padding: 0;
+  /* padding: 12px; */
+  position: relative;
 }

 .account__avatar {
@ -18,6 +19,7 @@
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2);
  padding: 11px 0;
  visibility: hidden;
+  white-space: nowrap;
  outline: 0;
 }

--- a/circle.yml
+++ b/circle.yml
@ -94,8 +94,6 @@ workflows:
          filters:
            branches:
              ignore: master
-          requires:
-            - build
  build_and_deploy_dev:
    jobs:
      - build:
@ -137,8 +135,6 @@ workflows:
            tags:
              only: /^v.*/
      - integration_tests:
-          requires:
-            - build
          filters:
            branches:
              ignore: /.*/
--- a/public/locales/en-US/send.ftl
+++ b/public/locales/en-US/send.ftl
@ -170,3 +170,4 @@ accountBenefitSync = Manage your uploads across devices
 manageAccount = Manage Account
 logOut = Sign Out
 okButton = Ok
+myUploads = My Uploads
--- a/server/routes/index.js
+++ b/server/routes/index.js
@ -67,8 +67,9 @@ module.exports = function(app) {
  });
  app.use(express.json());
  app.get('/', language, pages.index);
-  app.get('/signin', pages.blank);
-  app.get('/oauth', pages.blank);
+  app.get('/signin', language, pages.blank);
+  app.get('/uploads', language, pages.blank);
+  app.get('/oauth', language, pages.blank);
  app.get('/legal', language, pages.legal);
  app.get('/jsconfig.js', require('./jsconfig'));
  app.get(`/share/:id${ID_REGEX}`, language, pages.blank);