Rezise single line list items

[AndyScherzinger]

follow-up for #2940 (comment)

Old	Current	New

[jancborchardt]

Copying over from Talk:

I’d go with the last one, but with 2 changes:

• The padding to the right is more than top/bottom, especially visible on the 2-line items. That can be reduced to match top/bottom.
• Even though the last one generally has better spacing, I would still go with unified size for notes with only title. Title-only notes are pretty rare (I’d say), so they shouldn’t look out of place.

[kra-mo]

Title-only notes are pretty rare (I’d say), so they shouldn’t look out of place.

Good point, makes sense.

Just make sure that the right/bottom padding is the exact same as tags look odd otherwise.

And if the size is unified anyway, there is no need to move tags to the left of the date for title-only notes, just keep them below the date as well. Maybe even keep the title top-aligned to then match with the date and better communicate that the note is empty.

TL;DR I’d keep the exact same layout for title-only notes.

[kra-mo]

Ok, the problem I suspected might happen is happening. Empty notes look a bit too… empty right now. Would it be possible to display a placeholder in this case? Just something like "No content". Or if you want to keep it looking somewhat empty, a simple dash (-).

I like the compact layout more, but it's just a tiny bit too tight. Is a value between regular and compact possible? If not, I'd probably go with regular.

Other than these, looks nice overall.

[jancborchardt]

Agree with @kra-mo on the whitespace comment (compact is a bit too tight).

Regarding the emptiness of empty notes, could we vertically center the title of those? That’s commonly done with those classic 2-line elements when there’s no subline.

[AndyScherzinger]

@kra-mo @jancborchardt I changed there padding to 12dpso between the very dense 8dp and the less compact 16dp. See below the 3 variants I did for dash and "no content" also in italic (could also discuss to use a different font color (some grey-ish tone) for no content.

12dp	12dp dash	12dp no content	12dp no content italic	12dp unified

[AndyScherzinger]

@jancborchardt also added a 12dp unified version

[kra-mo]

could we vertically center the title of those?

I mean that's what was done previously, but it made it less easy to parse to my eyes.

@AndyScherzinger iirc we avoid italics for a11y reasons. I think the non-italic "No content" one works well enough here :)

[kra-mo]

@jancborchardt also added a 12dp unified version

Yeah, that shifts the layout around too much I feel.

[jancborchardt]

I mean that's what was done previously, but it made it less easy to parse to my eyes.

@kra-mo in practice, I have 0 notes of my 130 which are empty. I’d be curious if having a bunch of empty notes is even something that happens often.

But even if: As said we do the same in our normal components that we use e.g. in Contacts, and it looks much cleaner. Also it gives an implicit indicator about "this is empty" rather than an explicit "No content" text.

@AndyScherzinger one point on the 12dp unified: Is it possible to only vertically align the title, but keep the date and tag 2 lines on the right?

[AndyScherzinger]

I am fine with any, just need to know which so we can have it merged. The unified still would need some adjustments, to have things properly aligned (headline start position) and generally the section headers.

So whatever variant gets chosen I'll fix these aspects upfront before merging of course 👍

[kra-mo]

@kra-mo in practice, I have 0 notes of my 130 which are empty. I’d be curious if having a bunch of empty notes is even something that happens often.

I mean sure? But that just sounds more like "this question does not matter". At least I don't see how this validates one approach over another.

But even if: As said we do the same in our normal components that we use e.g. in Contacts, and it looks much cleaner. Also it gives an implicit indicator about "this is empty" rather than an explicit "No content" text.

My main problem with centering is it very much makes it look like a different type of item, which it is not. We shouldn't forget that this is a smaller representation — a preview — of an existing, actual note, whose layout the centering does not mirror: It goes from top to bottom.

In the case of Contacts for example, it is a different representation, one with less info, rather than an extract which ellipsizes.

I think Mail would be a much better comparison here as instead of fields and different data points, they both have arbitrarily long text which needs to be trimmed. There, when there is no subject, there is a placeholder "No subject" label as well.

[AndyScherzinger]

Here is the version @jancborchardt suggests with the right-side meta data being aligned the way it is done on a 2-line item

[jancborchardt]

I think Mail would be a much better comparison here as instead of fields and different data points, they both have arbitrarily long text which needs to be trimmed. There, when there is no subject, there is a placeholder "No subject" label as well.

Good point @kra-mo – let’s go with 12dp "No content" then. :)

[AndyScherzinger]

@kra-mo @jancborchardt please re-review, I updated the screenshots in the issue description to reflect the code change, as discussed, see #2944 (comment)

@alperozturk96 for technical review (I also did some cleanup for the dimensions and added an editorconfig)

[github-actions]

APK file: https://www.kaminsky.me/nc-dev/android-artifacts/2944.apk



To test this change/fix you can simply download above APK file and install and test it in parallel to your existing Nextcloud app.

fixed