Skip to content

home: Add icons label on main navigation bar. #1879

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

home: Add icons label on main navigation bar. #1879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
329626a
l10n: Add text label for dm, feed and menu icons in home bottom nav bar
MritunjayTiwari14 Oct 18, 2025
22e7f3d
home: Add label as a required String to _NavigationBarButton
MritunjayTiwari14 Oct 18, 2025
586c667
home: Replace SizeBox with ConstrainedBox in bottom nav bar
MritunjayTiwari14 Oct 22, 2025
e6c3f5c
home: Replace IconButton with Material, InkWell and Icon widgets
MritunjayTiwari14 Oct 22, 2025
141b7bb
home: Add Text label below Icons using Flexible
MritunjayTiwari14 Oct 22, 2025
aa14c5d
home: Add bottom padding on nav bar buttons, as per Figma
MritunjayTiwari14 Oct 21, 2025
4499f3f
nits: Remove comma after color property of Icon in home bottom navbar…
MritunjayTiwari14 Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions assets/l10n/app_en.arb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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."
},
Comment on lines +1258 to +1261
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When we add entries to this file, we do it in the same commit that uses them. That way it's easier to see them together, and make sure they're used as intended.

"messageIsEditedLabel": "EDITED",
"@messageIsEditedLabel": {
"description": "Label for an edited message. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
Expand Down
18 changes: 18 additions & 0 deletions lib/generated/l10n/zulip_localizations.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
9 changes: 9 additions & 0 deletions lib/generated/l10n/zulip_localizations_ar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
9 changes: 9 additions & 0 deletions lib/generated/l10n/zulip_localizations_de.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
9 changes: 9 additions & 0 deletions lib/generated/l10n/zulip_localizations_en.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
9 changes: 9 additions & 0 deletions lib/generated/l10n/zulip_localizations_fr.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
9 changes: 9 additions & 0 deletions lib/generated/l10n/zulip_localizations_it.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
9 changes: 9 additions & 0 deletions lib/generated/l10n/zulip_localizations_ja.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => '編集済み';

Expand Down
9 changes: 9 additions & 0 deletions lib/generated/l10n/zulip_localizations_nb.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
9 changes: 9 additions & 0 deletions lib/generated/l10n/zulip_localizations_pl.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
9 changes: 9 additions & 0 deletions lib/generated/l10n/zulip_localizations_ru.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => 'ИЗМЕНЕНО';

Expand Down
9 changes: 9 additions & 0 deletions lib/generated/l10n/zulip_localizations_sk.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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É';

Expand Down
9 changes: 9 additions & 0 deletions lib/generated/l10n/zulip_localizations_sl.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
9 changes: 9 additions & 0 deletions lib/generated/l10n/zulip_localizations_uk.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => 'РЕДАГОВАНО';

Expand Down
9 changes: 9 additions & 0 deletions lib/generated/l10n/zulip_localizations_zh.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
81 changes: 51 additions & 30 deletions lib/widgets/home.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,35 +86,43 @@ class _HomePageState extends State<HomePage> {

@override
Widget build(BuildContext context) {
final zulipLocalizations = ZulipLocalizations.of(context);

const pageBodies = [
(_HomePageTab.inbox, InboxPageBody()),
(_HomePageTab.channels, SubscriptionListPageBody()),
// TODO(#1094): Users
(_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),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's match the name of the page, so say "Combined feed" instead of "Feed" here, using zulipLocalizations.combinedFeedPageTitle. It looks like there's a plan to accommodate long labels: #mobile-design > design comparison for nav bar label @ 💬

(And remove the addition of navBarFeedLabel from your PR.)

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),
Comment on lines +120 to +121
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above—use zulipLocalizations.recentDmConversationsPageTitle here, to say "Direct messages" instead of "DMs".

(And remove the addition of navBarDmLabel from your PR.)

_NavigationBarButton( icon: ZulipIcons.menu,
selected: false,
onPressed: () => _showMainMenu(context, tabNotifier: _tab)),
onPressed: () => _showMainMenu(context, tabNotifier: _tab),
label: zulipLocalizations.navBarMenuLabel),
];

final designVariables = DesignVariables.of(context);
Expand All @@ -134,17 +142,15 @@ class _HomePageState extends State<HomePage> {
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),
Comment on lines +146 to +147
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With this explicit maxHeight, it looks broken when the text size is very large:

image

I think your goal was to make sure the nav bar doesn't consume valuable space when it doesn't need to, as the text-size setting increases. We should accomplish that in a different way:

I.e., don't use maxHeight. Instead, on the label text (which is what responds to the text-size setting), we should use TextScaler.clamp with maxScaleFactor as we do in several places already. (1.5 is probably a good value for maxScaleFactor.)

child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
for (final navigationBarButton in navigationBarButtons)
Expanded(child: navigationBarButton),
])))));
}
}

Expand Down Expand Up @@ -231,35 +237,50 @@ 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(
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,
Comment on lines 260 to 262
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: don't separate the TODO from the line of code it is about

highlightColor: designVariables.navigationButtonBg,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(4))),
).copyWith(foregroundColor: iconColor)));
onTap: onPressed,
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))),
Comment on lines +265 to +272
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Proposed change (including the code comment, to explain to future readers):

Suggested change
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))),
// (Added 3px horizontal padding not present in Figma, to make the
// text wrap before getting too close to the button's edge, which is
// visible on tap-down.)
padding: const EdgeInsets.fromLTRB(3, 6, 3, 3),
child: Column(
spacing: 3,
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 24, color: color),

For the issue the comment is about, see screenshots with and without the 3px horizontal padding:

Without With
image image

My proposal also fixes the vertical position of the icon to match the Figma.

Flexible(
child: Text(
label,
style: TextStyle(
fontSize: 12,
color: color,
height: 1.0,),
Comment on lines +276 to +279
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit:

Suggested change
style: TextStyle(
fontSize: 12,
color: color,
height: 1.0,),
style: TextStyle(fontSize: 12, color: color, height: 12 / 12),

textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis)),
Comment on lines +281 to +282
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did we decide on max 2 lines and ellipsis overflow somewhere, or is it in the Figma? Greg pointed to an Android first-party app where the label wrapped onto three lines: #mobile-design > design comparison for nav bar label @ 💬

I think I prefer no max-lines limit at all. If a translated label is annoyingly long, I'd rather not add to the annoyance by cutting it short and adding "…". Instead I'd ask a volunteer translator if they can choose a shorter label.

])))));
}
}

Expand Down
Loading