Redesign of the invite dialog in Fractal (part 1)

Hello everyone!

This month, I’ve had some time to work on the redesign of the invite dialog in Fractal. There is a dialog used for inviting users in a room you are in or inviting a user to start a direct chat with them. In this dialog, you can search for users by usernames. The result of this search is shown in a list below the search entry and you can click on the GtkListBox‘s rows to select users (in the case of direct chat invitations, the latest selected user will be the only one selected) and you can then click on the button “Invite” to send invitations to all selected users.

Previously, the selected users were listed in another GtkListBox placed above the search entry. So it looked like this:


I’ve reimplemented the way selected users are shown. Now, the selected users are represented inline as part of the search input: when you select a user, a “pill” (a small widget grouping the avatar and the name of the user) is added to the entry and when you delete this pill, the user is removed from the list of the invitations to send. It looks like this now:

Capture du 2018-10-12 17-53-36

I’m going to describe the steps I’ve done in order to get this result.

First of all, I knew that if I wanted to insert pills in the search entry, I’d have to use a GtkTextView instead of a GtkEntry so that I could create a GtkChildAnchor at a given position in the text (a GtkTextIter) with the method

Next, I wanted to be able to remove users from the invite list when deleting their associated pill from the GtkTextBuffer. So each time there was a “delete-range” signal emitted by the buffer, Fractal would iterate through the invite list (that I’ve modified to associate an invited member with their child anchor) and check if the child anchor were removed, with the method

Then I had the possibility to remove the GtkListBox containing the invite list. I’ve removed it from the UI file (see it here) and cleaned up the code using it (here).

I modified the new text view so that it launches a user search when typing into it. It was easy to implement because

One of the final steps was to make the text view looks like a GtkEntry (here and here), I did it the same way as I did for the message input. And finally, I’ve removed the old entry in this commit.

There is a little problem with the new entry: the text that is typed into the text view is lower than the position of the pill (the child anchor); so they are not aligned correctly and it makes the entry being resized, which is not great. It looks like this:

Capture du 2018-10-13 10-06-17.png

I think that a solution could be to set the vertical position of the anchor child so that it is lower but I didn’t find out how to do that. So if you have an idea for that or another way to fix this, I be pleased to hear about it 🙂


4 thoughts on “Redesign of the invite dialog in Fractal (part 1)

  1. Thank you very much for working on Fractal! It’s a very cool project, good integration, flatpak, easy to use, matrix, rust, it ticks so many boxes and even more with every single improvements like this… but still no encryption, that’s a too big bummer for a com app in 2018. :/


    1. The implementation of the encryption isn’t a trivial problem unfortunately and it requires a lot of efforts. However, there is someone working on it to bring it to Fractal, you can fallow their progress on this channel


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s