Move time ago and score to a flowrow layout #1615

dessalines · 2024-08-07T01:42:47Z

A few reasons for doing this:

The SpaceBetween / SpaceAround layouts aren't going to work well when we start adding larging screen size support.
Reading through material design docs, the title should always be on top, with attribution and extra subtitles below.
Made the community icon on post listings smaller to look better.

What it looks like now:

Comes after #1614

- Adding a fade to the post body preview. - Getting rid of muted, using colorScheme.outlined instead. - Making label-type text use label rather than body style. - Getting rid of some unecessary surface and onSurface colors. - Fixes #1608

- Also separating time from score component. - Using a start-based flowrow, for better responsiveness. - Re-organizing PostCard / PostListingCard

dessalines · 2024-08-09T15:50:48Z

I've been using this for a few days, and I'm liking it a lot.

dessalines · 2024-08-09T17:35:55Z

app/src/main/java/com/jerboa/ui/components/post/PostListing.kt

I split the card and list into different files, and this is now the generic one.

dessalines · 2024-08-09T17:37:12Z

app/src/main/java/com/jerboa/ui/components/comment/reply/CommentReply.kt

@@ -286,3 +286,28 @@ fun PostReply(
        )
    }
 }
+
+@Composable
+fun PostNodeHeader(


Moved this as its only used here.

dessalines · 2024-08-09T17:38:05Z

app/src/main/java/com/jerboa/ui/components/common/AppBars.kt

-                isDistinguished = isDistinguished,
-                isCommunityBanned = isCommunityBanned,
-                showAvatar = showAvatar,
+        val centerMod = Modifier.align(Alignment.CenterVertically)


This centerMod is necessary on FlowRows unfortunately. I wish it could do some cross-axis alignment, but it doesn't seem to work.

MV-GH · 2024-08-09T20:15:56Z

app/src/main/java/com/jerboa/ui/components/reports/PostReportItem.kt

                fullBody = false,
            )
        }

        //  Title + metadata
        PostBody(
-            post = postView.post,
-            read = postView.read,
+            postView = postView,


These were all "optimizations"

Any field that changes in postView will cause it recompose instead only if the relevant field changed

Erps, my bad, I'll go through and fix some of these.

Actually I'm not sure if its worth it. A lot of these use like 5+ fields from PostView, and if that's the case, it just seems like we should pass in the full thing anyway.

IE, is there any field on PostView that changes frequently enough to justify separating these out? I don't think there is, as instantScores is the main one, but that's separated.

MV-GH · 2024-08-09T21:11:02Z

I am honestly not such a fan of it. Maybe its worth here using a post view mode for the old view.

With current layout, it "forces" you to read community + votes each time. If you go like vertical: title -> content, you see the community + votes then the content.

it also seems to be behaving weirdly? With the community + user at the bottom? Or is that intended because I don't like that at all

vs old

Much better at using the "screen real estate", takes up less vertical space

Can directly see title -> content, want to see, user/community votes look up

dessalines · 2024-08-09T21:23:08Z

The community line below the image post is a weirdness I couldn't figure out a great way around.

Part of the problem is that the title block wraps the post subtitle in a single row, but the community info is below that block. You can test this by looking at any link-type post (or going to small card mode to force images into a smaller thumbnail). Or look above, see how the bbc.com is to the left of the thumbnail, not below it like the community attribution line?

I could move the community info into that title block, or move the post subtitle below that title block. Both options aren't ideal, because they end up with wasted screen real estate, but I'll mess around with them.

A few possibilities I could use your input on:

I'm open to moving the community line above the post subtitle, or moving the subtitle out of that title block.
I'm open to any variation of ordering the hostname, vote score, and time ago. As long as its a left-starting flow layout.
I'm open to removing the hostname, although I do think its pretty useful to see that.

The main 2 things I want to keep are:

The smaller community / attribution line, below the title (as per material design standards)
Using left-aligned flowrows.

MV-GH · 2024-08-09T21:28:21Z

The smaller community / attribution line, below the title (as per material design standards)

Is that really? If i look up sample M3 apps, they don't follow that at all.

Title -> content. Meta data around it

MV-GH · 2024-08-09T22:03:05Z

moved

dessalines · 2024-08-09T22:09:39Z

Title -> content. Meta data around it

Good point. I'll also try to go back to replicating Boost a little:

Could you copy-paste your PostViewMode comment to a new issue? I have some thoughts on that but it'd be better to put them on its own issue.

dessalines · 2024-08-09T23:05:09Z

Does this look okay?

MV-GH · 2024-08-09T23:12:47Z

This looks better.

But personally I would like title directly against content. Have time top right and votes in bottom bar?

dessalines · 2024-08-10T16:37:16Z

I'll give that a try.

dessalines · 2024-08-10T19:34:12Z

Okay, I've moved the time into the header, and the score and voting back into the action bar. Here are some examples:

Showing full info (not the default setting obvi):

Some voting examples:

- Moving time into the header bar, right aligned. - Moving scores back to the action bar.

dessalines · 2024-08-10T20:14:34Z

K this is ready to be looked at again.

MV-GH · 2024-08-10T20:15:11Z

Great stuff

I believe we show the full title of the community? Maybe its better to just use the shorter "name"? And use the title in the opened post, where we have more space to work with?

Interesting behaviour

If its easier for you, it would definitely be okay with time being part of the flow row there. And it thus not always being in the top right.

dessalines · 2024-08-10T20:50:04Z

It uses the shorter name only if its local. In lemmy-ui (and I think here?) we used to conditionally not show the @instance.tld based on various circumstances, but it just got too confusing and unpredictable. ppl like to instantly know if its a federated community or user.

I tried messing around with a few non-flow layouts there, but it always ends up looking strange. So ya I'd say lets just go with this for now.

If you'd like to mess around with it, its PostListingCard.kt L669 and L675

MV-GH · 2024-08-10T21:08:33Z

It uses the shorter name only if its local.

With that I meant using name instead of title

Yeah sure. I have been testing this out and images sometimes "jump". Have you noticed that?

dessalines · 2024-08-10T21:18:07Z

With that I meant using name instead of title

Hrm... we should pry just always prefer the display name if it exists, and I'd rather not more context-dependent rules around it. The reflow stuff is only an issue for people using the display name improperly, as a long description.

I have been testing this out and images sometimes "jump". Have you noticed that?

Yup... I didn't change anything related to images, and I'm convinced its a bug from one of the recent coil dep updates.

dessalines · 2024-08-13T17:54:57Z

@MV-GH lmk when you can get to reviewing these 2 PRs, I'd like to do a release this week, as I'll be away from a computer next week.

MV-GH · 2024-08-13T18:00:38Z

Yeah sure.

MV-GH

I haven't really tested. But I ll run master after this locally and see if anything pops up.

dessalines · 2024-08-13T18:48:37Z

Cool.

dessalines added 2 commits August 6, 2024 15:28

Some material 3 cleanups.

733df97

- Adding a fade to the post body preview. - Getting rid of muted, using colorScheme.outlined instead. - Making label-type text use label rather than body style. - Getting rid of some unecessary surface and onSurface colors. - Fixes #1608

Moving post attribution to below title.

0bf14fa

- Also separating time from score component. - Using a start-based flowrow, for better responsiveness. - Re-organizing PostCard / PostListingCard

Merge branch 'main' into move_time_ago_and_score

5dadc16

dessalines marked this pull request as ready for review August 9, 2024 17:35

dessalines requested a review from MV-GH as a code owner August 9, 2024 17:35

dessalines commented Aug 9, 2024

View reviewed changes

MV-GH reviewed Aug 9, 2024

View reviewed changes

dessalines marked this pull request as draft August 9, 2024 21:23

Re-arranging time and scores.

c1c8343

- Moving time into the header bar, right aligned. - Moving scores back to the action bar.

dessalines marked this pull request as ready for review August 10, 2024 20:14

Fixing comment node header align.

68778f9

dessalines added 2 commits August 10, 2024 18:23

Fixing hide vote scores.

be8ab81

Merge remote-tracking branch 'origin/main' into move_time_ago_and_score

4f27431

dessalines added 2 commits August 12, 2024 14:00

Fixing post report item.

aaae70b

Make post report name clickable

0baed31

dessalines requested a review from MV-GH August 13, 2024 17:54

MV-GH approved these changes Aug 13, 2024

View reviewed changes

dessalines merged commit b6269b3 into main Aug 13, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move time ago and score to a flowrow layout #1615

Move time ago and score to a flowrow layout #1615

dessalines commented Aug 7, 2024 •

edited

Loading

dessalines commented Aug 9, 2024

dessalines Aug 9, 2024 •

edited

Loading

dessalines Aug 9, 2024

dessalines Aug 9, 2024 •

edited

Loading

MV-GH Aug 9, 2024

MV-GH Aug 9, 2024

dessalines Aug 9, 2024

dessalines Aug 9, 2024

MV-GH commented Aug 9, 2024

dessalines commented Aug 9, 2024 •

edited

Loading

MV-GH commented Aug 9, 2024

MV-GH commented Aug 9, 2024 •

edited

Loading

dessalines commented Aug 9, 2024

dessalines commented Aug 9, 2024

MV-GH commented Aug 9, 2024

dessalines commented Aug 10, 2024

dessalines commented Aug 10, 2024 •

edited

Loading

dessalines commented Aug 10, 2024

MV-GH commented Aug 10, 2024

dessalines commented Aug 10, 2024 •

edited

Loading

MV-GH commented Aug 10, 2024

dessalines commented Aug 10, 2024 •

edited

Loading

dessalines commented Aug 13, 2024 •

edited

Loading

MV-GH commented Aug 13, 2024

MV-GH left a comment

dessalines commented Aug 13, 2024

Move time ago and score to a flowrow layout #1615

Move time ago and score to a flowrow layout #1615

Conversation

dessalines commented Aug 7, 2024 • edited Loading

dessalines commented Aug 9, 2024

dessalines Aug 9, 2024 • edited Loading

Choose a reason for hiding this comment

dessalines Aug 9, 2024

Choose a reason for hiding this comment

dessalines Aug 9, 2024 • edited Loading

Choose a reason for hiding this comment

MV-GH Aug 9, 2024

Choose a reason for hiding this comment

MV-GH Aug 9, 2024

Choose a reason for hiding this comment

dessalines Aug 9, 2024

Choose a reason for hiding this comment

dessalines Aug 9, 2024

Choose a reason for hiding this comment

MV-GH commented Aug 9, 2024

dessalines commented Aug 9, 2024 • edited Loading

MV-GH commented Aug 9, 2024

MV-GH commented Aug 9, 2024 • edited Loading

dessalines commented Aug 9, 2024

dessalines commented Aug 9, 2024

MV-GH commented Aug 9, 2024

dessalines commented Aug 10, 2024

dessalines commented Aug 10, 2024 • edited Loading

dessalines commented Aug 10, 2024

MV-GH commented Aug 10, 2024

dessalines commented Aug 10, 2024 • edited Loading

MV-GH commented Aug 10, 2024

dessalines commented Aug 10, 2024 • edited Loading

dessalines commented Aug 13, 2024 • edited Loading

MV-GH commented Aug 13, 2024

MV-GH left a comment

Choose a reason for hiding this comment

dessalines commented Aug 13, 2024

dessalines commented Aug 7, 2024 •

edited

Loading

dessalines Aug 9, 2024 •

edited

Loading

dessalines Aug 9, 2024 •

edited

Loading

dessalines commented Aug 9, 2024 •

edited

Loading

MV-GH commented Aug 9, 2024 •

edited

Loading

dessalines commented Aug 10, 2024 •

edited

Loading

dessalines commented Aug 10, 2024 •

edited

Loading

dessalines commented Aug 10, 2024 •

edited

Loading

dessalines commented Aug 13, 2024 •

edited

Loading