Add specific font size setting
This commit is contained in:
Tommy Chow
parent
09edf1cb1d
commit
bdf1be7f60
5 changed files with 126 additions and 87 deletions
|
|
@ -27,46 +27,49 @@ class Chat extends StatelessWidget {
|
|||
if (chatStore.assetsStore.showEmoteMenu) chatStore.assetsStore.showEmoteMenu = false;
|
||||
},
|
||||
child: MediaQuery(
|
||||
data: MediaQuery.of(context).copyWith(textScaleFactor: chatStore.settings.fontScale),
|
||||
child: Observer(
|
||||
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];
|
||||
data: MediaQuery.of(context).copyWith(textScaleFactor: chatStore.settings.messageScale),
|
||||
child: DefaultTextStyle(
|
||||
style: DefaultTextStyle.of(context).style.copyWith(fontSize: chatStore.settings.fontSize),
|
||||
child: Observer(
|
||||
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];
|
||||
|
||||
if (message.user != null && message.user != chatStore.auth.user.details?.login) {
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
FocusManager.instance.primaryFocus?.unfocus();
|
||||
if (chatStore.assetsStore.showEmoteMenu) chatStore.assetsStore.showEmoteMenu = false;
|
||||
},
|
||||
onLongPress: () => showModalBottomSheet(
|
||||
context: context,
|
||||
builder: (context) => ChatUserModal(
|
||||
username: message.user!,
|
||||
chatStore: chatStore,
|
||||
userId: message.tags['user-id']!,
|
||||
displayName: message.tags['display-name']!,
|
||||
if (message.user != null && message.user != chatStore.auth.user.details?.login) {
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
FocusManager.instance.primaryFocus?.unfocus();
|
||||
if (chatStore.assetsStore.showEmoteMenu) chatStore.assetsStore.showEmoteMenu = false;
|
||||
},
|
||||
onLongPress: () => showModalBottomSheet(
|
||||
context: context,
|
||||
builder: (context) => ChatUserModal(
|
||||
username: message.user!,
|
||||
chatStore: chatStore,
|
||||
userId: message.tags['user-id']!,
|
||||
displayName: message.tags['display-name']!,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: ChatMessage(
|
||||
ircMessage: message,
|
||||
assetsStore: chatStore.assetsStore,
|
||||
settingsStore: chatStore.settings,
|
||||
),
|
||||
child: ChatMessage(
|
||||
ircMessage: message,
|
||||
assetsStore: chatStore.assetsStore,
|
||||
settingsStore: chatStore.settings,
|
||||
),
|
||||
);
|
||||
}
|
||||
return ChatMessage(
|
||||
ircMessage: message,
|
||||
assetsStore: chatStore.assetsStore,
|
||||
settingsStore: chatStore.settings,
|
||||
);
|
||||
}
|
||||
return ChatMessage(
|
||||
ircMessage: message,
|
||||
assetsStore: chatStore.assetsStore,
|
||||
settingsStore: chatStore.settings,
|
||||
);
|
||||
},
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ class ChatUserModal extends StatelessWidget {
|
|||
),
|
||||
Expanded(
|
||||
child: MediaQuery(
|
||||
data: MediaQuery.of(context).copyWith(textScaleFactor: chatStore.settings.fontScale),
|
||||
data: MediaQuery.of(context).copyWith(textScaleFactor: chatStore.settings.messageScale),
|
||||
child: ListView.separated(
|
||||
reverse: true,
|
||||
itemBuilder: (context, index) => InkWell(
|
||||
|
|
|
|||
|
|
@ -74,57 +74,71 @@ class _ChatSettingsState extends State<ChatSettings> {
|
|||
border: Border.all(color: Colors.deepPurple),
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text.rich(
|
||||
TextSpan(
|
||||
children: [
|
||||
WidgetSpan(
|
||||
alignment: PlaceholderAlignment.middle,
|
||||
child: CachedNetworkImage(
|
||||
imageUrl: 'https://static-cdn.jtvnw.net/badges/v1/bbbe0db0-a598-423e-86d0-f9fb98ca1933/3',
|
||||
placeholder: (context, url) => const SizedBox(),
|
||||
height: settingsStore.badgeHeight,
|
||||
child: DefaultTextStyle(
|
||||
style: DefaultTextStyle.of(context).style.copyWith(fontSize: settingsStore.fontSize),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text.rich(
|
||||
TextSpan(
|
||||
children: [
|
||||
WidgetSpan(
|
||||
alignment: PlaceholderAlignment.middle,
|
||||
child: CachedNetworkImage(
|
||||
imageUrl: 'https://static-cdn.jtvnw.net/badges/v1/bbbe0db0-a598-423e-86d0-f9fb98ca1933/3',
|
||||
placeholder: (context, url) => const SizedBox(),
|
||||
height: settingsStore.badgeHeight,
|
||||
),
|
||||
),
|
||||
),
|
||||
const TextSpan(text: ' Badge and emote preview '),
|
||||
WidgetSpan(
|
||||
alignment: PlaceholderAlignment.middle,
|
||||
child: CachedNetworkImage(
|
||||
imageUrl: 'https://static-cdn.jtvnw.net/emoticons/v2/425618/default/dark/3.0',
|
||||
placeholder: (context, url) => const SizedBox(),
|
||||
height: settingsStore.emoteHeight,
|
||||
const TextSpan(text: ' Badge and emote preview '),
|
||||
WidgetSpan(
|
||||
alignment: PlaceholderAlignment.middle,
|
||||
child: CachedNetworkImage(
|
||||
imageUrl: 'https://static-cdn.jtvnw.net/emoticons/v2/425618/default/dark/3.0',
|
||||
placeholder: (context, url) => const SizedBox(),
|
||||
height: settingsStore.emoteHeight,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
textScaleFactor: settingsStore.messageScale,
|
||||
),
|
||||
textScaleFactor: settingsStore.fontScale,
|
||||
),
|
||||
SizedBox(height: settingsStore.messageSpacing),
|
||||
Text(
|
||||
'Hello! Here\'s a text preview.',
|
||||
textScaleFactor: settingsStore.fontScale,
|
||||
),
|
||||
SizedBox(height: settingsStore.messageSpacing),
|
||||
Text(
|
||||
'And another for spacing without an emote!',
|
||||
textScaleFactor: settingsStore.fontScale,
|
||||
),
|
||||
],
|
||||
SizedBox(height: settingsStore.messageSpacing),
|
||||
Text(
|
||||
'Hello! Here\'s a text preview.',
|
||||
textScaleFactor: settingsStore.messageScale,
|
||||
),
|
||||
SizedBox(height: settingsStore.messageSpacing),
|
||||
Text(
|
||||
'And another for spacing without an emote!',
|
||||
textScaleFactor: settingsStore.messageScale,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
: const SizedBox(),
|
||||
),
|
||||
ListTile(
|
||||
isThreeLine: true,
|
||||
title: Text('Message scale: ${settingsStore.fontScale.toStringAsFixed(1)}x'),
|
||||
title: Text('Message scale: ${settingsStore.messageScale.toStringAsFixed(1)}x'),
|
||||
subtitle: Slider.adaptive(
|
||||
value: settingsStore.fontScale,
|
||||
value: settingsStore.messageScale,
|
||||
min: 0.5,
|
||||
max: 2.0,
|
||||
divisions: 15,
|
||||
onChanged: (newValue) => settingsStore.fontScale = newValue,
|
||||
onChanged: (newValue) => settingsStore.messageScale = newValue,
|
||||
),
|
||||
),
|
||||
ListTile(
|
||||
isThreeLine: true,
|
||||
title: Text('Font size: ${settingsStore.fontSize.toInt()}'),
|
||||
subtitle: Slider.adaptive(
|
||||
value: settingsStore.fontSize,
|
||||
min: 5,
|
||||
max: 20,
|
||||
divisions: 15,
|
||||
onChanged: (newValue) => settingsStore.fontSize = newValue,
|
||||
),
|
||||
),
|
||||
ListTile(
|
||||
|
|
|
|||
|
|
@ -58,7 +58,11 @@ abstract class _SettingsStoreBase with Store {
|
|||
|
||||
@JsonKey(defaultValue: 1.0)
|
||||
@observable
|
||||
var fontScale = 1.0;
|
||||
var messageScale = 1.0;
|
||||
|
||||
@JsonKey(defaultValue: 14.0)
|
||||
@observable
|
||||
var fontSize = 14.0;
|
||||
|
||||
@JsonKey(defaultValue: 10.0)
|
||||
@observable
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@ SettingsStore _$SettingsStoreFromJson(Map<String, dynamic> json) =>
|
|||
unknownValue: TimestampType.disabled) ??
|
||||
TimestampType.disabled
|
||||
..useReadableColors = json['useReadableColors'] as bool? ?? true
|
||||
..fontScale = (json['fontScale'] as num?)?.toDouble() ?? 1.0
|
||||
..messageScale = (json['messageScale'] as num?)?.toDouble() ?? 1.0
|
||||
..fontSize = (json['fontSize'] as num?)?.toDouble() ?? 14.0
|
||||
..messageSpacing = (json['messageSpacing'] as num?)?.toDouble() ?? 10.0
|
||||
..badgeHeight = (json['badgeHeight'] as num?)?.toDouble() ?? 20.0
|
||||
..emoteHeight = (json['emoteHeight'] as num?)?.toDouble() ?? 30.0
|
||||
|
|
@ -42,7 +43,8 @@ Map<String, dynamic> _$SettingsStoreToJson(SettingsStore instance) =>
|
|||
'showZeroWidth': instance.showZeroWidth,
|
||||
'timestampType': _$TimestampTypeEnumMap[instance.timestampType],
|
||||
'useReadableColors': instance.useReadableColors,
|
||||
'fontScale': instance.fontScale,
|
||||
'messageScale': instance.messageScale,
|
||||
'fontSize': instance.fontSize,
|
||||
'messageSpacing': instance.messageSpacing,
|
||||
'badgeHeight': instance.badgeHeight,
|
||||
'emoteHeight': instance.emoteHeight,
|
||||
|
|
@ -225,18 +227,33 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
|
|||
});
|
||||
}
|
||||
|
||||
final _$fontScaleAtom = Atom(name: '_SettingsStoreBase.fontScale');
|
||||
final _$messageScaleAtom = Atom(name: '_SettingsStoreBase.messageScale');
|
||||
|
||||
@override
|
||||
double get fontScale {
|
||||
_$fontScaleAtom.reportRead();
|
||||
return super.fontScale;
|
||||
double get messageScale {
|
||||
_$messageScaleAtom.reportRead();
|
||||
return super.messageScale;
|
||||
}
|
||||
|
||||
@override
|
||||
set fontScale(double value) {
|
||||
_$fontScaleAtom.reportWrite(value, super.fontScale, () {
|
||||
super.fontScale = value;
|
||||
set messageScale(double value) {
|
||||
_$messageScaleAtom.reportWrite(value, super.messageScale, () {
|
||||
super.messageScale = value;
|
||||
});
|
||||
}
|
||||
|
||||
final _$fontSizeAtom = Atom(name: '_SettingsStoreBase.fontSize');
|
||||
|
||||
@override
|
||||
double get fontSize {
|
||||
_$fontSizeAtom.reportRead();
|
||||
return super.fontSize;
|
||||
}
|
||||
|
||||
@override
|
||||
set fontSize(double value) {
|
||||
_$fontSizeAtom.reportWrite(value, super.fontSize, () {
|
||||
super.fontSize = value;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -328,7 +345,8 @@ showDeletedMessages: ${showDeletedMessages},
|
|||
showZeroWidth: ${showZeroWidth},
|
||||
timestampType: ${timestampType},
|
||||
useReadableColors: ${useReadableColors},
|
||||
fontScale: ${fontScale},
|
||||
messageScale: ${messageScale},
|
||||
fontSize: ${fontSize},
|
||||
messageSpacing: ${messageSpacing},
|
||||
badgeHeight: ${badgeHeight},
|
||||
emoteHeight: ${emoteHeight},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue