diff --git a/images/giphy_icon.png b/images/giphy_icon.png new file mode 100644 index 00000000..ea99e834 Binary files /dev/null and b/images/giphy_icon.png differ diff --git a/lib/src/message_input.dart b/lib/src/message_input.dart index d03a61bc..5745f779 100644 --- a/lib/src/message_input.dart +++ b/lib/src/message_input.dart @@ -223,10 +223,14 @@ class MessageInputState extends State { return Row( children: [ Checkbox( - value: _sendAsDm, - onChanged: (val) => setState(() { - _sendAsDm = val; - })), + 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'), @@ -278,21 +282,21 @@ class MessageInputState extends State { Expanded _buildTextInput(BuildContext context) { return Expanded( child: Center( - child: LimitedBox( - maxHeight: widget.maxHeight, - child: Container( - clipBehavior: Clip.antiAlias, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(32.0), - border: Border.all( - color: Colors.grey, - ), + child: Container( + clipBehavior: Clip.antiAlias, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(32.0), + border: Border.all( + color: Colors.grey, ), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - _buildAttachments(), - TextField( + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + _buildAttachments(), + LimitedBox( + maxHeight: widget.maxHeight, + child: TextField( key: Key('messageInputText'), enabled: _inputEnabled, minLines: null, @@ -360,7 +364,10 @@ class MessageInputState extends State { autofocus: false, textAlignVertical: TextAlignVertical.center, decoration: InputDecoration( - hintText: 'Write a message', + hintText: + (_commandEnabled && _chosenCommand.name == 'giphy') + ? 'Search GIFs' + : 'Write a message', prefixText: _commandEnabled ? null : ' ', border: OutlineInputBorder( borderSide: BorderSide(color: Colors.transparent)), @@ -404,8 +411,8 @@ class MessageInputState extends State { ), textCapitalization: TextCapitalization.sentences, ), - ], - ), + ) + ], ), ), ), @@ -467,6 +474,9 @@ class MessageInputState extends State { padding: const EdgeInsets.all(8.0), child: Card( elevation: 2.0, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8.0), + ), color: StreamChatTheme.of(context).primaryColor, clipBehavior: Clip.antiAlias, child: Container( @@ -503,6 +513,18 @@ class MessageInputState extends State { ...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, title: Text.rich( TextSpan( text: '${c.name.capitalize()}', @@ -525,7 +547,7 @@ class MessageInputState extends State { color: Colors.white, size: 12.5, ), - maxRadius: 15, + maxRadius: 12, ), //subtitle: Text(c.description), onTap: () { @@ -576,6 +598,9 @@ class MessageInputState extends State { margin: EdgeInsets.all(8.0), elevation: 2.0, color: StreamChatTheme.of(context).primaryColor, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8.0), + ), clipBehavior: Clip.antiAlias, child: Container( constraints: BoxConstraints.loose(Size.fromHeight(400)), @@ -605,9 +630,9 @@ class MessageInputState extends State { '${m.user.name}', style: TextStyle(fontWeight: FontWeight.bold), ), - subtitle: Text('${m.userId}'), + subtitle: Text('@${m.userId}'), trailing: Icon( - Icons.alternate_email, + StreamIcons.at_mention, color: StreamChatTheme.of(context).accentColor, ), onTap: () { @@ -782,7 +807,10 @@ class MessageInputState extends State { child: Padding( padding: const EdgeInsets.only( left: 4.0, right: 8.0, top: 8.0, bottom: 8.0), - child: Icon(StreamIcons.lightning), + child: Icon( + StreamIcons.lightning, + color: Color(0xFF000000).withAlpha(128), + ), ), onTap: () { if (_commandsOverlay == null) { @@ -804,7 +832,10 @@ class MessageInputState extends State { child: Padding( padding: EdgeInsets.only(left: 8.0, right: padding, top: 8.0, bottom: 8.0), - child: Icon(StreamIcons.attach), + child: Icon( + StreamIcons.attach, + color: Color(0xFF000000).withAlpha(128), + ), ), onTap: () { showAttachmentModal(); @@ -1037,7 +1068,7 @@ class MessageInputState extends State { sendMessage(); }, child: Icon( - StreamIcons.send_message, + _getIdleSendIcon(), color: Colors.grey, ), )), @@ -1056,21 +1087,42 @@ class MessageInputState extends State { onTap: () { sendMessage(); }, - child: Transform.rotate( - angle: widget.editMessage == null ? -pi / 2 : 0, - child: Icon( - widget.editMessage == null - ? StreamIcons.send_message - : StreamIcons.check_send, - color: StreamChatTheme.of(context).accentColor, - ), - ), + child: _getSendIcon(), ), ), ), ); } + IconData _getIdleSendIcon() { + if (_commandEnabled) { + return StreamIcons.search; + } else { + return StreamIcons.send_message; + } + } + + Widget _getSendIcon() { + if (widget.editMessage != null) { + return Icon( + StreamIcons.check_send, + color: StreamChatTheme.of(context).accentColor, + ); + } else if (_commandEnabled) { + return Icon( + StreamIcons.search, + color: StreamChatTheme.of(context).accentColor, + ); + } else { + return Transform.rotate( + angle: -pi / 2, + child: Icon( + StreamIcons.send_message, + color: StreamChatTheme.of(context).accentColor, + )); + } + } + /// Sends the current message void sendMessage() async { var text = textEditingController.text.trim(); diff --git a/pubspec.yaml b/pubspec.yaml index 99db379b..d61e6874 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -34,6 +34,8 @@ dependencies: widgets_visibility_provider: ^2.0.2 flutter: + assets: + - images/giphy_icon.png fonts: - family: stream-icons fonts: