From 9aa3f7c058e7fa23a0deed979c3a3879d6935b6f Mon Sep 17 00:00:00 2001 From: Pupsi28 Date: Tue, 2 Apr 2024 14:11:48 +0200 Subject: [PATCH 1/7] added option to choose more emoji reactions --- android/app/build.gradle | 2 +- android/settings.gradle | 2 +- .../pages/talk/components/chatBubble.dart | 95 ++++++++++++++++++- pubspec.yaml | 1 + 4 files changed, 94 insertions(+), 6 deletions(-) diff --git a/android/app/build.gradle b/android/app/build.gradle index be61a9d..5d92285 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -45,7 +45,7 @@ android { applicationId "eu.mhsl.marianum.mobile.client" // You can update the following values to match your application needs. // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration. - minSdkVersion 19 + minSdkVersion 21 targetSdkVersion flutter.targetSdkVersion versionCode flutterVersionCode.toInteger() versionName flutterVersionName diff --git a/android/settings.gradle b/android/settings.gradle index 1d6d19b..767b939 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -20,7 +20,7 @@ pluginManagement { plugins { id "dev.flutter.flutter-plugin-loader" version "1.0.0" id "com.android.application" version "7.3.0" apply false - id "org.jetbrains.kotlin.android" version "1.7.10" apply false + id "org.jetbrains.kotlin.android" version "1.8.10" apply false } include ":app" diff --git a/lib/view/pages/talk/components/chatBubble.dart b/lib/view/pages/talk/components/chatBubble.dart index 0c902db..0e80bf3 100644 --- a/lib/view/pages/talk/components/chatBubble.dart +++ b/lib/view/pages/talk/components/chatBubble.dart @@ -1,5 +1,6 @@ import 'package:better_open_file/better_open_file.dart'; import 'package:bubble/bubble.dart'; +import 'package:emoji_picker_flutter/emoji_picker_flutter.dart' as emojis; import 'package:flowder/flowder.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @@ -49,6 +50,8 @@ class ChatBubble extends StatefulWidget { } class _ChatBubbleState extends State { + final TextEditingController _emojiInput = TextEditingController(); + BubbleStyle getSystemStyle() { return BubbleStyle( color: AppTheme.isDarkMode(context) ? const Color(0xff182229) : Colors.white, @@ -184,7 +187,7 @@ class _ChatBubbleState extends State { ), onLongPress: () { showDialog(context: context, builder: (context) { - List commonReactions = ['👍', '👎', '😆', '❤️', '👀', '🤔']; + List commonReactions = ['👍', '👎', '😆', '❤️', '😎']; bool canReact = widget.bubbleData.messageType == GetRoomResponseObjectMessageType.comment; return SimpleDialog( children: [ @@ -210,18 +213,102 @@ class _ChatBubbleState extends State { params: ReactMessageParams(e), ).run().then((value) => widget.refetch(renew: true)); }, - child: Text(e)), + child: Text(e), + ), + ), + IconButton( + onPressed: () { + showDialog(context: context, builder: (context) { + return SimpleDialog( + contentPadding: const EdgeInsets.all(15), + titlePadding: const EdgeInsets.only(left: 6, top: 15), + title: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + IconButton( + onPressed: () { + Navigator.of(context).pop(); + }, + icon: const Icon(Icons.arrow_back), + ), + const SizedBox( + width: 10, + height: 0, + child: null, + ), + const Text('Emoji auswählen'), + ], + ), + children: [ + Column( + children: [ + emojis.EmojiPicker( + onBackspacePressed: () { + null; + }, + config: emojis.Config( + height: 256, + swapCategoryAndBottomBar: true, + emojiViewConfig: emojis.EmojiViewConfig( + backgroundColor: Theme.of(context).canvasColor, + recentsLimit: 67, + emojiSizeMax: 20, + ), + bottomActionBarConfig: emojis.BottomActionBarConfig( + showBackspaceButton: false, + backgroundColor: Theme.of(context).hoverColor.withAlpha(50), + buttonColor: Theme.of(context).dividerColor.withAlpha(70), + ), + categoryViewConfig: emojis.CategoryViewConfig( + backgroundColor: Theme.of(context).hoverColor, + iconColorSelected: Theme.of(context).primaryColor, + indicatorColor: Theme.of(context).primaryColor, + ), + searchViewConfig: emojis.SearchViewConfig( + backgroundColor: Theme.of(context).dividerColor, + buttonColor: Theme.of(context).dividerColor, + hintText: 'Suchen', + buttonIconColor: Colors.white, + ), + ), + onEmojiSelected: (emojis.Category? category, emojis.Emoji emoji) { + Navigator.of(context).pop(); + Navigator.of(context).pop(); + ReactMessage( + chatToken: widget.chatData.token, + messageId: widget.bubbleData.id, + params: ReactMessageParams(emoji.emoji), + ).run().then((value) => widget.refetch(renew: true)); + }, + ), + const SizedBox( + width: 1, + height: 25, + child: null, + ) + ], + ), + ], + ); + }); + }, + style: IconButton.styleFrom( + padding: EdgeInsets.zero, + tapTargetSize: MaterialTapTargetSize.shrinkWrap, + minimumSize: const Size(40, 40), + ), + icon: const Icon(Icons.add_circle_outline_outlined), ), ], ), const Divider(), ], - ) + ), ), Visibility( visible: canReact, child: ListTile( - leading: const Icon(Icons.add_reaction_outlined), + leading: const Icon(Icons.emoji_emotions_outlined), title: const Text('Reaktionen'), onTap: () { Navigator.of(context).push(MaterialPageRoute(builder: (context) => MessageReactions( diff --git a/pubspec.yaml b/pubspec.yaml index 2bce963..b800e58 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -97,6 +97,7 @@ dependencies: rrule: ^0.2.16 time_range_picker: ^2.2.0 in_app_review: ^2.0.8 + emoji_picker_flutter: ^2.1.1 dev_dependencies: flutter_test: From c54a42aa43a94b02bf0e3a7aa57348c332500af1 Mon Sep 17 00:00:00 2001 From: Pupsi28 Date: Tue, 2 Apr 2024 14:34:35 +0200 Subject: [PATCH 2/7] added unfocus when tapping on background image --- lib/view/pages/talk/components/chatBubble.dart | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/view/pages/talk/components/chatBubble.dart b/lib/view/pages/talk/components/chatBubble.dart index 0e80bf3..d880f90 100644 --- a/lib/view/pages/talk/components/chatBubble.dart +++ b/lib/view/pages/talk/components/chatBubble.dart @@ -50,7 +50,6 @@ class ChatBubble extends StatefulWidget { } class _ChatBubbleState extends State { - final TextEditingController _emojiInput = TextEditingController(); BubbleStyle getSystemStyle() { return BubbleStyle( @@ -252,7 +251,7 @@ class _ChatBubbleState extends State { emojiViewConfig: emojis.EmojiViewConfig( backgroundColor: Theme.of(context).canvasColor, recentsLimit: 67, - emojiSizeMax: 20, + emojiSizeMax: 19, ), bottomActionBarConfig: emojis.BottomActionBarConfig( showBackspaceButton: false, From 07401d0864d185cbeb0e3a47dfe63ec9eef53995 Mon Sep 17 00:00:00 2001 From: Pupsi28 Date: Tue, 2 Apr 2024 15:47:55 +0200 Subject: [PATCH 3/7] resolved pr comments and fixed a bug --- .../pages/talk/components/chatBubble.dart | 81 +++++++++++++++---- 1 file changed, 66 insertions(+), 15 deletions(-) diff --git a/lib/view/pages/talk/components/chatBubble.dart b/lib/view/pages/talk/components/chatBubble.dart index d880f90..a351435 100644 --- a/lib/view/pages/talk/components/chatBubble.dart +++ b/lib/view/pages/talk/components/chatBubble.dart @@ -218,7 +218,7 @@ class _ChatBubbleState extends State { IconButton( onPressed: () { showDialog(context: context, builder: (context) { - return SimpleDialog( + return AlertDialog( contentPadding: const EdgeInsets.all(15), titlePadding: const EdgeInsets.only(left: 6, top: 15), title: Row( @@ -230,11 +230,69 @@ class _ChatBubbleState extends State { }, icon: const Icon(Icons.arrow_back), ), - const SizedBox( - width: 10, - height: 0, - child: null, + const SizedBox(width: 10), + const Text('Emoji auswählen'), + ], + ), + content: SizedBox( + width: 256, + height: 270, + child: Column( + children: [ + emojis.EmojiPicker( + config: emojis.Config( + height: 256, + swapCategoryAndBottomBar: true, + emojiViewConfig: emojis.EmojiViewConfig( + backgroundColor: Theme.of(context).canvasColor, + recentsLimit: 67, + emojiSizeMax: 19, + noRecents: const Text('Keine zuletzt verwendeten Emojis'), + ), + bottomActionBarConfig: emojis.BottomActionBarConfig( + showBackspaceButton: false, + backgroundColor: Theme.of(context).hoverColor.withAlpha(50), + buttonColor: Theme.of(context).dividerColor.withAlpha(70), + ), + categoryViewConfig: emojis.CategoryViewConfig( + backgroundColor: Theme.of(context).hoverColor, + iconColorSelected: Theme.of(context).primaryColor, + indicatorColor: Theme.of(context).primaryColor, + ), + searchViewConfig: emojis.SearchViewConfig( + backgroundColor: Theme.of(context).dividerColor, + buttonColor: Theme.of(context).dividerColor, + hintText: 'Suchen', + buttonIconColor: Colors.white, + ), + ), + onEmojiSelected: (emojis.Category? category, emojis.Emoji emoji) { + Navigator.of(context).pop(); + Navigator.of(context).pop(); + ReactMessage( + chatToken: widget.chatData.token, + messageId: widget.bubbleData.id, + params: ReactMessageParams(emoji.emoji), + ).run().then((value) => widget.refetch(renew: true)); + }, + ), + ], + ), + ), + ); + /*return SimpleDialog( + contentPadding: const EdgeInsets.all(15), + titlePadding: const EdgeInsets.only(left: 6, top: 15), + title: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + IconButton( + onPressed: () { + Navigator.of(context).pop(); + }, + icon: const Icon(Icons.arrow_back), ), + const SizedBox(width: 10), const Text('Emoji auswählen'), ], ), @@ -242,11 +300,8 @@ class _ChatBubbleState extends State { Column( children: [ emojis.EmojiPicker( - onBackspacePressed: () { - null; - }, config: emojis.Config( - height: 256, + //height: 256, swapCategoryAndBottomBar: true, emojiViewConfig: emojis.EmojiViewConfig( backgroundColor: Theme.of(context).canvasColor, @@ -280,15 +335,11 @@ class _ChatBubbleState extends State { ).run().then((value) => widget.refetch(renew: true)); }, ), - const SizedBox( - width: 1, - height: 25, - child: null, - ) + const SizedBox(height: 25), ], ), ], - ); + );*/ }); }, style: IconButton.styleFrom( From 65d15ffd4e1eb09a123706cc6727ee56fec736e5 Mon Sep 17 00:00:00 2001 From: Pupsi28 Date: Tue, 2 Apr 2024 15:51:06 +0200 Subject: [PATCH 4/7] removed commented code --- .../pages/talk/components/chatBubble.dart | 60 ------------------- 1 file changed, 60 deletions(-) diff --git a/lib/view/pages/talk/components/chatBubble.dart b/lib/view/pages/talk/components/chatBubble.dart index a351435..9a4f3e8 100644 --- a/lib/view/pages/talk/components/chatBubble.dart +++ b/lib/view/pages/talk/components/chatBubble.dart @@ -280,66 +280,6 @@ class _ChatBubbleState extends State { ), ), ); - /*return SimpleDialog( - contentPadding: const EdgeInsets.all(15), - titlePadding: const EdgeInsets.only(left: 6, top: 15), - title: Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - IconButton( - onPressed: () { - Navigator.of(context).pop(); - }, - icon: const Icon(Icons.arrow_back), - ), - const SizedBox(width: 10), - const Text('Emoji auswählen'), - ], - ), - children: [ - Column( - children: [ - emojis.EmojiPicker( - config: emojis.Config( - //height: 256, - swapCategoryAndBottomBar: true, - emojiViewConfig: emojis.EmojiViewConfig( - backgroundColor: Theme.of(context).canvasColor, - recentsLimit: 67, - emojiSizeMax: 19, - ), - bottomActionBarConfig: emojis.BottomActionBarConfig( - showBackspaceButton: false, - backgroundColor: Theme.of(context).hoverColor.withAlpha(50), - buttonColor: Theme.of(context).dividerColor.withAlpha(70), - ), - categoryViewConfig: emojis.CategoryViewConfig( - backgroundColor: Theme.of(context).hoverColor, - iconColorSelected: Theme.of(context).primaryColor, - indicatorColor: Theme.of(context).primaryColor, - ), - searchViewConfig: emojis.SearchViewConfig( - backgroundColor: Theme.of(context).dividerColor, - buttonColor: Theme.of(context).dividerColor, - hintText: 'Suchen', - buttonIconColor: Colors.white, - ), - ), - onEmojiSelected: (emojis.Category? category, emojis.Emoji emoji) { - Navigator.of(context).pop(); - Navigator.of(context).pop(); - ReactMessage( - chatToken: widget.chatData.token, - messageId: widget.bubbleData.id, - params: ReactMessageParams(emoji.emoji), - ).run().then((value) => widget.refetch(renew: true)); - }, - ), - const SizedBox(height: 25), - ], - ), - ], - );*/ }); }, style: IconButton.styleFrom( From 8ae8c97b413db8d82addd85d900ec4f9022c8fd9 Mon Sep 17 00:00:00 2001 From: Pupsi28 Date: Tue, 2 Apr 2024 18:10:54 +0200 Subject: [PATCH 5/7] made emojis in emoji picker bigger --- lib/view/pages/talk/components/chatBubble.dart | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/view/pages/talk/components/chatBubble.dart b/lib/view/pages/talk/components/chatBubble.dart index 9a4f3e8..f45a987 100644 --- a/lib/view/pages/talk/components/chatBubble.dart +++ b/lib/view/pages/talk/components/chatBubble.dart @@ -246,8 +246,9 @@ class _ChatBubbleState extends State { emojiViewConfig: emojis.EmojiViewConfig( backgroundColor: Theme.of(context).canvasColor, recentsLimit: 67, - emojiSizeMax: 19, + emojiSizeMax: 25, noRecents: const Text('Keine zuletzt verwendeten Emojis'), + columns: 7 ), bottomActionBarConfig: emojis.BottomActionBarConfig( showBackspaceButton: false, From 57ddee2dc92db16a036e00f81e3f840c6fdbdb1e Mon Sep 17 00:00:00 2001 From: Pupsi28 Date: Tue, 2 Apr 2024 18:24:12 +0200 Subject: [PATCH 6/7] removed search option and action bar --- lib/view/pages/talk/components/chatBubble.dart | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/lib/view/pages/talk/components/chatBubble.dart b/lib/view/pages/talk/components/chatBubble.dart index f45a987..b9813c5 100644 --- a/lib/view/pages/talk/components/chatBubble.dart +++ b/lib/view/pages/talk/components/chatBubble.dart @@ -231,7 +231,7 @@ class _ChatBubbleState extends State { icon: const Icon(Icons.arrow_back), ), const SizedBox(width: 10), - const Text('Emoji auswählen'), + const Text('Reagieren'), ], ), content: SizedBox( @@ -248,12 +248,10 @@ class _ChatBubbleState extends State { recentsLimit: 67, emojiSizeMax: 25, noRecents: const Text('Keine zuletzt verwendeten Emojis'), - columns: 7 + columns: 7, ), - bottomActionBarConfig: emojis.BottomActionBarConfig( - showBackspaceButton: false, - backgroundColor: Theme.of(context).hoverColor.withAlpha(50), - buttonColor: Theme.of(context).dividerColor.withAlpha(70), + bottomActionBarConfig: const emojis.BottomActionBarConfig( + enabled: false, ), categoryViewConfig: emojis.CategoryViewConfig( backgroundColor: Theme.of(context).hoverColor, From 74c7c168772de4119a097ae313614d17d5189f08 Mon Sep 17 00:00:00 2001 From: Pupsi28 Date: Tue, 2 Apr 2024 18:30:13 +0200 Subject: [PATCH 7/7] changed a standard emoji to eyes looking around --- lib/view/pages/talk/components/chatBubble.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/view/pages/talk/components/chatBubble.dart b/lib/view/pages/talk/components/chatBubble.dart index b9813c5..0323117 100644 --- a/lib/view/pages/talk/components/chatBubble.dart +++ b/lib/view/pages/talk/components/chatBubble.dart @@ -186,7 +186,7 @@ class _ChatBubbleState extends State { ), onLongPress: () { showDialog(context: context, builder: (context) { - List commonReactions = ['👍', '👎', '😆', '❤️', '😎']; + List commonReactions = ['👍', '👎', '😆', '❤️', '👀']; bool canReact = widget.bubbleData.messageType == GetRoomResponseObjectMessageType.comment; return SimpleDialog( children: [