The Second Milestone

Cover image

We've reached the end of the second coding period.

Time is flying!

In this post, I'm going to tell you about my progresses grouping the notifications.

Grouping notifications

By discussing with my mentor how could the best approach be, I found out that the notifications were already grouped on the code level, but these groups were not being represented in the UI.

In the code, there's a class named Source, which is responsible for the group. It handles the info's about the app that have sent us any notification and store them.

There's also a class named Notification, that creates a single notification, with title, banner, and has optional parameters such as playing sounds etc.

Each Source has an array property that contains its notification objects, which gives us the groups.

We needed a way to display these groups in the UI. The way the notification messages(a message is a representation of a notification - the bubble we have in the UI) were being created and displayed in Shell until now, was by an iteration of the existing sources, and we had something like:

  • NotificationSection

    • Extends the base MessageListSection class, which is responsible for the list of all the existing notification messages. Has methods to add, remove and move messages from the list;
    • Creates the messages through a loop on all the sources available;
  • NotificationMessage

The NotificationSection was responsible for create the NotificationMessage's that were displayed in the calendar. There was no distinction of sources. As the notifications came, they were being displayed and stacked into the calendar list.

The process of building a notification message could be represented in a simplistic way as:

Simple notification creation flow.

To create the grouping representation we had to introduce a new abstraction that would be responsible for a single source, and then it would be responsible for creating the messages. In other words, we introduced a new level on the notifications handling class hierarchy.

The new SourceSection class represents this new level between NotificationMessage and NotificationSection. It was created to, as its name says, represent the group that would handle its own notifications, not depending on the generic listing class to create the messages anymore.

The SourceSection also extends the MessageListSection because we also need to list the groups somehow, and with this approach, we could reuse the existing code.

The layout manager

Now that we have the groups represented in the code level, we need to display them as groups on the UI as well.

In the mockups, there are two possible states for a group:

  • Collapsed: only the most recent notification is displayed if there's more than one in the stack.
  • Expanded: all notifications for a single app are shown in a list style, and the bubbles can expand to display actions, if available for that message.

To achieve something like this, we had to create a custom layout manager, that would be responsible for these two distinct behaviors.

This layout manager, called SourceMessageLayout, extends the Clutter'sBoxLayout class, which the MessageListSection uses to create the list, and we can replace the layout manager only of the SourceSection class, without affect the inherited methods at all.

Current state

Curious to see how these solutions fit together?

Enough talking, here we go!

Current state of the grouping layout.

Please keep in mind that this is still a development in progress, and this is not the final solution yet.

Next steps

It's so satisfying to see the project growing and the pieces fitting!

However, there's a lot to improve the solution, and those are my next steps to finish the project:

  • Add animations for collapsing/expanding;
  • Blur the sections around the expanded group;
  • Add actions to the notifications messages;
  • Handle the edge cases;


Lastly, I'd like to talk about GUADEC which this year was completely remote.

This was my first talk at a conference, in a language that I'm not a native speaker. I want to thank my mentor and the GNOME community for creating a comfortable environment for the interns to talk about their projects.

Below you can check my talk:

Thanks for reading!