Reorder bottom bar & tweak behavior (#90)

- Moved the details button to the right side
- The send button will now hide when text is empty, same behavior in
official Twitch app
- Fix textfield width when in landscape and chat only mode
This commit is contained in:
Tommy Chow 2022-07-02 02:46:20 -04:00
parent 33840d3e73
commit 5ac3724ed4
3 changed files with 46 additions and 17 deletions

View file

@ -90,21 +90,10 @@ class ChatBottomBar extends StatelessWidget {
padding: const EdgeInsets.symmetric(vertical: 5.0),
child: Row(
children: [
IconButton(
icon: Icon(Icons.adaptive.more),
tooltip: 'Chat details',
onPressed: () => showModalBottomSheet(
backgroundColor: Colors.transparent,
isScrollControlled: true,
context: context,
builder: (_) => ChatDetails(
chatDetailsStore: chatStore.chatDetailsStore,
chatStore: chatStore,
userLogin: chatStore.channelName,
),
),
),
if (!chatStore.expandChat && chatStore.settings.chatWidth < 0.3 && MediaQuery.of(context).orientation == Orientation.landscape)
if (!chatStore.expandChat &&
chatStore.settings.chatWidth < 0.3 &&
chatStore.settings.showVideo &&
MediaQuery.of(context).orientation == Orientation.landscape)
IconButton(
tooltip: 'Send a message',
onPressed: () {
@ -142,12 +131,28 @@ class ChatBottomBar extends StatelessWidget {
),
),
),
if (chatStore.settings.chatWidth >= 0.3 || chatStore.expandChat || MediaQuery.of(context).orientation == Orientation.portrait)
if (chatStore.showSendButton &&
(chatStore.settings.chatWidth >= 0.3 || chatStore.expandChat || MediaQuery.of(context).orientation == Orientation.portrait))
IconButton(
tooltip: 'Send',
icon: const Icon(Icons.send),
onPressed: chatStore.auth.isLoggedIn ? () => chatStore.sendMessage(chatStore.textController.text) : null,
)
else
IconButton(
icon: Icon(Icons.adaptive.more),
tooltip: 'Chat details',
onPressed: () => showModalBottomSheet(
backgroundColor: Colors.transparent,
isScrollControlled: true,
context: context,
builder: (_) => ChatDetails(
chatDetailsStore: chatStore.chatDetailsStore,
chatStore: chatStore,
userLogin: chatStore.channelName,
),
),
),
],
),
),

View file

@ -71,6 +71,9 @@ abstract class ChatStoreBase with Store {
@readonly
var _autoScroll = true;
@readonly
var _showSendButton = false;
@readonly
var _showEmoteAutocomplete = false;
@ -143,7 +146,10 @@ abstract class ChatStoreBase with Store {
textController
.addListener(() => _showEmoteAutocomplete = !_showMentionAutocomplete && textFieldFocusNode.hasFocus && textController.text.split(' ').last.isNotEmpty);
textController.addListener(() => _showMentionAutocomplete = textFieldFocusNode.hasFocus && textController.text.split(' ').last.startsWith('@'));
textController.addListener(() {
_showSendButton = textController.text.isNotEmpty;
_showMentionAutocomplete = textFieldFocusNode.hasFocus && textController.text.split(' ').last.startsWith('@');
});
}
/// Handle and process the provided string-representation of the IRC data.

View file

@ -45,6 +45,24 @@ mixin _$ChatStore on ChatStoreBase, Store {
});
}
late final _$_showSendButtonAtom =
Atom(name: 'ChatStoreBase._showSendButton', context: context);
bool get showSendButton {
_$_showSendButtonAtom.reportRead();
return super._showSendButton;
}
@override
bool get _showSendButton => showSendButton;
@override
set _showSendButton(bool value) {
_$_showSendButtonAtom.reportWrite(value, super._showSendButton, () {
super._showSendButton = value;
});
}
late final _$_showEmoteAutocompleteAtom =
Atom(name: 'ChatStoreBase._showEmoteAutocomplete', context: context);