UX cleanup for Edit view part deux

[sandysage]

Creating a follow up issue to #899 to capture the things not marked as completed. I'm also adding the things noted as 'done' in this issue as well as a reminder to do another UX review on 'all the things'.

Todo

Login Detail

• make menu size wrap-content instead of fixed size
  • use PopupWindow instead of PopupMenu
• 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
• fields jumping up/down with error states (need to add a scrollable view and manually scroll further than adjustPan gives us so that we can see the error message)

Edit View

• 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
  • https://stackoverflow.com/questions/28899995/how-to-change-color-of-soft-keyboard-enter-next-button-on-lollipop
  • https://stackoverflow.com/questions/15789997/how-to-change-background-color-of-key-for-android-soft-keyboard
  • would have to implement a new keyboard 🤔

Global

• Titles misaligned across different screen states. Ensure all screens have consistent (35dp) padding between left icon and start of title

Other things to note:

• do we have an issue to handle the metadata showing on a login detail screen below the fields?
• can we confirm colors (in this or a separate issue) for status bar and primary bar, relative to the spec? they look off in the screenshots provided.

Done

• 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)

[abodea]

Verified as fixed on the latest version 3.3.0 with Google Pixel 3a XL(Android 10), for more details please check the following:

Case	Works/Displayed as expected?
Make menu size wrap-content instead of fixed size	✅
Padding around edit fields	✅
make menu size wrap-content instead of fixed size	✅
fields jumping up/down with error	✅
Vertical blinking line still blinking(after collapsing the keyboard)	✅
Hide and show password field text cursor position	❌
Dismiss keyboard in edit view	✅
Typing into the username and tapping the --> at the base of the keyboard should close the keyboard, rather than moving to the next field	❌
toolbar title should be Edit Login	✅
Format strings and give them descriptions	✅
make password hint sans-serif while the password is monospace	✅
long username ... on item list	✅
no additional lines in between hostname/username/pwd	✅
lines between item details change to violet70 when pressed	✅
remove the “Learn how to edit this login” link	✅
Edit view: https://zpl.io/boDxOPX	✅
Editing an entry: https://zpl.io/bLdGW5G	✅
monospace font for the password (de-compress the dots)	✅

Note that those are my findings after checking everything but with the focus on Login and Login edit view sections.
@sandysage @eliserichards @marniepw do you consider that I should close this bug and add new bugs for my findings?
Also, I would appreciate if my verification is valid as we have a lot of changes only in this bug.
I will remove the QA Needed label until further notice.