From 949e83c6a99488e4a36f44e322d08d785bdf9059 Mon Sep 17 00:00:00 2001 From: Deven Joshi Date: Thu, 25 Feb 2021 14:05:08 +0530 Subject: [PATCH 1/3] feat: Added message input theme and send button animation duration --- .../lib/src/message_input.dart | 3 +- .../lib/src/stream_chat_theme.dart | 32 +++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/packages/stream_chat_flutter/lib/src/message_input.dart b/packages/stream_chat_flutter/lib/src/message_input.dart index 26feba69..c6da99fc 100644 --- a/packages/stream_chat_flutter/lib/src/message_input.dart +++ b/packages/stream_chat_flutter/lib/src/message_input.dart @@ -392,7 +392,8 @@ class MessageInputState extends State { : CrossFadeState.showSecond, firstChild: _buildSendButton(context), secondChild: _buildIdleSendButton(context), - duration: Duration(milliseconds: 300), + duration: + StreamChatTheme.of(context).messageInputTheme.sendAnimationDuration, alignment: Alignment.center, ), ); diff --git a/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart b/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart index c2f3ee7e..9b246ace 100644 --- a/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart +++ b/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart @@ -60,6 +60,9 @@ class StreamChatThemeData { /// Theme of other users messages final MessageTheme otherMessageTheme; + /// Theme of other users messages + final MessageInputTheme messageInputTheme; + /// The widget that will be built when the channel image is unavailable final Widget Function(BuildContext, Channel) defaultChannelImage; @@ -80,6 +83,7 @@ class StreamChatThemeData { this.channelTheme, this.otherMessageTheme, this.ownMessageTheme, + this.messageInputTheme, this.defaultChannelImage, this.defaultUserImage, this.primaryIconTheme, @@ -108,6 +112,7 @@ class StreamChatThemeData { ChannelTheme channelTheme, MessageTheme ownMessageTheme, MessageTheme otherMessageTheme, + MessageInputTheme messageInputTheme, Widget Function(BuildContext, Channel) defaultChannelImage, Widget Function(BuildContext, User) defaultUserImage, IconThemeData primaryIconTheme, @@ -123,6 +128,7 @@ class StreamChatThemeData { channelTheme: channelTheme ?? this.channelTheme, ownMessageTheme: ownMessageTheme ?? this.ownMessageTheme, otherMessageTheme: otherMessageTheme ?? this.otherMessageTheme, + messageInputTheme: messageInputTheme ?? this.messageInputTheme, reactionIcons: reactionIcons ?? this.reactionIcons, ); @@ -143,6 +149,8 @@ class StreamChatThemeData { other.ownMessageTheme, otherMessageTheme: otherMessageTheme?.merge(other.otherMessageTheme) ?? other.otherMessageTheme, + messageInputTheme: messageInputTheme?.merge(other.messageInputTheme) ?? + other.messageInputTheme, reactionIcons: other.reactionIcons, ); } @@ -248,6 +256,9 @@ class StreamChatThemeData { ), ), ), + messageInputTheme: MessageInputTheme( + sendAnimationDuration: Duration(milliseconds: 7000), + ), reactionIcons: [ ReactionIcon( type: 'love', @@ -873,6 +884,27 @@ class ChannelHeaderTheme { } } +class MessageInputTheme { + final Duration sendAnimationDuration; + + const MessageInputTheme({ + this.sendAnimationDuration, + }); + + MessageInputTheme copyWith({Duration sendAnimationDuration}) => + MessageInputTheme( + sendAnimationDuration: + sendAnimationDuration ?? this.sendAnimationDuration, + ); + + MessageInputTheme merge(MessageInputTheme other) { + if (other == null) return this; + return copyWith( + sendAnimationDuration: other.sendAnimationDuration, + ); + } +} + class Effect { final double sigmaX; final double sigmaY; From 03553ea3cdd84224e01986cb21c6d75b3a3b7f22 Mon Sep 17 00:00:00 2001 From: Deven Joshi Date: Thu, 25 Feb 2021 14:06:27 +0530 Subject: [PATCH 2/3] fix: corrected duration --- packages/stream_chat_flutter/lib/src/stream_chat_theme.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart b/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart index 9b246ace..3c0ed822 100644 --- a/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart +++ b/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart @@ -257,7 +257,7 @@ class StreamChatThemeData { ), ), messageInputTheme: MessageInputTheme( - sendAnimationDuration: Duration(milliseconds: 7000), + sendAnimationDuration: Duration(milliseconds: 300), ), reactionIcons: [ ReactionIcon( From 7db34db7ca91356af4cc66ba24014d7e9c7a16a5 Mon Sep 17 00:00:00 2001 From: Deven Joshi Date: Fri, 26 Feb 2021 13:38:14 +0530 Subject: [PATCH 3/3] feat: Shifted fields from channel to input theme --- .../lib/src/message_actions_modal.dart | 3 +- .../lib/src/message_input.dart | 18 ++-- .../lib/src/stream_chat_theme.dart | 86 ++++++++++--------- 3 files changed, 57 insertions(+), 50 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_actions_modal.dart b/packages/stream_chat_flutter/lib/src/message_actions_modal.dart index af05d74c..d914afba 100644 --- a/packages/stream_chat_flutter/lib/src/message_actions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_actions_modal.dart @@ -596,7 +596,8 @@ class _MessageActionsModalState extends State { elevation: 2, clipBehavior: Clip.hardEdge, isScrollControlled: true, - backgroundColor: StreamChatTheme.of(context).channelTheme.inputBackground, + backgroundColor: + StreamChatTheme.of(context).messageInputTheme.inputBackground, shape: RoundedRectangleBorder( borderRadius: BorderRadius.only( topLeft: Radius.circular(16), diff --git a/packages/stream_chat_flutter/lib/src/message_input.dart b/packages/stream_chat_flutter/lib/src/message_input.dart index c6da99fc..3032f1f5 100644 --- a/packages/stream_chat_flutter/lib/src/message_input.dart +++ b/packages/stream_chat_flutter/lib/src/message_input.dart @@ -235,7 +235,7 @@ class MessageInputState extends State { @override Widget build(BuildContext context) { Widget child = Container( - color: StreamChatTheme.of(context).channelTheme.inputBackground, + color: StreamChatTheme.of(context).messageInputTheme.inputBackground, child: SafeArea( child: GestureDetector( onPanUpdate: (details) { @@ -1684,8 +1684,10 @@ class MessageInputState extends State { return IconButton( icon: StreamSvgIcon.lightning( color: _commandsOverlay != null - ? StreamChatTheme.of(context).channelTheme.actionButtonColor - : StreamChatTheme.of(context).channelTheme.actionButtonIdleColor, + ? StreamChatTheme.of(context).messageInputTheme.actionButtonColor + : StreamChatTheme.of(context) + .messageInputTheme + .actionButtonIdleColor, ), padding: const EdgeInsets.all(0), constraints: BoxConstraints.tightFor( @@ -1722,8 +1724,10 @@ class MessageInputState extends State { return IconButton( icon: StreamSvgIcon.attach( color: _openFilePickerSection - ? StreamChatTheme.of(context).channelTheme.actionButtonColor - : StreamChatTheme.of(context).channelTheme.actionButtonIdleColor, + ? StreamChatTheme.of(context).messageInputTheme.actionButtonColor + : StreamChatTheme.of(context) + .messageInputTheme + .actionButtonIdleColor, ), padding: const EdgeInsets.all(0), constraints: BoxConstraints.tightFor( @@ -1962,7 +1966,7 @@ class MessageInputState extends State { Widget _buildIdleSendButton(BuildContext context) { return StreamSvgIcon( assetName: _getIdleSendIcon(), - color: StreamChatTheme.of(context).channelTheme.sendButtonIdleColor, + color: StreamChatTheme.of(context).messageInputTheme.sendButtonIdleColor, ); } @@ -1977,7 +1981,7 @@ class MessageInputState extends State { ), icon: StreamSvgIcon( assetName: _getSendIcon(), - color: StreamChatTheme.of(context).channelTheme.sendButtonColor, + color: StreamChatTheme.of(context).messageInputTheme.sendButtonColor, ), ); } diff --git a/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart b/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart index 3c0ed822..9ad2b7c5 100644 --- a/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart +++ b/packages/stream_chat_flutter/lib/src/stream_chat_theme.dart @@ -190,10 +190,6 @@ class StreamChatThemeData { ), indicatorIconSize: 16.0), channelTheme: ChannelTheme( - actionButtonColor: colorTheme.accentBlue, - actionButtonIdleColor: colorTheme.grey, - sendButtonColor: colorTheme.accentBlue, - sendButtonIdleColor: colorTheme.greyGainsboro, channelHeaderTheme: ChannelHeaderTheme( avatarTheme: AvatarTheme( borderRadius: BorderRadius.circular(20), @@ -212,7 +208,6 @@ class StreamChatThemeData { color: colorTheme.black.withOpacity(.5), ), ), - inputBackground: colorTheme.white.withAlpha(12), ), ownMessageTheme: MessageTheme( messageAuthor: textTheme.footnote.copyWith(color: colorTheme.grey), @@ -258,6 +253,11 @@ class StreamChatThemeData { ), messageInputTheme: MessageInputTheme( sendAnimationDuration: Duration(milliseconds: 300), + actionButtonColor: colorTheme.accentBlue, + actionButtonIdleColor: colorTheme.grey, + sendButtonColor: colorTheme.accentBlue, + sendButtonIdleColor: colorTheme.greyGainsboro, + inputBackground: colorTheme.white.withAlpha(12), ), reactionIcons: [ ReactionIcon( @@ -639,47 +639,16 @@ class ChannelTheme { /// Theme of the [ChannelHeader] widget final ChannelHeaderTheme channelHeaderTheme; - /// Background color of [MessageInput] send button - final Color sendButtonColor; - - /// Background color of [MessageInput] action buttons - final Color actionButtonColor; - - /// Background color of [MessageInput] send button - final Color sendButtonIdleColor; - - /// Background color of [MessageInput] action buttons - final Color actionButtonIdleColor; - - /// Background color of [MessageInput] - final Color inputBackground; - ChannelTheme({ this.channelHeaderTheme, - this.actionButtonColor, - this.sendButtonColor, - this.actionButtonIdleColor, - this.sendButtonIdleColor, - this.inputBackground, }); /// Creates a copy of [ChannelTheme] with specified attributes overridden. ChannelTheme copyWith({ ChannelHeaderTheme channelHeaderTheme, - Color inputBackground, - Color actionButtonColor, - Color sendButtonColor, - Color actionButtonIdleColor, - Color sendButtonIdleColor, }) => ChannelTheme( channelHeaderTheme: channelHeaderTheme ?? this.channelHeaderTheme, - inputBackground: inputBackground ?? this.inputBackground, - actionButtonColor: actionButtonColor ?? this.actionButtonColor, - sendButtonColor: sendButtonColor ?? this.sendButtonColor, - actionButtonIdleColor: - actionButtonIdleColor ?? this.actionButtonIdleColor, - sendButtonIdleColor: sendButtonIdleColor ?? this.sendButtonIdleColor, ); ChannelTheme merge(ChannelTheme other) { @@ -687,11 +656,6 @@ class ChannelTheme { return copyWith( channelHeaderTheme: channelHeaderTheme?.merge(other.channelHeaderTheme) ?? other.channelHeaderTheme, - inputBackground: other.inputBackground, - actionButtonColor: other.actionButtonColor, - actionButtonIdleColor: other.actionButtonIdleColor, - sendButtonColor: other.sendButtonColor, - sendButtonIdleColor: other.sendButtonIdleColor, ); } } @@ -887,20 +851,58 @@ class ChannelHeaderTheme { class MessageInputTheme { final Duration sendAnimationDuration; + /// Background color of [MessageInput] send button + final Color sendButtonColor; + + /// Background color of [MessageInput] action buttons + final Color actionButtonColor; + + /// Background color of [MessageInput] send button + final Color sendButtonIdleColor; + + /// Background color of [MessageInput] action buttons + final Color actionButtonIdleColor; + + /// Background color of [MessageInput] + final Color inputBackground; + const MessageInputTheme({ this.sendAnimationDuration, + this.actionButtonColor, + this.sendButtonColor, + this.actionButtonIdleColor, + this.sendButtonIdleColor, + this.inputBackground, }); - MessageInputTheme copyWith({Duration sendAnimationDuration}) => + MessageInputTheme copyWith({ + Duration sendAnimationDuration, + Color inputBackground, + Color actionButtonColor, + Color sendButtonColor, + Color actionButtonIdleColor, + Color sendButtonIdleColor, + }) => MessageInputTheme( sendAnimationDuration: sendAnimationDuration ?? this.sendAnimationDuration, + inputBackground: inputBackground ?? this.inputBackground, + actionButtonColor: actionButtonColor ?? this.actionButtonColor, + sendButtonColor: sendButtonColor ?? this.sendButtonColor, + actionButtonIdleColor: + actionButtonIdleColor ?? this.actionButtonIdleColor, + sendButtonIdleColor: sendButtonIdleColor ?? this.sendButtonIdleColor, ); MessageInputTheme merge(MessageInputTheme other) { if (other == null) return this; return copyWith( sendAnimationDuration: other.sendAnimationDuration, + inputBackground: other.inputBackground, + actionButtonColor: other.actionButtonColor, + actionButtonIdleColor: other.actionButtonIdleColor, + sendButtonColor: other.sendButtonColor, + sendButtonIdleColor: other.sendButtonIdleColor, ); } }