fix: Emoji picker

This commit is contained in:
Christian Pauly 2021-05-20 13:46:52 +02:00
parent 37c40a2cb5
commit e1bd4e174c
4 changed files with 272 additions and 278 deletions

View File

@ -3,7 +3,6 @@ import 'dart:io';
import 'package:adaptive_dialog/adaptive_dialog.dart'; import 'package:adaptive_dialog/adaptive_dialog.dart';
import 'package:adaptive_page_layout/adaptive_page_layout.dart'; import 'package:adaptive_page_layout/adaptive_page_layout.dart';
import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
import 'package:famedlysdk/famedlysdk.dart'; import 'package:famedlysdk/famedlysdk.dart';
import 'package:file_picker_cross/file_picker_cross.dart'; import 'package:file_picker_cross/file_picker_cross.dart';
import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/config/app_config.dart';
@ -23,7 +22,6 @@ import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:image_picker/image_picker.dart'; import 'package:image_picker/image_picker.dart';
import 'package:permission_handler/permission_handler.dart'; import 'package:permission_handler/permission_handler.dart';
import 'package:scroll_to_index/scroll_to_index.dart'; import 'package:scroll_to_index/scroll_to_index.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:url_launcher/url_launcher.dart'; import 'package:url_launcher/url_launcher.dart';
import 'send_file_dialog.dart'; import 'send_file_dialog.dart';
@ -78,6 +76,8 @@ class ChatController extends State<Chat> {
bool get canLoadMore => timeline.events.last.type != EventTypes.RoomCreate; bool get canLoadMore => timeline.events.last.type != EventTypes.RoomCreate;
bool showEmojiPicker = false;
void startCallAction() async { void startCallAction() async {
final url = final url =
'${AppConfig.jitsiInstance}${Uri.encodeComponent(Matrix.of(context).client.generateUniqueTransactionId())}'; '${AppConfig.jitsiInstance}${Uri.encodeComponent(Matrix.of(context).client.generateUniqueTransactionId())}';
@ -478,39 +478,24 @@ class ChatController extends State<Chat> {
void scrollDown() => scrollController.jumpTo(0); void scrollDown() => scrollController.jumpTo(0);
void pickEmojiAction(Iterable<Event> allReactionEvents) async { void onEmojiSelected(category, emoji) {
final emoji = await showModalBottomSheet( setState(() => showEmojiPicker = false);
context: context,
backgroundColor: Colors.transparent,
builder: (innerContext) => Column(
children: [
Spacer(),
Material(
color: Theme.of(context).scaffoldBackgroundColor,
child: EmojiPicker(
onEmojiSelected: (category, emoji) {
// recent emojis don't work, so we sadly have to re-implement them
// https://github.com/JeffG05/emoji_picker/issues/31
SharedPreferences.getInstance().then((prefs) {
final recents = prefs.getStringList('recents') ?? <String>[];
recents.insert(0, emoji.name);
// make sure we remove duplicates
prefs.setStringList('recents', recents.toSet().toList());
});
Navigator.of(innerContext, rootNavigator: false).pop(emoji);
},
),
),
],
),
);
if (emoji == null) return; if (emoji == null) return;
// make sure we don't send the same emoji twice // make sure we don't send the same emoji twice
if (allReactionEvents if (_allReactionEvents
.any((e) => e.content['m.relates_to']['key'] == emoji.emoji)) return; .any((e) => e.content['m.relates_to']['key'] == emoji.emoji)) return;
return sendEmojiAction(emoji.emoji); return sendEmojiAction(emoji.emoji);
} }
Iterable<Event> _allReactionEvents;
void cancelEmojiPicker() => setState(() => showEmojiPicker = false);
void pickEmojiAction(Iterable<Event> allReactionEvents) async {
_allReactionEvents = allReactionEvents;
setState(() => showEmojiPicker = true);
}
void sendEmojiAction(String emoji) async { void sendEmojiAction(String emoji) async {
await showFutureLoadingDialog( await showFutureLoadingDialog(
context: context, context: context,
@ -522,7 +507,10 @@ class ChatController extends State<Chat> {
setState(() => selectedEvents.clear()); setState(() => selectedEvents.clear());
} }
void clearSelectedEvents() => setState(() => selectedEvents.clear()); void clearSelectedEvents() => setState(() {
selectedEvents.clear();
showEmojiPicker = false;
});
void editSelectedEventAction() { void editSelectedEventAction() {
setState(() { setState(() {

View File

@ -2,6 +2,7 @@ import 'dart:math';
import 'dart:ui'; import 'dart:ui';
import 'package:adaptive_page_layout/adaptive_page_layout.dart'; import 'package:adaptive_page_layout/adaptive_page_layout.dart';
import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
import 'package:famedlysdk/famedlysdk.dart'; import 'package:famedlysdk/famedlysdk.dart';
import 'package:fluffychat/views/chat.dart'; import 'package:fluffychat/views/chat.dart';
import 'package:fluffychat/views/widgets/avatar.dart'; import 'package:fluffychat/views/widgets/avatar.dart';
@ -415,6 +416,7 @@ class ChatUI extends StatelessWidget {
}, },
), ),
), ),
if (!controller.showEmojiPicker)
AnimatedContainer( AnimatedContainer(
duration: Duration(milliseconds: 300), duration: Duration(milliseconds: 300),
height: (controller.editEvent == null && height: (controller.editEvent == null &&
@ -432,7 +434,8 @@ class ChatUI extends StatelessWidget {
return Container(); return Container();
} }
final emojis = List<String>.from(AppEmojis.emojis); final emojis = List<String>.from(AppEmojis.emojis);
final allReactionEvents = controller.selectedEvents.first final allReactionEvents = controller
.selectedEvents.first
.aggregatedEvents( .aggregatedEvents(
controller.timeline, RelationshipTypes.reaction) controller.timeline, RelationshipTypes.reaction)
?.where((event) => ?.where((event) =>
@ -507,9 +510,10 @@ class ChatUI extends StatelessWidget {
height: 1, height: 1,
thickness: 1, thickness: 1,
), ),
controller.room.canSendDefaultMessages && if (controller.room.canSendDefaultMessages &&
controller.room.membership == Membership.join controller.room.membership == Membership.join &&
? Container( !controller.showEmojiPicker)
Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor, color: Theme.of(context).scaffoldBackgroundColor,
), ),
@ -524,8 +528,7 @@ class ChatUI extends StatelessWidget {
onPressed: controller.forwardEventsAction, onPressed: controller.forwardEventsAction,
child: Row( child: Row(
children: <Widget>[ children: <Widget>[
Icon(Icons Icon(Icons.keyboard_arrow_left_outlined),
.keyboard_arrow_left_outlined),
Text(L10n.of(context).forward), Text(L10n.of(context).forward),
], ],
), ),
@ -540,14 +543,12 @@ class ChatUI extends StatelessWidget {
? Container( ? Container(
height: 56, height: 56,
child: TextButton( child: TextButton(
onPressed: onPressed: controller.replyAction,
controller.replyAction,
child: Row( child: Row(
children: <Widget>[ children: <Widget>[
Text( Text(L10n.of(context).reply),
L10n.of(context).reply), Icon(
Icon(Icons Icons.keyboard_arrow_right),
.keyboard_arrow_right),
], ],
), ),
), ),
@ -574,15 +575,14 @@ class ChatUI extends StatelessWidget {
AnimatedContainer( AnimatedContainer(
duration: Duration(milliseconds: 200), duration: Duration(milliseconds: 200),
height: 56, height: 56,
width: width: controller.inputText.isEmpty ? 56 : 0,
controller.inputText.isEmpty ? 56 : 0,
alignment: Alignment.center, alignment: Alignment.center,
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(), decoration: BoxDecoration(),
child: PopupMenuButton<String>( child: PopupMenuButton<String>(
icon: Icon(Icons.add_outlined), icon: Icon(Icons.add_outlined),
onSelected: controller onSelected:
.onAddPopupMenuButtonSelected, controller.onAddPopupMenuButtonSelected,
itemBuilder: (BuildContext context) => itemBuilder: (BuildContext context) =>
<PopupMenuEntry<String>>[ <PopupMenuEntry<String>>[
PopupMenuItem<String>( PopupMenuItem<String>(
@ -591,11 +591,10 @@ class ChatUI extends StatelessWidget {
leading: CircleAvatar( leading: CircleAvatar(
backgroundColor: Colors.green, backgroundColor: Colors.green,
foregroundColor: Colors.white, foregroundColor: Colors.white,
child: Icon( child:
Icons.attachment_outlined), Icon(Icons.attachment_outlined),
), ),
title: title: Text(L10n.of(context).sendFile),
Text(L10n.of(context).sendFile),
contentPadding: EdgeInsets.all(0), contentPadding: EdgeInsets.all(0),
), ),
), ),
@ -607,8 +606,7 @@ class ChatUI extends StatelessWidget {
foregroundColor: Colors.white, foregroundColor: Colors.white,
child: Icon(Icons.image_outlined), child: Icon(Icons.image_outlined),
), ),
title: Text( title: Text(L10n.of(context).sendImage),
L10n.of(context).sendImage),
contentPadding: EdgeInsets.all(0), contentPadding: EdgeInsets.all(0),
), ),
), ),
@ -619,11 +617,11 @@ class ChatUI extends StatelessWidget {
leading: CircleAvatar( leading: CircleAvatar(
backgroundColor: Colors.purple, backgroundColor: Colors.purple,
foregroundColor: Colors.white, foregroundColor: Colors.white,
child: Icon( child:
Icons.camera_alt_outlined), Icon(Icons.camera_alt_outlined),
), ),
title: Text( title:
L10n.of(context).openCamera), Text(L10n.of(context).openCamera),
contentPadding: EdgeInsets.all(0), contentPadding: EdgeInsets.all(0),
), ),
), ),
@ -634,11 +632,11 @@ class ChatUI extends StatelessWidget {
leading: CircleAvatar( leading: CircleAvatar(
backgroundColor: Colors.red, backgroundColor: Colors.red,
foregroundColor: Colors.white, foregroundColor: Colors.white,
child: Icon( child:
Icons.mic_none_outlined), Icon(Icons.mic_none_outlined),
), ),
title: Text(L10n.of(context) title: Text(
.voiceMessage), L10n.of(context).voiceMessage),
contentPadding: EdgeInsets.all(0), contentPadding: EdgeInsets.all(0),
), ),
), ),
@ -652,8 +650,8 @@ class ChatUI extends StatelessWidget {
), ),
Expanded( Expanded(
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding:
vertical: 4.0), const EdgeInsets.symmetric(vertical: 4.0),
child: InputBar( child: InputBar(
room: controller.room, room: controller.room,
minLines: 1, minLines: 1,
@ -662,13 +660,11 @@ class ChatUI extends StatelessWidget {
keyboardType: !PlatformInfos.isMobile keyboardType: !PlatformInfos.isMobile
? TextInputType.text ? TextInputType.text
: TextInputType.multiline, : TextInputType.multiline,
onSubmitted: onSubmitted: controller.onInputBarSubmitted,
controller.onInputBarSubmitted,
focusNode: controller.inputFocus, focusNode: controller.inputFocus,
controller: controller.sendController, controller: controller.sendController,
decoration: InputDecoration( decoration: InputDecoration(
hintText: hintText: L10n.of(context).writeAMessage,
L10n.of(context).writeAMessage,
hintMaxLines: 1, hintMaxLines: 1,
border: InputBorder.none, border: InputBorder.none,
enabledBorder: InputBorder.none, enabledBorder: InputBorder.none,
@ -686,8 +682,7 @@ class ChatUI extends StatelessWidget {
child: IconButton( child: IconButton(
tooltip: L10n.of(context).voiceMessage, tooltip: L10n.of(context).voiceMessage,
icon: Icon(Icons.mic_none_outlined), icon: Icon(Icons.mic_none_outlined),
onPressed: onPressed: controller.voiceMessageAction,
controller.voiceMessageAction,
), ),
), ),
if (!PlatformInfos.isMobile || if (!PlatformInfos.isMobile ||
@ -703,8 +698,19 @@ class ChatUI extends StatelessWidget {
), ),
], ],
), ),
),
AnimatedContainer(
duration: Duration(milliseconds: 300),
height: controller.showEmojiPicker
? MediaQuery.of(context).size.height / 2
: 0,
child: controller.showEmojiPicker
? EmojiPicker(
onEmojiSelected: controller.onEmojiSelected,
onBackspacePressed: controller.cancelEmojiPicker,
) )
: Container(), : null,
),
], ],
), ),
), ),

View File

@ -217,7 +217,7 @@ packages:
name: emoji_picker_flutter name: emoji_picker_flutter
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "1.0.3" version: "1.0.5"
fake_async: fake_async:
dependency: transitive dependency: transitive
description: description:

View File

@ -16,7 +16,7 @@ dependencies:
cupertino_icons: any cupertino_icons: any
desktop_notifications: ^0.4.0 desktop_notifications: ^0.4.0
email_validator: ^2.0.1 email_validator: ^2.0.1
emoji_picker_flutter: ^1.0.3 emoji_picker_flutter: ^1.0.5
famedlysdk: famedlysdk:
git: git:
url: https://gitlab.com/famedly/famedlysdk.git url: https://gitlab.com/famedly/famedlysdk.git