From 1ce97a20aacedb846dabe0a63d345c0e94b8bd6b Mon Sep 17 00:00:00 2001 From: Deven Joshi Date: Thu, 7 Jan 2021 18:39:00 +0530 Subject: [PATCH] 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 @@ + + +