Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lightbox: Added user's avatar in the lightbox app bar #1092

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+30 −19
Open

lightbox: Added user's avatar in the lightbox app bar #1092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 22 additions & 16 deletions lib/widgets/lightbox.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,22 +171,28 @@ class _LightboxPageLayoutState extends State<_LightboxPageLayout> {
backgroundColor: appBarBackgroundColor,
shape: const Border(), // Remove bottom border from [AppBarTheme]
elevation: appBarElevation,

// TODO(#41): Show message author's avatar
title: RichText(
text: TextSpan(children: [
TextSpan(
text: '${widget.message.senderFullName}\n',

// Restate default
style: themeData.textTheme.titleLarge!.copyWith(color: appBarForegroundColor)),
TextSpan(
text: timestampText,

// Make smaller, like a subtitle
style: themeData.textTheme.titleSmall!.copyWith(color: appBarForegroundColor)),
])),
bottom: widget.buildAppBarBottom(context));
title: Row(children: [
Avatar(size: 36, borderRadius: 36 / 8, userId: widget.message.senderId),
const SizedBox(width: 8),
Expanded(
child: RichText(
text: TextSpan(
children: [
TextSpan(
text: '${widget.message.senderFullName}\n',
// Restate default
style: themeData.textTheme.titleLarge!.copyWith(color: appBarForegroundColor)),
TextSpan(
text: timestampText,
// Make smaller, like a subtitle
style: themeData.textTheme.titleSmall!.copyWith(color: appBarForegroundColor)),
])
),
),
],
),
Comment on lines +189 to +193
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Looks like this change expands the parentheses into separate lines. We should fix this.

Suggested change
])
),
),
],
),
]))),
]),

bottom: widget.buildAppBarBottom(context)
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: same issue here

}

Widget? bottomAppBar;
Expand Down
11 changes: 8 additions & 3 deletions test/widgets/lightbox_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,14 +236,19 @@ void main() {
debugNetworkImageHttpClientProvider = null;
});

testWidgets('app bar shows sender name and date', (tester) async {
testWidgets('app bar shows sender avatar, name and date', (tester) async {
prepareBoringImageHttpClient();
final timestamp = DateTime.parse("2024-07-23 23:12:24").millisecondsSinceEpoch ~/ 1000;
final message = eg.streamMessage(sender: eg.otherUser, timestamp: timestamp);
await setupPage(tester, message: message, thumbnailUrl: null);

// We're looking for a RichText, in the app bar, with both the
// sender's name and the timestamp.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: the comment was specifically for explaining what RichText was used for. Let's leave it as-is

// Check Avatar properties
final avatar = tester.widget<Avatar>(find.byType(Avatar));
check(avatar.size).equals(36);
check(avatar.borderRadius).equals(36 / 8);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The design properties like size and borderRadius are usually verified during reviews. We typically don't need test for these because it only captures a limited scope of bugs and becomes another place to update if the design spec changes.

check(avatar.userId).equals(message.senderId);

// Check sender name and timestamp
final labelTextWidget = tester.widget<RichText>(
find.descendant(of: find.byType(AppBar).last,
matching: find.textContaining(findRichText: true,
Expand Down