feat: Change the bubble padding in style settings

assets/l10n/intl_en.arb

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

lib/config/app_config.dart

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

lib/config/setting_keys.dart

@@ -12,6 +12,7 @@ abstract class SettingKeys {
   static const String amoledEnabled = 'amoled_enabled';
   static const String codeLanguage = 'code_language';
   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 showNoPid = 'chat.fluffy.show_no_pid';
   static const String databasePassword = 'database-password';

lib/pages/chat/events/message.dart

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

lib/pages/settings_style/settings_style.dart

@@ -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
   Widget build(BuildContext context) => SettingsStyleView(this);
 }

lib/pages/settings_style/settings_style_view.dart

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