Skip to content

Commit 89b85dc

Browse files
chrisbobbegnprice
authored andcommitted
topic_list: Use UnreadCountBadge, replacing ad hoc private widget
The private widget, following the Figma, made the badge a bit more compact, with 1px less padding on each side, and a font size smaller by 1 (but with the same line height). That was helpful for keeping the rows at uniform height regardless of unreads (without text scaling anyway)...but I've accomplished that by adding a minimum row height (40), in the previous commit.
1 parent ba8d296 commit 89b85dc

File tree

2 files changed

+9
-30
lines changed

2 files changed

+9
-30
lines changed

lib/widgets/topic_list.dart

Lines changed: 5 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import 'page.dart';
1414
import 'store.dart';
1515
import 'text.dart';
1616
import 'theme.dart';
17+
import 'unread_count_badge.dart';
1718

1819
class TopicListPage extends StatelessWidget {
1920
const TopicListPage({super.key, required this.streamId});
@@ -301,7 +302,10 @@ class _TopicItem extends StatelessWidget {
301302
children: [
302303
if (hasMention) const _IconMarker(icon: ZulipIcons.at_sign),
303304
if (visibilityIcon != null) _IconMarker(icon: visibilityIcon),
304-
if (unreadCount > 0) _UnreadCountBadge(count: unreadCount),
305+
if (unreadCount > 0)
306+
UnreadCountBadge(
307+
count: unreadCount,
308+
channelIdForBackground: null),
305309
])),
306310
])),
307311
)));
@@ -324,31 +328,3 @@ class _IconMarker extends StatelessWidget {
324328
color: designVariables.textMessage.withFadedAlpha(0.4));
325329
}
326330
}
327-
328-
// This is adapted from [UnreadCountBadge].
329-
// TODO(#1406) see if we can reuse this in redesign
330-
// TODO(#1527) see if we can reuse this in redesign
331-
class _UnreadCountBadge extends StatelessWidget {
332-
const _UnreadCountBadge({required this.count});
333-
334-
final int count;
335-
336-
@override
337-
Widget build(BuildContext context) {
338-
final designVariables = DesignVariables.of(context);
339-
340-
return DecoratedBox(
341-
decoration: BoxDecoration(
342-
borderRadius: BorderRadius.circular(5),
343-
color: designVariables.bgCounterUnread,
344-
),
345-
child: Padding(
346-
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
347-
child: Text(count.toString(),
348-
style: TextStyle(
349-
fontSize: 15,
350-
height: 16 / 15,
351-
color: designVariables.labelCounterUnread,
352-
).merge(weightVariableTextStyle(context, wght: 500)))));
353-
}
354-
}

lib/widgets/unread_count_badge.dart

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,11 @@ import 'theme.dart';
1313
///
1414
/// Currently this widget supports only those other contexts (not the main menu)
1515
/// and only the component's "kind=unread" variant (not "kind=quantity").
16-
/// For example, the "Channels" page:
16+
/// For example, the "Channels" page and the topic-list page:
1717
/// https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6205-26001&m=dev
18+
/// https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6823-37113&m=dev
19+
/// (We use this for the topic-list page even though the Figma makes it a bit
20+
/// more compact there…the inconsistency seems worse and might be accidental.)
1821
// TODO support the main-menu context, update dartdoc
1922
// TODO support the "kind=quantity" variant, update dartdoc
2023
class UnreadCountBadge extends StatelessWidget {

0 commit comments

Comments
 (0)