TF-2119 Create DraggableRecipientTag widget

(cherry picked from commit 8148bc6edc06568f8948629a1aba08ae812a7c21)
2023-09-13 17:04:18 +07:00
parent a3d5da384e
commit eaa0e8191f
2 changed files with 92 additions and 0 deletions
@@ -0,0 +1,27 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class DraggableRecipientTagWidgetStyle {
+  static const double radius = 10;
+  static const double avatarIconSize = 30;
+  static const double avatarLabelFontSize = 10;
+
+  static const Color avatarBackgroundColor = Colors.white;
+  static const Color deleteIconColor = Colors.white;
+  static const Color backgroundColor = AppColor.primaryColor;
+
+  static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(horizontal: 6, vertical: 3);
+  static const EdgeInsetsGeometry labelPadding = EdgeInsets.symmetric(horizontal: 8);
+
+  static const TextStyle avatarLabelTextStyle = TextStyle(
+    color: Colors.black,
+    fontSize: 12,
+    fontWeight: FontWeight.w500
+  );
+  static const TextStyle labelTextStyle = TextStyle(
+    color: Colors.white,
+    fontSize: 17,
+    fontWeight: FontWeight.normal
+  );
+}
@@ -0,0 +1,65 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
+import 'package:model/extensions/email_address_extension.dart';
+import 'package:tmail_ui_user/features/composer/presentation/styles/draggable_recipient_tag_widget_style.dart';
+
+class DraggableRecipientTagWidget extends StatelessWidget {
+
+  final EmailAddress emailAddress;
+
+  final _imagePaths = Get.find<ImagePaths>();
+
+  DraggableRecipientTagWidget({
+    super.key,
+    required this.emailAddress
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      cursor: SystemMouseCursors.grab,
+      child: Container(
+        decoration: const ShapeDecoration(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.all(Radius.circular(DraggableRecipientTagWidgetStyle.radius)),
+          ),
+          color: DraggableRecipientTagWidgetStyle.backgroundColor
+        ),
+        padding: DraggableRecipientTagWidgetStyle.padding,
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (emailAddress.displayName.isNotEmpty)
+              SizedBox(
+                width: DraggableRecipientTagWidgetStyle.avatarIconSize,
+                height: DraggableRecipientTagWidgetStyle.avatarIconSize,
+                child: CircleAvatar(
+                  backgroundColor: DraggableRecipientTagWidgetStyle.avatarBackgroundColor,
+                  child: Text(
+                    emailAddress.displayName[0].toUpperCase(),
+                    style: DraggableRecipientTagWidgetStyle.avatarLabelTextStyle
+                  )
+                ),
+              ),
+            Padding(
+              padding: DraggableRecipientTagWidgetStyle.labelPadding,
+              child: DefaultTextStyle(
+                style: DraggableRecipientTagWidgetStyle.labelTextStyle,
+                child: Text(emailAddress.asString()),
+              ),
+            ),
+            SvgPicture.asset(
+              _imagePaths.icClose,
+              colorFilter: DraggableRecipientTagWidgetStyle.deleteIconColor.asFilter(),
+              fit: BoxFit.fill
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}