Skip to content

Commit efe3893

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 1e30038 commit efe3893

15 files changed

+1226
-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": "You 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://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+
/// **'You 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 'You 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 'You 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 'You 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: 10 additions & 11 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
}));
@@ -229,7 +227,6 @@ class ChooseAccountPage extends StatelessWidget {
229227
required Widget title,
230228
Widget? subtitle,
231229
}) {
232-
final colorScheme = ColorScheme.of(context);
233230
final designVariables = DesignVariables.of(context);
234231
final zulipLocalizations = ZulipLocalizations.of(context);
235232
final materialLocalizations = MaterialLocalizations.of(context);
@@ -238,8 +235,6 @@ class ChooseAccountPage extends StatelessWidget {
238235
child: ListTile(
239236
title: title,
240237
subtitle: subtitle,
241-
tileColor: colorScheme.secondaryContainer,
242-
textColor: colorScheme.onSecondaryContainer,
243238
trailing: MenuAnchor(
244239
menuChildren: [
245240
MenuItemButton(
@@ -271,8 +266,7 @@ class ChooseAccountPage extends StatelessWidget {
271266
// The default trailing padding with M3 is 24px. Decrease by 12 because
272267
// IconButton (the "…" button) comes with 12px padding on all sides.
273268
contentPadding: const EdgeInsetsDirectional.only(start: 16, end: 12),
274-
onTap: () => Navigator.push(context,
275-
HomePage.buildRoute(accountId: accountId))));
269+
onTap: () => HomePage.navigate(context, accountId: accountId)));
276270
}
277271

278272
@override
@@ -281,13 +275,18 @@ class ChooseAccountPage extends StatelessWidget {
281275
final zulipLocalizations = ZulipLocalizations.of(context);
282276
assert(!PerAccountStoreWidget.debugExistsOf(context));
283277
final globalStore = GlobalStoreWidget.of(context);
278+
// Borrowed from [AppBar.build].
279+
// See documentation on [ModalRoute.impliesAppBarDismissal]:
280+
/// > Whether an [AppBar] in the route should automatically add a back button or
281+
/// > close button.
282+
final hasBackButton = ModalRoute.of(context)?.impliesAppBarDismissal ?? false;
284283
return MenuButtonTheme(
285284
data: MenuButtonThemeData(style: MenuItemButton.styleFrom(
286285
backgroundColor: colorScheme.secondaryContainer,
287286
foregroundColor: colorScheme.onSecondaryContainer)),
288287
child: Scaffold(
289288
appBar: AppBar(
290-
titleSpacing: 16,
289+
titleSpacing: hasBackButton ? null : 16,
291290
title: Text(zulipLocalizations.chooseAccountPageTitle),
292291
actions: const [ChooseAccountPageOverflowButton()]),
293292
body: SafeArea(

0 commit comments

Comments
 (0)