Skip to content

Commit 51eaddd

Browse files
chrisbobbechrisbobbe
committed
text: On Android, render emojis in message content with Noto Color Emoji
In zulip#436, we brought back Noto Color Emoji, but just for reaction chips. This brings it to message content in the message list, and all the other places where we've been specifying Source Sans 3. This leaves some edge cases where we'll still fall back to a system emoji font, like if there's an emoji in a user's name and you're looking at the profile screen. (Or in the "sender" area of a message in the message list, for that matter, checking again just now.) Those will be fixed later in this series, along with a cleanup that eliminates the repetition of [kDefaultFontFamily] and [kDefaultFontFamilyFallback] that we see in this commit. Fixes-partly: zulip#438
1 parent 117670a commit 51eaddd

8 files changed

+43
-16
lines changed

‎lib/widgets/content.dart

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,9 @@ class Paragraph extends StatelessWidget {
100100

101101
final ParagraphNode node;
102102

103-
static TextStyle getTextStyle(BuildContext context) => const TextStyle(
103+
static TextStyle getTextStyle(BuildContext context) => TextStyle(
104104
fontFamily: kDefaultFontFamily,
105+
fontFamilyFallback: defaultFontFamilyFallback,
105106
fontSize: 14,
106107
height: (17 / 14),
107108
).merge(weightVariableTextStyle(context));

‎lib/widgets/emoji_reaction.dart

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@ class ReactionChip extends StatelessWidget {
174174
textScaler: _labelTextScalerClamped(context),
175175
style: TextStyle(
176176
fontFamily: kDefaultFontFamily,
177+
fontFamilyFallback: defaultFontFamilyFallback,
177178
fontSize: (14 * 0.90),
178179
height: 13 / (14 * 0.90),
179180
color: labelColor,
@@ -353,6 +354,7 @@ class _TextEmoji extends StatelessWidget {
353354
textWidthBasis: TextWidthBasis.longestLine,
354355
style: TextStyle(
355356
fontFamily: kDefaultFontFamily,
357+
fontFamilyFallback: defaultFontFamilyFallback,
356358
fontSize: 14 * 0.8,
357359
height: 1, // to be denser when we have to wrap
358360
color: selected ? _textColorSelected : _textColorUnselected,

‎lib/widgets/inbox.dart

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -237,11 +237,12 @@ abstract class _HeaderItem extends StatelessWidget {
237237
Expanded(child: Padding(
238238
padding: const EdgeInsets.symmetric(vertical: 4),
239239
child: Text(
240-
style: const TextStyle(
240+
style: TextStyle(
241241
fontFamily: kDefaultFontFamily,
242+
fontFamilyFallback: defaultFontFamilyFallback,
242243
fontSize: 17,
243244
height: (20 / 17),
244-
color: Color(0xFF222222),
245+
color: const Color(0xFF222222),
245246
).merge(weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900)),
246247
maxLines: 1,
247248
overflow: TextOverflow.ellipsis,
@@ -358,11 +359,12 @@ class _DmItem extends StatelessWidget {
358359
Expanded(child: Padding(
359360
padding: const EdgeInsets.symmetric(vertical: 4),
360361
child: Text(
361-
style: const TextStyle(
362+
style: TextStyle(
362363
fontFamily: kDefaultFontFamily,
364+
fontFamilyFallback: defaultFontFamilyFallback,
363365
fontSize: 17,
364366
height: (20 / 17),
365-
color: Color(0xFF222222),
367+
color: const Color(0xFF222222),
366368
).merge(weightVariableTextStyle(context)),
367369
maxLines: 2,
368370
overflow: TextOverflow.ellipsis,
@@ -484,11 +486,12 @@ class _TopicItem extends StatelessWidget {
484486
Expanded(child: Padding(
485487
padding: const EdgeInsets.symmetric(vertical: 4),
486488
child: Text(
487-
style: const TextStyle(
489+
style: TextStyle(
488490
fontFamily: kDefaultFontFamily,
491+
fontFamilyFallback: defaultFontFamilyFallback,
489492
fontSize: 17,
490493
height: (20 / 17),
491-
color: Color(0xFF222222),
494+
color: const Color(0xFF222222),
492495
).merge(weightVariableTextStyle(context)),
493496
maxLines: 2,
494497
overflow: TextOverflow.ellipsis,

‎lib/widgets/message_list.dart

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -449,8 +449,9 @@ class MarkAsReadWidget extends StatelessWidget {
449449
style: FilledButton.styleFrom(
450450
backgroundColor: _UnreadMarker.color,
451451
minimumSize: const Size.fromHeight(38),
452-
textStyle: const TextStyle(
452+
textStyle: TextStyle(
453453
fontFamily: kDefaultFontFamily,
454+
fontFamilyFallback: defaultFontFamilyFallback,
454455
fontSize: 18,
455456
height: (23 / 18),
456457
).merge(weightVariableTextStyle(context)),
@@ -632,6 +633,7 @@ class StreamMessageRecipientHeader extends StatelessWidget {
632633
final textStyle = TextStyle(
633634
color: contrastingColor,
634635
fontFamily: kDefaultFontFamily,
636+
fontFamilyFallback: defaultFontFamilyFallback,
635637
fontSize: 16,
636638
letterSpacing: 0.02 * 16,
637639
height: (18 / 16),
@@ -741,8 +743,9 @@ class DmRecipientHeader extends StatelessWidget {
741743
child: Icon(size: 16, ZulipIcons.user)),
742744
Expanded(
743745
child: Text(title,
744-
style: const TextStyle(
746+
style: TextStyle(
745747
fontFamily: kDefaultFontFamily,
748+
fontFamilyFallback: defaultFontFamilyFallback,
746749
fontSize: 16,
747750
letterSpacing: 0.02 * 16,
748751
height: (18 / 16),
@@ -802,6 +805,7 @@ class DateText extends StatelessWidget {
802805
style: TextStyle(
803806
color: color,
804807
fontFamily: kDefaultFontFamily,
808+
fontFamilyFallback: defaultFontFamilyFallback,
805809
fontSize: fontSize,
806810
height: height,
807811
// This is equivalent to css `all-small-caps`, see:

‎lib/widgets/recent_dm_conversations.dart

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,11 +126,12 @@ class RecentDmConversationsItem extends StatelessWidget {
126126
Expanded(child: Padding(
127127
padding: const EdgeInsets.symmetric(vertical: 4),
128128
child: Text(
129-
style: const TextStyle(
129+
style: TextStyle(
130130
fontFamily: kDefaultFontFamily,
131+
fontFamilyFallback: defaultFontFamilyFallback,
131132
fontSize: 17,
132133
height: (20 / 17),
133-
color: Color(0xFF222222),
134+
color: const Color(0xFF222222),
134135
).merge(weightVariableTextStyle(context)),
135136
maxLines: 2,
136137
overflow: TextOverflow.ellipsis,

‎lib/widgets/subscription_list.dart

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ class _NoSubscriptionsItem extends StatelessWidget {
120120
style: TextStyle(
121121
color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
122122
fontFamily: kDefaultFontFamily,
123+
fontFamilyFallback: defaultFontFamilyFallback,
123124
fontSize: 18,
124125
height: (20 / 18),
125126
).merge(weightVariableTextStyle(context)))));
@@ -149,6 +150,7 @@ class _SubscriptionListHeader extends StatelessWidget {
149150
style: TextStyle(
150151
color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
151152
fontFamily: kDefaultFontFamily,
153+
fontFamilyFallback: defaultFontFamilyFallback,
152154
fontSize: 14,
153155
letterSpacing: 0.04 * 14,
154156
height: (16 / 14),
@@ -220,11 +222,12 @@ class SubscriptionItem extends StatelessWidget {
220222
// or only those with unreads:
221223
// https://github.com/zulip/zulip-flutter/pull/397#pullrequestreview-1742524205
222224
child: Text(
223-
style: const TextStyle(
225+
style: TextStyle(
224226
fontFamily: kDefaultFontFamily,
227+
fontFamilyFallback: defaultFontFamilyFallback,
225228
fontSize: 18,
226229
height: (20 / 18),
227-
color: Color(0xFF262626),
230+
color: const Color(0xFF262626),
228231
).merge(hasUnreads
229232
? weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900)
230233
: weightVariableTextStyle(context)),

‎lib/widgets/text.dart

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,24 @@
11
import 'dart:io';
2+
import 'package:flutter/foundation.dart';
23
import 'package:flutter/widgets.dart';
34

45
/// The [TextStyle.fontFamily] to use in most of the app.
56
///
7+
/// The same [TextStyle] should also specify [defaultFontFamilyFallback]
8+
/// for [TextStyle.fontFamilyFallback].
9+
///
610
/// This is a variable-weight font, so any [TextStyle] that uses this should be
711
/// merged with the result of calling [weightVariableTextStyle].
812
const kDefaultFontFamily = 'Source Sans 3';
913

14+
/// The [TextStyle.fontFamilyFallback] for use with [kDefaultFontFamily].
15+
List<String> get defaultFontFamilyFallback => [
16+
// iOS doesn't support any of the formats this font is available in.
17+
// If we use it on iOS, we'll get blank spaces where we could have had Apple-
18+
// style emojis.
19+
if (defaultTargetPlatform == TargetPlatform.android) 'Noto Color Emoji',
20+
];
21+
1022
/// A mergeable [TextStyle] with 'Source Code Pro' and platform-aware fallbacks.
1123
///
1224
/// Callers should also call [weightVariableTextStyle] and merge that in too,

‎lib/widgets/unread_count_badge.dart

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,13 @@ class UnreadCountBadge extends StatelessWidget {
4343
child: Padding(
4444
padding: const EdgeInsets.fromLTRB(4, 0, 4, 1),
4545
child: Text(
46-
style: const TextStyle(
46+
style: TextStyle(
4747
fontFamily: kDefaultFontFamily,
48+
fontFamilyFallback: defaultFontFamilyFallback,
4849
fontSize: 16,
4950
height: (18 / 16),
50-
fontFeatures: [FontFeature.enable('smcp')], // small caps
51-
color: Color(0xFF222222),
51+
fontFeatures: const [FontFeature.enable('smcp')], // small caps
52+
color: const Color(0xFF222222),
5253
).merge(bold
5354
? weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900)
5455
: weightVariableTextStyle(context)),

0 commit comments

Comments
 (0)