feat: Change the bubble padding in style settings

This commit is contained in:
S1m 2022-01-03 22:19:51 +00:00 committed by Krille Fear
parent a61712e6f9
commit a8c094a661
6 changed files with 51 additions and 17 deletions

View File

@ -225,6 +225,11 @@
"type": "text", "type": "text",
"placeholders": {} "placeholders": {}
}, },
"bubbleSize": "Bubble size",
"@bubbleSize": {
"type": "text",
"placeholders": {}
},
"cachedKeys": "Keys cached", "cachedKeys": "Keys cached",
"@cachedKeys": { "@cachedKeys": {
"type": "text", "type": "text",

View File

@ -12,6 +12,7 @@ abstract class AppConfig {
static String _defaultHomeserver = 'matrix.org'; static String _defaultHomeserver = 'matrix.org';
static String get defaultHomeserver => _defaultHomeserver; static String get defaultHomeserver => _defaultHomeserver;
static String jitsiInstance = 'https://meet.jit.si/'; static String jitsiInstance = 'https://meet.jit.si/';
static double bubbleSizeFactor = 1;
static double fontSizeFactor = 1; static double fontSizeFactor = 1;
static Color chatColor = primaryColor; static Color chatColor = primaryColor;
static const double messageFontSize = 15.75; static const double messageFontSize = 15.75;

View File

@ -12,6 +12,7 @@ abstract class SettingKeys {
static const String amoledEnabled = 'amoled_enabled'; static const String amoledEnabled = 'amoled_enabled';
static const String codeLanguage = 'code_language'; static const String codeLanguage = 'code_language';
static const String showNoGoogle = 'chat.fluffy.show_no_google'; static const String showNoGoogle = 'chat.fluffy.show_no_google';
static const String bubbleSizeFactor = 'chat.fluffy.bubble_size_factor';
static const String fontSizeFactor = 'chat.fluffy.font_size_factor'; static const String fontSizeFactor = 'chat.fluffy.font_size_factor';
static const String showNoPid = 'chat.fluffy.show_no_pid'; static const String showNoPid = 'chat.fluffy.show_no_pid';
static const String databasePassword = 'database-password'; static const String databasePassword = 'database-password';

View File

@ -106,12 +106,12 @@ class Message extends StatelessWidget {
? SizedBox( ? SizedBox(
width: Avatar.defaultSize, width: Avatar.defaultSize,
child: event.status == EventStatus.sending child: event.status == EventStatus.sending
? const Center( ? Center(
child: SizedBox( child: SizedBox(
width: 16, width: 16 * AppConfig.bubbleSizeFactor,
height: 16, height: 16 * AppConfig.bubbleSizeFactor,
child: child: const CircularProgressIndicator.adaptive(
CircularProgressIndicator.adaptive(strokeWidth: 2), strokeWidth: 2),
), ),
) )
: null, : null,
@ -162,8 +162,9 @@ class Message extends StatelessWidget {
borderRadius: borderRadius:
BorderRadius.circular(AppConfig.borderRadius), BorderRadius.circular(AppConfig.borderRadius),
), ),
padding: padding: noBubble
noBubble ? EdgeInsets.zero : const EdgeInsets.all(16), ? EdgeInsets.zero
: EdgeInsets.all(16 * AppConfig.bubbleSizeFactor),
constraints: const BoxConstraints( constraints: const BoxConstraints(
maxWidth: FluffyThemes.columnWidth * 1.5), maxWidth: FluffyThemes.columnWidth * 1.5),
child: Stack( child: Stack(
@ -199,8 +200,9 @@ class Message extends StatelessWidget {
}, },
child: AbsorbPointer( child: AbsorbPointer(
child: Container( child: Container(
margin: const EdgeInsets.symmetric( margin: EdgeInsets.symmetric(
vertical: 4.0), vertical: 4.0 *
AppConfig.bubbleSizeFactor),
child: ReplyContent(replyEvent, child: ReplyContent(replyEvent,
lightText: ownMessage, lightText: ownMessage,
timeline: timeline), timeline: timeline),
@ -217,7 +219,8 @@ class Message extends StatelessWidget {
if (event.hasAggregatedEvents( if (event.hasAggregatedEvents(
timeline, RelationshipTypes.edit)) timeline, RelationshipTypes.edit))
Padding( Padding(
padding: const EdgeInsets.only(top: 4.0), padding: EdgeInsets.only(
top: 4.0 * AppConfig.bubbleSizeFactor),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
@ -263,7 +266,8 @@ class Message extends StatelessWidget {
children: <Widget>[ children: <Widget>[
if (displayTime) if (displayTime)
Padding( Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0), padding: EdgeInsets.symmetric(
vertical: 8.0 * AppConfig.bubbleSizeFactor),
child: Center( child: Center(
child: Material( child: Material(
color: Theme.of(context).backgroundColor, color: Theme.of(context).backgroundColor,
@ -282,7 +286,7 @@ class Message extends StatelessWidget {
if (event.hasAggregatedEvents(timeline, RelationshipTypes.reaction)) if (event.hasAggregatedEvents(timeline, RelationshipTypes.reaction))
Padding( Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
top: 4.0, top: 4.0 * AppConfig.bubbleSizeFactor,
left: (ownMessage ? 0 : Avatar.defaultSize) + 12.0, left: (ownMessage ? 0 : Avatar.defaultSize) + 12.0,
right: 12.0, right: 12.0,
), ),
@ -302,9 +306,9 @@ class Message extends StatelessWidget {
constraints: constraints:
const BoxConstraints(maxWidth: FluffyThemes.columnWidth * 2.5), const BoxConstraints(maxWidth: FluffyThemes.columnWidth * 2.5),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: EdgeInsets.symmetric(
horizontal: 8.0, horizontal: 8.0,
vertical: 4.0, vertical: 4.0 * AppConfig.bubbleSizeFactor,
), ),
child: container, child: container,
), ),

View File

@ -86,6 +86,14 @@ class SettingsStyleController extends State<SettingsStyle> {
); );
} }
void changeBubbleSizeFactor(double d) {
setState(() => AppConfig.bubbleSizeFactor = d);
Matrix.of(context).store.setItem(
SettingKeys.bubbleSizeFactor,
AppConfig.bubbleSizeFactor.toString(),
);
}
@override @override
Widget build(BuildContext context) => SettingsStyleView(this); Widget build(BuildContext context) => SettingsStyleView(this);
} }

View File

@ -112,13 +112,12 @@ class SettingsStyleView extends StatelessWidget {
const Divider(height: 1), const Divider(height: 1),
ListTile( ListTile(
title: Text( title: Text(
L10n.of(context)!.fontSize, L10n.of(context)!.messages,
style: TextStyle( style: TextStyle(
color: Theme.of(context).colorScheme.secondary, color: Theme.of(context).colorScheme.secondary,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
subtitle: Text('(*${AppConfig.fontSizeFactor})'),
), ),
Container( Container(
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
@ -130,7 +129,7 @@ class SettingsStyleView extends StatelessWidget {
Theme.of(context).secondaryHeaderColor.withAlpha(100), Theme.of(context).secondaryHeaderColor.withAlpha(100),
borderRadius: BorderRadius.circular(AppConfig.borderRadius), borderRadius: BorderRadius.circular(AppConfig.borderRadius),
child: Padding( child: Padding(
padding: const EdgeInsets.all(16), padding: EdgeInsets.all(16 * AppConfig.bubbleSizeFactor),
child: Text( child: Text(
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor', 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor',
style: TextStyle( style: TextStyle(
@ -142,6 +141,10 @@ class SettingsStyleView extends StatelessWidget {
), ),
), ),
), ),
ListTile(
title: Text(L10n.of(context)!.fontSize),
trailing: Text('* ${AppConfig.fontSizeFactor}'),
),
Slider.adaptive( Slider.adaptive(
min: 0.5, min: 0.5,
max: 2.5, max: 2.5,
@ -150,6 +153,18 @@ class SettingsStyleView extends StatelessWidget {
semanticFormatterCallback: (d) => d.toString(), semanticFormatterCallback: (d) => d.toString(),
onChanged: controller.changeFontSizeFactor, onChanged: controller.changeFontSizeFactor,
), ),
ListTile(
title: Text(L10n.of(context)!.bubbleSize),
trailing: Text('* ${AppConfig.bubbleSizeFactor}'),
),
Slider.adaptive(
min: 0.5,
max: 1.5,
divisions: 4,
value: AppConfig.bubbleSizeFactor,
semanticFormatterCallback: (d) => d.toString(),
onChanged: controller.changeBubbleSizeFactor,
),
], ],
), ),
), ),