Design improvements & issues in ListItem

[jancborchardt]

Based on the Mail app, here are some proposed design improvements and issues in AppContentListItem:

• There is no whitespace left and right of the element. E.g. 4px whitespace would make it look much better, like we do for the updated AppNavigation: Use large border-radius in AppNavigation #2571 (comment)
• For improved focus, we could always bold the main text, in this case the sender. Then we could also put the subline in color-main-text, and only bold the subline on unread. (The unread bubble indicator is also there like in Talk, so that is plenty indication.)

@marcoambrosini @GretaD what do you think?

→ Issues specific to Mail filed at nextcloud/mail#6901

[jancborchardt]

Ref also nextcloud/mail#6079 by @nimishavijay which has a complete mockup of it.

[marcoambrosini]

Whitespace: I'd refrain from adding margin to these components, given that they can be used in different contexts and might require fine tuning in the white space around them. I'd add some padding left and right to the parent component instead (AppNavigation or AppContentList), since we don't want anything at all to touch those edges anyway.

Focus behaviour: changing the font weight on focus will result in words jumping around and being ellipsized at different lengths depending on the focus state. I think we should implement something similar to the button component instead:

Screen.Recording.2022-07-18.at.15.43.36.mov

Another comment here for the groupware team since this is assigned to them. You can see that the content of the list item is not vertically centred with its background, I suspect you're populating the slot for the tags with something even when there are no tags.

[nimishavijay]

For improved focus, we could always bold the main text, in this case the sender.

Bolding is used as a read/unread indicator in some apps, so should take that into consideration.
Agreed about the whitespace ✓

[jancborchardt]

I'd add some padding left and right to the parent component instead (AppNavigation or AppContentList), since we don't want anything at all to touch those edges anyway.

Sounds good to me! :)

Bolding is used as a read/unread indicator in some apps, so should take that into consideration.

Yup, which is why I noted: "and only bold the subline on unread. (The unread bubble indicator is also there like in Talk, so that is plenty indication.)" :)

@marcoambrosini I am not saying to bold the text of the focused item – you are right then it would jump. I’m saying to always bold the main line (the sender in Mail, the conversation title in Talk, the name in Contacts):

Current	Title line bold: Way more focus, easier to scan

[marcoambrosini]

oh ok, sgtm too then :)

[jancborchardt]

These points have been fixed meanwhile! :)