Various visual bugs
Search Bar
-
Reduce spacing around the search input -
Add border at the bottom of the search input
Example of a typical GNOME search bar
Message Input
-
Give message input the same height/styling as a normal input -
Add a border -
Add blue border on focus -
Remove scrollbar when it's not needed (expand height until 4 lines, and then start scrolling) -
Make the send button the normal button height -
Make the send icon the normal symbolic size (16px) -
Add border to send button
The Fractal message input already implements the exact behavior we want using gtksourceview, so I would just copy that :)
This is the relevant MR
The input looks great when it has focus, but the styling is a bit weird when it doesn't. The message input should be styled like a normal input in every case, so when i doesn't have focus:
-
make border 1px -
make border regular non-focused input border color
The message input is taller than the send button, and the button isn't styled the same as other suggested action buttons. I think the problem with the height is because the vertical padding inside the input is too big. Here's Fractal's message input (left) in comparison:
-
make message input and button the same height (when the message isn't multi-line). -
style button like normal suggested action buttons
When the input has multiple lines, the send button should remain bottom-aligned, instead of being centered on the input.
-
bottom-align the send button -
bottom-align the lock icon
Account List
-
Add a border to the list -
Limit list length to the number of contacts) -
Make the "add account" button a list row like in the mockup below
For reference: Allan's list styling mockups
After another round of testing, here are a few more things:
Chat title
The avatar and user name should both be centered, rather than just the title, with the avatar on the left. Fractal used to do this for 1-1 chats, so we could probably just do it the same way it was done there.
-
center title and avatar together
Conversation list items
The layout of the conversation list items could be better. I would
-
move the second line down a bit so it looks vertically more balanced -
simplify the timestamp as much as possible (e.g. no seconds, if it's today only show the time) -
use the system's time format settings for the timestamp (e.g. 24 hour vs. AM/PM) -
Don't cut off the second line where the timestamp starts, let it continue below the time. If there's no new messages indicator, it can go all the way to the end of the list -
make the icon in the default avatar smaller by about a third
Message Area
There are double borders around the message area
-
remove double borders, and let the message view go all the way to the edge
Settings/Preferences
-
Rename Settings to Preferences (that's the standard nomenclature in GNOME apps) -
Don't include the XEP number in individual preferences (it's an implementation detail)
New Conversation View
-
use the contact-new
icon instead of the + in the top right -
move the text in the list items down a bit and add more spacing between them (I'd give more explicit guidance but I can't play with them in inspector :/)
New Contact View
-
fix the misaligned animation directions when switching from the "new conversation" view -
pressing the back button should go back to the "new conversation" view, not the main app view -
one of the radio buttons on the account chooser should always be checked (that's how radio buttons are expected to behave) -
the "Alias" label is a bit unclear, I'd replace that with "Name"