[Request]: Move @username inline with name

[bertob]

Describe the request

The @username is currently below the name, which makes posts taller than they need to be, creates unnecessary whitespace on the right, and doesn't look great visually. I'd move it up next to the name, like most other clients do.

Elk:

Phanpy:

Ivory:

Implementation Details

• This should be an option in settings.
• This should be only available to some fediverse backends. (Include which ones on the above field).
• This is client-only (and shouldn't sync with the instance).
• This follows the GNOME HIG.

[GeopJr]

Since this will change the layout of the status, it might be better to combine it with #62 as to avoid future revisits:

additional post actions (like Edit or Delete) are in the context menu, it might be better to have them as a button since they are relatively hidden.

• Elk places the button next to the date, but also doesn't display post indicators (visibility, pinned, edited icons)
• Mastodon places it next to the post actions, but doesn't display a dedicated bookmark button. - Mastodon mobile app places it at the top right but doesn't display indicators and the date is next to the handle

[bertob]

I think both the top right and bottom right in the action bar would work layout-wise, semantically I think I have a slight preference for top right.

[GeopJr]

I went with top right!

The main issue with the inline handle is wrapping and spacing. For example the following post:

If the content moves higher, it doesn't leave much space for the button. If the name + handle + indicators + button also move higher, the button will reach the container limits

As for wrapping, elk ellipsizes both the name and the handle (in wide mode / when the handle is inline):

but in narrow mode it places it below the name:

I tried multiple different routes:

Having only the handle ellipsize leads to situations such as this

Having both ellipsize gets (imo) way too much info omitted (especially in narrow mode)

Using flowboxes works but they require additional space below them (plus it might be inconsistent as a status from someone with a short name and handle will be inline but right below it a status from someone with a long one, won't be)

[bertob]

If the content moves higher, it doesn't leave much space for the button. If the name + handle + indicators + button also move higher, the button will reach the container limits

I'd move it up just enough so it doesn't touch the button (maybe 2px margin below the button?). Elk seems to do something similar:

Using flowboxes works but they require additional space below them (plus it might be inconsistent as a status from someone with a short name and handle will be inline but right below it a status from someone with a long one, won't be)

My intuitition would be to try this and see how it feels in practice.

Is there a branch with the current state?

[GeopJr]

Yep: https://github.com/GeopJr/Tuba/tree/feat/status/title-redesign (it uses the flowboxes solution)

[bertob]

Hmmm yeah, the spacing below the header would need to be collapsed when the username is inline, otherwise there's this weird whitespace below.

Also, looking at Elk in comparison I realized that one reason why the vertical spacing looks better there is because they're reducing the height of newlines. We should probably do the same, though I'd maybe go a little bit taller than what they have.

[GeopJr]

The header should now look as expected, but it required the status to migrate from grid to nested boxes and some margins might have been rendered useless. I think I caught everything but if you see anything that doesn't match how it looked before, let me know!

One unfortunate side-effect of that change is that expanding a post is not possible anymore:

before:

after:

If that's a deal-breaker I could try some workarounds.

About the username, it can move higher up if needed:

[bertob]

Where was expanding posts used previously? Doesn't seem like a dealbreaker to me, but maybe I'm missing something.

As for moving the user name up, I'd actually go the other way and move it down a bit more, so the horizontal spacing between the avatar and the name is more similar to the vertical spacing between name and content. Alternatively we could also just increase the horizontal spacing left of the text column, maybe worth trying a few alternatives.

[GeopJr]

The post that opens a thread is expanded:

before:

after:

About the name:

Decreasing the spacing between the name and content:

Increasing the spacing between the avatar and the rest:

Increasing the spacing between the avatar and just the name:

I'm leaning towards increasing the spacing between the avatar and the name + content (the second one)

[bertob]

Interesting, I'd never really paid attention to this, but it looks like most other apps do this expanding thing too. There's a few other differences in how other apps do it though, namely

• Expanded posts have larger body text
• Date/time/other metadata is moved to the bottom to make more space for long names/usernames
• Longer, more detailed format for date/time

I think it'd make sense to have something like that since everyone else does it, but then I'd also make it a bit more distinct from normal posts, with the bigger font size, different metadata layout, etc.

I'm leaning towards increasing the spacing between the avatar and the name + content (the second one)

Agreed!

[GeopJr]

How does this look?

key notes:

When expanded

• Name takes two lines (having a vertically centered name on its own felt a bit too spacious (since the content is now even more lower))
• Font size increased to 16px
• date is now YYYY-MM-DD HH-MM-SS
• indicators moved to the bottom left
• If there's the application that the user used, it also gets displayed

(edit: fixed the spacing at the bottom

)

[bertob]

Looks great, except for a few minor things:

• The name and username are a little bit too far apart vertically, I'd decrease the vertical spacing there by like 3px (but keep them vertically centered on the avatar)
• I'd add 6px of spacing above the date/time metadata line at the bottom
• I'd use a more readable format for the long date, I'd try something like "February 5, 2023 · 18:20"
• Maybe we could spell out the public/private status as a string instead/in addition to the icon?

[GeopJr]

Unsure about the post visibility indicator, there's also the edited indicator

also somewhat better spacing:

FWIW, the indicators already have tooltips:

[bertob]

Hmm yeah, maybe it was better with just an icon, indeed. I think the real issue is maybe that the icon looks so large next to the non-bold text. Maybe we just need smaller variants of these icons, I already noticed this in the context of the icon in the top right. Is there a list of all the icons are we using in this context, so I can draw smaller ones?

Other than that this looks good to me, though I'd add middle dot separators between all the fields, not just between date and time.

[GeopJr]

I don't think you need to re-draw them, we can decrease the pixel-size (either for both normal and expanded mode or just expanded):

16 / normal size

14

otherwise the icons are: tuba-globe-symbolic, tuba-mail-symbolic, tuba-padlock2-open-symbolic, tuba-padlock2-symbolic and document-edit-symbolic

(the ones with the tuba- prefix are located in data/icons/scalable/actions/)

[bertob]

I don't think you need to re-draw them, we can decrease the pixel-size (either for both normal and expanded mode or just expanded):

Well, the problem is that then they're off the pixel grid and look blurry. Maybe for now try and use them at the smaller size, and we can substitute them for hinted ones later.

Also, I noticed that the client name doesn't seem to be dimmed, so it looks odd when it's not a link:

Other than that and the things mentioned above, this looks good to me now.

[GeopJr]

Everything should be done, I still don't know how to feel about the visibility text (especially when the post is also edited):

I'll clean the PR and merge it later, until then there's still time for any final notes if needed!

[bertob]

Everything should be done, I still don't know how to feel about the visibility text (especially when the post is also edited):

As I said, I think with the smaller size icon-only wold be fine here.

[bertob]

Opened a devkit issue to track the small icon thing https://gitlab.gnome.org/Teams/Design/icon-development-kit/-/issues/80