fix reply bar blocking bottom of chat, redesign
This commit is contained in:
parent
4a9678bb15
commit
08913c1e35
2 changed files with 57 additions and 28 deletions
|
|
@ -42,6 +42,9 @@ abstract class ChatStoreBase with Store {
|
|||
/// Height of the autocomplete bar (SizedBox + Divider).
|
||||
static const _autocompleteHeight = 51.0;
|
||||
|
||||
/// Height of the reply bar (Container + Divider).
|
||||
static const _replyBarHeight = 41.0;
|
||||
|
||||
/// Checks if IRC data contains a command that should bypass the chat delay.
|
||||
/// Returns true if any message in the data contains a bypass command.
|
||||
bool _shouldBypassDelay(String data) {
|
||||
|
|
@ -241,6 +244,12 @@ abstract class ChatStoreBase with Store {
|
|||
double get bottomBarHeight {
|
||||
var height = _baseBottomBarHeight;
|
||||
|
||||
// Add reply bar height when replying to a message.
|
||||
if (replyingToMessage != null) {
|
||||
height += _replyBarHeight;
|
||||
}
|
||||
|
||||
// Add autocomplete bar height when showing matches.
|
||||
if (settings.autocomplete &&
|
||||
((_showEmoteAutocomplete && matchingEmotes.isNotEmpty) ||
|
||||
(_showMentionAutocomplete && matchingChatters.isNotEmpty))) {
|
||||
|
|
|
|||
|
|
@ -73,37 +73,57 @@ class ChatBottomBar extends StatelessWidget {
|
|||
children: [
|
||||
if (chatStore.replyingToMessage != null) ...[
|
||||
const Divider(),
|
||||
ListTile(
|
||||
contentPadding: const EdgeInsets.only(left: 16),
|
||||
leading: const Icon(Icons.reply),
|
||||
title: Tooltip(
|
||||
message: chatStore.replyingToMessage!.message,
|
||||
preferBelow: false,
|
||||
child: Text.rich(
|
||||
TextSpan(
|
||||
children: chatStore.replyingToMessage!.generateSpan(
|
||||
context,
|
||||
assetsStore: chatStore.assetsStore,
|
||||
emoteScale: chatStore.settings.emoteScale,
|
||||
badgeScale: chatStore.settings.badgeScale,
|
||||
launchExternal: chatStore.settings.launchUrlExternal,
|
||||
timestamp: chatStore.settings.timestampType,
|
||||
currentChannelId: chatStore.channelId,
|
||||
TextFieldTapRegion(
|
||||
child: Container(
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
border: Border(
|
||||
left: BorderSide(
|
||||
color: Theme.of(context).colorScheme.secondary,
|
||||
width: 4,
|
||||
),
|
||||
),
|
||||
maxLines: 3,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: context.defaultTextStyle.copyWith(
|
||||
fontSize: chatStore.settings.fontSize,
|
||||
),
|
||||
),
|
||||
),
|
||||
trailing: IconButton(
|
||||
tooltip: 'Cancel reply',
|
||||
onPressed: () {
|
||||
chatStore.replyingToMessage = null;
|
||||
},
|
||||
icon: const Icon(Icons.close),
|
||||
// Left: 8px so text aligns at 12px (4px border + 8px padding)
|
||||
// Right: 4px to give close button some breathing room
|
||||
padding: const EdgeInsets.only(left: 8, right: 4),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Tooltip(
|
||||
message: chatStore.replyingToMessage!.message ?? '',
|
||||
preferBelow: false,
|
||||
child: Text.rich(
|
||||
TextSpan(
|
||||
children:
|
||||
chatStore.replyingToMessage!.generateSpan(
|
||||
context,
|
||||
assetsStore: chatStore.assetsStore,
|
||||
emoteScale: chatStore.settings.emoteScale,
|
||||
badgeScale: chatStore.settings.badgeScale,
|
||||
launchExternal:
|
||||
chatStore.settings.launchUrlExternal,
|
||||
timestamp: chatStore.settings.timestampType,
|
||||
currentChannelId: chatStore.channelId,
|
||||
),
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: context.defaultTextStyle.copyWith(
|
||||
fontSize: chatStore.settings.fontSize,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
tooltip: 'Cancel reply',
|
||||
visualDensity: VisualDensity.compact,
|
||||
onPressed: () => chatStore.replyingToMessage = null,
|
||||
icon: const Icon(Icons.close, size: 20),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue