Skip to content
This repository has been archived by the owner on Dec 14, 2021. It is now read-only.

991: UX cleanup part deux #1071

Merged
merged 7 commits into from
Nov 26, 2019
Merged

991: UX cleanup part deux #1071

merged 7 commits into from
Nov 26, 2019

Conversation

eliserichards
Copy link
Contributor

@eliserichards eliserichards commented Nov 18, 2019

Fixes #991

Testing and Review Notes

Putting screenshots in a comment further down so I don't clutter this up too much...

Screenshots or Videos

Taps on edit don't highlight the hostname underline anymore (not much to see here...)
taps_edit

Selecting username moves cursor to the end. Toggling password moves cursor to the end.
toggle_pwd_clicks

Dismiss keyboard easily
dismiss_keyboard

Todo

item detail:

misc:

  • do we have an issue to handle the metadata showing on a login detail screen below the fields?
    • open question on this

Done

  • if possible, match width of edit menu popup to spec (128dp) and only grow if needed for localization
    • duplicate of above
  • padding around edit fields
  • horizontal line tap state (thick purple line) needs to go all the way across. currently it is stopping where the icon bounding box begins
    • if we want wrapping to a single line and no text overlapping with buttons it has to be this way
  • the horizontal line tap state (thick purple line) needs to completely overlap the default grey line; currently it is resting slightly above the grey line
    • see above
  • There's a square white background on the cursor tap indicator (when first tapping into a field)
  • If you tap into a field, evoking the blinking vertical line, but then collapse the keyboard, the blinking vertical line remains in the field, still blinking
  • Tapping anywhere in the edit view that isn't a field (in the white space of the card or the grey background) selects the line for Name (which should be a disabled field)
  • Toggling between hiding and showing a password in the field moves the text cursor between the start and the end of the string; it should stay at the end of the string
  • It is difficult to dismiss the keyboard without tapping it away within the base bar; the login details do not scroll while the keyboard is active; is this expected behavior?
  • typing into the username and tapping the --> at the base of the keyboard should close the keyboard, rather than moving to the next field
  • the text line cursor always needs to be initially displayed at the end of the string, not the beginning
  • keyboard enter button is green, it should be violet70 -> need to look into this more
  • Format strings and give them descriptions
  • toolbar title should be Edit Login
  • make password hint sans-serif while the password is monopace
  • disable ☑️ save when errors are present
  • fix pwd button toggling (make it T/F instead of .not()ing)
  • long username ... on item list
  • no additional lines in between hostname/username/pwd
  • lines between item details change to violet70 when pressed
  • Item Detail view: https://zpl.io/blDkLPv
    • icons needed for both edit and delete
    • position of dropdown should be over the top of the ellipsis, not below
    • width of dropdown should be 128dp (grow to expand if needed for longer localized strings)
    • shadow is stronger in design spec (8dp)
    • dropdown does not align to far right side, it floats 4px from edge
  • Edit view: https://zpl.io/boDxOPX
    • confirm label size is 12sp
    • labels need letter spacing of 0.4sp -> using the same formatting as item detail view
    • “Delete Entry” requires top and bottom padding (40dp on top, 30dp on bottom)
    • confirm color of Delete text is #d70022
  • Editing an entry: https://zpl.io/bLdGW5G
    • Web Address label color should be violet70
    • form field selected line should be violet70
    • form field selected line and base line of web address field should be one and the same (not 2 different lines)
  • remove the “Learn how to edit this login” link
  • monospace font for password (de-compress the dots)
  • fields "jumping" with error states
    • not valid anymore since we removed name and hostname edits

To Do

  • add “WIP” to the PR title if pushing up but not complete nor ready for review
  • double check the original issue to confirm it is fully satisfied
  • add testing notes and screenshots in PR description to help guide reviewers
  • add unit tests
  • request the "UX" team perform a design review (if/when applicable)
  • make sure CI builds are passing (e.g.: fix lint and other errors)
  • check on the accessibility of any added UI

@eliserichards eliserichards force-pushed the 991-ux-cleanup branch 2 times, most recently from 74ede49 to eafecce Compare November 19, 2019 21:51
@eliserichards eliserichards marked this pull request as ready for review November 19, 2019 22:07
@eliserichards eliserichards requested a review from a team as a code owner November 19, 2019 22:07
@eliserichards eliserichards changed the title [WIP] 991: UX cleanup part deux 991: UX cleanup part deux Nov 19, 2019
Copy link
Contributor

@jhugman jhugman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have requested some changes.

I'd also like to see some screenshots to demonstrate the changes, and make it easy for @changecourse to review.

Thanks.

app/src/main/java/mozilla/lockbox/view/EditItemFragment.kt Outdated Show resolved Hide resolved

view.usernameFieldClicks
.subscribe {
view.setTextSelectionOnPasswordToggle()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this doing? This looks weird. Could you comment it?

Not sure it's quite as useful as we might think.

@@ -98,6 +102,11 @@ class EditItemPresenterTest {
override fun setSaveEnabled(enabled: Boolean) {
_saveEnabled = enabled
}

override fun setTextSelectionOnPasswordToggle() {
// make sure the text selector is at the end of the line when password is toggled
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AH HA! That's what this does. Could you rename the method?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😄

@eliserichards
Copy link
Contributor Author

eliserichards commented Nov 21, 2019

Padding on the cardviews in the edit and item detail views match:

image image

Copy link
Contributor

@jhugman jhugman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is good. I'm happy for this to land, from a code point of view.

@changecourse what say you?

@@ -62,6 +62,8 @@ class EditItemFragment : BackableFragment(), EditItemDetailView {
}

private fun updatePasswordVisibility(visible: Boolean) {
view?.inputPassword?.setSelection(view?.inputPassword?.length() ?: 0)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So much better putting this here.

Copy link
Contributor

@changecourse changecourse left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested with build #5616 on Pixel 2, Android 9

Upon beginning my review, I ran into a security PIN loop where, after leaving my phone with the build running long enough to time out, the app then prompted me for unlocking (via PIN)... which was expected. What wasn't expected, was having to enter my pin ~10 times before it would actually unlock and return me back to the login list.

Anyways, onto testing the specifics of this PR:

Global

  • Padding between titles in header bar is inconsistent (Login List, Login Detail, Edit Login)

Login Detail

  • The tap line for web address is thinner than the tap line for username and password
  • Horizontal tap lines should extend the full width of the placeholder line, when tapped to copy or open a web address. The same should be true on edit (for the password field)
  • Still need an issue for metadata at base of container if one isn't created

Edit Login

  • The content area is slightly smaller (white background) when tapping into Edit from the login detail
  • The horizontal lines for web address and username move up slightly (upon tapping edit) whereas the horizontal line for password moves down slightly
  • The dots change (possibly swapping from monotype to something else?) between views. They should both be monotyped.
  • Flash of back arrow upon tapping "Edit" before switching to Close X

@eliserichards
Copy link
Contributor Author

eliserichards commented Nov 25, 2019

Fixing

Login Detail

  • The tap line for web address is thinner than the tap line for username and password

Edit Login

  • The content area is slightly smaller (white background) when tapping into Edit from the login detail
  • The horizontal lines for web address and username move up slightly (upon tapping edit) whereas the horizontal line for password moves down slightly
  • The dots change (possibly swapping from monotype to something else?) between views. They should both be monotyped.

Questions etc

Upon beginning my review, I ran into a security PIN loop ...

Checking to see if this is just on my branch or not.. please hold

Horizontal tap lines should extend the full width of the placeholder line, when tapped to copy or open a web address. The same should be true on edit (for the password field)

We can either have support for long passwords and shorter horizontal tap lines, or have long passwords overlap the buttons and the tap lines extend the whole length of the field

Still need an issue for metadata at base of container if one isn't created

Not sure what this means 🤔 I thought I left a comment on the issue but I must have forgotten. My b

Flash of back arrow upon tapping "Edit" before switching to Close X

Known issue. There's an open issue for it somewhere.. please hold

@eliserichards
Copy link
Contributor Author

image

@eliserichards eliserichards dismissed changecourse’s stale review November 25, 2019 23:52

Addressed above comments. Remaining items can be addressed in other issues

@eliserichards eliserichards merged commit 695c56a into master Nov 26, 2019
@jhugman jhugman deleted the 991-ux-cleanup branch November 26, 2019 17:32
eliserichards pushed a commit that referenced this pull request Nov 26, 2019
* Clear focus and close keyboard when clicking outside of edittext.

* Cleanup and lint

* Add new fields to edit test

* Rename text selection method. Clean up padding on item detail card view.

* Refactor keyboard caret selection for password toggling.

* Whitespace

* Match item detail and edit view padding
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

UX cleanup for Edit view part deux
3 participants