Skip to content

Commit 9dc98ee

Browse files
PIG208PIG208
committed
nav: Add bottom tabs and main menu
This is an initial implementation because some features were considered out-of-scope as of now for zulip#1035. Compared to the Figma, we swapped the order of _ChannelsButton and _DirectMessagesButton in the menu so they match their order on the navigation bar. See: https://chat.zulip.org/#narrow/channel/48-mobile/topic/Buttons.20on.20the.20bottom.20tabs.20and.20main.20menu We also added _CombinedFeedButton, using the same icon we have for "Combined feed" on the web app's topleft sidebar, added a "Switch account" button, and renamed "Streams" to "Channels". For now, we do not aim to fully implement the app bar redesign; we keep a simple one in this implementation. We maintain a 16px padding for the title text on the app bar for both ChooseAccountPage (when it is at the root navigation level) and HomePage (which is expected to be at the root level all the time). We allow user to navigate to the choose-account page from the loading screen after a certain timeout. This is helpful when loading the account data takes a while, and that the user, for example, wants to try another account. See: zulip#1076 (comment) Signed-off-by: Zixuan James Li <[email protected]>
1 parent efacfa0 commit 9dc98ee

14 files changed

+1233
-92
lines changed

‎assets/l10n/app_en.arb

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,19 @@
1919
"@chooseAccountPageTitle": {
2020
"description": "Title for the page to choose between Zulip accounts."
2121
},
22+
"switchAccountButton": "Switch account",
23+
"@switchAccountButton": {
24+
"description": "Label for main-menu button leading to the choose-account page."
25+
},
26+
"tryAnotherAccountMessage": "Your account at {url} is taking a while to load.",
27+
"@tryAnotherAccountMessage": {
28+
"description": "Message that appears on the loading screen after waiting for some time.",
29+
"url": {"type": "String", "example": "http://chat.example.com/"}
30+
},
31+
"tryAnotherAccountButton": "Try another account",
32+
"@tryAnotherAccountButton": {
33+
"description": "Label for loading screen button prompting user to try another account."
34+
},
2235
"chooseAccountPageLogOutButton": "Log out",
2336
"@chooseAccountPageLogOutButton": {
2437
"description": "Label for the 'Log out' button for an account on the choose-account page"
@@ -529,6 +542,10 @@
529542
"@userRoleUnknown": {
530543
"description": "Label for UserRole.unknown"
531544
},
545+
"inboxPageTitle": "Inbox",
546+
"@inboxPageTitle": {
547+
"description": "Title for the page with unreads."
548+
},
532549
"recentDmConversationsPageTitle": "Direct messages",
533550
"@recentDmConversationsPageTitle": {
534551
"description": "Title for the page with a list of DM conversations."
@@ -545,6 +562,14 @@
545562
"@starredMessagesPageTitle": {
546563
"description": "Page title for the 'Starred messages' message view."
547564
},
565+
"channelsPageTitle": "Channels",
566+
"@channelsPageTitle": {
567+
"description": "Title for the page with a list of subscribed channels."
568+
},
569+
"mainMenuMyProfile": "My profile",
570+
"@mainMenuMyProfile": {
571+
"description": "Label for main-menu button leading to the user's own profile."
572+
},
548573
"channelFeedButtonTooltip": "Channel feed",
549574
"@channelFeedButtonTooltip": {
550575
"description": "Tooltip for button to navigate to a given channel's feed"

‎lib/generated/l10n/zulip_localizations.dart

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,24 @@ abstract class ZulipLocalizations {
127127
/// **'Choose account'**
128128
String get chooseAccountPageTitle;
129129

130+
/// Label for main-menu button leading to the choose-account page.
131+
///
132+
/// In en, this message translates to:
133+
/// **'Switch account'**
134+
String get switchAccountButton;
135+
136+
/// Message that appears on the loading screen after waiting for some time.
137+
///
138+
/// In en, this message translates to:
139+
/// **'Your account at {url} is taking a while to load.'**
140+
String tryAnotherAccountMessage(Object url);
141+
142+
/// Label for loading screen button prompting user to try another account.
143+
///
144+
/// In en, this message translates to:
145+
/// **'Try another account'**
146+
String get tryAnotherAccountButton;
147+
130148
/// Label for the 'Log out' button for an account on the choose-account page
131149
///
132150
/// In en, this message translates to:
@@ -799,6 +817,12 @@ abstract class ZulipLocalizations {
799817
/// **'Unknown'**
800818
String get userRoleUnknown;
801819

820+
/// Title for the page with unreads.
821+
///
822+
/// In en, this message translates to:
823+
/// **'Inbox'**
824+
String get inboxPageTitle;
825+
802826
/// Title for the page with a list of DM conversations.
803827
///
804828
/// In en, this message translates to:
@@ -823,6 +847,18 @@ abstract class ZulipLocalizations {
823847
/// **'Starred messages'**
824848
String get starredMessagesPageTitle;
825849

850+
/// Title for the page with a list of subscribed channels.
851+
///
852+
/// In en, this message translates to:
853+
/// **'Channels'**
854+
String get channelsPageTitle;
855+
856+
/// Label for main-menu button leading to the user's own profile.
857+
///
858+
/// In en, this message translates to:
859+
/// **'My profile'**
860+
String get mainMenuMyProfile;
861+
826862
/// Tooltip for button to navigate to a given channel's feed
827863
///
828864
/// In en, this message translates to:

‎lib/generated/l10n/zulip_localizations_ar.dart

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,17 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
2323
@override
2424
String get chooseAccountPageTitle => 'Choose account';
2525

26+
@override
27+
String get switchAccountButton => 'Switch account';
28+
29+
@override
30+
String tryAnotherAccountMessage(Object url) {
31+
return 'Your account at $url is taking a while to load.';
32+
}
33+
34+
@override
35+
String get tryAnotherAccountButton => 'Try another account';
36+
2637
@override
2738
String get chooseAccountPageLogOutButton => 'Log out';
2839

@@ -419,6 +430,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
419430
@override
420431
String get userRoleUnknown => 'Unknown';
421432

433+
@override
434+
String get inboxPageTitle => 'Inbox';
435+
422436
@override
423437
String get recentDmConversationsPageTitle => 'Direct messages';
424438

@@ -431,6 +445,12 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
431445
@override
432446
String get starredMessagesPageTitle => 'Starred messages';
433447

448+
@override
449+
String get channelsPageTitle => 'Channels';
450+
451+
@override
452+
String get mainMenuMyProfile => 'My profile';
453+
434454
@override
435455
String get channelFeedButtonTooltip => 'Channel feed';
436456

‎lib/generated/l10n/zulip_localizations_en.dart

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,17 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
2323
@override
2424
String get chooseAccountPageTitle => 'Choose account';
2525

26+
@override
27+
String get switchAccountButton => 'Switch account';
28+
29+
@override
30+
String tryAnotherAccountMessage(Object url) {
31+
return 'Your account at $url is taking a while to load.';
32+
}
33+
34+
@override
35+
String get tryAnotherAccountButton => 'Try another account';
36+
2637
@override
2738
String get chooseAccountPageLogOutButton => 'Log out';
2839

@@ -419,6 +430,9 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
419430
@override
420431
String get userRoleUnknown => 'Unknown';
421432

433+
@override
434+
String get inboxPageTitle => 'Inbox';
435+
422436
@override
423437
String get recentDmConversationsPageTitle => 'Direct messages';
424438

@@ -431,6 +445,12 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
431445
@override
432446
String get starredMessagesPageTitle => 'Starred messages';
433447

448+
@override
449+
String get channelsPageTitle => 'Channels';
450+
451+
@override
452+
String get mainMenuMyProfile => 'My profile';
453+
434454
@override
435455
String get channelFeedButtonTooltip => 'Channel feed';
436456

‎lib/generated/l10n/zulip_localizations_ja.dart

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,17 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
2323
@override
2424
String get chooseAccountPageTitle => 'アカウントを選択';
2525

26+
@override
27+
String get switchAccountButton => 'Switch account';
28+
29+
@override
30+
String tryAnotherAccountMessage(Object url) {
31+
return 'Your account at $url is taking a while to load.';
32+
}
33+
34+
@override
35+
String get tryAnotherAccountButton => 'Try another account';
36+
2637
@override
2738
String get chooseAccountPageLogOutButton => 'Log out';
2839

@@ -419,6 +430,9 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
419430
@override
420431
String get userRoleUnknown => '不明';
421432

433+
@override
434+
String get inboxPageTitle => 'Inbox';
435+
422436
@override
423437
String get recentDmConversationsPageTitle => 'Direct messages';
424438

@@ -431,6 +445,12 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
431445
@override
432446
String get starredMessagesPageTitle => 'Starred messages';
433447

448+
@override
449+
String get channelsPageTitle => 'Channels';
450+
451+
@override
452+
String get mainMenuMyProfile => 'My profile';
453+
434454
@override
435455
String get channelFeedButtonTooltip => 'Channel feed';
436456

‎lib/widgets/app.dart

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import 'about_zulip.dart';
1313
import 'actions.dart';
1414
import 'dialog.dart';
1515
import 'home.dart';
16-
import 'inbox.dart';
1716
import 'login.dart';
1817
import 'page.dart';
1918
import 'store.dart';
@@ -209,11 +208,10 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
209208

210209
onGenerateInitialRoutes: (_) {
211210
return [
212-
MaterialWidgetRoute(page: const ChooseAccountPage()),
213-
if (initialAccountId != null) ...[
211+
if (initialAccountId == null)
212+
MaterialWidgetRoute(page: const ChooseAccountPage())
213+
else
214214
HomePage.buildRoute(accountId: initialAccountId),
215-
InboxPage.buildRoute(accountId: initialAccountId),
216-
],
217215
];
218216
});
219217
}));
@@ -271,8 +269,7 @@ class ChooseAccountPage extends StatelessWidget {
271269
// The default trailing padding with M3 is 24px. Decrease by 12 because
272270
// IconButton (the "…" button) comes with 12px padding on all sides.
273271
contentPadding: const EdgeInsetsDirectional.only(start: 16, end: 12),
274-
onTap: () => Navigator.push(context,
275-
HomePage.buildRoute(accountId: accountId))));
272+
onTap: () => HomePage.navigate(context, accountId: accountId)));
276273
}
277274

278275
@override
@@ -281,13 +278,20 @@ class ChooseAccountPage extends StatelessWidget {
281278
final zulipLocalizations = ZulipLocalizations.of(context);
282279
assert(!PerAccountStoreWidget.debugExistsOf(context));
283280
final globalStore = GlobalStoreWidget.of(context);
281+
282+
// Borrowed from [AppBar.build].
283+
// See documentation on [ModalRoute.impliesAppBarDismissal]:
284+
// > Whether an [AppBar] in the route should automatically add a back button or
285+
// > close button.
286+
final hasBackButton = ModalRoute.of(context)?.impliesAppBarDismissal ?? false;
287+
284288
return MenuButtonTheme(
285289
data: MenuButtonThemeData(style: MenuItemButton.styleFrom(
286290
backgroundColor: colorScheme.secondaryContainer,
287291
foregroundColor: colorScheme.onSecondaryContainer)),
288292
child: Scaffold(
289293
appBar: AppBar(
290-
titleSpacing: 16,
294+
titleSpacing: hasBackButton ? null : 16,
291295
title: Text(zulipLocalizations.chooseAccountPageTitle),
292296
actions: const [ChooseAccountPageOverflowButton()]),
293297
body: SafeArea(

0 commit comments

Comments
 (0)