From 119c6660e9ab736ad1500350256309b92271e830 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Thu, 5 Nov 2020 14:35:50 +0100 Subject: [PATCH 1/4] fix qa problems --- example/ios/Flutter/.last_build_id | 2 +- example/pubspec.yaml | 2 +- lib/src/giphy_attachment.dart | 359 +++++++++++++++-------------- lib/src/message_input.dart | 20 +- 4 files changed, 195 insertions(+), 188 deletions(-) diff --git a/example/ios/Flutter/.last_build_id b/example/ios/Flutter/.last_build_id index 5d3809be..8aba7787 100644 --- a/example/ios/Flutter/.last_build_id +++ b/example/ios/Flutter/.last_build_id @@ -1 +1 @@ -bdf1751976c4ee1e2ef7638eabcfd1ea \ No newline at end of file +bb5f9103d9045cd6244bcae1f5f343e5 \ No newline at end of file diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 842f471c..97971445 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -1,6 +1,6 @@ name: example description: A new Flutter project. -version: 1.0.39+41 +version: 1.0.40+42 environment: sdk: ">=2.2.2 <3.0.0" diff --git a/lib/src/giphy_attachment.dart b/lib/src/giphy_attachment.dart index 766f7720..bfa21239 100644 --- a/lib/src/giphy_attachment.dart +++ b/lib/src/giphy_attachment.dart @@ -41,196 +41,211 @@ class GiphyAttachment extends StatelessWidget { return Column( mainAxisSize: MainAxisSize.min, children: [ - Card( - clipBehavior: Clip.antiAlias, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.only( - topRight: Radius.circular(16.0), - bottomRight: Radius.circular(0.0), - topLeft: Radius.circular(16.0), - bottomLeft: Radius.circular(16.0), + DecoratedBox( + decoration: BoxDecoration(), + child: Card( + elevation: 2, + clipBehavior: Clip.antiAlias, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.only( + topRight: Radius.circular(16.0), + bottomRight: Radius.circular(0.0), + topLeft: Radius.circular(16.0), + bottomLeft: Radius.circular(16.0), + ), ), - ), - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - Stack( - children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: GestureDetector( - onTap: () { - Navigator.push(context, MaterialPageRoute(builder: (_) { - return FullScreenImage( - url: attachment.imageUrl ?? - attachment.assetUrl ?? - attachment.thumbUrl, - ); - })); - }, - child: CachedNetworkImage( - height: size?.height, - width: size?.width, - placeholder: (_, __) { - return Container( - width: size?.width, - height: size?.height, - child: Center( - child: CircularProgressIndicator(), - ), - ); + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Stack( + children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: GestureDetector( + onTap: () { + Navigator.push(context, + MaterialPageRoute(builder: (_) { + return FullScreenImage( + url: attachment.imageUrl ?? + attachment.assetUrl ?? + attachment.thumbUrl, + ); + })); }, - imageUrl: attachment.thumbUrl ?? - attachment.imageUrl ?? - attachment.assetUrl, - errorWidget: (context, url, error) => AttachmentError( - attachment: attachment, - size: size, + child: CachedNetworkImage( + height: size?.height, + width: size?.width, + placeholder: (_, __) { + return Container( + width: size?.width, + height: size?.height, + child: Center( + child: CircularProgressIndicator(), + ), + ); + }, + imageUrl: attachment.thumbUrl ?? + attachment.imageUrl ?? + attachment.assetUrl, + errorWidget: (context, url, error) => AttachmentError( + attachment: attachment, + size: size, + ), + fit: BoxFit.cover, ), - fit: BoxFit.cover, ), ), - ), - Positioned( - left: 0, - top: 0, - child: Container( - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.only( - bottomRight: Radius.circular(16.0), - )), - child: Padding( - padding: const EdgeInsets.only( - left: 8.0, - right: 8.0, - top: 8.0, - bottom: 4.0, - ), - child: Row( - children: [ - Icon( - StreamIcons.lightning, - color: StreamChatTheme.of(context).accentColor, - size: 16.0, - ), - Text( - 'GIPHY', - style: TextStyle( + Positioned( + left: 0, + top: 0, + child: Container( + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + bottomRight: Radius.circular(16.0), + )), + child: Padding( + padding: const EdgeInsets.only( + left: 8.0, + right: 8.0, + top: 8.0, + bottom: 4.0, + ), + child: Row( + children: [ + Icon( + StreamIcons.lightning, color: StreamChatTheme.of(context).accentColor, - fontWeight: FontWeight.bold, - fontSize: 11.0, + size: 16.0, + ), + Text( + 'GIPHY', + style: TextStyle( + color: + StreamChatTheme.of(context).accentColor, + fontWeight: FontWeight.bold, + fontSize: 11.0, + ), + ), + ], + ), + ), + ), + ), + ], + ), + if (attachment.title != null) + Container( + alignment: Alignment.bottomCenter, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 8.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Card( + elevation: 2, + child: IconButton( + padding: const EdgeInsets.all(0), + constraints: BoxConstraints.tight(Size(32, 32)), + icon: Icon( + StreamIcons.left, + size: 24.0, + ), + splashRadius: 16, + onPressed: () { + streamChannel.channel.sendAction(message, { + 'image_action': 'shuffle', + }); + }, + ), + shape: CircleBorder(), + ), + Expanded( + child: Center( + child: Text( + '"${attachment.title}"', + style: TextStyle( + fontStyle: FontStyle.italic, + ), ), ), - ], - ), - ), - ), - ), - ], - ), - if (attachment.title != null) - Container( - alignment: Alignment.bottomCenter, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Card( - child: IconButton( - icon: Icon( - StreamIcons.left, - size: 24.0, ), - splashRadius: 24, - onPressed: () { - streamChannel.channel.sendAction(message, { - 'image_action': 'shuffle', - }); - }, - ), - shape: CircleBorder(), - ), - Expanded( - child: Center( - child: Text( - '"${attachment.title}"', - style: TextStyle( - fontStyle: FontStyle.italic, + Card( + elevation: 2, + child: IconButton( + padding: const EdgeInsets.all(0), + constraints: BoxConstraints.tight(Size(32, 32)), + icon: Icon( + StreamIcons.right, + size: 24.0, + ), + splashRadius: 16, + onPressed: () { + streamChannel.channel.sendAction(message, { + 'image_action': 'shuffle', + }); + }, ), + shape: CircleBorder(), ), - ), + ], ), - Card( - child: IconButton( - icon: Icon( - StreamIcons.right, - size: 24.0, - ), - splashRadius: 24, - onPressed: () { - streamChannel.channel.sendAction(message, { - 'image_action': 'shuffle', - }); - }, - ), - shape: CircleBorder(), - ), - ], + ), ), + SizedBox( + height: 4.0, ), - SizedBox( - height: 4.0, - ), - Container( - color: Colors.black.withOpacity(0.2), - width: double.infinity, - height: 0.5, - ), - Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Expanded( - child: FlatButton( - height: 50, - onPressed: () { - streamChannel.channel.sendAction(message, { - 'image_action': 'cancel', - }); - }, - child: Text( - 'Cancel', - style: TextStyle( - fontWeight: FontWeight.bold, - color: Colors.black.withOpacity(0.5)), + Container( + color: Colors.black.withOpacity(0.2), + width: double.infinity, + height: 0.5, + ), + Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Expanded( + child: FlatButton( + height: 50, + onPressed: () { + streamChannel.channel.sendAction(message, { + 'image_action': 'cancel', + }); + }, + child: Text( + 'Cancel', + style: TextStyle( + fontWeight: FontWeight.bold, + color: Colors.black.withOpacity(0.5)), + ), ), ), - ), - Container( - width: 0.5, - color: Colors.black.withOpacity(0.2), - height: 50.0, - ), - Expanded( - child: FlatButton( - height: 50, - onPressed: () { - streamChannel.channel.sendAction(message, { - 'image_action': 'send', - }); - }, - child: Text( - 'Send', - style: TextStyle( - color: StreamChatTheme.of(context).accentColor, - fontWeight: FontWeight.bold), + Container( + width: 0.5, + color: Colors.black.withOpacity(0.2), + height: 50.0, + ), + Expanded( + child: FlatButton( + height: 50, + onPressed: () { + streamChannel.channel.sendAction(message, { + 'image_action': 'send', + }); + }, + child: Text( + 'Send', + style: TextStyle( + color: StreamChatTheme.of(context).accentColor, + fontWeight: FontWeight.bold), + ), ), ), - ), - ], - ), - ], + ], + ), + ], + ), ), ), SizedBox( diff --git a/lib/src/message_input.dart b/lib/src/message_input.dart index 9c9cf67f..7959901a 100644 --- a/lib/src/message_input.dart +++ b/lib/src/message_input.dart @@ -483,13 +483,6 @@ class MessageInputState extends State { child: Container( constraints: BoxConstraints.loose(Size.fromHeight(400)), decoration: BoxDecoration( - // boxShadow: [ - // BoxShadow( - // spreadRadius: -8, - // blurRadius: 5.0, - // offset: Offset(0, -4), - // ), - // ], color: StreamChatTheme.of(context).primaryColor, borderRadius: BorderRadius.circular(8.0)), child: ListView( @@ -606,13 +599,6 @@ class MessageInputState extends State { child: Container( constraints: BoxConstraints.loose(Size.fromHeight(400)), decoration: BoxDecoration( - boxShadow: [ - BoxShadow( - spreadRadius: -8, - blurRadius: 5.0, - offset: Offset(0, -4), - ), - ], color: StreamChatTheme.of(context).primaryColor, ), child: FutureBuilder>( @@ -625,6 +611,12 @@ class MessageInputState extends State { children: snapshot.data .map((m) => ListTile( leading: UserAvatar( + constraints: BoxConstraints.tight( + Size( + 40, + 40, + ), + ), user: m.user, ), title: Text( From d485c96f81bd856910ac5603358c5d1a44cae144 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Thu, 5 Nov 2020 15:16:16 +0100 Subject: [PATCH 2/4] use svg icon --- lib/src/message_input.dart | 116 ++++++++++++++++++++++++++++++------- pubspec.yaml | 4 +- svgs/giphy_icon.svg | 8 +++ 3 files changed, 107 insertions(+), 21 deletions(-) create mode 100644 svgs/giphy_icon.svg diff --git a/lib/src/message_input.dart b/lib/src/message_input.dart index 7959901a..aff98b41 100644 --- a/lib/src/message_input.dart +++ b/lib/src/message_input.dart @@ -6,6 +6,7 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart'; +import 'package:flutter_svg/flutter_svg.dart'; import 'package:http_parser/http_parser.dart'; import 'package:image_picker/image_picker.dart'; import 'package:mime/mime.dart'; @@ -220,16 +221,72 @@ class MessageInputState extends State { } Widget _buildDmCheckbox() { + return Container( + height: 36, + padding: const EdgeInsets.only( + left: 12, + bottom: 12, + top: 8, + ), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Center( + child: Container( + height: 16, + width: 16, + child: Material( + borderRadius: BorderRadius.circular(3), + color: _sendAsDm + ? StreamChatTheme.of(context).accentColor + : Colors.white, + child: InkWell( + onTap: () { + setState(() { + _sendAsDm = !_sendAsDm; + }); + }, + child: AnimatedCrossFade( + duration: Duration(milliseconds: 300), + reverseDuration: Duration(milliseconds: 300), + crossFadeState: _sendAsDm + ? CrossFadeState.showFirst + : CrossFadeState.showSecond, + firstChild: Icon( + Icons.check, + size: 16.0, + color: Colors.white, + ), + secondChild: SizedBox( + height: 16, + width: 16, + ), + ), + ), + ), + ), + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 8.0), + child: Text('Send also as direct message'), + ), + ], + ), + ); return Row( children: [ - Checkbox( - value: _sendAsDm, - onChanged: (val) => setState( - () { - _sendAsDm = val; - }, + ClipRRect( + clipBehavior: Clip.hardEdge, + borderRadius: BorderRadius.circular(1), + child: Checkbox( + value: _sendAsDm, + onChanged: (val) => setState( + () { + _sendAsDm = val; + }, + ), + activeColor: StreamChatTheme.of(context).accentColor, ), - activeColor: StreamChatTheme.of(context).accentColor, ), Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0), @@ -500,25 +557,19 @@ class MessageInputState extends State { child: Icon(StreamIcons.lightning, color: StreamChatTheme.of(context).accentColor), ), - Text('Instant Commands') + Text( + 'Instant Commands', + style: TextStyle( + color: Colors.black.withOpacity(.5), + ), + ) ], ), ), ...commands .map( (c) => ListTile( - leading: c.name == 'giphy' - ? CircleAvatar( - backgroundColor: Colors.black, - child: Image.asset( - 'images/giphy_icon.png', - package: 'stream_chat_flutter', - width: 16.0, - height: 16.0, - ), - maxRadius: 12.0, - ) - : null, + leading: c.name == 'giphy' ? _buildGiphyIcon() : null, title: Text.rich( TextSpan( text: '${c.name.capitalize()}', @@ -559,6 +610,31 @@ class MessageInputState extends State { }); } + CircleAvatar _buildGiphyIcon() { + if (kIsWeb) { + return CircleAvatar( + backgroundColor: Colors.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, + ); + } + } + OverlayEntry _buildMentionsOverlayEntry() { final splits = textEditingController.text .substring(0, textEditingController.value.selection.start) diff --git a/pubspec.yaml b/pubspec.yaml index 452eb69a..a2d92d69 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -15,6 +15,7 @@ dependencies: photo_view: ^0.10.1 rxdart: ^0.24.1 jiffy: ^3.0.1 + flutter_svg: ^0.19.1 flutter_portal: ^0.3.0 cached_network_image: ^2.2.0+1 flutter_markdown: ^0.5.0 @@ -35,7 +36,8 @@ dependencies: flutter: assets: - - images/giphy_icon.png + - images/ + - svgs/ fonts: - family: stream-icons fonts: diff --git a/svgs/giphy_icon.svg b/svgs/giphy_icon.svg new file mode 100644 index 00000000..e1a1d4bb --- /dev/null +++ b/svgs/giphy_icon.svg @@ -0,0 +1,8 @@ + + + + + + + + From 38fb9460711e8bdafad0c2a191889f273e2ed1bd Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Thu, 5 Nov 2020 15:26:48 +0100 Subject: [PATCH 3/4] modify checkbox to have 3 radius --- lib/src/message_input.dart | 59 ++++++++++++++++++++++---------------- 1 file changed, 35 insertions(+), 24 deletions(-) diff --git a/lib/src/message_input.dart b/lib/src/message_input.dart index aff98b41..f2b3ccd0 100644 --- a/lib/src/message_input.dart +++ b/lib/src/message_input.dart @@ -235,31 +235,42 @@ class MessageInputState extends State { child: Container( height: 16, width: 16, - child: Material( + foregroundDecoration: BoxDecoration( + border: _sendAsDm + ? null + : Border.all( + color: Colors.black.withOpacity(.5), + width: 2, + ), borderRadius: BorderRadius.circular(3), - color: _sendAsDm - ? StreamChatTheme.of(context).accentColor - : Colors.white, - child: InkWell( - onTap: () { - setState(() { - _sendAsDm = !_sendAsDm; - }); - }, - child: AnimatedCrossFade( - duration: Duration(milliseconds: 300), - reverseDuration: Duration(milliseconds: 300), - crossFadeState: _sendAsDm - ? CrossFadeState.showFirst - : CrossFadeState.showSecond, - firstChild: Icon( - Icons.check, - size: 16.0, - color: Colors.white, - ), - secondChild: SizedBox( - height: 16, - width: 16, + ), + child: Center( + child: Material( + borderRadius: BorderRadius.circular(3), + color: _sendAsDm + ? StreamChatTheme.of(context).accentColor + : Colors.white, + child: InkWell( + onTap: () { + setState(() { + _sendAsDm = !_sendAsDm; + }); + }, + child: AnimatedCrossFade( + duration: Duration(milliseconds: 300), + reverseDuration: Duration(milliseconds: 300), + crossFadeState: _sendAsDm + ? CrossFadeState.showFirst + : CrossFadeState.showSecond, + firstChild: Icon( + StreamIcons.check, + size: 16.0, + color: Colors.white, + ), + secondChild: SizedBox( + height: 16, + width: 16, + ), ), ), ), From d51584e3ca205ba6d4ff98fce3bf72939690f4ef Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Thu, 5 Nov 2020 15:27:32 +0100 Subject: [PATCH 4/4] cleanup --- lib/src/message_input.dart | 99 +++++++++++++++----------------------- 1 file changed, 38 insertions(+), 61 deletions(-) diff --git a/lib/src/message_input.dart b/lib/src/message_input.dart index f2b3ccd0..32e812e7 100644 --- a/lib/src/message_input.dart +++ b/lib/src/message_input.dart @@ -231,46 +231,44 @@ class MessageInputState extends State { child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ - Center( - child: Container( - height: 16, - width: 16, - foregroundDecoration: BoxDecoration( - border: _sendAsDm - ? null - : Border.all( - color: Colors.black.withOpacity(.5), - width: 2, - ), + Container( + height: 16, + width: 16, + foregroundDecoration: BoxDecoration( + border: _sendAsDm + ? null + : Border.all( + color: Colors.black.withOpacity(.5), + width: 2, + ), + borderRadius: BorderRadius.circular(3), + ), + child: Center( + child: Material( borderRadius: BorderRadius.circular(3), - ), - child: Center( - child: Material( - borderRadius: BorderRadius.circular(3), - color: _sendAsDm - ? StreamChatTheme.of(context).accentColor - : Colors.white, - child: InkWell( - onTap: () { - setState(() { - _sendAsDm = !_sendAsDm; - }); - }, - child: AnimatedCrossFade( - duration: Duration(milliseconds: 300), - reverseDuration: Duration(milliseconds: 300), - crossFadeState: _sendAsDm - ? CrossFadeState.showFirst - : CrossFadeState.showSecond, - firstChild: Icon( - StreamIcons.check, - size: 16.0, - color: Colors.white, - ), - secondChild: SizedBox( - height: 16, - width: 16, - ), + color: _sendAsDm + ? StreamChatTheme.of(context).accentColor + : Colors.white, + child: InkWell( + onTap: () { + setState(() { + _sendAsDm = !_sendAsDm; + }); + }, + child: AnimatedCrossFade( + duration: Duration(milliseconds: 300), + reverseDuration: Duration(milliseconds: 300), + crossFadeState: _sendAsDm + ? CrossFadeState.showFirst + : CrossFadeState.showSecond, + firstChild: Icon( + StreamIcons.check, + size: 16.0, + color: Colors.white, + ), + secondChild: SizedBox( + height: 16, + width: 16, ), ), ), @@ -278,33 +276,12 @@ class MessageInputState extends State { ), ), Padding( - padding: const EdgeInsets.symmetric(horizontal: 8.0), + padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Text('Send also as direct message'), ), ], ), ); - return Row( - children: [ - ClipRRect( - clipBehavior: Clip.hardEdge, - borderRadius: BorderRadius.circular(1), - child: Checkbox( - value: _sendAsDm, - onChanged: (val) => setState( - () { - _sendAsDm = val; - }, - ), - activeColor: StreamChatTheme.of(context).accentColor, - ), - ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 8.0), - child: Text('Send also as direct message'), - ), - ], - ); } AnimatedCrossFade _animateSendButton(BuildContext context) {