From 421d5d0eabce90221375f34d7efcbfa1787ad145 Mon Sep 17 00:00:00 2001 From: "pyup.io bot" Date: Wed, 28 Feb 2018 19:27:15 +0100 Subject: [PATCH] # This is a combination of 11 commits. # This is the 1st commit message: Update flake8-isort from 2.2.2 to 2.4 (#587) # This is the commit message #2: Update pytest from 3.3.1 to 3.4.1 (#589) # This is the commit message #3: Update pytest-selenium from 1.11.3 to 1.11.4 (#590) # This is the commit message #4: Update pypom from 1.2.0 to 1.3.0 (#594) # This is the commit message #5: Update selenium from 3.8.0 to 3.9.0 (#592) # This is the commit message #6: Update pytest-xdist from 1.20.1 to 1.22.2 (#591) # This is the commit message #7: Update flake8-docstrings from 1.1.0 to 1.3.0 (#588) # This is the commit message #8: More account dropdown style updates (#597) * Styling updates based off Jim's code review of #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 #9: Include whitespace in item fields so new lines are output (#596) * Include whitespace in item fields so new lines are output * move white-space to all input text fields # This is the commit message #10: Automatically focus the filter input when the page loads; resolves #573 # This is the commit message #11: Styling updates around entry list items (#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. --- requirements/flake8.txt | 4 +- requirements/tests.txt | 10 +-- src/webextension/icons/arrowhead-down-16.svg | 3 - src/webextension/icons/arrowhead-right-16.svg | 6 -- src/webextension/icons/chevron-right.svg | 3 + .../list/components/item-list.css | 12 +--- .../list/components/item-summary.css | 16 ++--- .../list/components/item-summary.js | 6 +- .../list/containers/item-filter.js | 9 ++- .../manage/components/account-summary.css | 12 ++-- .../list/manage/components/app.css | 6 +- .../list/manage/components/app.js | 63 +++++++++++-------- .../list/manage/containers/all-items.css | 10 ++- src/webextension/list/popup/components/app.js | 28 ++++++--- .../list/popup/components/item-list-panel.js | 9 ++- .../popup/containers/current-selection.js | 5 +- src/webextension/locales/en-US/list.ftl | 3 +- src/webextension/widgets/filter-input.js | 10 ++- src/webextension/widgets/input.css | 1 + src/webextension/widgets/toolbar.css | 4 +- .../unit/list/components/item-summary-test.js | 2 +- test/unit/list/manage/components/app-test.js | 17 ++++- test/unit/list/popup/components/app-test.js | 22 ++++++- test/unit/widgets/filter-input-test.js | 12 +++- 24 files changed, 170 insertions(+), 103 deletions(-) delete mode 100644 src/webextension/icons/arrowhead-down-16.svg delete mode 100644 src/webextension/icons/arrowhead-right-16.svg create mode 100644 src/webextension/icons/chevron-right.svg diff --git a/requirements/flake8.txt b/requirements/flake8.txt index 29226fd5..42a2c164 100644 --- 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 index ad662a78..978bfecb 100644 --- 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 \ No newline at end of file diff --git a/src/webextension/icons/arrowhead-down-16.svg b/src/webextension/icons/arrowhead-down-16.svg deleted file mode 100644 index a56e6870..00000000 --- a/src/webextension/icons/arrowhead-down-16.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/webextension/icons/arrowhead-right-16.svg b/src/webextension/icons/arrowhead-right-16.svg deleted file mode 100644 index cc6a0285..00000000 --- a/src/webextension/icons/arrowhead-right-16.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/src/webextension/icons/chevron-right.svg b/src/webextension/icons/chevron-right.svg new file mode 100644 index 00000000..b2a2bef8 --- /dev/null +++ b/src/webextension/icons/chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/webextension/list/components/item-list.css b/src/webextension/list/components/item-list.css index 91d1adb7..e0029e0e 100644 --- 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 index d1beab2a..6f5f45ca 100644 --- 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 index 4ded2352..e6d58d01 100644 --- 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 (
no tITLe
 -
no uSERNAMe
 diff --git a/src/webextension/list/containers/item-filter.js b/src/webextension/list/containers/item-filter.js index 33986bba..8dc67521 100644 --- 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 ( - + ); } +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 index b7004f7a..3c65334e 100644 --- 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,7 +114,7 @@ color: #0c0c0d; display: block; width: 100%; - text-align: left; + text-align: start; padding: 8px 16px; border-radius: 0; cursor: default; @@ -122,7 +122,7 @@ .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 index 91198db6..0b5ccc60 100644 --- 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 index 2ebbe952..f9537ddd 100644 --- 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 ( - - -
-
- - - - - - - - - -
- -
-
- -
- - - ); +export default class App extends React.Component { + componentDidMount() { + this._filterField.focus(); + } + + render() { + return ( + + +
+
+ + + + + + + + + +
+ +
+
+ +
+ + + ); + } } diff --git a/src/webextension/list/manage/containers/all-items.css b/src/webextension/list/manage/containers/all-items.css index ad297ed9..8fec4cff 100644 --- 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 index 2ff5571a..f0457e6f 100644 --- 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 ( - - -
- -
- - - ); +export default class App extends React.Component { + componentDidMount() { + this._filterField.focus(); + } + + render() { + return ( + + +
+ { + this._filterField = element; + }}/> +
+ + + ); + } } diff --git a/src/webextension/list/popup/components/item-list-panel.js b/src/webextension/list/popup/components/item-list-panel.js index 27a8d206..dbe65668 100644 --- 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 ( - + @@ -40,3 +41,7 @@ export default function ItemListPanel() { ); } + +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 index 15de934b..0510719e 100644 --- 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 ; } - return ; + return ; } 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 index b83b9041..bcfac23c 100644 --- 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 diff --git a/src/webextension/widgets/filter-input.js b/src/webextension/widgets/filter-input.js index 403e0fc8..9150ff8a 100644 --- a/src/webextension/widgets/filter-input.js +++ b/src/webextension/widgets/filter-input.js @@ -43,6 +43,10 @@ export default class FilterInput extends React.Component { } } + focus() { + this.inputElement.focus(); + } + render() { // eslint-disable-next-line no-unused-vars const {className, onChange, value, disabled, ...props} = this.props; @@ -53,9 +57,9 @@ export default class FilterInput extends React.Component { return (
- this.updateValue(e.target.value)}/> + this.updateValue(e.target.value)} + ref={(element) => this.inputElement = element} {...props}/>