Notifications redesign #1802

roundhill · 2014-09-01T21:22:22Z

Notifications Redesign

An all-new Notifications area that has a refined and rich experience across Android, iOS and WP.com.

The UX went through many iterations, which is why there's so many commits. Sorry ;)

What's New?

Complete redesign of comment list and detail views.
Simplifies the note detail view, no longer need separate fragment for follows, likes, badges, etc.
You can now like a comment from CommentDetailFragment.
You can tap on a user's avatar to view their prmary blog, if they have one.
A user displayed in a follow/like type notification will now show their site title and description, if it is available.
Links in notifications will load native app views whenever possible.
Adding new notifications should only require a server-side change.
Added Simperium db indices for data displayed in the list view, which is a huge performance boost for list view scrolling.

How's it work?

Notifications are still backed by Simperium, but now use the 'Notes 2.0' model which enable us to do many new and nifty things:

A notification will contain an array of 'Blocks' in them. A block is a UI element that describes content in an area of a notification. See the NoteBlock class to see how the most basic block works. All other blocks are a subclass of NoteBlock that perform different rendering based on their block type.
Each block gets its own row in a ListView in NotificationsDetailListFragment. For comment notifications, this Fragment is added to CommentDetailView.
Text data in blocks can have Ranges. A range describes a substring in a text that can have an action. Most of the time, these are displayed as links but can also apply different formatting (such as BlockQuote). Ranges that have an action are made clickable by using a NoteBlockClickableSpan.
If a Range's type matches up we will load the appropriate view in the app. For example, a post type will load the ReaderPostDetailFragment using the Ids that are provided in the Range.

Notes

There's a new NoticonTextView subclass that uses the noticon font to render the notification icons. This will future-proof icons for new notes added in the future and saves space as we don't need PNGs for the note icons any longer.
This PR includes a small change to JSONUtils, so that submodule will need to be pushed with that change.
The look and feel is quite different from the rest of the app. I'm going to work with @drw158 to get another PR going that will update the rest of the app to the new 'Calypso' coloring.
There's an issue with comment likes not coming back around in Simperium that is currently being investigated. You may see comment likes not 'sticking' (even though they will have gone through fine on the site).
Not proud of: In order to get the TextViews in the notifications list view to line up perfectly on HDPI devices, I had to add some half-dp values to /values-hdpi/dimens.xml. Wish there was a way around that but I couldn't get them pixel-perfect otherwise.

…tain block types are tapped. So much win.

Since there's no guarantee that an image or video will be in the note, it would be a waste of memory. Instead they are created if the note block contains an image or video.

…n a UserNoteBlock.

…t still. Protip: Never have your fragments in layout XML.

…ing created.

…stead of removing the detail fragment.

Fixes #1471

Also fixed #1497

… the list.

…ition to posts).

Added check to show Url in a web view if we don't know what the type of the block is.

Changed ListView background to white to match design.

…iew.

…etailFragment` that houses the header and detail fragment.

Conflicts: src/org/wordpress/android/ui/notifications/BigBadgeFragment.java src/org/wordpress/android/ui/notifications/NewNotificationsActivity.java

Cleaned up getters in the note model. Still need to reimplement the caching in this model.

…lled by the OS.

* Now uses `note20` bucket. * Removed testing code from `SimperiumUtils`

Applied tablet styling to comments list.

WP.com now supports approving a comment once it is liked. Cleaned up some code.

roundhill · 2014-09-09T21:32:58Z

@roundhill can we try using the same bold weight of the commenter's name for the bold text in the list view? (I think they are using 2 different font weights)

Unfortunately it doesn't look like I can easily change the weight in the list view. It's doing an HTML formatting trick that I don't have much control of.

Conflicts: WordPress/src/main/java/org/wordpress/android/ui/WPActionBarActivity.java WordPress/src/main/java/org/wordpress/android/ui/reader/ReaderPostPagerActivity.java

Fixes issue where image cache would store multiple copies of the same image.

Previously, you couldn't edit a comment that wasn't from a blog stored in the app. Now `EditCommentActivity` will request the comment and edit it via the REST API.

…hows in the center of the view.

nbradbury · 2014-09-10T20:33:55Z

Feedback round four:

If I close the comments on a post then go to the app and tap an existing comment notification for that post, the reply box still appears on the detail. Submitting a reply results in a "Reply failed" toast.
Tapping "See all of your followers" still isn't friendly. It's jarring to be taken from the app to a web page with a much different experience. If there isn't a way to show all followers natively, perhaps just rename this "Recent followers" and get rid of that link to see all followers.
Love the undo box! But the label "Comment spammed" seems odd - maybe "Comment marked as spam" instead?
The note list gives no indication of comments awaiting approval. Can that be added?
In the detail view of a comment like notification, tapping the comment snippet in the header takes you to the post. Should that show the comment detail instead?
Select the "notifications" folder in the project view, then select Analyze > Inspect Code and make sure "Current Directory" is selected. There are some things that can be cleaned up there.

Updated comment spammed string to `Comment marked as spam`

davewhitley · 2014-09-10T22:03:46Z

Tapping "See all of your followers" still isn't friendly. It's jarring to be taken from the app to a web page with a much different experience. If there isn't a way to show all followers natively, perhaps just rename this "Recent followers" and get rid of that link to see all followers.

I think we should cut out the link to see all of your followers. I don't see the link on my most recent follow notification though. Maybe the view can be called "7 New Followers" or "Recent Followers" like you suggested.

The note list gives no indication of comments awaiting approval. Can that be added?

The best way to do this is probably an icon change in the list view, and maybe instead of blue for unread the circle could be yellow.

In the detail view of a comment like notification, tapping the comment snippet in the header takes you to the post. Should that show the comment detail instead?

If possible I think it should "link" to the comment in the reader.

… detail view. I created a wrapper activity for CommentDetailFragment, so the experience feels the same when you go to a third-level detail view in notifications.

…erNoteBlock`. Added note to developer in colors.xml if they are changing the colors.

…causing external links not to load.

Set proper theme.

roundhill · 2014-09-11T20:17:09Z

The best way to do this is probably an icon change in the list view, and maybe instead of blue for unread the circle could be yellow.

I can do this in the next release: #1854

…sn't have a comment action listener.

…d automattcher.

nbradbury · 2014-09-12T00:34:50Z

WordPress/src/main/java/org/wordpress/android/ui/comments/CommentDetailFragment.java

It's kind of weird for a setter not to have a parameter.

…note's Ids. Fixed a weird setter, it should pass the boolean value.

…previously. Only difference is that `CommentActions.sumbitReplyToCommentRestApi` is used if we've loaded a remote comment from the Note.

nbradbury · 2014-09-12T13:43:22Z

@roundhill Everything looks good - I'm okay to merge this with 3.2 if you're ready.

roundhill · 2014-09-12T15:26:48Z

Woo! Squirrel it.

roundhill · 2014-09-12T15:31:14Z

Closing this to create the PR against the release/3.2 branch

roundhill added 30 commits June 11, 2014 12:50

Initial commit of new model testing and UI updates.

6c21cad

Added support for following sites to UserNoteBlock

7b1daf1

Added support for showing blog preview and post detail views when cer…

f6b9c40

…tain block types are tapped. So much win.

Removed image and video views from note_block_basic layout.

36ce6fc

Since there's no guarantee that an image or video will be in the note, it would be a waste of memory. Instead they are created if the note block contains an image or video.

Added support for using NoteBlockClickableSpan for the Url TextView i…

61891c2

…n a UserNoteBlock.

Fixed wonky fragment transactions. Need to fix landscape tablet layou…

0a21746

…t still. Protip: Never have your fragments in layout XML.

Removed now-unused private members.

204b909

Tablet improvements and fixed blinking when loading detail fragment.

db0f3b3

Code cleanup, moved media player attachment to where VideoView was be…

e2d5360

…ing created.

Fixed row highlight on tablets.

8ac0b6d

Fixed up tablet layout and rotation.

854249d

Fixed rotating to landscape on a tablet when viewing a detail view.

2d041ad

Better handling of tablet rotation, just pop the entire back stack in…

6f53a5f

…stead of removing the detail fragment.

Select first row when on a landscape tablet when the activity starts.

e44afb8

Fixes #1471

Restores selected note when rotating tablet from portrait to landscape.

0012e0c

Also fixed #1497

Explicitly tell the notes adapter whether it should highlight rows in…

bae5604

… the list.

Fixed automattcher check for automattcher's that are comments (in add…

8e7badd

…ition to posts).

Center basic note block text if it is being displayed with an image.

c2b6178

Added check to show Url in a web view if we don't know what the type of the block is.

Animate images after they are downloaded to catch the eye.

0c8a47d

Changed ListView background to white to match design.

Comment snippet is now displayed in the ListView.

01cf0d1

Added custom fragment animation when navigating from list to detail v…

f64e0da

…iew.

Use replace instead of add in fragment transaction.

baa297f

Moved header out of detaillistfragment, and created a `NotificationsD…

4309263

…etailFragment` that houses the header and detail fragment.

Merge branch 'develop' into feature/notifications-redesign

5fe68c7

Conflicts: src/org/wordpress/android/ui/notifications/BigBadgeFragment.java src/org/wordpress/android/ui/notifications/NewNotificationsActivity.java

Remove BigBadgeFragment

6c52fff

Fixed a crash caused by the merge with develop.

ca10373

Removed overshoot animation as I couldn't get it looking quite right.

29296db

Cleaned up getters in the note model. Still need to reimplement the caching in this model.

Fixed a crash when NotificationsActivity was resumed after being ki…

e4e563e

…lled by the OS.

Use standard dimen/avatar_sz_large for notes list avatar.

943c107

* Cleaned up code in Note model.

183cd76

* Now uses `note20` bucket. * Removed testing code from `SimperiumUtils`

roundhill added 2 commits September 9, 2014 12:07

Fixed the multi-select highlight in the comments list.

182843a

Applied tablet styling to comments list.

Switch to approved status when liking an unapproved comment.

5639a42

WP.com now supports approving a comment once it is liked. Cleaned up some code.

roundhill added 4 commits September 9, 2014 14:35

Merge branch 'release/3.2' into feature/notifications-redesign

74f050f

Conflicts: WordPress/src/main/java/org/wordpress/android/ui/WPActionBarActivity.java WordPress/src/main/java/org/wordpress/android/ui/reader/ReaderPostPagerActivity.java

Use PhotonUtils.fixAvatarUrl in blocks.

cd97394

Fixes issue where image cache would store multiple copies of the same image.

Fixed editing a comment from a notification.

16e2813

Previously, you couldn't edit a comment that wasn't from a blog stored in the app. Now `EditCommentActivity` will request the comment and edit it via the REST API.

Set ScrollView to match_parent in height so that the progress bar s…

bbdaf31

…hows in the center of the view.

Show image animation one time only, tweaked pop.xml animation.

84d90b7

Updated comment spammed string to `Comment marked as spam`

roundhill added 6 commits September 10, 2014 15:30

Code inspector cleanup!

bb78afe

Tapping on the header in a comment reply now takes you to the comment…

bf670e9

… detail view. I created a wrapper activity for CommentDetailFragment, so the experience feels the same when you go to a third-level detail view in notifications.

Longer pop animation duration.

4106f86

Created constants for colors used in NoteBlockClickableSpan and `Us…

1781036

…erNoteBlock`. Added note to developer in colors.xml if they are changing the colors.

Reverted NotificationsWebViewActivity to use loadUrl() as it was …

04d9453

…causing external links not to load.

Don't show keyboard when starting CommentDetailActivity.

1a18fa5

Set proper theme.

roundhill added 2 commits September 11, 2014 15:31

Added support for moderation actions when CommentDetailFragment doe…

e1a2f17

…sn't have a comment action listener.

Show comment detail when tapping header from a comment like, or neste…

4e60211

…d automattcher.

nbradbury reviewed Sep 12, 2014
View reviewed changes

roundhill added 3 commits September 11, 2014 19:57

Corrected null check to be for progressBar.

8e561c1

Cleaned up some of the naming around loading a remote comment from a …

f10b3ae

…note's Ids. Fixed a weird setter, it should pass the boolean value.

CommentDetailFragment now manages comment reply tasks, like it did …

496c2a1

…previously. Only difference is that `CommentActions.sumbitReplyToCommentRestApi` is used if we've loaded a remote comment from the Note.

roundhill closed this Sep 12, 2014

roundhill mentioned this pull request Sep 12, 2014

Notifications redesign #1861

Merged

nbradbury deleted the feature/notifications-redesign branch September 12, 2014 15:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Notifications redesign #1802

Notifications redesign #1802

Uh oh!

roundhill commented Sep 1, 2014

Uh oh!

roundhill commented Sep 9, 2014

Uh oh!

nbradbury commented Sep 10, 2014

Uh oh!

davewhitley commented Sep 10, 2014

Uh oh!

roundhill commented Sep 11, 2014

Uh oh!

nbradbury Sep 12, 2014

Uh oh!

nbradbury commented Sep 12, 2014

Uh oh!

roundhill commented Sep 12, 2014

Uh oh!

roundhill commented Sep 12, 2014

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Notifications redesign #1802

Notifications redesign #1802

Uh oh!

Conversation

roundhill commented Sep 1, 2014

Notifications Redesign

What's New?

How's it work?

Notes

Uh oh!

roundhill commented Sep 9, 2014

Uh oh!

nbradbury commented Sep 10, 2014

Uh oh!

davewhitley commented Sep 10, 2014

Uh oh!

roundhill commented Sep 11, 2014

Uh oh!

nbradbury Sep 12, 2014

Choose a reason for hiding this comment

Uh oh!

nbradbury commented Sep 12, 2014

Uh oh!

roundhill commented Sep 12, 2014

Uh oh!

roundhill commented Sep 12, 2014

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants