Skip to content

Commit 6fc4065

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 2f84160 commit 6fc4065

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
@@ -325,12 +325,13 @@ class _EmojiAutocompleteItem extends StatelessWidget {
325325

326326
final EmojiAutocompleteResult option;
327327

328-
static const _size = 32.0;
329-
static const _notoColorEmojiTextSize = 25.7;
328+
static const _size = 24.0;
329+
static const _notoColorEmojiTextSize = 19.3;
330330

331331
@override
332332
Widget build(BuildContext context) {
333333
final store = PerAccountStoreWidget.of(context);
334+
final designVariables = DesignVariables.of(context);
334335
final candidate = option.candidate;
335336

336337
// TODO deduplicate this logic with [EmojiPickerListEntry]
@@ -349,15 +350,26 @@ class _EmojiAutocompleteItem extends StatelessWidget {
349350
? candidate.emojiName
350351
: [candidate.emojiName, ...candidate.aliases].join(", "); // TODO(#1080)
351352

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

0 commit comments

Comments
 (0)