feat: Redid UI For mentions
This commit is contained in:
Deven Joshi
+132
-67
@@ -1132,12 +1132,13 @@ class MessageInputState extends State<MessageInput> {
|
|||||||
RenderBox renderBox = context.findRenderObject();
|
RenderBox renderBox = context.findRenderObject();
|
||||||
final size = renderBox.size;
|
final size = renderBox.size;
|
||||||
|
|
||||||
return OverlayEntry(builder: (context) {
|
return OverlayEntry(
|
||||||
return Positioned(
|
builder: (context) {
|
||||||
bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
|
return Positioned(
|
||||||
left: 0,
|
bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
|
||||||
right: 0,
|
left: 0,
|
||||||
child: TweenAnimationBuilder<double>(
|
right: 0,
|
||||||
|
child: TweenAnimationBuilder<double>(
|
||||||
tween: Tween(begin: 0.0, end: 1.0),
|
tween: Tween(begin: 0.0, end: 1.0),
|
||||||
duration: Duration(milliseconds: 300),
|
duration: Duration(milliseconds: 300),
|
||||||
curve: Curves.easeInOutExpo,
|
curve: Curves.easeInOutExpo,
|
||||||
@@ -1158,72 +1159,136 @@ class MessageInputState extends State<MessageInput> {
|
|||||||
color: StreamChatTheme.of(context).colorTheme.white,
|
color: StreamChatTheme.of(context).colorTheme.white,
|
||||||
),
|
),
|
||||||
child: FutureBuilder<List<Member>>(
|
child: FutureBuilder<List<Member>>(
|
||||||
future: queryMembers ?? Future.value(members),
|
future: queryMembers ?? Future.value(members),
|
||||||
initialData: members,
|
initialData: members,
|
||||||
builder: (context, snapshot) {
|
builder: (context, snapshot) {
|
||||||
return ListView(
|
return ListView(
|
||||||
padding: const EdgeInsets.all(0),
|
padding: const EdgeInsets.all(0),
|
||||||
shrinkWrap: true,
|
shrinkWrap: true,
|
||||||
itemExtent: 58.0,
|
children: [
|
||||||
children: snapshot.data
|
SizedBox(
|
||||||
.map((m) => ListTile(
|
height: 8.0,
|
||||||
leading: UserAvatar(
|
),
|
||||||
constraints: BoxConstraints.tight(
|
...snapshot.data.map(
|
||||||
Size(
|
(m) {
|
||||||
40,
|
return Material(
|
||||||
40,
|
color: StreamChatTheme.of(context)
|
||||||
),
|
.colorTheme
|
||||||
|
.white,
|
||||||
|
child: InkWell(
|
||||||
|
onTap: () {
|
||||||
|
_mentionedUsers.add(m.user);
|
||||||
|
|
||||||
|
splits[splits.length - 1] = m.user.name;
|
||||||
|
final rejoin = splits.join('@');
|
||||||
|
|
||||||
|
textEditingController.value =
|
||||||
|
TextEditingValue(
|
||||||
|
text: rejoin +
|
||||||
|
textEditingController.text
|
||||||
|
.substring(textEditingController
|
||||||
|
.selection.start),
|
||||||
|
selection: TextSelection.collapsed(
|
||||||
|
offset: rejoin.length,
|
||||||
),
|
),
|
||||||
user: m.user,
|
);
|
||||||
),
|
_debounce.cancel();
|
||||||
title: Text(
|
_mentionsOverlay?.remove();
|
||||||
'${m.user.name}',
|
_mentionsOverlay = null;
|
||||||
maxLines: 1,
|
},
|
||||||
overflow: TextOverflow.ellipsis,
|
child: Container(
|
||||||
style: TextStyle(
|
height: 56.0,
|
||||||
fontWeight: FontWeight.bold),
|
child: Row(
|
||||||
),
|
crossAxisAlignment:
|
||||||
subtitle: Text(
|
CrossAxisAlignment.center,
|
||||||
'@${m.userId}',
|
children: [
|
||||||
maxLines: 1,
|
SizedBox(
|
||||||
overflow: TextOverflow.ellipsis,
|
width: 16.0,
|
||||||
),
|
|
||||||
trailing: StreamSvgIcon.mentions(
|
|
||||||
color: StreamChatTheme.of(context)
|
|
||||||
.colorTheme
|
|
||||||
.accentBlue,
|
|
||||||
),
|
|
||||||
onTap: () {
|
|
||||||
_mentionedUsers.add(m.user);
|
|
||||||
|
|
||||||
splits[splits.length - 1] = m.user.name;
|
|
||||||
final rejoin = splits.join('@');
|
|
||||||
|
|
||||||
textEditingController.value =
|
|
||||||
TextEditingValue(
|
|
||||||
text: rejoin +
|
|
||||||
textEditingController.text
|
|
||||||
.substring(
|
|
||||||
textEditingController
|
|
||||||
.selection.start),
|
|
||||||
selection: TextSelection.collapsed(
|
|
||||||
offset: rejoin.length,
|
|
||||||
),
|
),
|
||||||
);
|
UserAvatar(
|
||||||
_debounce.cancel();
|
constraints: BoxConstraints.tight(
|
||||||
_mentionsOverlay?.remove();
|
Size(
|
||||||
_mentionsOverlay = null;
|
40,
|
||||||
},
|
40,
|
||||||
))
|
),
|
||||||
.toList(),
|
),
|
||||||
);
|
user: m.user,
|
||||||
}),
|
),
|
||||||
|
SizedBox(
|
||||||
|
width: 8.0,
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: Align(
|
||||||
|
alignment: Alignment.centerLeft,
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment:
|
||||||
|
MainAxisAlignment.center,
|
||||||
|
crossAxisAlignment:
|
||||||
|
CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
'${m.user.name}',
|
||||||
|
maxLines: 1,
|
||||||
|
overflow:
|
||||||
|
TextOverflow.ellipsis,
|
||||||
|
style: StreamChatTheme.of(
|
||||||
|
context)
|
||||||
|
.textTheme
|
||||||
|
.bodyBold,
|
||||||
|
),
|
||||||
|
SizedBox(
|
||||||
|
height: 2.0,
|
||||||
|
),
|
||||||
|
Text(
|
||||||
|
'@${m.userId}',
|
||||||
|
maxLines: 1,
|
||||||
|
overflow:
|
||||||
|
TextOverflow.ellipsis,
|
||||||
|
style: StreamChatTheme.of(
|
||||||
|
context)
|
||||||
|
.textTheme
|
||||||
|
.footnoteBold
|
||||||
|
.copyWith(
|
||||||
|
color: StreamChatTheme
|
||||||
|
.of(context)
|
||||||
|
.colorTheme
|
||||||
|
.grey),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(
|
||||||
|
right: 18.0, left: 8.0),
|
||||||
|
child: StreamSvgIcon.mentions(
|
||||||
|
color: StreamChatTheme.of(context)
|
||||||
|
.colorTheme
|
||||||
|
.accentBlue,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
).toList(),
|
||||||
|
SizedBox(
|
||||||
|
height: 8.0,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}),
|
},
|
||||||
);
|
),
|
||||||
});
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
OverlayEntry _buildEmojiOverlay() {
|
OverlayEntry _buildEmojiOverlay() {
|
||||||
|
|||||||
Reference in New Issue
Block a user