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:
parent
33840d3e73
commit
5ac3724ed4
3 changed files with 46 additions and 17 deletions
|
|
@ -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,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue