Icons in notifications are used differently to the panel

[Tyriar]

VS Code version: Code - Insiders 1.21.0-insider (1a84a88, 2018-02-27T06:17:53.785Z)
OS version: Linux x64 4.13.0-36-generic

---

#44319

• x icon
  • In the panel it means close/minimize (non-destructive)
  • In the notification center it means delete (destructive)
• bin icon
  • In the panel it means kill/delete (destructive)
• v icon
  • In the panel it means restore (non-destructive)
  • In the notification center header it means close/minimize (non-destructive)
  • In individual notifications it means expand (destructive) - this is the opposite of how it's used in the panel
• ^ icon
  • In the panel it means maximize
  • In individual notification it means minimize

[bpasero]

@Tyriar I am not sure it is possible to get a consistent icon set because it also depends on where the action is used. The X for example in the editor tab is used to close an editor and I would argue that this action is destructive, e.g. if the file is dirty you have to save. Same is true for removing things from the "Recently opened" list.

The v and ^ icons again depend on where they are used. The panel area maximizes to the top, so imho it makes sense that it shows up to do so. The notifciations expand on the bottom so I think it makes sense the other way around.

I see the clash with hiding the notifications center and expanding a notification though, so maybe we could tweak that icon.

/cc @stevencl and @chryw who maybe has thoughts as well

[Tyriar]

Related: #8073

[chryw]

@bpasero I agree that these icons are context based.
For the chevron conflict in notification panel, I suggest these tweaks:

• Move the expand/collapse control to bottom center, and only show up when the content exceeds max height.
• Some of the "X" buttons aren't really destructive. Maybe we can tweak the wording.
• Change the "Hide notifications" button to "Close Panel", so it's consistent with the Feedback panel.
• Move the "Dismiss all" button to a footer section of the panel because that's like a summary action that you do after you've looked at all the notifications.
  

The bottom panel toolbar is getting crowded with icons. I think at some point we may want to refactor the buttons.

[bpasero]

• @stevencl

@chryw Thanks for the ideas and drawing, I appreciate your time on this :)!

Move the expand/collapse control to bottom center, and only show up when the content exceeds max height.

I think this does not work: If you have a message on a single line that overflows, we will not have any space to show something below that message to expand it. I think the right hand side toolbar is the only place available.

Some of the "X" buttons aren't really destructive. Maybe we can tweak the wording.

I think using X in the header and X in the notification is even more confusing because the one closes the notifications center and the other deletes a notification.

Change the "Hide notifications" button to "Close Panel", so it's consistent with the Feedback panel.

I think the term "Panel" is a bit overloaded, we should probably use it exclusively for the actual horizontal panel and nothing else.

Move the "Dismiss all" button to a footer section of the panel because that's like a summary action that you do after you've looked at all the notifications.

Yeah that could work, though it makes the entire notifications center more heavy than it should be. The biggest issue with that is when you go from toast to notification center, suddenly messages have to jump up a bit to make room for the footer.

I think we should take this into a UX meeting and go through 👍

[ghost]

I frequently delete the notifications when trying to close the popup, so I sketched this idea:

Like the cog in the settings ui, the x button could appear on hover/focus.

[miguelsolorio]

One thing I would love to see here is to only show the dismiss actions on focus/hover of the notification. That will help reduce the visual noise. I would also like to see the "Close" button follow the same x pattern we use elsewhere and the Clear all icon for dismissing all of the notifications. Thoughts?