Add chat message spacing setting (#67)
This commit is contained in:
parent
84aca5900b
commit
24d39d1ee7
5 changed files with 59 additions and 14 deletions
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
''';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue