Skip to content

Commit 2841a13

Browse files
gnpricePIG208
authored andcommitted
autocomplete: Update emoji-results style to follow design
This follows the new design for user-mention results, but adapted for emoji based on the design for the emoji picker. See comment for details.
1 parent f86a893 commit 2841a13

File tree

1 file changed

+16
-4
lines changed

1 file changed

+16
-4
lines changed

lib/widgets/autocomplete.dart

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -327,12 +327,13 @@ class _EmojiAutocompleteItem extends StatelessWidget {
327327

328328
final EmojiAutocompleteResult option;
329329

330-
static const _size = 32.0;
331-
static const _notoColorEmojiTextSize = 25.7;
330+
static const _size = 24.0;
331+
static const _notoColorEmojiTextSize = 19.3;
332332

333333
@override
334334
Widget build(BuildContext context) {
335335
final store = PerAccountStoreWidget.of(context);
336+
final designVariables = DesignVariables.of(context);
336337
final candidate = option.candidate;
337338

338339
// TODO deduplicate this logic with [EmojiPickerListEntry]
@@ -351,15 +352,26 @@ class _EmojiAutocompleteItem extends StatelessWidget {
351352
? candidate.emojiName
352353
: [candidate.emojiName, ...candidate.aliases].join(", "); // TODO(#1080)
353354

355+
// TODO(design): emoji autocomplete results
356+
// There's no design in Figma for emoji autocomplete results.
357+
// Instead we adapt the design for the emoji picker to the
358+
// context of autocomplete results as exemplified by _MentionAutocompleteItem.
359+
// That means: emoji size, text size, text line-height, and font weight
360+
// from emoji picker; text color (for contrast with background) and
361+
// outer padding from _MentionAutocompleteItem; padding around emoji glyph
362+
// to bring it to same size as avatar in _MentionAutocompleteItem.
354363
return Padding(
355364
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
356365
child: Row(children: [
357366
if (glyph != null) ...[
358-
glyph,
359-
const SizedBox(width: 8),
367+
Padding(padding: const EdgeInsets.all(6),
368+
child: glyph),
369+
const SizedBox(width: 6),
360370
],
361371
Expanded(
362372
child: Text(
373+
style: TextStyle(fontSize: 17, height: 18 / 17,
374+
color: designVariables.contextMenuItemLabel),
363375
maxLines: 2,
364376
overflow: TextOverflow.ellipsis,
365377
label)),

0 commit comments

Comments
 (0)