[User Profiles] Show basic profile when tapping avatars

[frosty]

We would like to add the ability to view user profiles within the app. Stage one will be to show profile information when tapping avatars within the app – particularly in Notifications and Reader comments.

Here's how things should look:

A few notes:

• The designs above show a 'recent posts' section, but this can be omitted for v1.
• This should be able to use our BottomSheetViewController component to display the sheet. See presentFilter in ReaderTabViewModel for an existing usage example. As we'll be leaving out the recent posts area initially, I think the sheet can just be presented at a single size, and doesn't need to be expandable by the user.
• We'll have some of the information to populate the profile already, such as the avatar image itself and the display name. The rest can be fetched from Gravatar. In particular, https://gravatar.com/hash_of_email_address.json will fetch a user's profile info.
• While we're waiting for the other information to load, we should show the fields with a 'ghost' animation like we use elsewhere in the app.

Task list:

• [x] Add feature flag.
• [x] Add the 'user profile' sheet
  • [ ] Retrieve appropriate profile information from the backend as needed.
  • [x] Add user profile to Notifications.
  • [x] Add user profile to Reader comments.
  • [x] Ensure that a 'ghost' animation is displayed when/if necessary.
• [ ] Ensure views are correct for both light and dark appearance.
• [ ] Add accessibility support.
• [ ] Add tracks.
• [ ] Enable feature flag for internal.
• [ ] Enable feature flag for all.
• [ ] Remove feature flag.

[designsimply]

This is so great! I've always wanted this. 😍

Would it be possible to add a gear icon or edit link to the profile sheet that appears for the logged-in user when viewing their own account? Would it be possible to add the ability to edit which sites are shown in the profile from the app directly before this is launched so users can change it if they find an unexpected list of sites they forgot about and/or would like to change or if they would like to add sites? It's not apparent from within the app how or where or if you can do that.

Here is what the My Profile editing screen currently looks like in the app:

Calypso has a "Profile links" section which the app does not have:

Gravatar has a TON more options available such as Location (which I see in the mock-up, it would be nice to be able to change that from within the app as well if the app will display it prominently), Photo Gallery, Contact Information (email, phone, Skype, etc.), Verified Services (Tumblr, Twitter, YouTube, etc.), and even Crypto-currencies:

The only other field it looks like the Initial Display and Expanded to Full Sheet designs above are using is the Location field, and it would be nice to be able to edit that from within the app as well, however, I think the Profile links or Websites would be the more used and more wanted one to be able to edit.

[frosty]

Thanks for the comment, @designsimply! We have another issue open to add the edit link: #14610 🙂 We also plan to add the site list editing functionality. Unfortunately, we currently don't seem to have a way to set the location via our wpcom APIs, but I'm looking into this.

[osullivanchris]

Adding design spec for Ugur who is looking at this one.

This is a basic spec for light mode on iOS. As its using all system and existing components, it should translate pretty well to dark mode, landscape, iPad by default. Let's review those and address any UI issues when we have a build.

[osullivanchris]

@designsimply thanks for the comments! Had a lot of the same thoughts as you on matching the calypso functionality on displaying sites, and linking to edit profile. I think there'll be more to come on this one once we get the mvp :)

[Gio2018]

Thank you for adding the specs @osullivanchris !!

[stale[bot]]

This issue has been marked as stale because:

• It has been inactive for the past year.
• It isn't in a project or a milestone.
• It hasn’t been labeled [Pri] Blocker, [Pri] High, or good first issue.

Please comment with an update if you believe this issue is still valid or if it can be closed. This issue will also be reviewed for validity and priority during regularly scheduled triage sessions.