Skip to content

Commit 85bf884

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 127f420 commit 85bf884

File tree

8 files changed

+43
-16
lines changed

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
@@ -98,8 +98,9 @@ class Paragraph extends StatelessWidget {
9898

9999
final ParagraphNode node;
100100

101-
static TextStyle getTextStyle(BuildContext context) => const TextStyle(
101+
static TextStyle getTextStyle(BuildContext context) => TextStyle(
102102
fontFamily: kDefaultFontFamily,
103+
fontFamilyFallback: kDefaultFontFamilyFallback,
103104
fontSize: 14,
104105
height: (17 / 14),
105106
).merge(weightVariableTextStyle(context));

‎lib/widgets/emoji_reaction.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@ class ReactionChip extends StatelessWidget {
175175
textScaler: _labelTextScalerClamped(context),
176176
style: TextStyle(
177177
fontFamily: kDefaultFontFamily,
178+
fontFamilyFallback: kDefaultFontFamilyFallback,
178179
fontSize: (14 * 0.90),
179180
height: 13 / (14 * 0.90),
180181
color: labelColor,
@@ -353,6 +354,7 @@ class _TextEmoji extends StatelessWidget {
353354
textScaler: _textEmojiScalerClamped(context),
354355
style: TextStyle(
355356
fontFamily: kDefaultFontFamily,
357+
fontFamilyFallback: kDefaultFontFamilyFallback,
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
@@ -239,11 +239,12 @@ abstract class _HeaderItem extends StatelessWidget {
239239
Expanded(child: Padding(
240240
padding: const EdgeInsets.symmetric(vertical: 4),
241241
child: Text(
242-
style: const TextStyle(
242+
style: TextStyle(
243243
fontFamily: kDefaultFontFamily,
244+
fontFamilyFallback: kDefaultFontFamilyFallback,
244245
fontSize: 17,
245246
height: (20 / 17),
246-
color: Color(0xFF222222),
247+
color: const Color(0xFF222222),
247248
).merge(weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900)),
248249
maxLines: 1,
249250
overflow: TextOverflow.ellipsis,
@@ -360,11 +361,12 @@ class _DmItem extends StatelessWidget {
360361
Expanded(child: Padding(
361362
padding: const EdgeInsets.symmetric(vertical: 4),
362363
child: Text(
363-
style: const TextStyle(
364+
style: TextStyle(
364365
fontFamily: kDefaultFontFamily,
366+
fontFamilyFallback: kDefaultFontFamilyFallback,
365367
fontSize: 17,
366368
height: (20 / 17),
367-
color: Color(0xFF222222),
369+
color: const Color(0xFF222222),
368370
).merge(weightVariableTextStyle(context)),
369371
maxLines: 2,
370372
overflow: TextOverflow.ellipsis,
@@ -486,11 +488,12 @@ class _TopicItem extends StatelessWidget {
486488
Expanded(child: Padding(
487489
padding: const EdgeInsets.symmetric(vertical: 4),
488490
child: Text(
489-
style: const TextStyle(
491+
style: TextStyle(
490492
fontFamily: kDefaultFontFamily,
493+
fontFamilyFallback: kDefaultFontFamilyFallback,
491494
fontSize: 17,
492495
height: (20 / 17),
493-
color: Color(0xFF222222),
496+
color: const Color(0xFF222222),
494497
).merge(weightVariableTextStyle(context)),
495498
maxLines: 2,
496499
overflow: TextOverflow.ellipsis,

‎lib/widgets/message_list.dart‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -435,8 +435,9 @@ class MarkAsReadWidget extends StatelessWidget {
435435
style: FilledButton.styleFrom(
436436
backgroundColor: _UnreadMarker.color,
437437
minimumSize: const Size.fromHeight(38),
438-
textStyle: const TextStyle(
438+
textStyle: TextStyle(
439439
fontFamily: kDefaultFontFamily,
440+
fontFamilyFallback: kDefaultFontFamilyFallback,
440441
fontSize: 18,
441442
height: (23 / 18),
442443
).merge(weightVariableTextStyle(context)),
@@ -574,6 +575,7 @@ class StreamMessageRecipientHeader extends StatelessWidget {
574575
final textStyle = TextStyle(
575576
color: contrastingColor,
576577
fontFamily: kDefaultFontFamily,
578+
fontFamilyFallback: kDefaultFontFamilyFallback,
577579
fontSize: 16,
578580
letterSpacing: 0.02 * 16,
579581
height: (18 / 16),
@@ -683,8 +685,9 @@ class DmRecipientHeader extends StatelessWidget {
683685
child: Icon(size: 16, ZulipIcons.user)),
684686
Expanded(
685687
child: Text(title,
686-
style: const TextStyle(
688+
style: TextStyle(
687689
fontFamily: kDefaultFontFamily,
690+
fontFamilyFallback: kDefaultFontFamilyFallback,
688691
fontSize: 16,
689692
letterSpacing: 0.02 * 16,
690693
height: (18 / 16),
@@ -717,6 +720,7 @@ class RecipientHeaderDate extends StatelessWidget {
717720
style: TextStyle(
718721
color: color,
719722
fontFamily: kDefaultFontFamily,
723+
fontFamilyFallback: kDefaultFontFamilyFallback,
720724
fontSize: 16,
721725
// In Figma this has a line-height of 19, but using 18
722726
// here to match the stream/topic text widgets helps

‎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: kDefaultFontFamilyFallback,
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: kDefaultFontFamilyFallback,
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: kDefaultFontFamilyFallback,
152154
fontSize: 14,
153155
letterSpacing: 0.04 * 14,
154156
height: (16 / 14),
@@ -219,11 +221,12 @@ class SubscriptionItem extends StatelessWidget {
219221
// or only those with unreads:
220222
// https://github.com/zulip/zulip-flutter/pull/397#pullrequestreview-1742524205
221223
child: Text(
222-
style: const TextStyle(
224+
style: TextStyle(
223225
fontFamily: kDefaultFontFamily,
226+
fontFamilyFallback: kDefaultFontFamilyFallback,
224227
fontSize: 18,
225228
height: (20 / 18),
226-
color: Color(0xFF262626),
229+
color: const Color(0xFF262626),
227230
).merge(hasUnreads
228231
? weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900)
229232
: weightVariableTextStyle(context)),

‎lib/widgets/text.dart‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
11
import 'dart:io';
22
import 'dart:ui';
3+
import 'package:flutter/foundation.dart';
34
import 'package:flutter/widgets.dart';
45

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

15+
/// The [TextStyle.fontFamilyFallback] for use with [kDefaultFontFamily].
16+
final kDefaultFontFamilyFallback = [
17+
// iOS doesn't support any of the formats this font is available in.
18+
// If we use it on iOS, we'll get blank spaces where we could have had Apple-
19+
// style emojis.
20+
if (defaultTargetPlatform == TargetPlatform.android) 'Noto Color Emoji',
21+
];
22+
1123
/// A mergeable [TextStyle] with 'Source Code Pro' and platform-aware fallbacks.
1224
///
1325
/// 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
@@ -44,12 +44,13 @@ class UnreadCountBadge extends StatelessWidget {
4444
child: Padding(
4545
padding: const EdgeInsets.fromLTRB(4, 0, 4, 1),
4646
child: Text(
47-
style: const TextStyle(
47+
style: TextStyle(
4848
fontFamily: kDefaultFontFamily,
49+
fontFamilyFallback: kDefaultFontFamilyFallback,
4950
fontSize: 16,
5051
height: (18 / 16),
51-
fontFeatures: [FontFeature.enable('smcp')], // small caps
52-
color: Color(0xFF222222),
52+
fontFeatures: const [FontFeature.enable('smcp')], // small caps
53+
color: const Color(0xFF222222),
5354
).merge(bold
5455
? weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900)
5556
: weightVariableTextStyle(context)),

0 commit comments

Comments
 (0)