Proposal for non-UI-blocking notifications

[Bugsbane]

This is the view in Nextcloud 9.0.51 when an administrative notification comes in:

The search icon and menu to choose the current Nextcloud app are both obscured. Granted this is much better now in Nextcloud where the notification disappears after about 5 seconds than in ownCloud where it would stay there permanently, however, making some of the most important parts of the UI inaccessible for 5 seconds on every page load is still pretty suboptimal.

I propose the following type of view where the notification appears between the main menu bar and the breadcrumb bar, pushing the latter part down the screen until it is closed. We could keep the current behaviour of the notification disappearing after a few seconds, however I feel that the need would be far less.

NOTE: It's not actually obscuring any content at the top, but pushing it down the screen (although only by 34px or so), so apps that use the top breadcrumb area would still have that content visible.

cc @nextcloud/disgners (<-- not sure if I did that correctly... @jancborchardt )

[MorrisJobke]

cc @nextcloud/designers

[MorrisJobke]

I really like the idea 👍

[pellaeon]

I'm wondering why there are 2 kinds of notifications, can't all notifications be integrated with the notification app ?

[Bugsbane]

Umm.... good question. I see the notification app listed under "Enabled apps", but I've yet to see how it shows any notifications. If we already have some integrated system of notifications that doesn't block the UI that I don't know about, then presumably that would make this unnecessary. I just have yet to see it. Can you point me to any example @pellaeon?

[MariusBluem]

Jap ... Good Point to put them into Notifications 😉 @nickvergessen ...maybe this would also make the Widget more used so we can show permanent 😜

[pellaeon]

@Bugsbane I'm sorry, but examples of what? I know that notification app currently has notification for "someone shared a file with you", like in the readme https://github.com/nextcloud/notifications

[williambargent]

@Bugsbane I like this but I think the tap target may need to be a bit bigger, looks quite small.

[nickvergessen]

Master (nextcloud10) should already have update notifications available via the notifications API/app and therefore in the bell menu, and clients.

[MorrisJobke]

There is a tiny difference between those notifications. The ones in here are for short term feedback to a user action ("the current upload failed, because the connection timed out"). The notifications in the notifications area (little bell) should be used for cross device notifications ("John shared 'abc' with you").

[Bugsbane]

I guess that's the question @pellaeon was asking though... is it worth having two different types of notifications? I wasn't aware of the "bell notifications" when I created this. I just wanted something that didn't block the interface. If we already have a new system, then we're probably best off putting all of the notifications there, as users won't think in terms of what type of notification it is and different places to look for it according to type. They'll just want to see everything in one place.

[pellaeon]

I totally see @MorrisJobke 's point, a short term feedback like "the current upload failed, because the connection timed out" should be obvious and disappear after a few seconds, this is what the notification app can't provide, so both systems should exist.

And as a side point, this particular notification "Nextcloud daily is available...", shouldn't this go to the notification app? since it does not fall into the category of "feedback to a user action" ?

[Bugsbane]

@williambargent - yeah, it could be increased a bit, although it's worth noting that it's the same hit size as all of the check boxes underneath it that we already use.

[MorrisJobke]

For the above example with the "new version is availble" we simpl use the wrong notification.

I would simply go for the proposed thing that @Bugsbane mocked in the first comment. I like it.

[schiessle]

I also like the proposal... @Bugsbane do you want to submit a pull request?

[Bugsbane]

You know what... I know about as much code as a wet paper bag (other than CSS etc), but I'm actually tempted to give this a try... unless an actual coder wants to take it on...

[Bugsbane]

OK, so this is all looking good (at least on my browser - haven't yet cross checked) in the normal view. It doesn't have any kind of "click x to close" as that doesn't actually exist even in the current notification system yet.

If you want to see it in action though, you can just checkout /core/css/header.css /core/css/styles.css and /core/templates/layout.user.php from my repo. Take a look (although the screenshot doesn't show the sexy sliding css3 animation):

Unfortunately I'm having some trouble with the app-navigation-toggle button that appears in mobile view. With the other elements that I needed to be pushed down the screen, I largely just commented out the position:fixed statements so they would be pushed down the screen by the notification box. When I do this with the sidebar toggle though, it just disappears altogether, and I'm not entriely sure why. I'm thinking that maybe I need to change it's inline position as well, but then I'm also guessing that it's position is also controlled by javascript, which gets beyond my meagre code-fu.

Any ideas?

[williambargent]

@Bugsbane looks good. Could I suggest removing 2 or 3 px from the padding, it looks quite tall especially when multiple notifications are being displayed. Is the notification div position fixed?

[Bugsbane]

No problem on the padding. Currently the notification div position isn't fixed, as I wasn't sure if it was possible to have more than one or not, with multiple notifications. That's easy enough to change if it's required, though.

[williambargent]

The only problem if it isn't fixed is when a new notification is generated, the whole page will will slide down and if the user has already scrolled past they will miss newly generated messages (will just see the page move).

[eppfel]

@Bugsbane As you can see, this came up on different occasions. Could you make a PR, with your current status?

[Bugsbane]

I could... but to be honest I suspect my CSS would take more work to fix than it would take for a more competent coder than myself to create properly from scratch.

If you all would still prefer that I create a PR with what I have though, just let me know and I'll make it happen.

[skjnldsv]

It could be great to create some dedicated function to this modal dialog.
Like countdown, level (warning, critical, normal...), custom yes/no string... :)

[MorrisJobke]

@jancborchardt @nickvergessen Is this still a topic with the new kind of notifications (little bell in the top right)?

[nickvergessen]

This is not about the bell, but about the yellow thing...
Any persistent cross-browser notification should be a normal notification and not a yellow one (e.g. available updates)