Star and unstar messages; show starred status #449

sirpengi · 2023-12-13T15:34:42Z

This PR is built on top of #446 .

The alignment of the star marker is currently only ideal for default text (see screenshots at bottom). Unfortunately some markup introduce large margins, so the alignment is not attractive for a message that starts with a header:

Ideally the top margins of messages are collapsed, but that is outside the scope of this PR.

In this PR the star is offset from the top by 4px, which more or less matches visually what the Figma at https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=813%3A28811&mode=dev tries to achieve (the star shape centered with the first line of text), but will need to be readjusted (in addition to the margin fix) when we match the default text style to the guide (we currently use 14px and the mockups use 17).

Fixes: #170

gnprice

Thanks @sirpengi for building this!

This review is for the last three commits:
4d352bb icons: Add star custom icon
85bc0ff msglist: Add star marker in messages
4a6c46b action_sheet: Add button to "star" and "unstar" message
as the rest are in #446.

Generally this looks good. Comments below, mostly small.

gnprice · 2024-01-09T02:49:52Z

assets/icons/star.svg

+<svg
+   width="22"
+   height="22"
+   viewBox="0 0 22 22"


icons: Add star custom icon Taken today from figma: https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=544%3A22131&mode=dev

When I visit that URL… well, first, it seems to be a list of icons and not a specific icon. But when I choose the one star icon I see there, I get an SVG that begins differently and in particular is 24x24:

That 24x24 version differs by having some internal padding; this 22x22 version has the star go all the way to the edge. Also the 24x24 version is hollow, while this one is filled.

Can you spell out in more detail how you got this version?

Alternatively: how did you get to that URL from the design for the screen? The design for the screen that has a starred message (the one I'm looking at that's linked to from #170, anyway) is here:
https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=385%3A12861&mode=dev
and it looks like it uses a different icon file.

The figma is organized into pages with a specific icons page. From my sense of things, it's the canonical list of icons: git log assets/icons shows that the majority of icons are pulled from this page, there's one counterexample that was delivered over CZO.
Because we needed a filled-version over an outlined-version, I put the version from the icons page through inkscape and did a conversion there (using stroke-to-path to expand the outline and then keeping only the outer shape). The metadata in the svg of star.svg betrays that it was output from inkscape, and an existing read_receipts.svg shows that it was also made/altered in inkscape.
I think comparing visually they all appear the same. I don't think the defined size in the svg makes a difference in the icon font (read_receipts.svg has a height/width of 512, and hash_sign.svg has 1024).

Because we needed a filled-version over an outlined-version, I put the version from the icons page through inkscape and did a conversion there (using stroke-to-path to expand the outline and then keeping only the outer shape).

I see. Please definitely include information like that when sending an icon in a PR — that seems like the kind of operation that @terpimost is likely to want to review, or to do himself.

More generally, if you got a thing from a place but then made some changes to it, please don't just say you got it from there and not mention the changes.

When I tried downloading the same icon from the place you said and got a different result, I spent some time (as you see above) spelling out exactly how I got it, because I figured there was a discrepancy we needed to debug between two different ways of getting an icon from Figma. It would have saved me that time to know that the file in the PR wasn't something one could find in Figma at all.

I think comparing visually they all appear the same.

I don't understand this part. What looks the same as what? The icons in that directory are all different from each other, naturally, and you've just described how you made this icon different from the one at the page you linked to.

git log assets/icons shows that the majority of icons are pulled from this page, there's one counterexample that was delivered over CZO.

(Not that it's the main point, but this is not true: try adding --stat to that command and you'll see why. The majority of the icons all come from the first commit there. It looks like I didn't specify this in the commit message, but those icons came from Zulip web.)

Understood about documenting any modifications, I will make sure to do that from now.

I think comparing visually they all appear the same.

What I meant was they all had the same features, rounded corners and a sort of bulged shape, and so appeared to be the same shape when filled (despite the differences in the svg). I've changed it now to source from Zulip web as well, and noted that zulip/zulip#25903 is the original source of the filled version.

gnprice · 2024-01-09T02:57:02Z

lib/widgets/message_list.dart

+                child: message.flags.contains(MessageFlag.starred)
+                  ? Icon(ZulipIcons.star,
+                      size: 16,
+                      color: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor())


Let's pull this out as a static final, so it only gets computed once. E.g. static final _starColor = ….

gnprice · 2024-01-09T02:57:25Z

lib/widgets/message_list.dart

+                  ? Icon(ZulipIcons.star,
+                      size: 16,
+                      color: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor())
+                  : const SizedBox.shrink()),


Suggested change

: const SizedBox.shrink()),

: null),

gnprice · 2024-01-09T02:59:31Z

lib/widgets/message_list.dart

+              SizedBox(width: 16,
+                child: message.flags.contains(MessageFlag.starred)
+                  ? Icon(ZulipIcons.star,
+                      size: 16,


Can we avoid specifying the width twice — what happens in the starred case if we drop the SizedBox?

If that works, then we can drop the outer SizedBox, and just have a SizedBox in the not-starred case.

I wasn't able to sort out a way to not specify the width twice by dropping the SizedBox. To maintain the layout of the gutter in the not-starred case the width would need to be specified in the replacement element.

On further exploration I've found FittedBox which assists in removing the duplication of the width:

SizedBox(width: 16, child: message.flags.contains(MessageFlag.starred) ? FittedBox(child: Icon(ZulipIcons.star, color: _kStarColor)) : null)

OK. My gut reaction to FittedBox is that it sounds complicated — which shouldn't stop us from using it when what we need is to do the job it does, but makes it overkill for a small-scale code deduplication like this. So we can stick with the previous revision's SizedBox approach.

gnprice · 2024-01-09T03:01:11Z

lib/widgets/action_sheet.dart

@@ -44,6 +45,7 @@ void showMessageActionSheet({required BuildContext context, required Message mes
          messageListContext: context,
        ),
        CopyButton(message: message, messageListContext: context),
+        StarButton(message: message, messageListContext: context),


Let's put this just after the thumbs-up reaction option. That's the one that feels most similar; and those two are also the two actions we want to make most prominent. (E.g. they're the two that appear directly on hover in Zulip web, while other actions are inside an overflow menu.)

This was copied from the order of the mobile app. But agree with the improvement and I've made the hange per your suggestion.

gnprice · 2024-01-09T04:16:12Z

lib/widgets/message_list.dart

+                  ])),
+              SizedBox(width: 16,
+                child: message.flags.contains(MessageFlag.starred)
+                  ? Icon(ZulipIcons.star,


This star appears at the top right of the message. In Vlad's design it looks like it's at the bottom right:

I guess I'm not 100% sure that's meant as one message — maybe the idea is that that's two messages, and the star is at the top of the second one. @terpimost, can you confirm which you intended?

Coming off of

from zulip/zulip-mobile#5511 it shows the star is aligned at the top.

Great, sounds good.

Would you post a screenshot from this PR where the text is long enough that it gets near the right edge? That would help in comparing the vertical alignment of the content vs. the star.

gnprice · 2024-01-09T04:20:23Z

lib/widgets/action_sheet.dart

+  @override get onPressed => (BuildContext context) async {
+    Navigator.of(context).pop();
+    String? errorMessage;
+    final op = (message.flags.contains(MessageFlag.starred))


nit: redundant parens

gnprice · 2024-01-09T04:21:06Z

lib/widgets/action_sheet.dart

+        op: op, flag: MessageFlag.starred);
+    } catch (e) {
+      if (!messageListContext.mounted) return;
+      final zulipLocalizations = ZulipLocalizations.of(messageListContext);


nit: move this down next to the showErrorDialog call where it's used

(just before used, or at the top of the function, can both work well for something like this; but here feels like an odd hybrid)

gnprice · 2024-01-09T04:21:43Z

lib/widgets/action_sheet.dart

+          UpdateMessageFlagsOp.add    => zulipLocalizations.errorStarMessageFailedTitle,
+          UpdateMessageFlagsOp.remove => zulipLocalizations.errorUnstarMessageFailedTitle,


nit: match order here with the previous two conditionals between these cases — makes it a bit easier for the reader

gnprice · 2024-01-09T04:28:51Z

test/widgets/action_sheet_test.dart

+      // Locating button by the icon (as other tests here do) is complicated
+      // by the fact that starred messages are decorated with the same icon.
+      // Selecting by button class instead here:
+      await tester.ensureVisible(find.byType(StarButton, skipOffstage: false));
+      await tester.tap(find.byType(StarButton));


Hmm, I see.

I think in my ideal version of this code, StarButton and its siblings would be private — they're part of the internal organization of action_sheet.dart but not part of its interface.

How about looking for the icon, but within the descendants of a BottomSheet? Can use find.descendant. If it's hard to make that work, this version is OK; but I suspect it'll be easy.

sirpengi · 2024-01-11T14:54:56Z

@gnprice ready for review! Changed and documented the source of the filled star icon, and made small adjustments per your comments. The screenshots were updated and I've noted in the PR where the alignment looks unattractive when paired with headers, but I think that is outside the scope of this.

gnprice · 2024-01-11T21:59:20Z

lib/widgets/message_list.dart

  }
 }

+final _kStarColor = const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor();


nit: better would be a static final on the class, as I suggested at #449 (comment) . That way the class helps organize this part of the code too.

gnprice · 2024-01-11T22:03:38Z

lib/widgets/icons.dart

+  /// The Zulip custom icon "star".
+  static const IconData star = IconData(0xf10c, fontFamily: "Zulip Icons");


icons: Add star custom icon This is a filled version of the Feather star icon. Copied from zulip web `web/shared/icons/star-filled.svg` which sourced it from: https://github.com/zulip/zulip/issues/25903

We're implementing a specific design that's intended for mobile. That design includes an icon, which I pointed to here:
#449 (comment)

So we should use the icon from the design we're intending to implement. A similar icon in web might happen to be the same, or it might not — sometimes there are differences because it's a different context.

gnprice · 2024-01-11T22:09:16Z

lib/widgets/action_sheet.dart

+      if (!messageListContext.mounted) return;
+      String? errorMessage;
+
+      switch (e) {


nit: this errorMessage variable doesn't have anything to do with the if-unmounted-return, but is related to the switch because that's what can set it. So it's weird to have it attached to the former and separated from the latter.

Suggested change

if (!messageListContext.mounted) return;

String? errorMessage;

switch (e) {

if (!messageListContext.mounted) return;

String? errorMessage;

switch (e) {

gnprice · 2024-01-11T22:20:49Z

lib/widgets/message_list.dart

+                    // TODO(#157): fix how star marker aligns with message content
+                    // Design from Figma at:
+                    //   https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=813%3A28817&mode=dev .
+                    ? Padding(padding: const EdgeInsets.only(top: 4),
+                        child: FittedBox(child: Icon(ZulipIcons.star, color: _kStarColor)))


In addition to the issue mentioned at the top of the PR description, about headings in the message, it seems like the star is too high even when the message starts with a paragraph.

In your screenshot:

basically the whole top lobe of the star sticks out above the ascenders of the text. But in the image you quoted at #449 (comment) from Vlad's design, the upper tip of the star is pretty much right at the ascender line.

So that would be good to fix.

Made a side by side, left is the app and right is the mockup:

It looks to me that the star is vertically aligned with the text (there's the same-ish space above and below the h) and that's the approach I took to aligning the star with the paragraph.

In the process of making the screenshot I did end up moving the star up 1px so the padding is now top: 3px (I was tweaking the alignment based on the numeral 2 but it seems the h is a little bit taller). It's not perfectly centered but it's much closer than the previous top: 4px.

I think one other reason the star appears to ascend even higher is that our unstyled text is currently 14px (see kbaseFontSize as well as Paragraph in lib/widgets/contents.dart) whereas the mockup has 17px. This change is incoming - I noticed this during my work on #157. There's already a comment in the code noting that we'll need to revisit this alignment when the content styles are updated.

Thanks. Playing with it, the star still feels slighly misaligned to me, and I think a 4px offset (rather than 3px) comes out better.

I think the key to how it looks for me is the shoulders of the star, i.e. the upper sides of the left and right tines — in the current revision those are noticeably higher than the x-height of the text (which is the top of most of the letters), whereas in the mockup it's right in line. Moving it another pixel down fixes that.

gnprice · 2024-01-11T22:22:14Z

lib/widgets/action_sheet.dart

@@ -317,3 +319,51 @@ class CopyButton extends MessageActionSheetMenuItemButton {
      data: ClipboardData(text: rawContent));
  };
 }
+
+class StarButton extends MessageActionSheetMenuItemButton {


Let's put the classes in the same order as the buttons appear in the UI (and in the list up in showMessageActionSheet. That will help when navigating the file.

Also changed the order in the tests to match!

gnprice · 2024-01-11T22:29:51Z

lib/widgets/message_list.dart

+              SizedBox(width: 16,
+                child: message.flags.contains(MessageFlag.starred)
+                  ? Icon(ZulipIcons.star,
+                      size: 16,


OK. My gut reaction to FittedBox is that it sounds complicated — which shouldn't stop us from using it when what we need is to do the job it does, but makes it overkill for a small-scale code deduplication like this. So we can stick with the previous revision's SizedBox approach.

gnprice

Thanks for the revision! Comments above, because GitHub.

sirpengi · 2024-01-16T15:45:20Z

@gnprice ready for review again!

gnprice · 2024-01-23T07:30:17Z

Thanks for the revision! All looks good to me now modulo a small tweak: #449 (comment)

Otherwise this is just pending #446 getting finished and merged.

gnprice · 2024-01-23T07:35:11Z

lib/widgets/icons.dart

@@ -57,14 +57,17 @@ abstract final class ZulipIcons {
  /// The Zulip custom icon "read_receipts".
  static const IconData read_receipts = IconData(0xf10b, fontFamily: "Zulip Icons");

+  /// The Zulip custom icon "star".
+  static const IconData star = IconData(0xf10c, fontFamily: "Zulip Icons");


Oh, one other comment: let's call this icon star_filled. That way it matches the name Vlad gave it in the mockup, and it makes the name more descriptive since we may have an unfilled star in the future.

sirpengi · 2024-01-23T13:40:10Z

@gnprice thanks for the review! comments have been addressed and I noticed there weren't tests for the visibility of the icon in the message so I added those as well.

gnprice · 2024-01-24T00:36:32Z

Cool, thanks. All LGTM now pending #446.

Taken today from Figma: https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=538%3A21700&mode=dev

Fixes: zulip#170

gnprice · 2024-01-25T02:24:14Z

#446 has been merged; rebasing this and merging.

gnprice reviewed Jan 9, 2024

View reviewed changes

sirpengi mentioned this pull request Jan 9, 2024

msglist: Update layout in messages #446

Merged

sirpengi force-pushed the pr-starring-messages branch 3 times, most recently from 2684bae to b9a9774 Compare January 11, 2024 14:51

gnprice reviewed Jan 11, 2024

View reviewed changes

sirpengi force-pushed the pr-starring-messages branch from b9a9774 to ffb814d Compare January 16, 2024 13:55

gnprice reviewed Jan 23, 2024

View reviewed changes

sirpengi force-pushed the pr-starring-messages branch 2 times, most recently from 959c2ad to f5b904c Compare January 23, 2024 13:29

sirpengi added 3 commits January 24, 2024 18:21

icons: Add star_filled custom icon

b1d902d

Taken today from Figma: https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=538%3A21700&mode=dev

msglist: Add star marker in messages

d95b602

action_sheet: Add button to "star" and "unstar" message

fd9e858

Fixes: zulip#170

gnprice force-pushed the pr-starring-messages branch from f5b904c to fd9e858 Compare January 25, 2024 02:24

gnprice merged commit fd9e858 into zulip:main Jan 25, 2024

gnprice mentioned this pull request Apr 3, 2024

Star icon too high on messages #616

Open

		UpdateMessageFlagsOp.add => zulipLocalizations.errorStarMessageFailedTitle,
		UpdateMessageFlagsOp.remove => zulipLocalizations.errorUnstarMessageFailedTitle,

		/// The Zulip custom icon "star".
		static const IconData star = IconData(0xf10c, fontFamily: "Zulip Icons");

Star and unstar messages; show starred status #449

Star and unstar messages; show starred status #449

Conversation

sirpengi commented Dec 13, 2023 • edited

gnprice 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

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

sirpengi Jan 10, 2024 • edited

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

Choose a reason for hiding this comment

sirpengi commented Jan 11, 2024

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

sirpengi Jan 15, 2024 • edited

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 left a comment

Choose a reason for hiding this comment

sirpengi commented Jan 16, 2024

gnprice commented Jan 23, 2024

Choose a reason for hiding this comment

sirpengi commented Jan 23, 2024

gnprice commented Jan 24, 2024

gnprice commented Jan 25, 2024

sirpengi commented Dec 13, 2023 •

edited

sirpengi Jan 10, 2024 •

edited

sirpengi Jan 15, 2024 •

edited