[MessageInput] Fix iconButtons and textField paddings and text sizes
Signed-off-by: Sahil Kumar <[email protected]>
This commit is contained in:
Sahil Kumar
+58
-75
@@ -358,8 +358,10 @@ class MessageInputState extends State<MessageInput> {
|
||||
);
|
||||
}
|
||||
|
||||
AnimatedCrossFade _animateSendButton(BuildContext context) {
|
||||
return AnimatedCrossFade(
|
||||
Widget _animateSendButton(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: AnimatedCrossFade(
|
||||
crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) &&
|
||||
_attachments.every((a) => a.uploaded == true))
|
||||
? CrossFadeState.showFirst
|
||||
@@ -368,21 +370,19 @@ class MessageInputState extends State<MessageInput> {
|
||||
secondChild: _buildIdleSendButton(context),
|
||||
duration: Duration(milliseconds: 300),
|
||||
alignment: Alignment.center,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildExpandActionsButton() {
|
||||
return AnimatedCrossFade(
|
||||
crossFadeState:
|
||||
_actionsShrunk ? CrossFadeState.showFirst : CrossFadeState.showSecond,
|
||||
firstChild: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
|
||||
child: IconButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_actionsShrunk = false;
|
||||
});
|
||||
},
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: AnimatedCrossFade(
|
||||
crossFadeState: _actionsShrunk
|
||||
? CrossFadeState.showFirst
|
||||
: CrossFadeState.showSecond,
|
||||
firstChild: IconButton(
|
||||
onPressed: () => setState(() => _actionsShrunk = false),
|
||||
icon: StreamSvgIcon.emptyCircleLeft(
|
||||
color: StreamChatTheme.of(context).colorTheme.accentBlue,
|
||||
),
|
||||
@@ -393,34 +393,36 @@ class MessageInputState extends State<MessageInput> {
|
||||
),
|
||||
splashRadius: 24,
|
||||
),
|
||||
),
|
||||
secondChild: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
if (!widget.disableAttachments) _buildAttachmentButton(),
|
||||
if (widget.editMessage == null &&
|
||||
StreamChannel.of(context).channel?.config?.commands?.isNotEmpty ==
|
||||
StreamChannel.of(context)
|
||||
.channel
|
||||
?.config
|
||||
?.commands
|
||||
?.isNotEmpty ==
|
||||
true)
|
||||
_buildCommandButton(),
|
||||
],
|
||||
].insertBetween(const SizedBox(width: 8)),
|
||||
),
|
||||
duration: Duration(milliseconds: 300),
|
||||
alignment: Alignment.center,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Expanded _buildTextInput(BuildContext context) {
|
||||
final theme = StreamChatTheme.of(context);
|
||||
return Expanded(
|
||||
child: Center(
|
||||
child: Container(
|
||||
clipBehavior: Clip.antiAlias,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(24.0),
|
||||
border: Border.all(
|
||||
color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
|
||||
borderRadius: BorderRadius.circular(20.0),
|
||||
border: Border.all(color: theme.colorTheme.greyGainsboro),
|
||||
),
|
||||
),
|
||||
padding: _attachments.isEmpty ? null : EdgeInsets.all(6.0),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
@@ -429,24 +431,26 @@ class MessageInputState extends State<MessageInput> {
|
||||
_buildAttachments(),
|
||||
LimitedBox(
|
||||
maxHeight: widget.maxHeight,
|
||||
child: SizedBox(
|
||||
height: 40,
|
||||
child: TextField(
|
||||
key: Key('messageInputText'),
|
||||
enabled: _inputEnabled,
|
||||
minLines: null,
|
||||
maxLines: null,
|
||||
onSubmitted: (_) {
|
||||
sendMessage();
|
||||
},
|
||||
onSubmitted: (_) => sendMessage(),
|
||||
keyboardType: widget.keyboardType,
|
||||
controller: textEditingController,
|
||||
focusNode: _focusNode,
|
||||
style: Theme.of(context).textTheme.bodyText2,
|
||||
style: theme.textTheme.body,
|
||||
autofocus: false,
|
||||
textAlignVertical: TextAlignVertical.center,
|
||||
decoration: InputDecoration(
|
||||
isDense: true,
|
||||
hintText: _getHint(),
|
||||
prefixText: _commandEnabled ? null : ' ',
|
||||
hintStyle: theme.textTheme.body.copyWith(
|
||||
color: theme.colorTheme.grey,
|
||||
),
|
||||
border: OutlineInputBorder(
|
||||
borderSide: BorderSide(color: Colors.transparent)),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
@@ -457,24 +461,18 @@ class MessageInputState extends State<MessageInput> {
|
||||
borderSide: BorderSide(color: Colors.transparent)),
|
||||
disabledBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(color: Colors.transparent)),
|
||||
contentPadding: EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 13,
|
||||
),
|
||||
contentPadding: const EdgeInsets.fromLTRB(16, 12, 13, 11),
|
||||
prefixIcon: _commandEnabled
|
||||
? Padding(
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: 8.0),
|
||||
child: Chip(
|
||||
backgroundColor: StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.accentBlue,
|
||||
padding: EdgeInsets.zero,
|
||||
labelPadding:
|
||||
EdgeInsets.symmetric(horizontal: 8.0),
|
||||
label: Row(
|
||||
? Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
color: theme.colorTheme.accentBlue,
|
||||
),
|
||||
height: 24,
|
||||
margin: const EdgeInsets.all(8.0),
|
||||
padding: const EdgeInsets.only(right: 8, left: 4),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
StreamSvgIcon.lightning(
|
||||
color: Colors.white,
|
||||
@@ -484,20 +482,24 @@ class MessageInputState extends State<MessageInput> {
|
||||
_chosenCommand?.name?.toUpperCase() ?? '',
|
||||
style: StreamChatTheme.of(context)
|
||||
.textTheme
|
||||
.footnote
|
||||
.footnoteBold
|
||||
.copyWith(
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
: null,
|
||||
suffixIcon: _commandEnabled
|
||||
? IconButton(
|
||||
icon: StreamSvgIcon.close_small(),
|
||||
splashRadius: 24,
|
||||
padding: const EdgeInsets.all(0),
|
||||
constraints: BoxConstraints.tightFor(
|
||||
height: 24,
|
||||
width: 24,
|
||||
),
|
||||
onPressed: () {
|
||||
setState(() => _commandEnabled = false);
|
||||
},
|
||||
@@ -506,6 +508,7 @@ class MessageInputState extends State<MessageInput> {
|
||||
),
|
||||
textCapitalization: TextCapitalization.sentences,
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
@@ -1515,9 +1518,7 @@ class MessageInputState extends State<MessageInput> {
|
||||
}
|
||||
|
||||
Widget _buildReplyToMessage() {
|
||||
if (!_hasQuotedMessage) {
|
||||
return Offstage();
|
||||
}
|
||||
if (!_hasQuotedMessage) return Offstage();
|
||||
final containsUrl = widget.quotedMessage.attachments
|
||||
?.any((element) => element.ogScrapeUrl != null) ==
|
||||
true;
|
||||
@@ -1534,9 +1535,8 @@ class MessageInputState extends State<MessageInput> {
|
||||
}
|
||||
|
||||
Widget _buildAttachments() {
|
||||
return _attachments.isEmpty
|
||||
? Container()
|
||||
: Column(
|
||||
if (_attachments.isEmpty) return Offstage();
|
||||
return Column(
|
||||
children: [
|
||||
if (_attachments.any((e) => e.attachment?.type == 'file'))
|
||||
LimitedBox(
|
||||
@@ -1548,8 +1548,7 @@ class MessageInputState extends State<MessageInput> {
|
||||
.where((e) => e.attachment?.type == 'file')
|
||||
.map(
|
||||
(e) => Padding(
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: 8.0),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8.0),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
@@ -1565,8 +1564,7 @@ class MessageInputState extends State<MessageInput> {
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: InkWell(
|
||||
child: CircleAvatar(
|
||||
backgroundColor:
|
||||
StreamChatTheme.of(context)
|
||||
backgroundColor: StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.black
|
||||
.withOpacity(0.6),
|
||||
@@ -1620,10 +1618,8 @@ class MessageInputState extends State<MessageInput> {
|
||||
: Positioned.fill(
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding:
|
||||
const EdgeInsets.all(16.0),
|
||||
child:
|
||||
CircularProgressIndicator(),
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: CircularProgressIndicator(),
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -1746,9 +1742,7 @@ class MessageInputState extends State<MessageInput> {
|
||||
}
|
||||
|
||||
Widget _buildCommandButton() {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
|
||||
child: IconButton(
|
||||
return IconButton(
|
||||
icon: StreamSvgIcon.lightning(
|
||||
color: _commandsOverlay != null
|
||||
? StreamChatTheme.of(context).colorTheme.accentBlue
|
||||
@@ -1782,14 +1776,11 @@ class MessageInputState extends State<MessageInput> {
|
||||
});
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAttachmentButton() {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
|
||||
child: IconButton(
|
||||
return IconButton(
|
||||
icon: StreamSvgIcon.attach(
|
||||
color: _openFilePickerSection
|
||||
? StreamChatTheme.of(context).colorTheme.accentBlue
|
||||
@@ -1819,7 +1810,6 @@ class MessageInputState extends State<MessageInput> {
|
||||
showAttachmentModal();
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2118,21 +2108,15 @@ class MessageInputState extends State<MessageInput> {
|
||||
}
|
||||
|
||||
Widget _buildIdleSendButton(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
|
||||
child: StreamSvgIcon(
|
||||
return StreamSvgIcon(
|
||||
assetName: _getIdleSendIcon(),
|
||||
color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSendButton(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
|
||||
child: IconButton(
|
||||
return IconButton(
|
||||
onPressed: sendMessage,
|
||||
visualDensity: VisualDensity.compact,
|
||||
padding: const EdgeInsets.all(0),
|
||||
splashRadius: 24,
|
||||
constraints: BoxConstraints.tightFor(
|
||||
@@ -2143,7 +2127,6 @@ class MessageInputState extends State<MessageInput> {
|
||||
assetName: _getSendIcon(),
|
||||
color: StreamChatTheme.of(context).colorTheme.accentBlue,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user