TF-1801 Change design of email attachment
(cherry picked from commit d2700ab7ebb13cc948a7cbacbd336a04b2f2bc93)
This commit is contained in:
hieubt
@@ -1,46 +1,52 @@
|
||||
import 'package:core/presentation/action/action_callback_define.dart';
|
||||
import 'package:core/presentation/extensions/color_extension.dart';
|
||||
import 'package:core/presentation/resources/image_paths.dart';
|
||||
import 'package:core/presentation/utils/responsive_utils.dart';
|
||||
import 'package:core/presentation/views/button/tmail_button_widget.dart';
|
||||
import 'package:core/utils/platform_info.dart';
|
||||
import 'package:filesize/filesize.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:model/email/attachment.dart';
|
||||
import 'package:model/extensions/list_attachment_extension.dart';
|
||||
import 'package:tmail_ui_user/features/base/widget/custom_scroll_behavior.dart';
|
||||
import 'package:tmail_ui_user/features/email/presentation/styles/email_attachments_styles.dart';
|
||||
import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_item_widget.dart';
|
||||
import 'package:tmail_ui_user/features/email/presentation/widgets/draggable_attachment_item_widget.dart';
|
||||
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
|
||||
|
||||
class EmailAttachmentsWidget extends StatefulWidget {
|
||||
class EmailAttachmentsWidget extends StatelessWidget {
|
||||
|
||||
final List<Attachment> attachments;
|
||||
final OnDragAttachmentStarted? onDragStarted;
|
||||
final OnDragAttachmentEnd? onDragEnd;
|
||||
final OnDownloadAttachmentFileActionClick? downloadAttachmentAction;
|
||||
final ResponsiveUtils responsiveUtils;
|
||||
final ImagePaths imagePaths;
|
||||
final OnTapActionCallback? onTapShowAllAttachmentFile;
|
||||
|
||||
const EmailAttachmentsWidget({
|
||||
super.key,
|
||||
required this.attachments,
|
||||
required this.responsiveUtils,
|
||||
required this.imagePaths,
|
||||
this.onDragStarted,
|
||||
this.onDragEnd,
|
||||
this.downloadAttachmentAction
|
||||
this.downloadAttachmentAction,
|
||||
this.onTapShowAllAttachmentFile,
|
||||
});
|
||||
|
||||
@override
|
||||
State<EmailAttachmentsWidget> createState() => _EmailAttachmentsWidgetState();
|
||||
}
|
||||
|
||||
class _EmailAttachmentsWidgetState extends State<EmailAttachmentsWidget> {
|
||||
|
||||
final _imagePaths = Get.find<ImagePaths>();
|
||||
|
||||
bool _isDisplayAll = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
int getItemCount() {
|
||||
if (attachments.length <= 2) {
|
||||
return attachments.length;
|
||||
}
|
||||
if (attachments.length == 3) {
|
||||
return responsiveUtils.isDesktop(context) ? attachments.length : 2;
|
||||
}
|
||||
return responsiveUtils.isDesktop(context) ? 4 : 2;
|
||||
}
|
||||
int hideItemsCount = attachments.length - getItemCount();
|
||||
return Padding(
|
||||
padding: EmailAttachmentsStyles.padding,
|
||||
child: Column(
|
||||
@@ -53,7 +59,7 @@ class _EmailAttachmentsWidgetState extends State<EmailAttachmentsWidget> {
|
||||
children: [
|
||||
const SizedBox(width: EmailAttachmentsStyles.headerSpace),
|
||||
SvgPicture.asset(
|
||||
_imagePaths.icAttachment,
|
||||
imagePaths.icAttachment,
|
||||
width: EmailAttachmentsStyles.headerIconSize,
|
||||
height: EmailAttachmentsStyles.headerIconSize,
|
||||
colorFilter: EmailAttachmentsStyles.headerIconColor.asFilter(),
|
||||
@@ -63,8 +69,8 @@ class _EmailAttachmentsWidgetState extends State<EmailAttachmentsWidget> {
|
||||
Expanded(
|
||||
child: Text(
|
||||
AppLocalizations.of(context).titleHeaderAttachment(
|
||||
widget.attachments.length,
|
||||
filesize(widget.attachments.totalSize(), 1)
|
||||
attachments.length,
|
||||
filesize(attachments.totalSize(), 1)
|
||||
),
|
||||
style: const TextStyle(
|
||||
fontSize: EmailAttachmentsStyles.headerTextSize,
|
||||
@@ -77,11 +83,9 @@ class _EmailAttachmentsWidgetState extends State<EmailAttachmentsWidget> {
|
||||
]
|
||||
)
|
||||
),
|
||||
if (widget.attachments.length > 2)
|
||||
if (attachments.length > 2)
|
||||
TMailButtonWidget(
|
||||
text: _isDisplayAll
|
||||
? AppLocalizations.of(context).hide
|
||||
: AppLocalizations.of(context).showAll,
|
||||
text: AppLocalizations.of(context).showAll,
|
||||
backgroundColor: Colors.transparent,
|
||||
borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
|
||||
padding: EmailAttachmentsStyles.buttonPadding,
|
||||
@@ -90,59 +94,66 @@ class _EmailAttachmentsWidgetState extends State<EmailAttachmentsWidget> {
|
||||
color: EmailAttachmentsStyles.buttonTextColor,
|
||||
fontWeight: EmailAttachmentsStyles.buttonFontWeight
|
||||
),
|
||||
onTapActionCallback: () => setState(() => _isDisplayAll = !_isDisplayAll),
|
||||
onTapActionCallback: onTapShowAllAttachmentFile,
|
||||
)
|
||||
],
|
||||
),
|
||||
const SizedBox(height: EmailAttachmentsStyles.marginHeader),
|
||||
if (_isDisplayAll)
|
||||
Wrap(
|
||||
runSpacing: EmailAttachmentsStyles.listSpace,
|
||||
children: widget.attachments
|
||||
.map((attachment) {
|
||||
if (PlatformInfo.isWeb) {
|
||||
return DraggableAttachmentItemWidget(
|
||||
attachment: attachment,
|
||||
onDragStarted: widget.onDragStarted,
|
||||
onDragEnd: widget.onDragEnd,
|
||||
downloadAttachmentAction: widget.downloadAttachmentAction,
|
||||
);
|
||||
} else {
|
||||
return AttachmentItemWidget(
|
||||
attachment: attachment,
|
||||
downloadAttachmentAction: widget.downloadAttachmentAction
|
||||
);
|
||||
}
|
||||
})
|
||||
.toList()
|
||||
)
|
||||
else
|
||||
SizedBox(
|
||||
height: EmailAttachmentsStyles.listHeight,
|
||||
child: ScrollConfiguration(
|
||||
behavior: CustomScrollBehavior(),
|
||||
child: ListView.builder(
|
||||
shrinkWrap: true,
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemCount: widget.attachments.length,
|
||||
itemBuilder: (context, index) {
|
||||
if (PlatformInfo.isWeb) {
|
||||
return DraggableAttachmentItemWidget(
|
||||
attachment: widget.attachments[index],
|
||||
onDragStarted: widget.onDragStarted,
|
||||
onDragEnd: widget.onDragEnd,
|
||||
downloadAttachmentAction: widget.downloadAttachmentAction
|
||||
);
|
||||
} else {
|
||||
return AttachmentItemWidget(
|
||||
attachment: widget.attachments[index],
|
||||
downloadAttachmentAction: widget.downloadAttachmentAction
|
||||
);
|
||||
}
|
||||
}
|
||||
SizedBox(
|
||||
height: responsiveUtils.isMobile(context) ? EmailAttachmentsStyles.mobileListHeight : EmailAttachmentsStyles.listHeight,
|
||||
child: Row(
|
||||
children: [
|
||||
Flexible(
|
||||
child: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
scrollDirection: responsiveUtils.isMobile(context) ? Axis.vertical : Axis.horizontal,
|
||||
itemCount: getItemCount(),
|
||||
itemBuilder: (context, index) {
|
||||
if (PlatformInfo.isWeb) {
|
||||
return DraggableAttachmentItemWidget(
|
||||
attachment: attachments[index],
|
||||
onDragStarted: onDragStarted,
|
||||
onDragEnd: onDragEnd,
|
||||
downloadAttachmentAction: downloadAttachmentAction
|
||||
);
|
||||
} else {
|
||||
return AttachmentItemWidget(
|
||||
attachment: attachments[index],
|
||||
downloadAttachmentAction: downloadAttachmentAction
|
||||
);
|
||||
}
|
||||
},
|
||||
separatorBuilder: (context, index) {
|
||||
if (responsiveUtils.isMobile(context)) {
|
||||
return const SizedBox(height: EmailAttachmentsStyles.listSpace);
|
||||
} else {
|
||||
return const SizedBox(width: EmailAttachmentsStyles.listSpace);
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
)
|
||||
),
|
||||
if (hideItemsCount != 0)
|
||||
Container(
|
||||
padding: EdgeInsets.only(bottom: responsiveUtils.isMobile(context) ? EmailAttachmentsStyles.moreAttachmentsButtonPadding : 0),
|
||||
alignment: responsiveUtils.isMobile(context)
|
||||
? Alignment.bottomRight
|
||||
: Alignment.centerRight,
|
||||
child: TMailButtonWidget(
|
||||
text: AppLocalizations.of(context).moreAttachments(hideItemsCount),
|
||||
backgroundColor: Colors.transparent,
|
||||
borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
|
||||
padding: EmailAttachmentsStyles.buttonPadding,
|
||||
textStyle: const TextStyle(
|
||||
fontSize: EmailAttachmentsStyles.buttonMoreAttachmentsTextSize,
|
||||
color: EmailAttachmentsStyles.ButtonMoreAttachmentsTextColor,
|
||||
fontWeight: EmailAttachmentsStyles.buttonMoreAttachmentsFontWeight,
|
||||
),
|
||||
onTapActionCallback: onTapShowAllAttachmentFile,
|
||||
),
|
||||
),
|
||||
]
|
||||
)
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user