icons: Add a custom icon font #219

gnprice · 2023-07-17T19:35:32Z

Fixes #200.

Also show stream privacy icons in the message-list app bar, as a demo of using the custom icons. I'll file a separate issue for doing so in the recipient headers; we'll also use them as part of implementing #156 and various other features.

chrisbobbe

Thanks! Small comments below.

chrisbobbe · 2023-07-18T21:29:19Z

lib/widgets/message_list.dart

-        final streamName = store.streams[streamId]?.name ?? '(unknown stream)';
-        return Text("#$streamName"); // TODO show stream privacy icon
+        final stream = store.streams[streamId];
+        final streamName = stream?.name ?? '(unknown stream)';
+        return _buildStreamRow(stream, streamName);

      case TopicNarrow(:var streamId, :var topic):
        final store = PerAccountStoreWidget.of(context);
-        final streamName = store.streams[streamId]?.name ?? '(unknown stream)';
-        return Text("#$streamName > $topic"); // TODO show stream privacy icon; format on two lines
+        final stream = store.streams[streamId];
+        final streamName = stream?.name ?? '(unknown stream)';
+        return _buildStreamRow(stream, "$streamName > $topic");


msglist: Show stream privacy icon in app bar

As discussed in the office just now, for stream and topic narrows, I notice on iOS that title part of the app bar is now start-aligned rather than centered; it seems we've lost the default behavior that should come from omitting centerTitle. It probably makes sense to keep it centered on iOS.

Hmm yeah, thanks for catching that. Will fix.

chrisbobbe · 2023-07-18T21:34:30Z

lib/widgets/message_list.dart

+        Text(text),
+      ]);
+  }
+
  @override
  Widget build(BuildContext context) {
    switch (narrow) {


The web app, in the heading of the views corresponding to AllMessagesNarrow and DmNarrow, these icons are used, respectively:

We could also use those.

In fact, I think the web app might have an icon for all possible message lists? Here are some others:

We don't support all message-list types that the web app does, but that might be helpful for choosing how to structure the code.

Interesting, yeah.

It looks like at least some of those are FontAwesome icons, not Zulip custom icons. Here's what I see for "All messages":
<i class="fa fa-align-left" aria-hidden="true"></i>
So I think that's out of scope for this PR; I'll make a separate issue for bringing in FontAwesome icons. I might leave a blank space for it, though.

gnprice · 2023-08-01T17:37:40Z

Updated! PTAL.

chrisbobbe

Thanks for the review! Comments below.

chrisbobbe · 2023-08-01T18:53:31Z

lib/widgets/message_list.dart

+      textBaseline: TextBaseline.alphabetic,
+      children: [
+        Padding(
+          // TODO(design): The vertical alignment of the stream privacy icon is ad hoc and eyeballed.


It does look a little high to me:

Using CrossAxisAlignment.center and removing the 4dp bottom padding is an improvement, to my eye; what do you think:

One thing I notice (with help from "show baselines" in the DevTools), if sticking with baseline: the icon's baseline always seems to be its bottom edge, regardless of any vertical padding. So, adjusting the 4dp bottom padding to be big or small doesn't actually change how the icon is aligned with the text. Those adjustments just change the height of the title part, which AppBar centers vertically, so the effect is just to move the icon and text up or down, together. Here's with 40dp bottom padding instead of 4:

With that being the case, probably it makes sense to remove that bottom padding even if staying with the baseline alignment.

One thing I notice (with help from "show baselines" in the DevTools), if sticking with baseline: the icon's baseline always seems to be its bottom edge, regardless of any vertical padding. So, adjusting the 4dp bottom padding to be big or small doesn't actually change how the icon is aligned with the text.

Huh, good catch. I must have added the padding, then switched to baseline alignment, then not checked if the padding was still needed.

Using CrossAxisAlignment.center and removing the 4dp bottom padding is an improvement, to my eye; what do you think:

Right, so that's the default. Here's what that looks like for me:

The icon sticks out much more below the text than above it. The difference from your test is presumably that I have my system font size set to small.

If I increase my system font-size setting to the default, it's better but still seems slightly below center visually. I think it's the same as your second screenshot above. Or here it is (still with center alignment) when the text starts with "f" instead of "i":

That feels low — both the top and bottom of the icon are below the top and bottom respectively of the "f".

Here's that same screen with baseline alignment:

So I think baseline alignment works out better there than center, even at default font size.

(Going further up the scale, if I crank the font size up to large, I actually get the same results with either center or baseline alignment:

and they seem pretty OK.)

chrisbobbe · 2023-08-01T18:54:57Z

lib/widgets/message_list.dart

+          padding: const EdgeInsets.only(bottom: 4),
+          child: Icon(size: 16, icon)),
+        const SizedBox(width: 8),
+        Text(text),


Hmm, I'm getting some test failures, and also related-looking feedback in the debug UI:

Before After

I think this would be a fix:

--- lib/widgets/message_list.dart +++ lib/widgets/message_list.dart @@ -88,7 +88,7 @@ class MessageListAppBarTitle extends StatelessWidget { padding: const EdgeInsets.only(bottom: 4), child: Icon(size: 16, icon)), const SizedBox(width: 8), - Text(text), + Expanded(child: Text(text)), ]); }

…Oh, hmm, but that would defeat the centering we talked about in #219 (comment). Hmm.

Hmm, good catch! It looks like those tests were introduced in #223 — so they weren't there when I initially wrote this, and I hadn't rerun flutter test since rebasing the branch.

(Also I guess I rarely encounter this in manual testing because I keep my font size set to small. Even the topic in your screenshot above fits without overflow, though just barely.)

Looks like the solution is to use Flexible instead of Expanded.

(I got there from the docs on that mainAxisSize property which I used to solve the previous issue; it had a warning effectively about how it can be defeated by an Expanded widget, but the warning also points to a way out.)

Fixes: zulip#200

This serves as a demo of our custom icon font zulip#200.

gnprice · 2023-08-01T20:30:34Z

Thanks for the careful review! Updated.

chrisbobbe · 2023-08-01T22:07:34Z

Thanks! Merged.

This was referenced Jul 17, 2023

Show stream privacy icons in recipient headers #220

Closed

Build an asset font for custom icons #200

Closed

chrisbobbe reviewed Jul 18, 2023

View reviewed changes

gnprice mentioned this pull request Jul 18, 2023

Add Font Awesome icons #222

Closed

gnprice force-pushed the pr-icons branch from 1738b33 to ecac60e Compare August 1, 2023 17:37

chrisbobbe reviewed Aug 1, 2023

View reviewed changes

gnprice added 2 commits August 1, 2023 13:30

icons: Add a custom icon font

4070cea

Fixes: zulip#200

msglist: Show stream privacy icon in app bar

7c77e93

This serves as a demo of our custom icon font zulip#200.

gnprice force-pushed the pr-icons branch from ecac60e to 7c77e93 Compare August 1, 2023 20:30

chrisbobbe merged commit 7c77e93 into zulip:main Aug 1, 2023

gnprice deleted the pr-icons branch August 1, 2023 23:34

gnprice mentioned this pull request Aug 4, 2023

RecentDmConversationsPage: Add #249

Merged

chrisbobbe mentioned this pull request Jun 14, 2024

theme: Add ThemeExtension for Figma design variables; add/use two more variables in AppBar #734

Merged

Dhanesh-Sawant mentioned this pull request Nov 9, 2024

"Whole channel" button from topic narrows #1040

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

icons: Add a custom icon font #219

icons: Add a custom icon font #219

gnprice commented Jul 17, 2023

chrisbobbe left a comment

chrisbobbe Jul 18, 2023

gnprice Jul 18, 2023

chrisbobbe Jul 18, 2023

gnprice Jul 18, 2023

gnprice Jul 18, 2023

gnprice commented Aug 1, 2023

chrisbobbe left a comment

chrisbobbe Aug 1, 2023 •

edited

Loading

gnprice Aug 1, 2023

chrisbobbe Aug 1, 2023

chrisbobbe Aug 1, 2023

gnprice Aug 1, 2023

gnprice Aug 1, 2023

gnprice Aug 1, 2023

gnprice commented Aug 1, 2023

chrisbobbe commented Aug 1, 2023

icons: Add a custom icon font #219

icons: Add a custom icon font #219

Conversation

gnprice commented Jul 17, 2023

chrisbobbe left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gnprice commented Aug 1, 2023

chrisbobbe left a comment

Choose a reason for hiding this comment

chrisbobbe Aug 1, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gnprice commented Aug 1, 2023

chrisbobbe commented Aug 1, 2023

chrisbobbe Aug 1, 2023 •

edited

Loading