TW-1171: update style solutions for message bubble and sendfiledialog

lib/widgets/file_tile_widget.dart → lib/widgets/file_widget/file_tile_widget.dart

@@ -1,6 +1,8 @@
+import 'dart:typed_data';
+
 import 'package:fluffychat/utils/extension/mime_type_extension.dart';
 import 'package:fluffychat/utils/string_extension.dart';
-import 'package:fluffychat/widgets/file_tile_widget_style.dart';
+import 'package:fluffychat/widgets/file_widget/file_tile_widget_style.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 
@@ -13,6 +15,8 @@ class FileTileWidget extends StatelessWidget {
     this.highlightText,
     this.sizeString,
     this.backgroundColor,
+    this.imageBytes,
+    this.style = const FileTileWidgetStyle(),
   });
 
   final TwakeMimeType mimeType;
@@ -21,47 +25,76 @@ class FileTileWidget extends StatelessWidget {
   final String? sizeString;
   final Color? backgroundColor;
   final String? fileType;
+  final Uint8List? imageBytes;
+  final FileTileWidgetStyle style;
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: FileTileWidgetStyle.paddingFileTileAll,
+      padding: style.paddingFileTileAll,
       decoration: ShapeDecoration(
-        color: backgroundColor ?? FileTileWidgetStyle.backgroundColor,
+        color: backgroundColor ?? style.backgroundColor,
         shape: RoundedRectangleBorder(
-          borderRadius: FileTileWidgetStyle.borderRadius,
+          borderRadius: style.borderRadius,
         ),
       ),
       child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
+        crossAxisAlignment: style.crossAxisAlignment,
         children: [
-          SvgPicture.asset(
-            mimeType.getIcon(fileType: fileType),
-            width: FileTileWidgetStyle.iconSize,
-            height: FileTileWidgetStyle.iconSize,
-          ),
+          if (imageBytes != null)
+            Padding(
+              padding: style.imagePadding,
+              child: ClipRRect(
+                borderRadius: style.borderRadius,
+                child: Image.memory(
+                  imageBytes!,
+                  width: style.imageSize,
+                  height: style.imageSize,
+                  fit: BoxFit.cover,
+                ),
+              ),
+            ),
+          if (imageBytes == null)
+            SvgPicture.asset(
+              mimeType.getIcon(fileType: fileType),
+              width: style.iconSize,
+              height: style.iconSize,
+            ),
+          style.paddingRightIcon,
           Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisSize: MainAxisSize.max,
               children: [
+                const SizedBox(height: 4.0),
                 _FileNameText(
                   filename: filename,
                   highlightText: highlightText,
+                  style: style,
                 ),
                 Row(
                   children: [
                     if (sizeString != null)
-                      _TextInformationOfFile(value: sizeString!),
-                    const _TextInformationOfFile(value: " · "),
+                      _TextInformationOfFile(
+                        value: sizeString!,
+                        style: style,
+                      ),
+                    _TextInformationOfFile(
+                      value: " · ",
+                      style: style,
+                    ),
                     Flexible(
                       child: _TextInformationOfFile(
-                        value:
-                            mimeType.getFileType(context, fileType: fileType),
+                        value: mimeType.getFileType(
+                          context,
+                          fileType: fileType,
+                        ),
+                        style: style,
                       ),
                     ),
                   ],
                 ),
+                style.paddingBottomText,
               ],
             ),
           ),
@@ -75,10 +108,12 @@ class _FileNameText extends StatelessWidget {
   const _FileNameText({
     required this.filename,
     this.highlightText,
+    this.style = const FileTileWidgetStyle(),
   });
 
   final String filename;
   final String? highlightText;
+  final FileTileWidgetStyle style;
 
   @override
   Widget build(BuildContext context) {
@@ -87,8 +122,8 @@ class _FileNameText extends StatelessWidget {
       text: TextSpan(
         children: filename.buildHighlightTextSpans(
           highlightText ?? '',
-          style: FileTileWidgetStyle.textStyle(context),
-          highlightStyle: FileTileWidgetStyle.highlightTextStyle(context),
+          style: style.textStyle(context),
+          highlightStyle: style.highlightTextStyle(context),
         ),
       ),
       overflow: TextOverflow.ellipsis,
@@ -98,13 +133,17 @@ class _FileNameText extends StatelessWidget {
 
 class _TextInformationOfFile extends StatelessWidget {
   final String value;
-  const _TextInformationOfFile({required this.value});
+  final FileTileWidgetStyle style;
+  const _TextInformationOfFile({
+    required this.value,
+    this.style = const FileTileWidgetStyle(),
+  });
 
   @override
   Widget build(BuildContext context) {
     return Text(
       value,
-      style: FileTileWidgetStyle.textInformationStyle(context),
+      style: style.textInformationStyle(context),
       maxLines: 1,
       overflow: TextOverflow.ellipsis,
     );

lib/widgets/file_widget/file_tile_widget_style.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_matrix_html/color_extension.dart';
+import 'package:linagora_design_flutter/colors/linagora_ref_colors.dart';
+import 'package:linagora_design_flutter/colors/linagora_sys_colors.dart';
+
+class FileTileWidgetStyle {
+  const FileTileWidgetStyle();
+
+  EdgeInsets get paddingFileTileAll =>
+      const EdgeInsets.only(left: 8.0, right: 16.0);
+
+  Color get backgroundColor =>
+      LinagoraSysColors.material().surfaceTint.withOpacity(0.08);
+
+  BorderRadiusGeometry get borderRadius => BorderRadius.circular(12);
+
+  EdgeInsets get paddingIcon => const EdgeInsets.only(right: 8);
+
+  CrossAxisAlignment get crossAxisAlignment => CrossAxisAlignment.start;
+
+  double get iconSize => 48;
+
+  double get imageSize => 40;
+
+  Color? get fileInfoColor => LinagoraRefColors.material().tertiary[20];
+
+  TextStyle highlightTextStyle(BuildContext context) {
+    return TextStyle(
+      color: Theme.of(context).colorScheme.onBackground,
+      fontWeight: FontWeight.bold,
+      backgroundColor: CssColor.fromCss('gold'),
+    );
+  }
+
+  TextStyle? textStyle(BuildContext context) {
+    return Theme.of(context).textTheme.bodyLarge?.copyWith(
+          color: Theme.of(context).colorScheme.onSurface,
+        );
+  }
+
+  TextStyle textInformationStyle(BuildContext context) {
+    return Theme.of(context).textTheme.bodySmall!.copyWith(
+          color: fileInfoColor,
+        );
+  }
+
+  EdgeInsets get imagePadding => const EdgeInsets.all(4.0);
+
+  Widget get paddingBottomText => const SizedBox(height: 0.0);
+
+  Widget get paddingRightIcon => const SizedBox(width: 8.0);
+}

lib/widgets/file_widget/message_file_tile_style.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+import 'file_tile_widget_style.dart';
+
+class MessageFileTileStyle extends FileTileWidgetStyle {
+  @override
+  double get iconSize => 36;
+
+  @override
+  EdgeInsets get paddingIcon => const EdgeInsets.only(right: 4);
+
+  @override
+  CrossAxisAlignment get crossAxisAlignment => CrossAxisAlignment.center;
+
+  @override
+  EdgeInsets get paddingFileTileAll =>
+      const EdgeInsets.only(left: 8.0, right: 16.0, top: 4.0, bottom: 4.0);
+
+  @override
+  TextStyle? textStyle(BuildContext context) {
+    return Theme.of(context).textTheme.titleSmall?.copyWith(
+          color: Theme.of(context).colorScheme.onSurface,
+        );
+  }
+
+  @override
+  Widget get paddingBottomText => const SizedBox(height: 4.0);
+
+  @override
+  Widget get paddingRightIcon => const SizedBox(width: 4.0);
+}