Show current organization's name and logo atop main menu #1937
Conversation
These values are populated in the `account` from `InitialSnapshot` during `UpdateMachine.load` but before `PerAccountStore` is created. So, these values should never be null when we have the `PerAccountStore`.
rajveermalviya
added
the
maintainer review
|
Hm, looking at this now, I don't like the "Organizations" button there. It's not immediately apparent what organizations it's referring to/why. Where does it go? The account switcher? |
Correct in the current revision it goes to the account switcher button, also the Figma design doesn't have a separate "Switch account" button in the main menu. |
|
Can you just click on the org name itself to switch accounts? |
|
(If we're moving the account switching action to this new top line, we'll want to remove the "switch account" option in the same PR.) |
| String? get realmName => account.realmName; | ||
|
|
||
| Uri? get realmIcon => account.realmIcon; | ||
| // The `account` is populated with the `realmName` before | ||
| // PerAccountStore is created, so this should never be null. | ||
| // See `UpdateMachine.load`. | ||
| String get realmName => account.realmName!; | ||
|
|
||
| // The `account` is populated with the `realmIcon` before | ||
| // PerAccountStore is created, so this should never be null. | ||
| // See `UpdateMachine.load`. | ||
| Uri get realmIcon => account.realmIcon!; |
There was a problem hiding this comment.
store: Make realmName and realmIcon getters non-null
Commit-message nit: "non-nullable", right? Also the commit message repeats reasoning that's already clear from added code comments, so we can remove it from the commit message.
| testWidgets('_AboutZulipButton', (tester) async { | ||
| tester.view.physicalSize = Size(1080, 1920); | ||
| prepareBoringImageHttpClient(); | ||
| await prepare(tester); | ||
| await tapOpenMenuAndAwait(tester); | ||
| await tapButtonAndAwaitTransition(tester, find.byIcon(ZulipIcons.info)); | ||
| check(find.byType(AboutZulipPage)).findsOne(); | ||
| debugNetworkImageHttpClientProvider = null; | ||
| }); |
There was a problem hiding this comment.
Rather than thinking through what's accomplished with the numbers 1080 and 1920 and whether they're correct, I'd rather just scroll until the button is in view:
testWidgets('_AboutZulipButton', (tester) async {
prepareBoringImageHttpClient();
await prepare(tester);
await tapOpenMenuAndAwait(tester);
await tester.ensureVisible(find.byIcon(ZulipIcons.info));
await tapButtonAndAwaitTransition(tester, find.byIcon(ZulipIcons.info));
check(find.byType(AboutZulipPage)).findsOne();
debugNetworkImageHttpClientProvider = null;
});That's simpler and more transparent, and also adds some coverage of the scrolling logic; it seems like a win-win :)
| final designVariables = DesignVariables.of(context); | ||
| final store = PerAccountStoreWidget.of(context); | ||
|
|
||
| final realmIconUrl = store.tryResolveUrl(store.realmIcon.toString()); |
There was a problem hiding this comment.
Most of this line seems like code we'd rather not need to recite whenever we need the realm icon—should be possible to encapsulate it in PerAccountStore (maybe even Account?) where we have access to the realm URL.
| padding: const EdgeInsets.only(top: 6), | ||
| child: Row(children: [ | ||
| Expanded(child: Padding( | ||
| padding: const EdgeInsets.fromLTRB(12, 6, 4, 6), |
There was a problem hiding this comment.
Use EdgeInsetsDirectional.fromSTEB here, for RTL support.
| MaterialWidgetRoute(page: const ChooseAccountPage())); | ||
| }, | ||
| style: TextButton.styleFrom( | ||
| padding: const EdgeInsets.fromLTRB(8, 7, 14, 7), |
There was a problem hiding this comment.
(Same comment about EdgeInsetsDirectional.fromSTEB.)
| ? RealmContentNetworkImage(realmIconUrl) | ||
| : const SizedBox.shrink()), |
There was a problem hiding this comment.
When the icon URL doesn't parse for whatever reason, and also when it does but the network request fails, how about we show an empty rounded square colored by DesignVariables.avatarPlaceholderBg? Maybe we could have a reusable RealmIconImage widget that takes care of that, much like AvatarImage takes care of choosing a placeholder (which it'll do in more cases with #1558).
| /// The main-menu sheet. | ||
| /// | ||
| /// Figma link: | ||
| /// https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=11367-20647&t=lSnHudU6l7NWx0Fa-0 |
There was a problem hiding this comment.
This URL is taking me to the "Read receipts" sheet; do you reproduce? (Could be a Figma issue)
| backgroundColor: Colors.transparent, | ||
| overlayColor: Colors.transparent, | ||
| splashFactory: NoSplash.splashFactory, | ||
| shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), |
There was a problem hiding this comment.
This border radius shouldn't make a difference, with a transparent background/overlay/etc., right? I see it in the Figma, but it looks accidental there, too; I think we can leave it out without comment.
3 participants
Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=2940-48987&p=f&m=dev
Fixes: #1037