From 1ce97a20aacedb846dabe0a63d345c0e94b8bd6b Mon Sep 17 00:00:00 2001 From: Deven Joshi Date: Thu, 7 Jan 2021 18:39:00 +0530 Subject: [PATCH 1/4] feat: Added icons and redid UI for commands --- lib/src/message_input.dart | 159 ++++++++++++++++++++++++++--------- lib/src/stream_svg_icon.dart | 48 +++++++++++ lib/svgs/flag.svg | 3 + lib/svgs/giphy_icon.svg | 8 ++ lib/svgs/imgur.svg | 12 +++ lib/svgs/volume-up.svg | 3 + 6 files changed, 193 insertions(+), 40 deletions(-) create mode 100644 lib/svgs/flag.svg create mode 100644 lib/svgs/giphy_icon.svg create mode 100644 lib/svgs/imgur.svg create mode 100644 lib/svgs/volume-up.svg diff --git a/lib/src/message_input.dart b/lib/src/message_input.dart index 52d91d45..07322203 100644 --- a/lib/src/message_input.dart +++ b/lib/src/message_input.dart @@ -673,7 +673,7 @@ class MessageInputState extends State { if (commands.isNotEmpty) Padding( padding: - const EdgeInsets.only(left: 8.0, top: 8.0), + const EdgeInsets.only(left: 0.0, top: 8.0), child: Row( children: [ Padding( @@ -698,31 +698,51 @@ class MessageInputState extends State { ], ), ), + SizedBox( + height: 10.0, + ), ...commands .map( - (c) => ListTile( - leading: c.name == 'giphy' - ? _buildGiphyIcon() - : null, - title: Text.rich( - TextSpan( - text: '${c.name.capitalize()}', - style: TextStyle( - fontWeight: FontWeight.bold), + (c) => InkWell( + onTap: () { + _setCommand(c); + }, + child: Container( + height: 40.0, + child: Row( children: [ - TextSpan( - text: ' /${c.name} ${c.args}', - style: TextStyle( - fontWeight: FontWeight.w300, + SizedBox( + width: 16.0, + ), + _buildCommandIcon(c.name), + SizedBox( + width: 8.0, + ), + Text.rich( + TextSpan( + text: '${c.name.capitalize()}', + style: TextStyle( + fontWeight: FontWeight.bold), + children: [ + TextSpan( + text: ' /${c.name} ${c.args}', + style: + StreamChatTheme.of(context) + .textTheme + .body + .copyWith( + color: StreamChatTheme + .of(context) + .colorTheme + .grey, + ), + ), + ], ), ), ], ), ), - //subtitle: Text(c.description), - onTap: () { - _setCommand(c); - }, ), ) .toList(), @@ -1083,28 +1103,87 @@ class MessageInputState extends State { } } - CircleAvatar _buildGiphyIcon() { - if (kIsWeb) { - return CircleAvatar( - backgroundColor: StreamChatTheme.of(context).colorTheme.black, - child: Image.asset( - 'images/giphy_icon.png', - package: 'stream_chat_flutter', - width: 24.0, - height: 24.0, - ), - radius: 12, - ); - } else { - return CircleAvatar( - child: SvgPicture.asset( - 'svgs/giphy_icon.svg', - package: 'stream_chat_flutter', - width: 24.0, - height: 24.0, - ), - radius: 12, - ); + Widget _buildCommandIcon(String iconType) { + switch (iconType) { + case 'giphy': + return CircleAvatar( + child: StreamSvgIcon.giphyIcon( + size: 24.0, + ), + radius: 12, + ); + break; + case 'ban': + return CircleAvatar( + backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue, + child: StreamSvgIcon.Icon_user_delete( + size: 16.0, + color: Colors.white, + ), + radius: 12, + ); + break; + case 'flag': + return CircleAvatar( + backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue, + child: StreamSvgIcon.flag( + size: 14.0, + color: Colors.white, + ), + radius: 12, + ); + break; + case 'imgur': + return CircleAvatar( + backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue, + child: ClipOval( + child: StreamSvgIcon.imgur( + size: 24.0, + ), + ), + radius: 12, + ); + break; + case 'mute': + return CircleAvatar( + backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue, + child: StreamSvgIcon.mute( + size: 16.0, + color: Colors.white, + ), + radius: 12, + ); + break; + case 'unban': + return CircleAvatar( + backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue, + child: StreamSvgIcon.userAdd( + size: 16.0, + color: Colors.white, + ), + radius: 12, + ); + break; + case 'unmute': + return CircleAvatar( + backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue, + child: StreamSvgIcon.volumeUp( + size: 16.0, + color: Colors.white, + ), + radius: 12, + ); + break; + default: + return CircleAvatar( + backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue, + child: StreamSvgIcon.lightning( + size: 16.0, + color: Colors.white, + ), + radius: 12, + ); + break; } } diff --git a/lib/src/stream_svg_icon.dart b/lib/src/stream_svg_icon.dart index ea5a53a5..3e8cfae2 100644 --- a/lib/src/stream_svg_icon.dart +++ b/lib/src/stream_svg_icon.dart @@ -829,4 +829,52 @@ class StreamSvgIcon extends StatelessWidget { height: size, ); } + + factory StreamSvgIcon.giphyIcon({ + double size, + Color color, + }) { + return StreamSvgIcon( + assetName: 'giphy_icon.svg', + color: color, + width: size, + height: size, + ); + } + + factory StreamSvgIcon.imgur({ + double size, + Color color, + }) { + return StreamSvgIcon( + assetName: 'imgur.svg', + color: color, + width: size, + height: size, + ); + } + + factory StreamSvgIcon.volumeUp({ + double size, + Color color, + }) { + return StreamSvgIcon( + assetName: 'volume-up.svg', + color: color, + width: size, + height: size, + ); + } + + factory StreamSvgIcon.flag({ + double size, + Color color, + }) { + return StreamSvgIcon( + assetName: 'flag.svg', + color: color, + width: size, + height: size, + ); + } } diff --git a/lib/svgs/flag.svg b/lib/svgs/flag.svg new file mode 100644 index 00000000..d5903df4 --- /dev/null +++ b/lib/svgs/flag.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/svgs/giphy_icon.svg b/lib/svgs/giphy_icon.svg new file mode 100644 index 00000000..e1a1d4bb --- /dev/null +++ b/lib/svgs/giphy_icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/lib/svgs/imgur.svg b/lib/svgs/imgur.svg new file mode 100644 index 00000000..1df5d71f --- /dev/null +++ b/lib/svgs/imgur.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/lib/svgs/volume-up.svg b/lib/svgs/volume-up.svg new file mode 100644 index 00000000..21f64c35 --- /dev/null +++ b/lib/svgs/volume-up.svg @@ -0,0 +1,3 @@ + + + From ce61c28635442c7ea1e2c5743441f872aad2a96a Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Thu, 7 Jan 2021 18:46:37 +0530 Subject: [PATCH 2/4] fix test Signed-off-by: Sahil Kumar --- test/src/channel_preview_test.dart | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/test/src/channel_preview_test.dart b/test/src/channel_preview_test.dart index 578d4b28..34b9bf92 100644 --- a/test/src/channel_preview_test.dart +++ b/test/src/channel_preview_test.dart @@ -42,10 +42,18 @@ void main() { user: User(id: 'user-id'), ), ]); - when(channelState.lastMessage).thenReturn(Message( - text: 'hello', - user: User(id: 'other-user'), - )); + when(channelState.messages).thenReturn([ + Message( + text: 'hello', + user: User(id: 'other-user'), + ) + ]); + when(channelState.messagesStream).thenAnswer((i) => Stream.value([ + Message( + text: 'hello', + user: User(id: 'other-user'), + ) + ])); await tester.pumpWidget(MaterialApp( home: StreamChat( From b5e72ff6106b1a8fb1f30ab90e29344d3eb00190 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Thu, 7 Jan 2021 17:04:27 +0100 Subject: [PATCH 3/4] fix chip text color --- example/ios/Podfile.lock | 2 +- example/ios/Runner.xcodeproj/project.pbxproj | 2 ++ example/pubspec.yaml | 2 +- lib/src/message_input.dart | 11 ++++------- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index d73a681d..f266b656 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -265,7 +265,7 @@ SPEC CHECKSUMS: FirebaseInstallations: 466c7b4d1f58fe16707693091da253726a731ed2 FirebaseInstanceID: bd3ffc24367f901a43c063b36c640b345a4a5dd1 FirebaseMessaging: 5eca4ef173de76253352511aafef774caa1cba2a - Flutter: 434fef37c0980e73bb6479ef766c45957d4b510c + Flutter: 0e3d915762c693b495b44d77113d4970485de6ec flutter_apns: ddc629f26016140bf52165040b0a8e8869f9ce32 flutter_app_badger: 65de4d6f0c34a891df49e6cfb8a1c0496426fa68 flutter_keyboard_visibility: 0339d06371254c3eb25eeb90ba8d17dca8f9c069 diff --git a/example/ios/Runner.xcodeproj/project.pbxproj b/example/ios/Runner.xcodeproj/project.pbxproj index b9c182b0..1e7527eb 100644 --- a/example/ios/Runner.xcodeproj/project.pbxproj +++ b/example/ios/Runner.xcodeproj/project.pbxproj @@ -314,6 +314,7 @@ "${BUILT_PRODUCTS_DIR}/DKImagePickerController/DKImagePickerController.framework", "${BUILT_PRODUCTS_DIR}/DKPhotoGallery/DKPhotoGallery.framework", "${BUILT_PRODUCTS_DIR}/FMDB/FMDB.framework", + "${PODS_ROOT}/../Flutter/Flutter.framework", "${BUILT_PRODUCTS_DIR}/GoogleUtilities/GoogleUtilities.framework", "${BUILT_PRODUCTS_DIR}/PromisesObjC/FBLPromises.framework", "${BUILT_PRODUCTS_DIR}/Protobuf/Protobuf.framework", @@ -347,6 +348,7 @@ "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/DKImagePickerController.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/DKPhotoGallery.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/FMDB.framework", + "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Flutter.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/GoogleUtilities.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/FBLPromises.framework", "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Protobuf.framework", diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 142614c1..c5f52233 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -1,6 +1,6 @@ name: example description: A new Flutter project. -version: 1.0.111+114 +version: 1.0.112+115 environment: sdk: ">=2.2.2 <3.0.0" diff --git a/lib/src/message_input.dart b/lib/src/message_input.dart index 07322203..d9acda56 100644 --- a/lib/src/message_input.dart +++ b/lib/src/message_input.dart @@ -22,9 +22,9 @@ import 'package:stream_chat_flutter/src/stream_svg_icon.dart'; import 'package:stream_chat_flutter/src/user_avatar.dart'; import 'package:substring_highlight/substring_highlight.dart'; import 'package:video_compress/video_compress.dart'; -import 'extension.dart'; import '../stream_chat_flutter.dart'; +import 'extension.dart'; import 'quoted_message_widget.dart'; import 'stream_channel.dart'; @@ -477,9 +477,7 @@ class MessageInputState extends State { mainAxisAlignment: MainAxisAlignment.center, children: [ StreamSvgIcon.lightning( - color: StreamChatTheme.of(context) - .colorTheme - .white, + color: Colors.white, size: 16.0, ), Text( @@ -488,9 +486,8 @@ class MessageInputState extends State { .textTheme .footnote .copyWith( - color: StreamChatTheme.of(context) - .colorTheme - .white), + color: Colors.white, + ), ), ], ), From 141cc55b056e839d97778fd11d1b59d3f76f0fb9 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Thu, 7 Jan 2021 17:04:53 +0100 Subject: [PATCH 4/4] fix chip text color --- example/pubspec.yaml | 2 +- lib/src/message_input.dart | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/example/pubspec.yaml b/example/pubspec.yaml index c5f52233..539166ec 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -1,6 +1,6 @@ name: example description: A new Flutter project. -version: 1.0.112+115 +version: 1.0.113+116 environment: sdk: ">=2.2.2 <3.0.0" diff --git a/lib/src/message_input.dart b/lib/src/message_input.dart index d9acda56..de0aa115 100644 --- a/lib/src/message_input.dart +++ b/lib/src/message_input.dart @@ -477,7 +477,7 @@ class MessageInputState extends State { mainAxisAlignment: MainAxisAlignment.center, children: [ StreamSvgIcon.lightning( - color: Colors.white, + color: Colors.white, size: 16.0, ), Text(