Add notification quick-filter bar in the frontend app #9399

pawelngei · 2018-11-30T12:41:56Z

Implements #7123 .

The quick-filter bar is toggleable in settings and visible by default in the Notifications column. The filtering options are ignored when it's turned off.

It filters specific types of notifications (one at a time), even if that type is absent from the general view due to the user's other settings.

EDIT: Polished the code and added Polish translations ;)

pawelngei · 2018-11-30T13:30:26Z

I addressed the eslint problems and added Polish and English translations. Please let me know if I should add the translation keys anywhere else.

The PR should be ready to merge.

I can add unit tests in a separate PR not to clutter this one.

Gargron · 2018-11-30T15:33:58Z

Thoughts:

How about reusing the design of the "Toots"/"Toots with replies" tab bar from profiles
How about simplifying it to "All" and "Mentions"? Not sure there is a lot of demand for the others

pawelngei · 2018-11-30T16:52:10Z

I thought about the design for some time and I think that @ThisIsMissEm 's mockup looks much cleaner than "Toots / Toots with replies / Media". That's my preference and if you'd like to change it and have one unified look or as little different CSS as possible, I can redesign it.
"All" and "Mentions" are the most important categories, but could personally use "Boosts" and "Follows" myself. After writing one toot which proved very popular, I really missed the ability to see all the people who followed me. The only drawback (besides giving users too many options) I can think of is that these categories can fall into two rows for some languages.

Expanding the second point, I think grouping the notifications as mentioned in #1483 could work even better, but for now I would opt for leaving these two as they are.

EDIT: Also, did I miss any locale files? I couldn't find anything on how these strings should be handled in the developer's docs, so I just went with two .json files.

pawelngei · 2018-11-30T17:19:59Z

I created a fork of the code with a @Gargron 's suggested unified design: https://github.com/pawelngei/mastodon/tree/filter-bar-unified-look

The drawback is that it doesn't look that well multiline:

Cassolotl · 2018-11-30T21:16:38Z

This looks great, I hope it gets merged! Maybe a little more space above the words? :)

pawelngei · 2018-12-02T22:00:45Z

I think we can remove work-in-progress tag. This version is ready, as is the redesigned one. The question is: do we want five categories (the initial design suits it better), or only two/three (the unified one looks okay even for longer languages)?

trwnh · 2018-12-03T00:31:46Z

If there's a concern about overflows, why not simply use the icons? They should be very straightforward:

asterisk = all
at-sign = mentions
star = favorites
retweet = boosts
contact-plus = follows

ThisIsMissEm · 2018-12-03T06:29:26Z

"Why not use icons?" Because icons can often be unfamiliar to new users, it's just one more thing they have to learn.

…

On 3. Dec 2018, at 01:31, trwnh ***@***.***> wrote: If there's a concern about overflows, why not simply use the icons? They should be very straightforward: asterisk = all at-sign = mentions star = favorites retweet = boosts contact-plus = follows — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

pawelngei · 2018-12-03T07:59:43Z

Actually, icons don't look that bad, especially if we use tooltips explaining them:

With longer languages like this:

Tooltip example:

Everything is implemented at https://github.com/pawelngei/mastodon/tree/filter-bar-icons

bannisdale · 2018-12-03T12:44:11Z

The icons look great and are also used throughout the UI already. Love it! :)

pawelngei · 2018-12-03T15:30:49Z

@ThisIsMissEm , I see three options now:

We implement your initial design, which is a little bit different than the standard.
We cut out some of the categories (I would not like that myself).
We use the icons with the unified design.

What do you think would be the best version? Can we accept the line overflowing into the next row?

I'm currently supporting the 3rd option the most. If you agree that icons with tooltips are readable (since there's a huge "Notifications" for context above), I can merge the changes and we can ask the devs to review this PR.

ThisIsMissEm · 2018-12-03T19:32:24Z

Personally I'm not in favour of icons, but I'm also not heavily involved in the mastodon project anymore.

…

On 3. Dec 2018, at 16:31, Paweł Ngei ***@***.***> wrote: @ThisIsMissEm , I see three options now: We implement your initial design, which is a little bit different than the standard. We cut out some of the categories (I would not like that myself). We use the icons with the unified design. What do you think would be the best version? Can we accept the line overflowing to the next row? I'm currently supporting the 3rd option the most. If you agree that icons with tooltips are readable (since there's a huge "Notifications" for context above), I can merge the changes and we can ask the devs to review this PR. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

nightpool · 2018-12-08T02:12:19Z

I agree with @ThisIsMissEm that icons are very confusing for users.

I also agree with @Gargron that this is a really complex UI to throw at new users, and most people would be better served by only having "All" and "Mentions" (and maybe "Follows") tabs.

nightpool · 2018-12-08T02:16:35Z

I think these two concerns are also intersecting—I could support a design that had one or two icons, instead of 5.

pawelngei · 2018-12-08T07:54:17Z

Since being able to use all 5 is very important to me, I could propose two solutions:

We show only "All" and "Mentions" (text) by default, and users could turn on "Advanced mode" with all 5 in the notifications settings. This way we don't confuse new users while still allowing others to use all the quick filters.
Alternatively, we show only "All" and "Mentions" by default, but allow to turn each one on and off in specific category Notification settings. This will allow more granular control, but be more confusing.

@nightpool @Gargron what do you think about it? I'll give you mockups / code in a moment.

bannisdale · 2018-12-08T07:58:41Z

@pawelngei I like both approaches a lot. :)

pawelngei · 2018-12-08T08:40:55Z

Added the simple mode with only "All" and "Mentions", visible by default:

As well as the optional "advanced" mode with all 5 categories:

Gargron

I do not see the code affecting the server-side query, so pagination is going to be wonky with any of these filters enabled. For example, if you only view mentions, and there is a page of follows, all are going to be invisible, and the next page won't load. See how the other toggles work in this column

nightpool · 2018-12-09T20:55:30Z

"advanced view" is completely undescriptive of what the slider actually does. let's make it something like "Show more filters"

…

On Sun, Dec 9, 2018, 3:26 PM Eugen Rochko ***@***.***> wrote: ***@***.**** requested changes on this pull request. I do not see the code affecting the server-side query, so pagination is going to be wonky with any of these filters enabled. For example, if you only view mentions, and there is a page of follows, all are going to be invisible, and the next page won't load. See how the other toggles work in this column — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9399 (review)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAORV30DBbxsJOytB-8BaUNiKIttuOf5ks5u3XH1gaJpZM4Y7meA> .

nightpool · 2018-12-09T20:57:06Z

I'm also confused about how this is supposed to interact with the other existing filters. if I turn off showing follows in the notifications column, and then I drill down to follows only, what does it show?

…

On Sun, Dec 9, 2018, 3:26 PM Eugen Rochko ***@***.***> wrote: ***@***.**** requested changes on this pull request. I do not see the code affecting the server-side query, so pagination is going to be wonky with any of these filters enabled. For example, if you only view mentions, and there is a page of follows, all are going to be invisible, and the next page won't load. See how the other toggles work in this column — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9399 (review)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAORV30DBbxsJOytB-8BaUNiKIttuOf5ks5u3XH1gaJpZM4Y7meA> .

pawelngei · 2018-12-09T20:59:00Z

@nightpool "All" shows the filters that you set in the notification column, so if you unticked Follows, you won't see them there. Each separate category will always show only what's in there, independent of your Notification options.

@Gargron Thank you, I'll write the queries tomorrow.

LoVicente · 2018-12-11T14:33:27Z

hi, I have a question regarding this: Will the tabs have any indications that there are new elements within them? or will I have to constantly toggle between them to check? Don't get me wrong, I think something like this is sorely needed but this is a new type interface that differs from the current columns approach where things are always being shown.
Also, does this feature mean that notifications grouped by type (a la twitter) will not happen?

pawelngei · 2018-12-11T16:24:36Z

@LoMakesComics thanks for asking these questions!

The end result depends mainly on maintainers and their vision, but I was planning to finish this PR without implementing per-type notifications, as that would require more Ruby knowledge than I currently have. We would need to change the API and need to introduce a "notification read" system unified among different Mastodon clients (if I understand it correctly).

I wanted to tackle the "group notifications" next, but I think that creating the indicators may be a better, smaller task after this ticket. I will prepare some sketches of API and the interface in a separate issue.

I can't see how implementing separate filters could affect grouping negatively: even within one type of notification, it's great to see "5 people boosted post X" and "3 people boosted post Y".

pawelngei · 2018-12-12T14:39:57Z

@Gargron I have tweaked with the filters and I have two questions:

Should we save the active filter in the Settings? If not, where else should it lie in Redux?
Should we remove the notifications downloaded so far when going between the filters? Assuming that we'll use the param exclude_types, I don't want us to end up with all notifications 1-15 and then 24, 27, 45, 71 which happen to be mentions.

I'd rather remove the showFilterBar and allowedType from getNotifications, and flush all notifs each time the user changes a filter. What do you think about it?

…tion

…ilterBar

…ed for FilterBar" This reverts commit 9f4be78.

pawelngei · 2018-12-12T16:36:07Z

Okay, I created a new action and handled the pagination. Now this feature is a little bit heavier, but I think it deals with all the edge cases.

Oh, and showFilterBar and allowedType turned out to be required in order not to "turn off" some of the notification categories with other settings.

pawelngei · 2018-12-12T18:00:37Z

The end effect:

* create FilterBar componer and its container, unstyled * introduce basic styling for FilterBar * add selection css * allow FilterBar to display active CSS with js * connect the FilterBar to the Redux state * change getNotifications to use filter * remove temporary comments * add an option to turn the FilterBar off in settings * fix showFilterBar data type to boolean * fix eslint errors * add English and Polish translations * allowed filter bar overflow to accomodate for longer languages * fix mispelled translation key * add unified CSS look * replace text in FilterBar with icons * add tooltips * replace text @ with an icon * introduce simple and advanced filtering view * add ability to toggle the advanced view * add Polish translations * change Advanced View description to be more clear * make each filter flush notifications and load new ones, fixing pagination * simplify getNotifications once frontend filtering is not needed for FilterBar * add a semicolon * Revert "simplify getNotifications once frontend filtering is not needed for FilterBar" This reverts commit 9f4be78. * reset filter to 'all' when turning off FilterBar

pawelngei added 13 commits November 30, 2018 10:41

create FilterBar componer and its container, unstyled

8e7044c

introduce basic styling for FilterBar

a7965d4

add selection css

44e62a4

allow FilterBar to display active CSS with js

d5ded63

connect the FilterBar to the Redux state

7b00332

change getNotifications to use filter

b8705a7

remove temporary comments

eb5c7be

add an option to turn the FilterBar off in settings

d446f2d

fix showFilterBar data type to boolean

189359d

fix eslint errors

6eb9d8f

add English and Polish translations

68509e8

allowed filter bar overflow to accomodate for longer languages

30b9a5f

fix mispelled translation key

4637eb7

add unified CSS look

1c4c35f

ClearlyClaire added ui Front-end, design work in progress Not to be merged, currently being worked on labels Dec 2, 2018

pawelngei added 2 commits December 3, 2018 09:01

replace text in FilterBar with icons

b147d7c

add tooltips

27f8158

pawelngei added 3 commits December 8, 2018 09:10

introduce simple and advanced filtering view

43578ee

add ability to toggle the advanced view

2840e35

add Polish translations

f28f4e3

pawelngei mentioned this pull request Dec 8, 2018

Multiple notifications columns #5327

Closed

Gargron requested changes Dec 9, 2018

View reviewed changes

change Advanced View description to be more clear

f99883c

pawelngei added 5 commits December 12, 2018 16:35

make each filter flush notifications and load new ones, fixing pagina…

0a9de4a

…tion

simplify getNotifications once frontend filtering is not needed for F…

9f4be78

…ilterBar

add a semicolon

b73ca6d

Revert "simplify getNotifications once frontend filtering is not need…

c54977c

…ed for FilterBar" This reverts commit 9f4be78.

reset filter to 'all' when turning off FilterBar

ceca554

Gargron approved these changes Dec 16, 2018

View reviewed changes

Gargron merged commit 13dce12 into mastodon:master Dec 16, 2018

This was referenced Dec 18, 2018

The quick filter bar can not be displayed on Mobile Safari #9562

Closed

i18n: Update Japanese translations #9574

Merged

nclm mentioned this pull request Dec 21, 2018

Clearing individual kinds of notifications #8595

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add notification quick-filter bar in the frontend app #9399

Add notification quick-filter bar in the frontend app #9399

pawelngei commented Nov 30, 2018 •

edited

Loading

pawelngei commented Nov 30, 2018

Gargron commented Nov 30, 2018

pawelngei commented Nov 30, 2018 •

edited

Loading

pawelngei commented Nov 30, 2018 •

edited

Loading

Cassolotl commented Nov 30, 2018

pawelngei commented Dec 2, 2018

trwnh commented Dec 3, 2018

ThisIsMissEm commented Dec 3, 2018 via email

pawelngei commented Dec 3, 2018 •

edited

Loading

bannisdale commented Dec 3, 2018

pawelngei commented Dec 3, 2018 •

edited

Loading

ThisIsMissEm commented Dec 3, 2018 via email

nightpool commented Dec 8, 2018

nightpool commented Dec 8, 2018

pawelngei commented Dec 8, 2018

bannisdale commented Dec 8, 2018

pawelngei commented Dec 8, 2018

Gargron left a comment

nightpool commented Dec 9, 2018 via email

nightpool commented Dec 9, 2018 via email

pawelngei commented Dec 9, 2018

LoVicente commented Dec 11, 2018

pawelngei commented Dec 11, 2018

pawelngei commented Dec 12, 2018 •

edited

Loading

pawelngei commented Dec 12, 2018 •

edited

Loading

pawelngei commented Dec 12, 2018

Add notification quick-filter bar in the frontend app #9399

Add notification quick-filter bar in the frontend app #9399

Conversation

pawelngei commented Nov 30, 2018 • edited Loading

pawelngei commented Nov 30, 2018

Gargron commented Nov 30, 2018

pawelngei commented Nov 30, 2018 • edited Loading

pawelngei commented Nov 30, 2018 • edited Loading

Cassolotl commented Nov 30, 2018

pawelngei commented Dec 2, 2018

trwnh commented Dec 3, 2018

ThisIsMissEm commented Dec 3, 2018 via email

pawelngei commented Dec 3, 2018 • edited Loading

bannisdale commented Dec 3, 2018

pawelngei commented Dec 3, 2018 • edited Loading

ThisIsMissEm commented Dec 3, 2018 via email

nightpool commented Dec 8, 2018

nightpool commented Dec 8, 2018

pawelngei commented Dec 8, 2018

bannisdale commented Dec 8, 2018

pawelngei commented Dec 8, 2018

Gargron left a comment

Choose a reason for hiding this comment

nightpool commented Dec 9, 2018 via email

nightpool commented Dec 9, 2018 via email

pawelngei commented Dec 9, 2018

LoVicente commented Dec 11, 2018

pawelngei commented Dec 11, 2018

pawelngei commented Dec 12, 2018 • edited Loading

pawelngei commented Dec 12, 2018 • edited Loading

pawelngei commented Dec 12, 2018

pawelngei commented Nov 30, 2018 •

edited

Loading

pawelngei commented Nov 30, 2018 •

edited

Loading

pawelngei commented Nov 30, 2018 •

edited

Loading

pawelngei commented Dec 3, 2018 •

edited

Loading

pawelngei commented Dec 3, 2018 •

edited

Loading

pawelngei commented Dec 12, 2018 •

edited

Loading

pawelngei commented Dec 12, 2018 •

edited

Loading