Add option to show chat message dividers

This commit is contained in:
Tommy Chow 2022-03-26 02:56:49 -04:00
parent 37a62583f0
commit a7d436850b
4 changed files with 77 additions and 39 deletions

View file

@ -33,47 +33,53 @@ class Chat extends StatelessWidget {
child: DefaultTextStyle(
style: DefaultTextStyle.of(context).style.copyWith(fontSize: chatStore.settings.fontSize),
child: Observer(
builder: (context) => ListView.separated(
padding: const EdgeInsets.symmetric(vertical: 5.0),
addAutomaticKeepAlives: false,
addRepaintBoundaries: false,
itemCount: chatStore.messages.length,
controller: chatStore.scrollController,
separatorBuilder: (context, index) => SizedBox(height: chatStore.settings.messageSpacing),
itemBuilder: (context, index) => Observer(
builder: (context) {
final message = chatStore.messages[index];
builder: (context) {
final showDividers = chatStore.settings.showChatMessageDividers;
if (message.user != null && message.user != chatStore.auth.user.details?.login) {
return InkWell(
onTap: () {
FocusScope.of(context).unfocus();
if (chatStore.assetsStore.showEmoteMenu) chatStore.assetsStore.showEmoteMenu = false;
},
onLongPress: () => showModalBottomSheet(
context: context,
builder: (context) => ChatUserModal(
chatStore: chatStore,
username: message.user!,
userId: message.tags['user-id']!,
displayName: message.tags['display-name']!,
),
),
child: ChatMessage(
ircMessage: message,
assetsStore: chatStore.assetsStore,
settingsStore: chatStore.settings,
),
return ListView.separated(
padding: const EdgeInsets.symmetric(vertical: 5.0),
addAutomaticKeepAlives: false,
addRepaintBoundaries: false,
itemCount: chatStore.messages.length,
controller: chatStore.scrollController,
separatorBuilder: (context, index) => showDividers
? Divider(
height: chatStore.settings.messageSpacing,
thickness: 1.0,
)
: SizedBox(height: chatStore.settings.messageSpacing),
itemBuilder: (context, index) => Observer(
builder: (context) {
final message = chatStore.messages[index];
final chatMessage = ChatMessage(
ircMessage: message,
assetsStore: chatStore.assetsStore,
settingsStore: chatStore.settings,
);
}
return ChatMessage(
ircMessage: message,
assetsStore: chatStore.assetsStore,
settingsStore: chatStore.settings,
);
},
),
),
if (message.user != null && message.user != chatStore.auth.user.details?.login) {
return InkWell(
onTap: () {
FocusScope.of(context).unfocus();
if (chatStore.assetsStore.showEmoteMenu) chatStore.assetsStore.showEmoteMenu = false;
},
onLongPress: () => showModalBottomSheet(
context: context,
builder: (context) => ChatUserModal(
chatStore: chatStore,
username: message.user!,
userId: message.tags['user-id']!,
displayName: message.tags['display-name']!,
),
),
child: chatMessage,
);
}
return chatMessage;
},
),
);
},
),
),
),

View file

@ -49,6 +49,13 @@ class _ChatSettingsState extends State<ChatSettings> {
value: settingsStore.showZeroWidth,
onChanged: (newValue) => settingsStore.showZeroWidth = newValue,
),
SwitchListTile.adaptive(
isThreeLine: true,
title: const Text('Show message dividers'),
subtitle: const Text('Displays a subtle divider between each chat message.'),
value: settingsStore.showChatMessageDividers,
onChanged: (newValue) => settingsStore.showChatMessageDividers = newValue,
),
SwitchListTile.adaptive(
isThreeLine: true,
title: const Text('Use readable colors for chat names'),

View file

@ -51,6 +51,10 @@ abstract class _SettingsStoreBase with Store {
@observable
var showZeroWidth = false;
@JsonKey(defaultValue: false)
@observable
var showChatMessageDividers = false;
@JsonKey(defaultValue: TimestampType.disabled, unknownEnumValue: TimestampType.disabled)
@observable
var timestampType = TimestampType.disabled;

View file

@ -19,6 +19,8 @@ SettingsStore _$SettingsStoreFromJson(Map<String, dynamic> json) =>
..showBottomBar = json['showBottomBar'] as bool? ?? true
..showDeletedMessages = json['showDeletedMessages'] as bool? ?? false
..showZeroWidth = json['showZeroWidth'] as bool? ?? false
..showChatMessageDividers =
json['showChatMessageDividers'] as bool? ?? false
..timestampType = $enumDecodeNullable(
_$TimestampTypeEnumMap, json['timestampType'],
unknownValue: TimestampType.disabled) ??
@ -44,6 +46,7 @@ Map<String, dynamic> _$SettingsStoreToJson(SettingsStore instance) =>
'showBottomBar': instance.showBottomBar,
'showDeletedMessages': instance.showDeletedMessages,
'showZeroWidth': instance.showZeroWidth,
'showChatMessageDividers': instance.showChatMessageDividers,
'timestampType': _$TimestampTypeEnumMap[instance.timestampType],
'useReadableColors': instance.useReadableColors,
'messageScale': instance.messageScale,
@ -215,6 +218,23 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
});
}
final _$showChatMessageDividersAtom =
Atom(name: '_SettingsStoreBase.showChatMessageDividers');
@override
bool get showChatMessageDividers {
_$showChatMessageDividersAtom.reportRead();
return super.showChatMessageDividers;
}
@override
set showChatMessageDividers(bool value) {
_$showChatMessageDividersAtom
.reportWrite(value, super.showChatMessageDividers, () {
super.showChatMessageDividers = value;
});
}
final _$timestampTypeAtom = Atom(name: '_SettingsStoreBase.timestampType');
@override
@ -378,6 +398,7 @@ pictureInPicture: ${pictureInPicture},
showBottomBar: ${showBottomBar},
showDeletedMessages: ${showDeletedMessages},
showZeroWidth: ${showZeroWidth},
showChatMessageDividers: ${showChatMessageDividers},
timestampType: ${timestampType},
useReadableColors: ${useReadableColors},
messageScale: ${messageScale},