feat: Shifted fields from channel to input theme

This commit is contained in:
Deven Joshi
2021-02-26 13:38:14 +05:30
parent 03553ea3cd
commit 7db34db7ca
3 changed files with 57 additions and 50 deletions
@@ -596,7 +596,8 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
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),
@@ -235,7 +235,7 @@ class MessageInputState extends State<MessageInput> {
@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<MessageInput> {
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<MessageInput> {
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<MessageInput> {
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<MessageInput> {
),
icon: StreamSvgIcon(
assetName: _getSendIcon(),
color: StreamChatTheme.of(context).channelTheme.sendButtonColor,
color: StreamChatTheme.of(context).messageInputTheme.sendButtonColor,
),
);
}
@@ -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,
);
}
}