Placement of user badges

[CodedOre]

So, since I today have added the flags for a user, we might also want to display them.

The question I have for you, @IBBoard, are:

• Which flags would we want to be displayed as a badge?

If we only want to display if a user is verified, then it would be possible to place it over the avatar, but if we want to display the other states as well (does Cawbird currently displayes a protected user for example?) it might be an idea to do it like twitter and place them after the user name.

[IBBoard]

We currently do verified and protected by painting over the avatar. There seem to be four flags, so we might end up using all four corners. But if we can do something more sensible with positioning (always use the bottom-right corner first, then top-right if they've got two flags set, then bottom-left for three) then that would be good.

[CodedOre]

There seem to be four flags, so we might end up using all four corners.

The PROTECTED and MODERATED ones have similar purpose, I just decided to divide them as Mastodon don't includes "Locking you out of the entire timeline".

[IBBoard]

Three corners seems reasonable, then. Although I doubt there's likely to be many verified bots that are protected/moderated and using three corners 🙂

[CodedOre]

After experimenting a bit, I see an issue with "indicating all flags on the avatar" considering resizing.
We already use the avatar in three different sizes (16px for reposts, 32px for quotes and 48px normally) with an fourth probably coming for the user view. And while for 32px and 48px a badge "works", it is too small to identify on 16px and likely too big for larger sizes.

Apart from that, while experimenting I found it to be difficult with padding, which we would need to add for almost any icon. Since on the avatar it would need to be resizeable as well, we could not just define it inside a css class, but would need to do some widget trickery (the easiest solution would likely to use a Adw.Avatar for each badge).

Thinking about the flags also let me question if we need a badge for PROTECTED.
As far as I can tell the only way to see content from a protected user would be by his page, and then we could display the note where normally the timeline would be. Similar to MODERATED, this would just be a note on the follow button.

Which would leave us with BOT and VERIFIED.
VERIFIED is pretty easy since the icon can be converted to an badge quite well, but for an (probably more complex) icon for a bot we would quickly run into the problem with margins. Apart from the fact that I am not aware of a good bot icon in Gnome Design.

All of this is why I might prefer to just place the two indicators after the name, as Twitter does:

Since our text size is mostly the same, we could just define a static size with well defined padding and place it where needed.

@bertob, since this is a issue where I don't have a clear design idea, would someone of the Gnome Design team have time to give some thoughts?

[IBBoard]

Yeah, it's never going to work at 16×16, but we don't go down that small in the current design and so it hasn't been an issue 🙂

I think it's still good to keep a PROTECTED/MODERATED icon, because it warns you that you won't be able to RT and it is a reminder that you might want to be careful in what you mention of what they post.

After the name may be okay, but I never looked in to putting arbitrary icons in the middle of text. And we need to consider Right-to-Left languages and how it flows for them.

Personally, I think the avatar overlay also has the advantage of being clear and easily distinguished from someone putting icon-like emoji in their display name. If we could pad the images so that there's margin for it to use and it covers less of the avatar then all the better. But then I'm no design expert.

[CodedOre]

After the name may be okay, but I never looked in to putting arbitrary icons in the middle of text. And we need to consider Right-to-Left languages and how it flows for them.

Well, since I now use two separate labels for alias and name, this is not a problem. But still something to keep in mind, as Mastodon allows for custom emojis inside the text, so this might need some consideration later on.

---

Anyway, I now implemented it after the name:

I think it works well this way, but we might need to reconsider the used icons.

[IBBoard]

Yeah, that seems to work. And not obstructing the avatar is probably a good thing :) I think I just had issues with main Cawbird with trying to get the truncation of text to be helpful between the screen name and the handle, so I thought images would only make it worse 🙂

For now, my vote is that the awkward "custom emoji in names" Mastodon accounts get  (the OBJ character) 😁