41 show user avatar #155

aanelson · 2023-06-07T04:10:58Z

Got basic avatar functionality. Also checked in something to disable auto formatting with vscode. It still occasionally doesn't work and formats the whole file.

Was writing test to verify the close behavior, but was blocked by #30.

Used ClipOval instead of CircleAvatar as that takes an ImageProvider instead of a widget and there is currently nothing setup to generate it with the headers.

gnprice

Thanks @aanelson! Looking forward to getting this in. A few comments below.

One overall comment that applies to several spots below is that in the Zulip project, we make a practice of keeping a clean commit history: each Git commit does a single thing and does it in a self-contained way. More discussion here:
https://zulip.readthedocs.io/en/latest/contributing/commit-discipline.html

So in particular that means that

we'll want the edits to the avatar computation and the actions property in the latter two commits to get squashed into the same commit that makes the other main changes;
we'll want other, unrelated, changes to get separated out into their own commits.

Relatedly, we have a preferred style for commit messages that helps us scan the history for release management and debugging. For examples, see git log in the repo.

gnprice · 2023-06-07T04:37:49Z

.vscode/settings.json

+    "editor.formatOnSave": false,
+    "[dart]": {
+        "editor.formatOnSave": false


This is helpful, thanks!

It should go in its own commit, as I mention above. A good summary line for that commit would be
vscode: Disable format-on-save

ios/Podfile.lock

gnprice · 2023-06-07T04:42:51Z

pubspec.lock

-      sha256: "6501fbd55da300384b768785b83e5ce66991266cec21af89ab9ae7f5ce1c4cbb"
+      sha256: "1803e76e6653768d64ed8ff2e1e67bea3ad4b923eb5c56a295c3e634bad5960e"
      url: "https://pub.dev"
    source: hosted
-    version: "0.12.15"
+    version: "0.12.16"


Yeah, sorry for the noise in this file; I believe #151 will cover this update. (And #85 tracks the fact that these happen spontaneously in the first place; #15 is how we plan to fix it.)

Like other unrelated changes, this should go in its own commit. I'll probably leave that commit out when merging (in favor of letting #151 cover it), but having it in the branch should be helpful for you because it means the file won't get the same spontaneous edit again.

gnprice · 2023-06-07T04:48:48Z

lib/widgets/lightbox.dart

      return FadeTransition(
-        opacity: animation.drive(CurveTween(curve: Curves.easeIn)),
-        child: child);
+          opacity: animation.drive(CurveTween(curve: Curves.easeIn)),
+          child: child);


We use consistent two-space indentation, so we won't want this change. Similarly the return _LightboxPage( change above.

Since you're still occasionally getting unintended auto-formatting, if it's helpful for you to include a separate commit that just applies the auto-formatting to this file, then I'd be fine with that as a workaround for this PR; I'll just leave that commit out when merging.

I'd definitely be interested in debugging that persistent VS Code auto-formatting you're seeing, though. (Both Chris and I use Android Studio in our Flutter codebase, so it's not something we've run into directly.)

gnprice · 2023-06-07T05:01:26Z

lib/widgets/lightbox.dart

+      final avatar = avatarUrl != null
+          ? Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: ClipOval(


So this causes the avatar to get clipped to a circle.

That's a reasonable design choice in general, but in Zulip we've made a design choice that avatars are squares with only slightly-rounded corners, not circles. The general rationale for that is discussed in this thread; but for any given context like this one, I think the strongest reason is just that it's important to be consistent with users' expectations for how Zulip shows their avatars, which are shaped by how they see Zulip show avatars in other contexts.

Let's therefore clip this with the same shape we use in the other place we currently show avatars, for the sender in the message list.

gnprice · 2023-06-07T20:01:54Z

Was writing test to verify the close behavior, but was blocked by #30.

Mmm, yeah, that makes sense. This is a good reminder that we should go ahead and take care of that; I've just bumped it up our priority list.

aanelson · 2023-06-08T03:39:54Z

@gnprice Updated. I don't know of a way to keep the comments in the correct location when updating the commits so that will be broke, but I have addressed the issues.

gnprice

Thanks @aanelson for the revision! I appreciate the cleanly separated commits.

Comments below on the code, and some observations from playing with this version on a device.

gnprice · 2023-06-08T22:10:25Z

lib/widgets/lightbox.dart

+              width: 35,
+              height: 35,
+              decoration: const BoxDecoration(
+              borderRadius: BorderRadius.all(Radius.circular(4))),


Hmm, when trying out this PR, something seems off about the rounding on the corners. Here's from an iPhone 13 Pro:

It looks like the clipped-off parts of the corners are taller than they are wide, at each of the four corners.

gnprice · 2023-06-08T22:33:59Z

lib/widgets/lightbox.dart

+              width: 35,
+              height: 35,


It doesn't seem like this is actually ending up 35px tall or wide; it's bigger than that. I think what's happening is that the AppBar hands down tight size constraints to its leading child, and so those constraints prevail.

The size it's actually getting is fine; the sender avatars in the message list are 35px, but there's no reason these need to be the same size. We should leave out these lines given that they aren't actually having an effect.

gnprice · 2023-06-08T22:42:30Z

lib/widgets/lightbox.dart

+              height: 35,
+              decoration: const BoxDecoration(
+              borderRadius: BorderRadius.all(Radius.circular(4))),
+              child: RealmContentNetworkImage(avatarUrl),


In the other place where we show avatars, we use filterQuality: FilterQuality.medium. Is there a specific reason to use a different filterQuality here?

gnprice · 2023-06-08T22:59:35Z

lib/widgets/lightbox.dart

+
+      final avatar = avatarUrl != null
+        ? Padding(
+            padding: const EdgeInsets.fromLTRB(8.0,4,0,0),


It seems like this is ending up with a very thin strip of padding between the bottom of the image and the bottom of the app bar, which comes out looking kind of odd:

I think putting at least 4px of padding at the bottom too makes it look significantly better.

Is there a particular reason for putting 8px at the left but 4px at the top? I think the top-left and bottom-left corners may look better if the top, left, and bottom padding are all equal. (The right is less visible because there isn't a visual boundary there.)

gnprice · 2023-06-09T03:49:06Z

.vscode/settings.json

+{
+    "editor.tabSize": 2,
+    "editor.formatOnSave": false,
+    "dart.enableSdkFormatter": false,


Ah, I just spotted that your new revision added this line. Did this turn out to be the solution to this problem you mentioned above?

[…] checked in something to disable auto formatting with vscode. It still occasionally doesn't work and formats the whole file.

If so, that's good to hear!

gnprice · 2023-06-09T03:51:10Z

.vscode/settings.json

+    "[dart]": {
+        "editor.formatOnSave": false,
+        "editor.tabSize": 2,


These look like they're restating some of the settings that already appear globally above. Is there an additional effect that's had by restating them for the specific language?

gnprice reviewed Jun 7, 2023

View reviewed changes

aanelson added 3 commits June 7, 2023 17:31

vscode: updated project settings.

cef392a

dev: updated podfile.lock

f61b0cc

style: Updated format to match dart/flutter style

30f7abe

aanelson force-pushed the 41-show-user-avatar branch from 162263d to 968aca8 Compare June 8, 2023 03:17

lightbox: added avatar image to top app bar

04832ef

aanelson force-pushed the 41-show-user-avatar branch from 968aca8 to 04832ef Compare June 8, 2023 03:37

gnprice reviewed Jun 9, 2023

View reviewed changes

aanelson closed this Jun 9, 2023

aanelson deleted the 41-show-user-avatar branch June 9, 2023 05:44

gnprice mentioned this pull request Jul 19, 2023

Disable vscode autoformatting #229

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

41 show user avatar #155

41 show user avatar #155

aanelson commented Jun 7, 2023

gnprice left a comment

gnprice Jun 7, 2023

gnprice Jun 7, 2023

gnprice Jun 7, 2023

gnprice Jun 7, 2023

gnprice commented Jun 7, 2023

aanelson commented Jun 8, 2023

gnprice left a comment

gnprice Jun 8, 2023

gnprice Jun 8, 2023

gnprice Jun 8, 2023

gnprice Jun 8, 2023

gnprice Jun 9, 2023

gnprice Jun 9, 2023

41 show user avatar #155

41 show user avatar #155

Conversation

aanelson commented Jun 7, 2023

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

gnprice commented Jun 7, 2023

aanelson commented Jun 8, 2023

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