ui: Fix some design deviations in the recent DMs page; migrate to Material Design 3 #380

chrisbobbe · 2023-11-13T05:10:39Z

Doing our planned M3 migration (#225) gives us a convenient pattern that I'm hoping will make it easier to follow the Figma spec in a certain way. Details in the last commit.

Before	After

Fixes: #225

gnprice · 2023-11-13T22:24:39Z

Thanks for taking care of this!

In the message list, it looks like this increases the line-height of all the text in message content. Let's adjust to keep that unchanged.

Everything else LGTM.

chrisbobbe · 2023-11-15T04:13:18Z

In the message list, it looks like this increases the line-height of all the text in message content. Let's adjust to keep that unchanged.

I believe:

In main (with M2), the effective TextStyle.height is null.
In this PR, it's 1.43.

(In Flutter's lib/src/material/typography.dart, see englishLike2014.bodyMedium and _M3Typography.englishLike.bodyMedium.)

Do you know a good way to clobber the 1.43 with null? There's no numeric value (such as 1) that's equivalent to null, it seems, from reading the doc.

gnprice · 2023-11-15T05:11:39Z

Hmm, I guess TextStyle.copyWith doesn't work because there's no way to express "set this to null" — it just looks like "leave this unchanged".

(This is the problem that Drift solves with the Value type, as seen on our AccountsCompanion class.)

Well… these values aren't going to change upstream, unless there's some kind of bug in them. (Based on the pattern to date, they'll keep compatibility and make new names for the next Material version.) So we could just copy them from upstream, and delete that one bit. Ugly and certainly wants a comment saying where the values are copied from, but it'll work.

gnprice · 2023-11-15T05:12:53Z

Alternatively, for any given font there is a numeric value equivalent to null:

When height is null or omitted, the line height will be determined by the font's metrics directly, which may differ from the fontSize.

So since we're using a particular font, we could determine that value and use it.

chrisbobbe · 2023-11-15T15:14:11Z

So since we're using a particular font, we could determine that value and use it.

Hmm yeah, that seems right. We're not yet using a particular font; we have #294 for that. But we plan to.

From looking at the "Computed" tab in the Chrome DevTools element inspector, on CZO at 8.0-dev-2850-gef1c1ce05f. Technically the web app has a computed `line-height` of 16.996px, but that seems like a rounding error. One reason for doing this now is to opt out of a default that would take effect with the upcoming migration to Material 3. The text would otherwise get a line height of 1.43 times the font size, and we want it to be denser than that. We briefly explored how to preserve the line height exactly, across the M3 migration, but the solutions we found seemed more awkward than just taking care of this: zulip#380 (comment) Fixes-partly: zulip#294

Values obtained by looking at the "Computed" tab in the Chrome DevTools element inspector, on CZO at 8.0-dev-2850-gef1c1ce05f. Technically the web app has a computed `line-height` of 16.996px, but that seems like a rounding error. One reason for doing this now is to opt out of a default that would take effect with the upcoming migration to Material 3. The text would otherwise get a line height of 1.43 times the font size, and we want it to be denser than that. We briefly explored how to preserve the line height exactly, across the M3 migration, but the solutions we found seemed more awkward than just taking care of this now: zulip#380 (comment) Fixes-partly: zulip#157 Fixes-partly: zulip#294

chrisbobbe · 2023-11-15T17:25:06Z

Thanks for the review! Revision pushed. I've found a way to make message content at least as dense vertically as before. It's not as minimal a change as you might've had in mind for the M3 migration, but I think it's in the right direction, because it mimics the web app more closely. And it avoids the awkwardnesses of an approach like reciting lots of details from the Typography API. And I couldn't easily find out how to do this:

So since we're using a particular font, we could determine that value […].

Before	After

gnprice · 2023-11-15T21:31:50Z

Cool, that solution SGTM. Would you rebase this onto main?

I kind of think I like that "before" text better than the "after". But we'll see how we feel after using the new for a bit, and in any case that's a discussion to have separately.

I missed this in zulip#249 and made the rows transparent, oops. So they were taking on the scaffold background color, 0xfffafafa a.k.a. ThemeData.canvasColor. (If we were using Material 3, the scaffold background color would be 0xfffefbff a.k.a. ThemeData.colorScheme.background. Neither color is correct for what the Figma actually specifies for the surface underneath this screen's scrollable content. That's 0xfff6f6f6, and we'll start using it soon.) The ink effect on touch was being enabled by the scaffold's underlying Material. To preserve the ink effect, use a Material here instead of e.g. a ColoredBox. See the design in Figma: https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=341%3A12378&mode=dev

Values obtained by looking at the "Computed" tab in the Chrome DevTools element inspector, on CZO at 8.0-dev-2850-gef1c1ce05f. Technically the web app has a computed `line-height` of 16.996px, but that seems like a rounding error. One reason for doing this now is to opt out of a default that would take effect with the upcoming migration to Material 3. The text would otherwise get a line height of 1.43 times the font size, and we want it to be denser than that. We briefly explored how to preserve the line height exactly, across the M3 migration, but the solutions we found seemed more awkward than just taking care of this now: zulip#380 (comment) Fixes-partly: zulip#157 Fixes-partly: zulip#294

This completes the checklist at zulip#225. I tested the screen-reader interface change with VoiceOver on my iPhone. Fixes: zulip#225

From logging, this would otherwise be 0xfffefbff. See the Flutter doc on ColorScheme.background: https://api.flutter.dev/flutter/material/ColorScheme/background.html It simply says: > A color that typically appears behind scrollable content. This change is definitely the boldest we've been in perceiving a pattern in the Figma spec and organizing our code to fit it. We should cheerfully do something else if it turns out to make it harder instead of easier to follow the spec. Prompted by noticing that the surface underneath the scrollable content in RecentDmConversationsPage wasn't colored according to the Figma. And that the Figma's design for the Inbox page (zulip#117) had the same color for the surface underneath *its* scrollable content. This change fixes the RecentDmConversationsPage and makes it easy and natural for the Inbox page to get the right color too.

chrisbobbe · 2023-11-16T04:16:44Z

Would you rebase this onto main?

Sure; done.

gnprice · 2023-11-16T04:36:00Z

Thanks! Looks good; merging.

…ore M3 The way to get the smaller IconButton height we want has changed. After migrating to Material Design 3, in zulip#380, we have to do this different thing. Fixes: zulip#398

chrisbobbe requested a review from gnprice November 13, 2023 05:10

chrisbobbe mentioned this pull request Nov 13, 2023

inbox: Add "Inbox" page! #381

Merged

gnprice mentioned this pull request Nov 13, 2023

Migrate to Material 3 #225

Closed

7 tasks

chrisbobbe force-pushed the pr-m3-and-recent-dms-page-fixes branch from 2e72a32 to 8863fda Compare November 15, 2023 17:14

chrisbobbe force-pushed the pr-m3-and-recent-dms-page-fixes branch from 8863fda to 0ad5005 Compare November 15, 2023 17:20

chrisbobbe added 4 commits November 15, 2023 23:13

ui: Migrate to Material Design 3

2f01c51

This completes the checklist at zulip#225. I tested the screen-reader interface change with VoiceOver on my iPhone. Fixes: zulip#225

chrisbobbe force-pushed the pr-m3-and-recent-dms-page-fixes branch from 0ad5005 to 21dbae1 Compare November 16, 2023 04:16

gnprice merged commit 21dbae1 into zulip:main Nov 16, 2023
1 check passed

chrisbobbe deleted the pr-m3-and-recent-dms-page-fixes branch November 16, 2023 04:36

chrisbobbe mentioned this pull request Nov 20, 2023

compose: Send button got larger than content-input height in Material 3 migration #398

Closed

chrisbobbe mentioned this pull request Nov 20, 2023

compose: Shrink "send" button to match content-input height, like before M3 #399

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ui: Fix some design deviations in the recent DMs page; migrate to Material Design 3 #380

ui: Fix some design deviations in the recent DMs page; migrate to Material Design 3 #380

chrisbobbe commented Nov 13, 2023 •

edited

Loading

gnprice commented Nov 13, 2023

chrisbobbe commented Nov 15, 2023 •

edited

Loading

gnprice commented Nov 15, 2023

gnprice commented Nov 15, 2023

chrisbobbe commented Nov 15, 2023

chrisbobbe commented Nov 15, 2023 •

edited

Loading

gnprice commented Nov 15, 2023

chrisbobbe commented Nov 16, 2023

gnprice commented Nov 16, 2023

ui: Fix some design deviations in the recent DMs page; migrate to Material Design 3 #380

ui: Fix some design deviations in the recent DMs page; migrate to Material Design 3 #380

Conversation

chrisbobbe commented Nov 13, 2023 • edited Loading

gnprice commented Nov 13, 2023

chrisbobbe commented Nov 15, 2023 • edited Loading

gnprice commented Nov 15, 2023

gnprice commented Nov 15, 2023

chrisbobbe commented Nov 15, 2023

chrisbobbe commented Nov 15, 2023 • edited Loading

gnprice commented Nov 15, 2023

chrisbobbe commented Nov 16, 2023

gnprice commented Nov 16, 2023

chrisbobbe commented Nov 13, 2023 •

edited

Loading

chrisbobbe commented Nov 15, 2023 •

edited

Loading

chrisbobbe commented Nov 15, 2023 •

edited

Loading