# This is a combination of 11 commits.

# This is the 1st commit message: Update flake8-isort from 2.2.2 to 2.4 (mozilla-lockwise#587) # This is the commit message mozilla-lockwise#2: Update pytest from 3.3.1 to 3.4.1 (mozilla-lockwise#589) # This is the commit message mozilla-lockwise#3: Update pytest-selenium from 1.11.3 to 1.11.4 (mozilla-lockwise#590) # This is the commit message mozilla-lockwise#4: Update pypom from 1.2.0 to 1.3.0 (mozilla-lockwise#594) # This is the commit message mozilla-lockwise#5: Update selenium from 3.8.0 to 3.9.0 (mozilla-lockwise#592) # This is the commit message mozilla-lockwise#6: Update pytest-xdist from 1.20.1 to 1.22.2 (mozilla-lockwise#591) # This is the commit message mozilla-lockwise#7: Update flake8-docstrings from 1.1.0 to 1.3.0 (mozilla-lockwise#588) # This is the commit message mozilla-lockwise#8: More account dropdown style updates (mozilla-lockwise#597) * Styling updates based off Jim's code review of mozilla-lockwise#549 -Updated pseudo-elements to have two colons instead of one -Moved toolbar margin update to be specific to navigation bar -Removed arrowhead down icon that is no longer in use -Updated dropdown hover, focus and active states after reviewing how Firefox browser handles similar items * Updating toolbar to use px instead of ch to be consistent. # This is the commit message mozilla-lockwise#9: Include whitespace in item fields so new lines are output (mozilla-lockwise#596) * Include whitespace in item fields so new lines are output * move white-space to all input text fields # This is the commit message mozilla-lockwise#10: Automatically focus the filter input when the page loads; resolves mozilla-lockwise#573 # This is the commit message mozilla-lockwise#11: Styling updates around entry list items (mozilla-lockwise#553) * Styling updates around entry list items -Active and focus states -Increased padding to match mocks -New chevron icon -Updated aside background color -Moved border between search and entries in order to apply active border color to top entry item -Small copy change to empty state * Changes based off PR feedback -Removed arrowhead right icon that is no longer used -Removed some styling around border between filter and list items until we get the filter updated. * Add custom "no username" instruction text when adding entry * Remove string interpolation and use better const name * Ran cheveron-right through svgo, sizing was also updated.
kimberlythegeek · Mar 21, 2018 · 421d5d0 · 421d5d0
1 parent d6e6ed8
commit 421d5d0
Show file tree

Hide file tree

Showing 24 changed files with 170 additions and 103 deletions.
diff --git a/requirements/flake8.txt b/requirements/flake8.txt
@@ -1,3 +1,3 @@
 flake8==3.5.0
-flake8-isort==2.2.2
-flake8-docstrings==1.1.0
+flake8-isort==2.4
+flake8-docstrings==1.3.0
diff --git a/requirements/tests.txt b/requirements/tests.txt
@@ -1,6 +1,6 @@
 fxapom==1.10.1
-PyPOM==1.2.0
-pytest==3.3.1
-pytest-selenium==1.11.3
-pytest-xdist==1.20.1
-selenium==3.8.0
+PyPOM==1.3.0
+pytest==3.4.1
+pytest-selenium==1.11.4
+pytest-xdist==1.22.2
+selenium==3.9.0
diff --git a/src/webextension/icons/arrowhead-down-16.svg b/src/webextension/icons/arrowhead-down-16.svg
diff --git a/src/webextension/icons/arrowhead-right-16.svg b/src/webextension/icons/arrowhead-right-16.svg
diff --git a/src/webextension/icons/chevron-right.svg b/src/webextension/icons/chevron-right.svg
diff --git a/src/webextension/list/components/item-list.css b/src/webextension/list/components/item-list.css
@@ -5,8 +5,7 @@
 .empty {
   text-align: center;
   white-space: pre-wrap;
-  margin: 1em 1em;
-  padding: 20px;
+  padding: 40px;
   overflow: hidden;
   overflow-wrap: break-word;
   color: #4a4a4f;
@@ -18,12 +17,5 @@
 .item {
   color: #0c0c0d;
   border-bottom: 1px solid #d7d7db;
-}
-
-.item:nth-child(2n + 1) {
-  background-color: #ededf0;
-}
-
-.item:nth-child(2n) {
-  background-color: #f9f9fa;
+  background-color: #ffffff;
 }
diff --git a/src/webextension/list/components/item-summary.css b/src/webextension/list/components/item-summary.css
@@ -3,23 +3,19 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .item-summary {
-  padding: 0.5em;
+  padding: 16px 20px;
   font-size: 15px;
 }
 
 .item-summary::before {
-  background-image: url(/icons/arrowhead-right-16.svg);
+  background-image: url(/icons/chevron-right.svg);
   background-repeat: no-repeat;
-  background-size: 16px 16px;
+  background-size: 5px 9px;
   content: "";
   float: right;
-  height: 16px;
-  width: 16px;
-  margin: 14px 0;
-}
-
-[data-selected] .item-summary::before {
-  display: none;
+  height: 9px;
+  width: 5px;
+  margin: 16px 0;
 }
 
 .title,

diff --git a/src/webextension/list/components/item-summary.js b/src/webextension/list/components/item-summary.js
@@ -13,13 +13,15 @@ export default function ItemSummary({id, title, username}) {
   title = title.trim();
   username = username.trim();
 
-  const titleId = `item-summary-${id === NEW_ITEM_ID ? "new-title" : "title"}`;
+  const idModifier = id === NEW_ITEM_ID ? "new-" : "";
+  const titleId = `item-summary-${idModifier}title`;
+  const usernameId = `item-summary-${idModifier}username`;
   return (
     <div className={styles.itemSummary}>
       <Localized id={titleId} $title={title} $length={title.length}>
         <div className={styles.title}>no tITLe</div>
       </Localized>
-      <Localized id="item-summary-username" $username={username}
+      <Localized id={usernameId} $username={username}
                  $length={username.length}>
         <div className={styles.subtitle}>no uSERNAMe</div>
       </Localized>

diff --git a/src/webextension/list/containers/item-filter.js b/src/webextension/list/containers/item-filter.js
@@ -3,20 +3,25 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { Localized } from "fluent-react";
+import PropTypes from "prop-types";
 import React from "react";
 import { connect } from "react-redux";
 
 import { filterItems } from "../actions";
 import FilterInput from "../../widgets/filter-input";
 
-function ItemFilter(props) {
+function ItemFilter({inputRef, ...props}) {
   return (
     <Localized id="item-filter">
-      <FilterInput placeholder="fILTEr…" {...props}/>
+      <FilterInput placeholder="fILTEr…" ref={inputRef} {...props}/>
     </Localized>
   );
 }
 
+ItemFilter.propTypes = {
+  inputRef: PropTypes.func,
+};
+
 export default connect(
   (state) => ({
     value: state.filter,

diff --git a/src/webextension/list/manage/components/account-summary.css b/src/webextension/list/manage/components/account-summary.css
@@ -38,13 +38,13 @@
   margin-inline-start: 1ch;
 }
 
-.button:active > .avatar:after {
+.button:active > .avatar::after {
   display: block;
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
-  content: '';
+  content: "";
   border-radius: 50%;
   background: rgba(0,0,0,.1);
 }
@@ -114,15 +114,15 @@
   color: #0c0c0d;
   display: block;
   width: 100%;
-  text-align: left;
+  text-align: start;
   padding: 8px 16px;
   border-radius: 0;
   cursor: default;
 }
 
 .dropdown-link:hover,
 .dropdown-link:focus {
-  background-color: #e5effa;
+  background-color: #ededf0;
 }
 
 .dropdown-link:hover,
@@ -135,7 +135,7 @@
 }
 
 .dropdown-link:active {
-  background-color: #cce0f4;
+  background-color: #d7d7db;
   color: #0c0c0d;
 }
 
@@ -146,7 +146,7 @@
   height: 16px;
   background-repeat: no-repeat;
   background-size: 16px 16px;
-  margin-right: 1ch;
+  margin-inline-end: 1ch;
   vertical-align: middle;
   margin-top: -2px;
 }

diff --git a/src/webextension/list/manage/components/app.css b/src/webextension/list/manage/components/app.css
@@ -32,11 +32,15 @@ body > main,
   grid-column-start: span 2;
 }
 
+.navigation > * + * {
+  margin-inline-start: 40px;
+}
+
 .app-main > aside {
   grid-column: 1;
   min-width: 150px;
   min-height: 0;
-  background-color: rgba(215, 215, 219, 0.75);
+  background-color: #ededf0;
   display: grid;
   grid-template-rows: auto 1fr auto;
 }

diff --git a/src/webextension/list/manage/components/app.js b/src/webextension/list/manage/components/app.js
@@ -19,31 +19,40 @@ import Toolbar, { ToolbarSpace } from "../../../widgets/toolbar";
 
 import styles from "./app.css";
 
-export default function App() {
-  return (
-    <Localized id="document">
-      <DocumentTitle title="lOCKBOx eNTRIEs">
-        <div className={styles.app}>
-          <section className={styles.appMain}>
-            <Toolbar className={styles.navigation}>
-              <AddItem/>
-              <GoHome/>
-              <ToolbarSpace/>
-              <OpenFAQ/>
-              <SendFeedback/>
-              <CurrentAccountSummary/>
-            </Toolbar>
-            <aside>
-              <ItemFilter className={styles.filter}/>
-              <AllItems/>
-            </aside>
-            <article>
-              <CurrentSelection/>
-            </article>
-          </section>
-          <ModalRoot/>
-        </div>
-      </DocumentTitle>
-    </Localized>
-  );
+export default class App extends React.Component {
+  componentDidMount() {
+    this._filterField.focus();
+  }
+
+  render() {
+    return (
+      <Localized id="document">
+        <DocumentTitle title="lOCKBOx eNTRIEs">
+          <div className={styles.app}>
+            <section className={styles.appMain}>
+              <Toolbar className={styles.navigation}>
+                <AddItem/>
+                <GoHome/>
+                <ToolbarSpace/>
+                <OpenFAQ/>
+                <SendFeedback/>
+                <CurrentAccountSummary/>
+              </Toolbar>
+              <aside>
+                <ItemFilter className={styles.filter}
+                            inputRef={(element) => {
+                              this._filterField = element;
+                            }}/>
+                <AllItems/>
+              </aside>
+              <article>
+                <CurrentSelection/>
+              </article>
+            </section>
+            <ModalRoot/>
+          </div>
+        </DocumentTitle>
+      </Localized>
+    );
+  }
 }
diff --git a/src/webextension/list/manage/containers/all-items.css b/src/webextension/list/manage/containers/all-items.css
@@ -7,10 +7,16 @@
 }
 
 .all-items > .item[data-selected] {
-  background-color: #b1b1b3;
+  background-color: #ebF5ff;
+  border-bottom-color: #99bff2;
+  box-shadow: 0 -1px 0 #99bff2;
+}
+
+.all-items > .item:first-child[data-selected] {
+  border-top-color: #99bff2;
 }
 
 .all-items:focus > .item[data-selected] {
-  box-shadow: inset 0 0 0 2px #0a84ff;
+  box-shadow: inset 0 1px 0 #0a84ff, inset 0 -1px 0 #0a84ff;
 }
 
diff --git a/src/webextension/list/popup/components/app.js b/src/webextension/list/popup/components/app.js
@@ -10,14 +10,22 @@ import CurrentSelection from "../containers/current-selection";
 
 import styles from "./app.css";
 
-export default function App() {
-  return (
-    <Localized id="document">
-      <DocumentTitle title="lOCKBOx eNTRIEs">
-        <div className={styles.app}>
-          <CurrentSelection/>
-        </div>
-      </DocumentTitle>
-    </Localized>
-  );
+export default class App extends React.Component {
+  componentDidMount() {
+    this._filterField.focus();
+  }
+
+  render() {
+    return (
+      <Localized id="document">
+        <DocumentTitle title="lOCKBOx eNTRIEs">
+          <div className={styles.app}>
+            <CurrentSelection inputRef={(element) => {
+              this._filterField = element;
+            }}/>
+          </div>
+        </DocumentTitle>
+      </Localized>
+    );
+  }
 }
diff --git a/src/webextension/list/popup/components/item-list-panel.js b/src/webextension/list/popup/components/item-list-panel.js
@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { Localized } from "fluent-react";
+import PropTypes from "prop-types";
 import React from "react";
 
 import Button from "../../../widgets/button";
@@ -11,7 +12,7 @@ import Panel, { PanelHeader, PanelBody, PanelFooter } from
 import ItemFilter from "../../containers/item-filter";
 import AllItems from "../containers/all-items";
 
-export default function ItemListPanel() {
+export default function ItemListPanel({inputRef}) {
   const openManager = () => {
     browser.runtime.sendMessage({
       type: "open_view",
@@ -23,7 +24,7 @@ export default function ItemListPanel() {
   return (
     <Panel>
       <PanelHeader>
-        <ItemFilter/>
+        <ItemFilter inputRef={inputRef}/>
       </PanelHeader>
 
       <PanelBody>
@@ -40,3 +41,7 @@ export default function ItemListPanel() {
     </Panel>
   );
 }
+
+ItemListPanel.propTypes = {
+  inputRef: PropTypes.func,
+};
diff --git a/src/webextension/list/popup/containers/current-selection.js b/src/webextension/list/popup/containers/current-selection.js
@@ -21,15 +21,16 @@ const ConnectedItemDetailsPanel = connect(
   })
 )(ItemDetailsPanel);
 
-function CurrentSelection({item}) {
+function CurrentSelection({item, inputRef}) {
   if (item) {
     return <ConnectedItemDetailsPanel item={item}/>;
   }
-  return <ItemListPanel/>;
+  return <ItemListPanel inputRef={inputRef}/>;
 }
 
 CurrentSelection.propTypes = {
   item: PropTypes.object,
+  inputRef: PropTypes.func,
 };
 
 export default connect(

diff --git a/src/webextension/locales/en-US/list.ftl b/src/webextension/locales/en-US/list.ftl
@@ -25,6 +25,7 @@ item-summary-title =
      [0]     (no site name)
     *[other] { $title }
   }
+item-summary-new-username = (enter your login details)
 item-summary-username =
   { $length ->
      [0]     (no username)
@@ -46,7 +47,7 @@ account-summary-options = Preferences
 account-summary-signout = Sign Out
 
 all-items-empty =
-  When you add an Entry, it automatically shows up here.
+  When you add an entry, it automatically shows up here.
 
 all-items-filtered = No results