From 329626adcf2469607ca838d178ccbc910b05d193 Mon Sep 17 00:00:00 2001 From: MritunjayTiwari14 Date: Sat, 18 Oct 2025 12:07:58 +0530 Subject: [PATCH 1/7] l10n: Add text label for dm, feed and menu icons in home bottom nav bar --- assets/l10n/app_en.arb | 12 ++++++++++++ lib/generated/l10n/zulip_localizations.dart | 18 ++++++++++++++++++ lib/generated/l10n/zulip_localizations_ar.dart | 9 +++++++++ lib/generated/l10n/zulip_localizations_de.dart | 9 +++++++++ lib/generated/l10n/zulip_localizations_en.dart | 9 +++++++++ lib/generated/l10n/zulip_localizations_fr.dart | 9 +++++++++ lib/generated/l10n/zulip_localizations_it.dart | 9 +++++++++ lib/generated/l10n/zulip_localizations_ja.dart | 9 +++++++++ lib/generated/l10n/zulip_localizations_nb.dart | 9 +++++++++ lib/generated/l10n/zulip_localizations_pl.dart | 9 +++++++++ lib/generated/l10n/zulip_localizations_ru.dart | 9 +++++++++ lib/generated/l10n/zulip_localizations_sk.dart | 9 +++++++++ lib/generated/l10n/zulip_localizations_sl.dart | 9 +++++++++ lib/generated/l10n/zulip_localizations_uk.dart | 9 +++++++++ lib/generated/l10n/zulip_localizations_zh.dart | 9 +++++++++ 15 files changed, 147 insertions(+) diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb index 1f52ac32ba..f60d8bdef0 100644 --- a/assets/l10n/app_en.arb +++ b/assets/l10n/app_en.arb @@ -1247,6 +1247,18 @@ "@wildcardMentionTopicDescription": { "description": "Description for \"@topic\" wildcard-mention autocomplete options when writing a channel message." }, + "navBarFeedLabel": "Feed", + "@navBarFeedLabel": { + "description": "Label for the Feed button on the bottom navigation bar." + }, + "navBarDmLabel": "DMs", + "@navBarDmLabel": { + "description": "Label for the Direct Messages button on the bottom navigation bar." + }, + "navBarMenuLabel": "Menu", + "@navBarMenuLabel": { + "description": "Label for the Menu button on the bottom navigation bar." + }, "messageIsEditedLabel": "EDITED", "@messageIsEditedLabel": { "description": "Label for an edited message. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)" diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart index d1d40b2010..3dc3a40b38 100644 --- a/lib/generated/l10n/zulip_localizations.dart +++ b/lib/generated/l10n/zulip_localizations.dart @@ -1815,6 +1815,24 @@ abstract class ZulipLocalizations { /// **'Notify topic'** String get wildcardMentionTopicDescription; + /// Label for the Feed button on the bottom navigation bar. + /// + /// In en, this message translates to: + /// **'Feed'** + String get navBarFeedLabel; + + /// Label for the Direct Messages button on the bottom navigation bar. + /// + /// In en, this message translates to: + /// **'DMs'** + String get navBarDmLabel; + + /// Label for the Menu button on the bottom navigation bar. + /// + /// In en, this message translates to: + /// **'Menu'** + String get navBarMenuLabel; + /// Label for an edited message. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.) /// /// In en, this message translates to: diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart index 1a292881ec..2afd085eb7 100644 --- a/lib/generated/l10n/zulip_localizations_ar.dart +++ b/lib/generated/l10n/zulip_localizations_ar.dart @@ -1041,6 +1041,15 @@ class ZulipLocalizationsAr extends ZulipLocalizations { @override String get wildcardMentionTopicDescription => 'إخطار الموضوع'; + @override + String get navBarFeedLabel => 'Feed'; + + @override + String get navBarDmLabel => 'DMs'; + + @override + String get navBarMenuLabel => 'Menu'; + @override String get messageIsEditedLabel => 'EDITED'; diff --git a/lib/generated/l10n/zulip_localizations_de.dart b/lib/generated/l10n/zulip_localizations_de.dart index 83cc660772..71469189aa 100644 --- a/lib/generated/l10n/zulip_localizations_de.dart +++ b/lib/generated/l10n/zulip_localizations_de.dart @@ -1064,6 +1064,15 @@ class ZulipLocalizationsDe extends ZulipLocalizations { @override String get wildcardMentionTopicDescription => 'Thema benachrichtigen'; + @override + String get navBarFeedLabel => 'Feed'; + + @override + String get navBarDmLabel => 'DMs'; + + @override + String get navBarMenuLabel => 'Menu'; + @override String get messageIsEditedLabel => 'BEARBEITET'; diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart index 80c1c2c475..d2fbaf93e3 100644 --- a/lib/generated/l10n/zulip_localizations_en.dart +++ b/lib/generated/l10n/zulip_localizations_en.dart @@ -1041,6 +1041,15 @@ class ZulipLocalizationsEn extends ZulipLocalizations { @override String get wildcardMentionTopicDescription => 'Notify topic'; + @override + String get navBarFeedLabel => 'Feed'; + + @override + String get navBarDmLabel => 'DMs'; + + @override + String get navBarMenuLabel => 'Menu'; + @override String get messageIsEditedLabel => 'EDITED'; diff --git a/lib/generated/l10n/zulip_localizations_fr.dart b/lib/generated/l10n/zulip_localizations_fr.dart index 7572aa5d3f..d181b8d4ee 100644 --- a/lib/generated/l10n/zulip_localizations_fr.dart +++ b/lib/generated/l10n/zulip_localizations_fr.dart @@ -1055,6 +1055,15 @@ class ZulipLocalizationsFr extends ZulipLocalizations { @override String get wildcardMentionTopicDescription => 'Notify topic'; + @override + String get navBarFeedLabel => 'Feed'; + + @override + String get navBarDmLabel => 'DMs'; + + @override + String get navBarMenuLabel => 'Menu'; + @override String get messageIsEditedLabel => 'EDITED'; diff --git a/lib/generated/l10n/zulip_localizations_it.dart b/lib/generated/l10n/zulip_localizations_it.dart index e42ef1f08e..6523a68246 100644 --- a/lib/generated/l10n/zulip_localizations_it.dart +++ b/lib/generated/l10n/zulip_localizations_it.dart @@ -1056,6 +1056,15 @@ class ZulipLocalizationsIt extends ZulipLocalizations { @override String get wildcardMentionTopicDescription => 'Notifica argomento'; + @override + String get navBarFeedLabel => 'Feed'; + + @override + String get navBarDmLabel => 'DMs'; + + @override + String get navBarMenuLabel => 'Menu'; + @override String get messageIsEditedLabel => 'MODIFICATO'; diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart index eae3a0c3eb..37274e4516 100644 --- a/lib/generated/l10n/zulip_localizations_ja.dart +++ b/lib/generated/l10n/zulip_localizations_ja.dart @@ -1020,6 +1020,15 @@ class ZulipLocalizationsJa extends ZulipLocalizations { @override String get wildcardMentionTopicDescription => 'トピック参加者に通知'; + @override + String get navBarFeedLabel => 'Feed'; + + @override + String get navBarDmLabel => 'DMs'; + + @override + String get navBarMenuLabel => 'Menu'; + @override String get messageIsEditedLabel => '編集済み'; diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart index cc2c5e1852..1c532a58af 100644 --- a/lib/generated/l10n/zulip_localizations_nb.dart +++ b/lib/generated/l10n/zulip_localizations_nb.dart @@ -1041,6 +1041,15 @@ class ZulipLocalizationsNb extends ZulipLocalizations { @override String get wildcardMentionTopicDescription => 'Notify topic'; + @override + String get navBarFeedLabel => 'Feed'; + + @override + String get navBarDmLabel => 'DMs'; + + @override + String get navBarMenuLabel => 'Menu'; + @override String get messageIsEditedLabel => 'EDITED'; diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart index c7c14cf77e..674e355c43 100644 --- a/lib/generated/l10n/zulip_localizations_pl.dart +++ b/lib/generated/l10n/zulip_localizations_pl.dart @@ -1056,6 +1056,15 @@ class ZulipLocalizationsPl extends ZulipLocalizations { @override String get wildcardMentionTopicDescription => 'Powiadom w wątku'; + @override + String get navBarFeedLabel => 'Feed'; + + @override + String get navBarDmLabel => 'DMs'; + + @override + String get navBarMenuLabel => 'Menu'; + @override String get messageIsEditedLabel => 'ZMIENIONO'; diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart index ae8ce816c4..5e3911a582 100644 --- a/lib/generated/l10n/zulip_localizations_ru.dart +++ b/lib/generated/l10n/zulip_localizations_ru.dart @@ -1068,6 +1068,15 @@ class ZulipLocalizationsRu extends ZulipLocalizations { @override String get wildcardMentionTopicDescription => 'Оповестить тему'; + @override + String get navBarFeedLabel => 'Feed'; + + @override + String get navBarDmLabel => 'DMs'; + + @override + String get navBarMenuLabel => 'Menu'; + @override String get messageIsEditedLabel => 'ИЗМЕНЕНО'; diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart index ca321e40a6..4c152a89d4 100644 --- a/lib/generated/l10n/zulip_localizations_sk.dart +++ b/lib/generated/l10n/zulip_localizations_sk.dart @@ -1043,6 +1043,15 @@ class ZulipLocalizationsSk extends ZulipLocalizations { @override String get wildcardMentionTopicDescription => 'Notify topic'; + @override + String get navBarFeedLabel => 'Feed'; + + @override + String get navBarDmLabel => 'DMs'; + + @override + String get navBarMenuLabel => 'Menu'; + @override String get messageIsEditedLabel => 'UPRAVENÉ'; diff --git a/lib/generated/l10n/zulip_localizations_sl.dart b/lib/generated/l10n/zulip_localizations_sl.dart index 3e72b30aac..b6027a45ff 100644 --- a/lib/generated/l10n/zulip_localizations_sl.dart +++ b/lib/generated/l10n/zulip_localizations_sl.dart @@ -1078,6 +1078,15 @@ class ZulipLocalizationsSl extends ZulipLocalizations { @override String get wildcardMentionTopicDescription => 'Obvesti udeležence teme'; + @override + String get navBarFeedLabel => 'Feed'; + + @override + String get navBarDmLabel => 'DMs'; + + @override + String get navBarMenuLabel => 'Menu'; + @override String get messageIsEditedLabel => 'UREJENO'; diff --git a/lib/generated/l10n/zulip_localizations_uk.dart b/lib/generated/l10n/zulip_localizations_uk.dart index 993cb65cdb..2fa96ee17f 100644 --- a/lib/generated/l10n/zulip_localizations_uk.dart +++ b/lib/generated/l10n/zulip_localizations_uk.dart @@ -1057,6 +1057,15 @@ class ZulipLocalizationsUk extends ZulipLocalizations { @override String get wildcardMentionTopicDescription => 'Повідомити канал'; + @override + String get navBarFeedLabel => 'Feed'; + + @override + String get navBarDmLabel => 'DMs'; + + @override + String get navBarMenuLabel => 'Menu'; + @override String get messageIsEditedLabel => 'РЕДАГОВАНО'; diff --git a/lib/generated/l10n/zulip_localizations_zh.dart b/lib/generated/l10n/zulip_localizations_zh.dart index 6d62f29892..b7022f1cd4 100644 --- a/lib/generated/l10n/zulip_localizations_zh.dart +++ b/lib/generated/l10n/zulip_localizations_zh.dart @@ -1041,6 +1041,15 @@ class ZulipLocalizationsZh extends ZulipLocalizations { @override String get wildcardMentionTopicDescription => 'Notify topic'; + @override + String get navBarFeedLabel => 'Feed'; + + @override + String get navBarDmLabel => 'DMs'; + + @override + String get navBarMenuLabel => 'Menu'; + @override String get messageIsEditedLabel => 'EDITED'; From 22e7f3d6a7b779007a3423425c6c4f279bd34ddb Mon Sep 17 00:00:00 2001 From: MritunjayTiwari14 Date: Sat, 18 Oct 2025 15:28:41 +0530 Subject: [PATCH 2/7] home: Add label as a required String to _NavigationBarButton --- lib/widgets/home.dart | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/lib/widgets/home.dart b/lib/widgets/home.dart index 62c09c0857..8b6f55d835 100644 --- a/lib/widgets/home.dart +++ b/lib/widgets/home.dart @@ -86,6 +86,8 @@ class _HomePageState extends State { @override Widget build(BuildContext context) { + final zulipLocalizations = ZulipLocalizations.of(context); + const pageBodies = [ (_HomePageTab.inbox, InboxPageBody()), (_HomePageTab.channels, SubscriptionListPageBody()), @@ -93,28 +95,34 @@ class _HomePageState extends State { (_HomePageTab.directMessages, RecentDmConversationsPageBody()), ]; - _NavigationBarButton button(_HomePageTab tab, IconData icon) { + _NavigationBarButton button(_HomePageTab tab, IconData icon, String label) { return _NavigationBarButton(icon: icon, selected: _tab.value == tab, onPressed: () { _tab.value = tab; - }); + }, + label: label); } // TODO(a11y): add tooltips for these buttons final navigationBarButtons = [ - button(_HomePageTab.inbox, ZulipIcons.inbox), + button(_HomePageTab.inbox, ZulipIcons.inbox, + zulipLocalizations.inboxPageTitle), _NavigationBarButton( icon: ZulipIcons.message_feed, selected: false, onPressed: () => Navigator.push(context, MessageListPage.buildRoute(context: context, - narrow: const CombinedFeedNarrow()))), - button(_HomePageTab.channels, ZulipIcons.hash_italic), + narrow: const CombinedFeedNarrow())), + label: zulipLocalizations.navBarFeedLabel), + button(_HomePageTab.channels, ZulipIcons.hash_italic, + zulipLocalizations.channelsPageTitle), // TODO(#1094): Users - button(_HomePageTab.directMessages, ZulipIcons.two_person), + button(_HomePageTab.directMessages, ZulipIcons.two_person, + zulipLocalizations.navBarDmLabel), _NavigationBarButton( icon: ZulipIcons.menu, selected: false, - onPressed: () => _showMainMenu(context, tabNotifier: _tab)), + onPressed: () => _showMainMenu(context, tabNotifier: _tab), + label: zulipLocalizations.navBarMenuLabel), ]; final designVariables = DesignVariables.of(context); @@ -231,11 +239,13 @@ class _NavigationBarButton extends StatelessWidget { required this.icon, required this.selected, required this.onPressed, + required this.label, }); final IconData icon; final bool selected; final void Function() onPressed; + final String label; @override Widget build(BuildContext context) { From 586c667e987847914231d94a83f1b546b9e47539 Mon Sep 17 00:00:00 2001 From: MritunjayTiwari14 Date: Wed, 22 Oct 2025 15:14:48 +0530 Subject: [PATCH 3/7] home: Replace SizeBox with ConstrainedBox in bottom nav bar This allows the height of bottom nav bar to dyanmically change on the basis of system font size, maxHeight has been set after calibration. --- lib/widgets/home.dart | 20 +++++++++---------- .../widgets/recent_dm_conversations_test.dart | 2 +- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/lib/widgets/home.dart b/lib/widgets/home.dart index 8b6f55d835..65e17e148b 100644 --- a/lib/widgets/home.dart +++ b/lib/widgets/home.dart @@ -142,17 +142,15 @@ class _HomePageState extends State { border: Border(top: BorderSide(color: designVariables.borderBar)), color: designVariables.bgBotBar), child: SafeArea( - child: SizedBox(height: 48, - child: Center( - child: ConstrainedBox( - // TODO(design): determine a suitable max width for bottom nav bar - constraints: const BoxConstraints(maxWidth: 600), - child: Row( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - for (final navigationBarButton in navigationBarButtons) - Expanded(child: navigationBarButton), - ]))))))); + child: ConstrainedBox( + // TODO(design): determine a suitable max width for bottom nav bar + constraints: const BoxConstraints(maxWidth: 600, minHeight: 48, maxHeight: 85), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + for (final navigationBarButton in navigationBarButtons) + Expanded(child: navigationBarButton), + ]))))); } } diff --git a/test/widgets/recent_dm_conversations_test.dart b/test/widgets/recent_dm_conversations_test.dart index 32c1d3f28d..52b10f6b24 100644 --- a/test/widgets/recent_dm_conversations_test.dart +++ b/test/widgets/recent_dm_conversations_test.dart @@ -58,7 +58,7 @@ Future setupPage(WidgetTester tester, { // Switch to direct messages tab. await tester.tap(find.descendant( - of: find.byType(Center), + of: find.byType(DecoratedBox), matching: find.byIcon(ZulipIcons.two_person))); await tester.pump(); } From e6c3f5cbaaa39838712aba97a5a1afc5031f7387 Mon Sep 17 00:00:00 2001 From: MritunjayTiwari14 Date: Wed, 22 Oct 2025 15:31:34 +0530 Subject: [PATCH 4/7] home: Replace IconButton with Material, InkWell and Icon widgets Replaced Iconbutton with Material and InkWell widgets latter ensures InkSplash effect on icon as well as text label in the upcomming commit --- lib/widgets/home.dart | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/lib/widgets/home.dart b/lib/widgets/home.dart index 65e17e148b..030d6d504b 100644 --- a/lib/widgets/home.dart +++ b/lib/widgets/home.dart @@ -249,25 +249,26 @@ class _NavigationBarButton extends StatelessWidget { Widget build(BuildContext context) { final designVariables = DesignVariables.of(context); - final iconColor = WidgetStateColor.fromMap({ - WidgetState.pressed: designVariables.iconSelected, - ~WidgetState.pressed: selected ? designVariables.iconSelected - : designVariables.icon, - }); + final color = selected ? designVariables.iconSelected : designVariables.icon; return AnimatedScaleOnTap( scaleEnd: 0.875, duration: const Duration(milliseconds: 100), - child: IconButton( - icon: Icon(icon, size: 24), - onPressed: onPressed, - style: IconButton.styleFrom( + child: Material( + type: MaterialType.transparency, + child: InkWell( // TODO(#417): Disable splash effects for all buttons globally. + borderRadius: BorderRadius.all(Radius.circular(4)), splashFactory: NoSplash.splashFactory, highlightColor: designVariables.navigationButtonBg, - shape: const RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(4))), - ).copyWith(foregroundColor: iconColor))); + onTap: onPressed, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + SizedBox(height: 34, + child: Center( + child: Icon(icon, size: 24, color: color,))), + ])))); } } From 141b7bb7e6b9949613545c20b46f80f358b5336e Mon Sep 17 00:00:00 2001 From: MritunjayTiwari14 Date: Wed, 22 Oct 2025 15:33:24 +0530 Subject: [PATCH 5/7] home: Add Text label below Icons using Flexible Introduced Flexible instead of Expandible To make sure Text widget cover only required area not till maxheight of ConstrainedBox. --- lib/widgets/home.dart | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/lib/widgets/home.dart b/lib/widgets/home.dart index 030d6d504b..1028a6f7fc 100644 --- a/lib/widgets/home.dart +++ b/lib/widgets/home.dart @@ -268,6 +268,16 @@ class _NavigationBarButton extends StatelessWidget { SizedBox(height: 34, child: Center( child: Icon(icon, size: 24, color: color,))), + Flexible( + child: Text( + label, + style: TextStyle( + fontSize: 12, + color: color, + height: 1.0,), + textAlign: TextAlign.center, + maxLines: 2, + overflow: TextOverflow.ellipsis)), ])))); } } From aa14c5d25cee8e16a70be7441ed61a68f155d0e3 Mon Sep 17 00:00:00 2001 From: MritunjayTiwari14 Date: Tue, 21 Oct 2025 14:11:28 +0530 Subject: [PATCH 6/7] home: Add bottom padding on nav bar buttons, as per Figma https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=11677-62355&t=4RpHwmhsJHyVR9UX-4 --- lib/widgets/home.dart | 36 +++++++++++++++++++----------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/lib/widgets/home.dart b/lib/widgets/home.dart index 1028a6f7fc..4450d6f6e7 100644 --- a/lib/widgets/home.dart +++ b/lib/widgets/home.dart @@ -262,23 +262,25 @@ class _NavigationBarButton extends StatelessWidget { splashFactory: NoSplash.splashFactory, highlightColor: designVariables.navigationButtonBg, onTap: onPressed, - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - SizedBox(height: 34, - child: Center( - child: Icon(icon, size: 24, color: color,))), - Flexible( - child: Text( - label, - style: TextStyle( - fontSize: 12, - color: color, - height: 1.0,), - textAlign: TextAlign.center, - maxLines: 2, - overflow: TextOverflow.ellipsis)), - ])))); + child: Padding( + padding: const EdgeInsets.only(bottom: 3.0), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + SizedBox(height: 34, + child: Center( + child: Icon(icon, size: 24, color: color,))), + Flexible( + child: Text( + label, + style: TextStyle( + fontSize: 12, + color: color, + height: 1.0,), + textAlign: TextAlign.center, + maxLines: 2, + overflow: TextOverflow.ellipsis)), + ]))))); } } From 4499f3f671ab1df267887218bfee0a8cf14c8436 Mon Sep 17 00:00:00 2001 From: MritunjayTiwari14 Date: Tue, 21 Oct 2025 14:12:55 +0530 Subject: [PATCH 7/7] nits: Remove comma after color property of Icon in home bottom navbar button --- lib/widgets/home.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/widgets/home.dart b/lib/widgets/home.dart index 4450d6f6e7..70718404d8 100644 --- a/lib/widgets/home.dart +++ b/lib/widgets/home.dart @@ -269,7 +269,7 @@ class _NavigationBarButton extends StatelessWidget { children: [ SizedBox(height: 34, child: Center( - child: Icon(icon, size: 24, color: color,))), + child: Icon(icon, size: 24, color: color))), Flexible( child: Text( label,