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:
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
create_child_anchor and then insert my new pill widget with
add_child_at_anchor. So I’ve added a text view in the UI in this commit, added a widget for member pills in this one and added the code so that the pills are inserted into the text view when a user is selected in this commit.
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
get_deleted, and then remove this entry from the invite list. See this commit for more details.
I modified the new text view so that it launches a user search when typing into it. It was easy to implement because
get_text excludes the special characters representing the child anchors from the returned text. I’ve also taken care of making sure that the text used for searching a user were removed from the text view when we add their pill (so it looks as if the text used for the research is turned into a pill). You can see how I’ve done it 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:
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 🙂