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'; diff --git a/lib/widgets/home.dart b/lib/widgets/home.dart index 62c09c0857..bdd5a343c4 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); @@ -134,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), + ]))))); } } @@ -231,35 +237,43 @@ 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) { 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( - // TODO(#417): Disable splash effects for all buttons globally. - splashFactory: NoSplash.splashFactory, - highlightColor: designVariables.navigationButtonBg, - shape: const RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(4))), - ).copyWith(foregroundColor: iconColor))); + child: GestureDetector( + behavior: HitTestBehavior.opaque, + 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)), + ]))); } }