Add chat message spacing setting (#67)

This commit is contained in:
Tommy Chow 2022-01-07 13:32:26 -05:00
parent 84aca5900b
commit 24d39d1ee7
5 changed files with 59 additions and 14 deletions

View file

@ -36,11 +36,12 @@ class _ChatState extends State<Chat> {
child: MediaQuery(
data: MediaQuery.of(context).copyWith(textScaleFactor: chatStore.settings.fontScale),
child: Observer(
builder: (context) => ListView.builder(
builder: (context) => ListView.separated(
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];
@ -95,6 +96,7 @@ class _ChatState extends State<Chat> {
],
),
),
const SizedBox(height: 5.0),
if (chatStore.auth.isLoggedIn) ChatBottomBar(chatStore: chatStore),
if (chatStore.assetsStore.showEmoteMenu)
Flexible(

View file

@ -18,7 +18,8 @@ class ChatMessage extends StatelessWidget {
@override
Widget build(BuildContext context) {
const padding = EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0);
const highlightPadding = EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0);
const messagePadding = EdgeInsets.symmetric(horizontal: 10.0);
return Observer(
builder: (context) {
@ -46,13 +47,13 @@ class ChatMessage extends StatelessWidget {
if (ircMessage.mention) {
return Container(
padding: padding,
padding: highlightPadding,
color: const Color(0x4DFF0000),
child: span,
);
}
return Padding(
padding: padding,
padding: messagePadding,
child: span,
);
case Command.clearChat:
@ -60,7 +61,7 @@ class ChatMessage extends StatelessWidget {
// Render timeouts and bans
final banDuration = ircMessage.tags['ban-duration'];
return Padding(
padding: padding,
padding: highlightPadding,
child: Opacity(
opacity: 0.50,
child: Column(
@ -95,7 +96,7 @@ class ChatMessage extends StatelessWidget {
);
case Command.notice:
return Padding(
padding: padding,
padding: messagePadding,
child: Text.rich(
TextSpan(
text: ircMessage.message,
@ -107,7 +108,7 @@ class ChatMessage extends StatelessWidget {
);
case Command.userNotice:
return Container(
padding: padding,
padding: highlightPadding,
color: const Color(0x339147FF),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,

View file

@ -50,19 +50,39 @@ class ChatSettings extends StatelessWidget {
ListTile(
isThreeLine: true,
title: Text('Font scale: ${settingsStore.fontScale.toStringAsFixed(1)}x'),
subtitle: Slider.adaptive(
value: settingsStore.fontScale,
min: 0.5,
max: 2.0,
divisions: 15,
onChanged: (newValue) => settingsStore.fontScale = newValue,
),
),
ListTile(
title: Text('Message spacing: ${settingsStore.messageSpacing.toStringAsFixed(0)}'),
subtitle: Slider.adaptive(
value: settingsStore.messageSpacing,
min: 0.0,
max: 30.0,
divisions: 30,
onChanged: (newValue) => settingsStore.messageSpacing = newValue,
),
),
ListTile(
isThreeLine: true,
title: const Text('Preview'),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Slider.adaptive(
value: settingsStore.fontScale,
min: 0.5,
max: 2.0,
divisions: 15,
onChanged: (newValue) => settingsStore.fontScale = newValue,
),
Text(
'Hello! This is a preview for the font scale.',
textScaleFactor: settingsStore.fontScale,
),
SizedBox(height: settingsStore.messageSpacing),
Text(
'This is a another message to see spacing!',
textScaleFactor: settingsStore.fontScale,
),
],
),
),

View file

@ -60,6 +60,10 @@ abstract class _SettingsStoreBase with Store {
@observable
var fontScale = 1.0;
@JsonKey(defaultValue: 10.0)
@observable
var messageSpacing = 10.0;
// Global configs
@JsonKey(defaultValue: false)
@observable

View file

@ -20,6 +20,7 @@ SettingsStore _$SettingsStoreFromJson(Map<String, dynamic> json) =>
json['useTwelveHourTimestamps'] as bool? ?? false
..useReadableColors = json['useReadableColors'] as bool? ?? true
..fontScale = (json['fontScale'] as num?)?.toDouble() ?? 1.0
..messageSpacing = (json['messageSpacing'] as num?)?.toDouble() ?? 10.0
..fullScreen = json['fullScreen'] as bool? ?? false
..expandInfo = json['expandInfo'] as bool? ?? true;
@ -36,6 +37,7 @@ Map<String, dynamic> _$SettingsStoreToJson(SettingsStore instance) =>
'useTwelveHourTimestamps': instance.useTwelveHourTimestamps,
'useReadableColors': instance.useReadableColors,
'fontScale': instance.fontScale,
'messageSpacing': instance.messageSpacing,
'fullScreen': instance.fullScreen,
'expandInfo': instance.expandInfo,
};
@ -218,6 +220,21 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
});
}
final _$messageSpacingAtom = Atom(name: '_SettingsStoreBase.messageSpacing');
@override
double get messageSpacing {
_$messageSpacingAtom.reportRead();
return super.messageSpacing;
}
@override
set messageSpacing(double value) {
_$messageSpacingAtom.reportWrite(value, super.messageSpacing, () {
super.messageSpacing = value;
});
}
final _$fullScreenAtom = Atom(name: '_SettingsStoreBase.fullScreen');
@override
@ -262,6 +279,7 @@ showTimestamps: ${showTimestamps},
useTwelveHourTimestamps: ${useTwelveHourTimestamps},
useReadableColors: ${useReadableColors},
fontScale: ${fontScale},
messageSpacing: ${messageSpacing},
fullScreen: ${fullScreen},
expandInfo: ${expandInfo}
''';