diff --git a/lib/features/composer/presentation/styles/draggable_recipient_tag_widget_style.dart b/lib/features/composer/presentation/styles/draggable_recipient_tag_widget_style.dart new file mode 100644 index 000000000..3d419c338 --- /dev/null +++ b/lib/features/composer/presentation/styles/draggable_recipient_tag_widget_style.dart @@ -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 + ); +} \ No newline at end of file diff --git a/lib/features/composer/presentation/widgets/draggable_recipient_tag_widget.dart b/lib/features/composer/presentation/widgets/draggable_recipient_tag_widget.dart new file mode 100644 index 000000000..4a8338fc4 --- /dev/null +++ b/lib/features/composer/presentation/widgets/draggable_recipient_tag_widget.dart @@ -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(); + + 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 + ) + ], + ), + ), + ); + } +} \ No newline at end of file