Skip to content

Proposal for non-UI-blocking notifications #301

Description

@Bugsbane

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

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.

proposed-notifications

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 )

Activity

  1. MorrisJobke commented on Jul 4, 2016

    @MorrisJobke
    Member

    cc @nextcloud/designers

  2. MorrisJobke commented on Jul 4, 2016

    @MorrisJobke
    Member

    I really like the idea 👍

  3. pellaeon commented on Jul 4, 2016

    @pellaeon
    Contributor

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

  4. Bugsbane commented on Jul 4, 2016

    @Bugsbane
    MemberAuthor

    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?

  5. MariusBluem commented on Jul 4, 2016

    @MariusBluem
    Member

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

  6. pellaeon commented on Jul 4, 2016

    @pellaeon
    Contributor

    @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

  7. williambargentball commented on Jul 4, 2016

    @williambargentball
    Member

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

  8. nickvergessen commented on Jul 4, 2016

    @nickvergessen
    Member

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

  9. MorrisJobke commented on Jul 4, 2016

    @MorrisJobke
    Member

    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").

  10. Bugsbane commented on Jul 4, 2016

    @Bugsbane
    MemberAuthor

    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.

  11. pellaeon commented on Jul 5, 2016

    @pellaeon
    Contributor

    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" ?

  12. Bugsbane commented on Jul 5, 2016

    @Bugsbane
    MemberAuthor

    @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.

  13. MorrisJobke commented on Jul 5, 2016

    @MorrisJobke
    Member

    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.

  14. schiessle commented on Jul 5, 2016

    @schiessle
    Member

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

  15. Bugsbane commented on Jul 14, 2016

    @Bugsbane
    MemberAuthor

    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...

  16. Bugsbane commented on Jul 24, 2016

    @Bugsbane
    MemberAuthor

    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):
    notify-screenshot

    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?

  17. williambargentball commented on Jul 25, 2016

    @williambargentball
    Member

    @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?

  18. Bugsbane commented on Jul 25, 2016

    @Bugsbane
    MemberAuthor

    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.

  19. williambargentball commented on Jul 25, 2016

    @williambargentball
    Member

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

  20. eppfel commented on Sep 20, 2016

    @eppfel
    Member

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

  21. Bugsbane commented on Sep 21, 2016

    @Bugsbane
    MemberAuthor

    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.

  22. skjnldsv commented on Sep 21, 2016

    @skjnldsv
    Member

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

  23. MorrisJobke commented on Jan 31, 2017

    @MorrisJobke
    Member

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

  24. nickvergessen commented on Jan 31, 2017

    @nickvergessen
    Member

    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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

1. to developAccepted and waiting to be taken care ofdesignDesign, UI, UX, etc.enhancement

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions