Skip to content

Notification drawer should close when the user clicks outside of the drawer #537

Description

@benjaminapetersen

This is a fairly common convenience feature for a drawer/panel/modal. Here are a few examples:

I believe a click event on the document is needed, then a test to e.target (exists && matches current element) to implement, but can look into this more.

Activity

  1. beanh66 commented on Aug 1, 2017

    @beanh66
    Member

    @benjaminapetersen In this case, staying open is actually by design to allow users to go through notifications and potentially investigate them in the main content area at the same time. We added the X close button in the top right corner as another means to closing the panel (aside from clicking the bell) in order to make it more clear. We should be consistent with PatternFly and keep this functionality as is for now but in the meantime we will check with ManageIQ to see if they've had any complaints since it's been implemented in that product for a few releases.

  2. serenamarie125 commented on Aug 1, 2017

    @serenamarie125
    Member

    @beanh66 ManageIQ hasn't had any complaints either. This is something that we can test, or ask for user feedback if it's an issue. @benjaminapetersen I agree that it is a convenience feature, but unsure if it makes sense in this specific use case. Interested in your thoughts.

  3. benjaminapetersen commented on Aug 2, 2017

    @benjaminapetersen
    MemberAuthor

    User testing/feedback definitely makes sense! Click outside seems to be a common convention, though I suppose alternatives like esc key could also be considered (but I suspect less discoverable/more intuitive to power users only). I think requiring a manual movement of the mouse to the "x" (or bell) as the only way to close the panel gets a little bit annoying when you are opening/closing the panel frequently.

    Definitely like the "x", thats a big win for usability so far!

  4. self-assigned this
    on Aug 16, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions