From 5f41cb23218cf5fac7b4e627745adb0990ab7ceb Mon Sep 17 00:00:00 2001 From: dab246 Date: Fri, 26 Jan 2024 13:18:33 +0700 Subject: [PATCH] TF-2510 Fix padding/style attachment item Signed-off-by: dab246 --- .../attachment_item_widget_style.dart | 16 +-- .../attachment_list_item_widget_styles.dart | 11 +- .../attachment/attachment_list_styles.dart | 3 - .../styles/email_attachments_styles.dart | 10 +- .../widgets/attachment_item_widget.dart | 117 ++++++++--------- ...chment_list_bottom_sheet_body_builder.dart | 83 +++++------- .../attachment_list_dialog_body_builder.dart | 120 +++++++++-------- .../attachment_list_item_widget.dart | 110 ++++++---------- .../widgets/email_address_dialog_builder.dart | 19 ++- .../widgets/email_attachments_widget.dart | 123 +++++++++--------- ...formation_sender_and_receiver_builder.dart | 2 +- 11 files changed, 282 insertions(+), 332 deletions(-) diff --git a/lib/features/email/presentation/styles/attachment/attachment_item_widget_style.dart b/lib/features/email/presentation/styles/attachment/attachment_item_widget_style.dart index 043e3ea46..e7b95b212 100644 --- a/lib/features/email/presentation/styles/attachment/attachment_item_widget_style.dart +++ b/lib/features/email/presentation/styles/attachment/attachment_item_widget_style.dart @@ -4,29 +4,27 @@ import 'package:flutter/material.dart'; class AttachmentItemWidgetStyle { static const double radius = 8; - static const double mobileWidth = 224; - static const double width = 260; + static const double maxWidthMobile = 260; + static const double maxWidthTablet = 240; + static const double maxWidthTabletLarge = 200; static const double height = 36; static const double iconSize = 20; static const double space = 8; - static const double downloadIconSize = 20; - static const double attachmentNameMaxWidth = 130; + static const double downloadIconSize = 22; - static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(end: 0); - static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.all(8); + static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.symmetric(horizontal: 8, vertical: 5); static const Color borderColor = AppColor.attachmentFileBorderColor; - static const Color downloadIconColor = AppColor.primaryColor; static const TextStyle labelTextStyle = TextStyle( fontSize: 14, color: AppColor.attachmentFileNameColor, - fontWeight: FontWeight.normal + fontWeight: FontWeight.w500 ); static const TextStyle dotsLabelTextStyle = TextStyle( fontSize: 12, color: AppColor.attachmentFileNameColor, - fontWeight: FontWeight.normal + fontWeight: FontWeight.w500 ); static const TextStyle sizeLabelTextStyle = TextStyle( fontSize: 12, diff --git a/lib/features/email/presentation/styles/attachment/attachment_list_item_widget_styles.dart b/lib/features/email/presentation/styles/attachment/attachment_list_item_widget_styles.dart index f226b28b0..155cb3a81 100644 --- a/lib/features/email/presentation/styles/attachment/attachment_list_item_widget_styles.dart +++ b/lib/features/email/presentation/styles/attachment/attachment_list_item_widget_styles.dart @@ -3,27 +3,22 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:flutter/material.dart'; class AttachmentListItemWidgetStyle { - static const double height = 60; static const double iconSize = 44; static const double space = 8; static const double downloadIconSize = 24; static const double fileTitleBottomSpace = 4; - static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.all(8); - static const EdgeInsetsGeometry fileTitlePadding = EdgeInsetsDirectional.all(4); - static const EdgeInsetsGeometry downloadIconPadding = EdgeInsets.only(right: 13.0); - - static const Color downloadIconColor = AppColor.primaryColor; + static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.all(12); static const TextStyle labelTextStyle = TextStyle( fontSize: 14, color: AppColor.attachmentFileNameColor, - fontWeight: FontWeight.normal + fontWeight: FontWeight.w500 ); static const TextStyle dotsLabelTextStyle = TextStyle( fontSize: 12, color: AppColor.attachmentFileNameColor, - fontWeight: FontWeight.normal + fontWeight: FontWeight.w500 ); static const TextStyle sizeLabelTextStyle = TextStyle( fontSize: 12, diff --git a/lib/features/email/presentation/styles/attachment/attachment_list_styles.dart b/lib/features/email/presentation/styles/attachment/attachment_list_styles.dart index eea9782a7..754740e08 100644 --- a/lib/features/email/presentation/styles/attachment/attachment_list_styles.dart +++ b/lib/features/email/presentation/styles/attachment/attachment_list_styles.dart @@ -5,7 +5,6 @@ class AttachmentListStyles { static const double headerBorderWidth = 1.0; static const double titleSpace = 8.0; static const double scrollbarThickness = 8.0; - static const double separatorHeight = 1.0; static const double buttonsSpaceBetween = 12.0; static const double dialogBottomSpace = 20.0; static const double buttonBorderWidth = 1.0; @@ -28,8 +27,6 @@ class AttachmentListStyles { ); static const EdgeInsetsGeometry listAreaPadding = EdgeInsets.all(12.0); static const EdgeInsetsGeometry listAreaPaddingMobile = EdgeInsets.symmetric(vertical: 12); - static const EdgeInsetsGeometry listItemPadding = EdgeInsets.only(right: 8.0); - static const EdgeInsetsGeometry separatorPadding = EdgeInsets.only(right: 8.0); static const EdgeInsetsGeometry buttonsPadding = EdgeInsets.symmetric( horizontal: 24.0, vertical: 12.0 diff --git a/lib/features/email/presentation/styles/email_attachments_styles.dart b/lib/features/email/presentation/styles/email_attachments_styles.dart index 15f3aec9c..fa8b2f6e4 100644 --- a/lib/features/email/presentation/styles/email_attachments_styles.dart +++ b/lib/features/email/presentation/styles/email_attachments_styles.dart @@ -10,20 +10,18 @@ class EmailAttachmentsStyles { static const double buttonTextSize = 13; static const double buttonMoreAttachmentsTextSize = 14; static const double buttonBorderRadius = 8; - static const double listSpace = 12; - static const double listHeight = 36; - static const double mobileListHeight = 100; - static const double moreAttachmentsButtonPadding = 8; + static const double listSpace = 8; static const Color headerTextColor = AppColor.colorTitleHeaderAttachment; static const Color headerIconColor = AppColor.colorAttachmentIcon; static const Color buttonTextColor = AppColor.primaryColor; - static const Color ButtonMoreAttachmentsTextColor = AppColor.colorLabelMoreAttachmentsButton; + static const Color buttonMoreAttachmentsTextColor = AppColor.colorLabelMoreAttachmentsButton; static const FontWeight headerFontWeight = FontWeight.w400; static const FontWeight buttonFontWeight = FontWeight.w400; static const FontWeight buttonMoreAttachmentsFontWeight = FontWeight.w500; - static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(vertical: 12, horizontal: 16); + static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(start: 16, end: 16, bottom: 12); static const EdgeInsetsGeometry buttonPadding = EdgeInsets.symmetric(vertical: 8, horizontal: 12); + static const EdgeInsetsGeometry moreButtonMargin = EdgeInsetsDirectional.only(bottom: 2, start: 8); } \ No newline at end of file diff --git a/lib/features/email/presentation/widgets/attachment_item_widget.dart b/lib/features/email/presentation/widgets/attachment_item_widget.dart index e818a18a4..43aa94b94 100644 --- a/lib/features/email/presentation/widgets/attachment_item_widget.dart +++ b/lib/features/email/presentation/widgets/attachment_item_widget.dart @@ -1,7 +1,7 @@ - -import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; -import 'package:core/presentation/utils/style_utils.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:extended_text/extended_text.dart'; import 'package:filesize/filesize.dart'; import 'package:flutter/material.dart'; @@ -19,6 +19,7 @@ class AttachmentItemWidget extends StatelessWidget { final OnDownloadAttachmentFileActionClick? downloadAttachmentAction; final _imagePaths = Get.find(); + final _responsiveUtils = Get.find(); AttachmentItemWidget({ Key? key, @@ -41,73 +42,63 @@ class AttachmentItemWidget extends StatelessWidget { borderRadius: const BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius)), border: Border.all(color: AttachmentItemWidgetStyle.borderColor), ), - width: AttachmentItemWidgetStyle.width, - height: AttachmentItemWidgetStyle.height, - child: Stack( + width: _getMaxWidthItem(context), + child: Row( children: [ - Positioned.fill( - child: Row( - children: [ - SvgPicture.asset( - attachment.getIcon(_imagePaths), - width: AttachmentItemWidgetStyle.iconSize, - height: AttachmentItemWidgetStyle.iconSize, - fit: BoxFit.fill + SvgPicture.asset( + attachment.getIcon(_imagePaths), + width: AttachmentItemWidgetStyle.iconSize, + height: AttachmentItemWidgetStyle.iconSize, + fit: BoxFit.fill + ), + const SizedBox(width: AttachmentItemWidgetStyle.space), + Expanded( + child: ExtendedText( + (attachment.name ?? ''), + maxLines: 1, + overflowWidget: const TextOverflowWidget( + position: TextOverflowPosition.middle, + child: Text( + "...", + style: AttachmentItemWidgetStyle.dotsLabelTextStyle, ), - const SizedBox(width: AttachmentItemWidgetStyle.space), - Expanded(child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - SizedBox( - width: AttachmentItemWidgetStyle.attachmentNameMaxWidth, - child: ExtendedText( - (attachment.name ?? ''), - maxLines: 1, - overflow: CommonTextStyle.defaultTextOverFlow, - softWrap: CommonTextStyle.defaultSoftWrap, - overflowWidget: TextOverflowWidget( - position: Directionality.maybeOf(context) == TextDirection.rtl - ? TextOverflowPosition.start - : TextOverflowPosition.end, - child: const Text( - "...", - style: AttachmentItemWidgetStyle.dotsLabelTextStyle, - ), - ), - style: AttachmentItemWidgetStyle.labelTextStyle, - ), - ), - Text( - filesize(attachment.size?.value), - maxLines: 1, - overflow: CommonTextStyle.defaultTextOverFlow, - softWrap: CommonTextStyle.defaultSoftWrap, - style: AttachmentItemWidgetStyle.sizeLabelTextStyle, - ) - ] - )), - Material( - color: Colors.transparent, - child: InkWell( - customBorder: const CircleBorder(), - child: SvgPicture.asset( - _imagePaths.icDownloadAttachment, - width: AttachmentItemWidgetStyle.downloadIconSize, - height: AttachmentItemWidgetStyle.downloadIconSize, - colorFilter: AttachmentItemWidgetStyle.downloadIconColor.asFilter(), - fit: BoxFit.fill - ), - onTap: () => downloadAttachmentAction?.call(attachment) - ), - ), - ] + ), + style: AttachmentItemWidgetStyle.labelTextStyle, ), - ), + ), + const SizedBox(width: AttachmentItemWidgetStyle.space), + Text( + filesize(attachment.size?.value), + maxLines: 1, + style: AttachmentItemWidgetStyle.sizeLabelTextStyle, + ), + TMailButtonWidget.fromIcon( + icon: _imagePaths.icDownloadAttachment, + backgroundColor: Colors.transparent, + padding: const EdgeInsets.all(5), + iconSize: AttachmentItemWidgetStyle.downloadIconSize, + onTapActionCallback: () => downloadAttachmentAction?.call(attachment) + ) ] ) ), ), ); } + + double _getMaxWidthItem(BuildContext context) { + if (PlatformInfo.isMobile) { + return _responsiveUtils.isMobile(context) + ? AttachmentItemWidgetStyle.maxWidthMobile + : AttachmentItemWidgetStyle.maxWidthTablet; + } else { + if (_responsiveUtils.isTabletLarge(context)) { + return AttachmentItemWidgetStyle.maxWidthTabletLarge; + } else if (_responsiveUtils.isTablet(context)) { + return AttachmentItemWidgetStyle.maxWidthTablet; + } else { + return AttachmentItemWidgetStyle.maxWidthMobile; + } + } + } } \ No newline at end of file diff --git a/lib/features/email/presentation/widgets/attachment_list/attachment_list_bottom_sheet_body_builder.dart b/lib/features/email/presentation/widgets/attachment_list/attachment_list_bottom_sheet_body_builder.dart index 31b4775af..fdc751a81 100644 --- a/lib/features/email/presentation/widgets/attachment_list/attachment_list_bottom_sheet_body_builder.dart +++ b/lib/features/email/presentation/widgets/attachment_list/attachment_list_bottom_sheet_body_builder.dart @@ -1,6 +1,6 @@ import 'package:core/presentation/resources/image_paths.dart'; +import 'package:core/presentation/views/button/tmail_button_widget.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_svg/flutter_svg.dart'; import 'package:model/email/attachment.dart'; import 'package:pointer_interceptor/pointer_interceptor.dart'; import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_list_styles.dart'; @@ -64,14 +64,13 @@ class AttachmentListBottomSheetBodyBuilder extends StatelessWidget { ), centerTitle: true, actions: [ - GestureDetector( - child: Padding( - padding: AttachmentListStyles.closeButtonPadding, - child: SvgPicture.asset(imagePaths.icCircleClose), - ), - onTapDown: (_) { - onCloseButtonAction?.call(); - }, + TMailButtonWidget.fromIcon( + icon: imagePaths.icCircleClose, + backgroundColor: Colors.transparent, + iconSize: 28, + margin: const EdgeInsetsDirectional.only(end: 12), + padding: const EdgeInsets.all(5), + onTapActionCallback: onCloseButtonAction, ) ], ), @@ -80,44 +79,34 @@ class AttachmentListBottomSheetBodyBuilder extends StatelessWidget { child: Column( children: [ Expanded( - child: Padding( - padding: AttachmentListStyles.listAreaPaddingMobile, - child: RawScrollbar( - trackColor: AttachmentListStyles.scrollbarTrackColor, - thumbColor: AttachmentListStyles.scrollbarThumbColor, - radius: AttachmentListStyles.scrollbarThumbRadius, - trackRadius: AttachmentListStyles.scrollbarTrackRadius, - thickness: AttachmentListStyles.scrollbarThickness, - thumbVisibility: true, - trackVisibility: true, - controller: scrollController, - trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor, - child: Padding( - padding: AttachmentListStyles.listItemPadding, - child: ScrollConfiguration( - behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false), - child: ListView.separated( - controller: scrollController, - shrinkWrap: true, - physics: const ScrollPhysics(), - itemCount: attachments.length, - itemBuilder: (context, index) { - return AttachmentListItemWidget( - attachment: attachments[index], - downloadAttachmentAction: onDownloadAttachmentFileAction, - ); - }, - separatorBuilder: (context, index) { - return const Padding( - padding: AttachmentListStyles.separatorPadding, - child: Divider( - height: AttachmentListStyles.separatorHeight, - color: AttachmentListStyles.separatorColor, - ), - ); - }, - ), - ), + child: RawScrollbar( + trackColor: AttachmentListStyles.scrollbarTrackColor, + thumbColor: AttachmentListStyles.scrollbarThumbColor, + radius: AttachmentListStyles.scrollbarThumbRadius, + trackRadius: AttachmentListStyles.scrollbarTrackRadius, + thickness: AttachmentListStyles.scrollbarThickness, + thumbVisibility: true, + trackVisibility: true, + controller: scrollController, + trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor, + child: ScrollConfiguration( + behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false), + child: ListView.separated( + controller: scrollController, + shrinkWrap: true, + physics: const ScrollPhysics(), + itemCount: attachments.length, + itemBuilder: (context, index) { + return AttachmentListItemWidget( + attachment: attachments[index], + downloadAttachmentAction: onDownloadAttachmentFileAction, + ); + }, + separatorBuilder: (context, index) { + return const Divider( + color: AttachmentListStyles.separatorColor, + ); + }, ), ), ), diff --git a/lib/features/email/presentation/widgets/attachment_list/attachment_list_dialog_body_builder.dart b/lib/features/email/presentation/widgets/attachment_list/attachment_list_dialog_body_builder.dart index 58cc65216..635ac9071 100644 --- a/lib/features/email/presentation/widgets/attachment_list/attachment_list_dialog_body_builder.dart +++ b/lib/features/email/presentation/widgets/attachment_list/attachment_list_dialog_body_builder.dart @@ -1,7 +1,6 @@ import 'package:core/presentation/resources/image_paths.dart'; -import 'package:core/presentation/views/button/icon_button_web.dart'; +import 'package:core/presentation/views/button/tmail_button_widget.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_svg/flutter_svg.dart'; import 'package:model/email/attachment.dart'; import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_list_styles.dart'; import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_list/attachment_list_action_button_builder.dart'; @@ -47,68 +46,75 @@ class AttachmentListDialogBodyBuilder extends StatelessWidget { padding: AttachmentListStyles.headerPadding, decoration: AttachmentListStyles.headerDecoration, child: Row( - mainAxisAlignment: MainAxisAlignment.center, children: [ - const Spacer(), - Text( - AppLocalizations.of(context).attachmentList, - style: AttachmentListStyles.titleTextStyle + const SizedBox(width: 50), + Expanded( + child: Center( + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Flexible( + child: Text( + AppLocalizations.of(context).attachmentList, + style: AttachmentListStyles.titleTextStyle, + maxLines: 2, + overflow: TextOverflow.ellipsis, + ), + ), + const SizedBox(width: AttachmentListStyles.titleSpace), + Flexible( + child: Text( + '${attachments.length} ${AppLocalizations.of(context).files}', + style: AttachmentListStyles.subTitleTextStyle, + maxLines: 2, + overflow: TextOverflow.ellipsis, + ), + ) + ], + ), + ) ), - const SizedBox(width: AttachmentListStyles.titleSpace), - Text( - '${attachments.length} ${AppLocalizations.of(context).files}', - style: AttachmentListStyles.subTitleTextStyle - ), - if (onCloseButtonAction != null) - const Spacer(), - buildIconWeb( - icon: SvgPicture.asset(imagePaths.icCircleClose), - onTap: () { - onCloseButtonAction!.call(); - }, + const SizedBox(width: 8), + TMailButtonWidget.fromIcon( + icon: imagePaths.icCircleClose, + onTapActionCallback: onCloseButtonAction, + iconSize: 28, + backgroundColor: Colors.transparent, + padding: const EdgeInsets.all(5), ), + const SizedBox(width: 8) ], ) ), Expanded( - child: Padding( - padding: AttachmentListStyles.listAreaPadding, - child: RawScrollbar( - trackColor: AttachmentListStyles.scrollbarTrackColor, - thumbColor: AttachmentListStyles.scrollbarThumbColor, - radius: AttachmentListStyles.scrollbarThumbRadius, - trackRadius: AttachmentListStyles.scrollbarTrackRadius, - thickness: AttachmentListStyles.scrollbarThickness, - thumbVisibility: true, - trackVisibility: true, - controller: scrollController, - trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor, - child: Padding( - padding: AttachmentListStyles.listItemPadding, - child: ScrollConfiguration( - behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false), - child: ListView.separated( - controller: scrollController, - shrinkWrap: true, - physics: const ScrollPhysics(), - itemCount: attachments.length, - itemBuilder: (context, index) { - return AttachmentListItemWidget( - attachment: attachments[index], - downloadAttachmentAction: onDownloadAttachmentFileAction, - ); - }, - separatorBuilder: (context, index) { - return const Padding( - padding: AttachmentListStyles.separatorPadding, - child: Divider( - height: AttachmentListStyles.separatorHeight, - color: AttachmentListStyles.separatorColor, - ), - ); - }, - ), - ), + child: RawScrollbar( + trackColor: AttachmentListStyles.scrollbarTrackColor, + thumbColor: AttachmentListStyles.scrollbarThumbColor, + radius: AttachmentListStyles.scrollbarThumbRadius, + trackRadius: AttachmentListStyles.scrollbarTrackRadius, + thickness: AttachmentListStyles.scrollbarThickness, + thumbVisibility: true, + trackVisibility: true, + controller: scrollController, + trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor, + child: ScrollConfiguration( + behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false), + child: ListView.separated( + controller: scrollController, + shrinkWrap: true, + physics: const ScrollPhysics(), + itemCount: attachments.length, + itemBuilder: (context, index) { + return AttachmentListItemWidget( + attachment: attachments[index], + downloadAttachmentAction: onDownloadAttachmentFileAction, + ); + }, + separatorBuilder: (context, index) { + return const Divider( + color: AttachmentListStyles.separatorColor, + ); + }, ), ), ), diff --git a/lib/features/email/presentation/widgets/attachment_list/attachment_list_item_widget.dart b/lib/features/email/presentation/widgets/attachment_list/attachment_list_item_widget.dart index 6dc75602e..4209043f7 100644 --- a/lib/features/email/presentation/widgets/attachment_list/attachment_list_item_widget.dart +++ b/lib/features/email/presentation/widgets/attachment_list/attachment_list_item_widget.dart @@ -1,7 +1,6 @@ - -import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/utils/style_utils.dart'; +import 'package:core/presentation/views/button/tmail_button_widget.dart'; import 'package:extended_text/extended_text.dart'; import 'package:filesize/filesize.dart'; import 'package:flutter/material.dart'; @@ -29,84 +28,55 @@ class AttachmentListItemWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Material( - color: Colors.transparent, + type: MaterialType.transparency, child: InkWell( onTap: () => downloadAttachmentAction?.call(attachment), - child: Container( + child: Padding( padding: AttachmentListItemWidgetStyle.contentPadding, - height: AttachmentListItemWidgetStyle.height, - child: Stack( + child: Row( children: [ - Positioned.fill( - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, + SvgPicture.asset( + attachment.getIcon(_imagePaths), + width: AttachmentListItemWidgetStyle.iconSize, + height: AttachmentListItemWidgetStyle.iconSize, + fit: BoxFit.fill + ), + const SizedBox(width: AttachmentListItemWidgetStyle.space), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, children: [ - SvgPicture.asset( - attachment.getIcon(_imagePaths), - width: AttachmentListItemWidgetStyle.iconSize, - height: AttachmentListItemWidgetStyle.iconSize, - fit: BoxFit.fill - ), - const SizedBox(width: AttachmentListItemWidgetStyle.space), - Expanded( - child: Padding( - padding: AttachmentListItemWidgetStyle.fileTitlePadding, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - ExtendedText( - (attachment.name ?? ''), - maxLines: 1, - overflow: CommonTextStyle.defaultTextOverFlow, - softWrap: CommonTextStyle.defaultSoftWrap, - overflowWidget: TextOverflowWidget( - position: Directionality.maybeOf(context) == TextDirection.rtl - ? TextOverflowPosition.start - : TextOverflowPosition.end, - child: const Text( - "...", - style: AttachmentListItemWidgetStyle.dotsLabelTextStyle, - ), - ), - style: AttachmentListItemWidgetStyle.labelTextStyle, - ), - const SizedBox(height: AttachmentListItemWidgetStyle.fileTitleBottomSpace), - Text( - filesize(attachment.size?.value), - maxLines: 1, - overflow: CommonTextStyle.defaultTextOverFlow, - softWrap: CommonTextStyle.defaultSoftWrap, - style: AttachmentListItemWidgetStyle.sizeLabelTextStyle, - ) - ] + ExtendedText( + (attachment.name ?? ''), + maxLines: 1, + overflowWidget: const TextOverflowWidget( + position: TextOverflowPosition.middle, + child: Text( + "...", + style: AttachmentListItemWidgetStyle.dotsLabelTextStyle, ), - ) + ), + style: AttachmentListItemWidgetStyle.labelTextStyle, + ), + const SizedBox(height: AttachmentListItemWidgetStyle.fileTitleBottomSpace), + Text( + filesize(attachment.size?.value), + maxLines: 1, + overflow: CommonTextStyle.defaultTextOverFlow, + softWrap: CommonTextStyle.defaultSoftWrap, + style: AttachmentListItemWidgetStyle.sizeLabelTextStyle, ) ] - ), - ), - Align( - alignment: AlignmentDirectional.centerEnd, - child: Padding( - padding: AttachmentListItemWidgetStyle.downloadIconPadding, - child: Material( - color: Colors.transparent, - child: InkWell( - customBorder: const CircleBorder(), - child: SvgPicture.asset( - _imagePaths.icDownloadAttachment, - width: AttachmentListItemWidgetStyle.downloadIconSize, - height: AttachmentListItemWidgetStyle.downloadIconSize, - colorFilter: AttachmentListItemWidgetStyle.downloadIconColor.asFilter(), - fit: BoxFit.fill - ), - onTap: () => downloadAttachmentAction?.call(attachment) - ), - ), - ), + ) ), + const SizedBox(width: AttachmentListItemWidgetStyle.space), + TMailButtonWidget.fromIcon( + icon: _imagePaths.icDownloadAttachment, + backgroundColor: Colors.transparent, + onTapActionCallback: () => downloadAttachmentAction?.call(attachment) + ) ] - ) + ), ), ), ); diff --git a/lib/features/email/presentation/widgets/email_address_dialog_builder.dart b/lib/features/email/presentation/widgets/email_address_dialog_builder.dart index 7b9487ea4..329d44019 100644 --- a/lib/features/email/presentation/widgets/email_address_dialog_builder.dart +++ b/lib/features/email/presentation/widgets/email_address_dialog_builder.dart @@ -1,7 +1,6 @@ import 'package:core/core.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/model.dart'; @@ -51,15 +50,15 @@ class EmailAddressDialogBuilder extends StatelessWidget { mainAxisSize: MainAxisSize.min, children: [ Align( - alignment: Alignment.centerRight, - child: IconButton( - padding: const EdgeInsets.only(top: 16, right: 16), - onPressed: () => onCloseDialogAction?.call(), - icon: SvgPicture.asset( - imagePaths.icCircleClose, - width: 24, - height: 24, - fit: BoxFit.fill))), + alignment: Alignment.centerRight, + child: TMailButtonWidget.fromIcon( + onTapActionCallback: onCloseDialogAction, + icon: imagePaths.icCircleClose, + backgroundColor: Colors.transparent, + margin: const EdgeInsetsDirectional.only(top: 8, end: 8), + iconSize: 24, + ) + ), Padding(padding: const EdgeInsets.symmetric(horizontal: 16), child: Center(child: (AvatarBuilder() ..text(_emailAddress.asString().firstLetterToUpperCase) diff --git a/lib/features/email/presentation/widgets/email_attachments_widget.dart b/lib/features/email/presentation/widgets/email_attachments_widget.dart index 0bdbe6d9d..5783c729c 100644 --- a/lib/features/email/presentation/widgets/email_attachments_widget.dart +++ b/lib/features/email/presentation/widgets/email_attachments_widget.dart @@ -37,16 +37,8 @@ class EmailAttachmentsWidget extends StatelessWidget { @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(); + final attachmentDisplayed = _getAttachmentDisplayed(context); + int hideItemsCount = attachments.length - attachmentDisplayed.length; return Padding( padding: EmailAttachmentsStyles.padding, child: Column( @@ -99,63 +91,78 @@ class EmailAttachmentsWidget extends StatelessWidget { ], ), const SizedBox(height: EmailAttachmentsStyles.marginHeader), - 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], + Row( + crossAxisAlignment: responsiveUtils.isMobile(context) + ? CrossAxisAlignment.end + : CrossAxisAlignment.center, + children: [ + Flexible( + child: Wrap( + spacing: EmailAttachmentsStyles.listSpace, + runSpacing: EmailAttachmentsStyles.listSpace, + children: attachmentDisplayed.map((attachment) { + if (PlatformInfo.isWeb) { + return DraggableAttachmentItemWidget( + attachment: attachment, onDragStarted: onDragStarted, onDragEnd: onDragEnd, downloadAttachmentAction: downloadAttachmentAction - ); - } else { - return AttachmentItemWidget( - attachment: attachments[index], + ); + } else { + return AttachmentItemWidget( + attachment: attachment, downloadAttachmentAction: downloadAttachmentAction - ); - } - }, - separatorBuilder: (context, index) { - if (responsiveUtils.isMobile(context)) { - return const SizedBox(height: EmailAttachmentsStyles.listSpace); - } else { - return const SizedBox(width: EmailAttachmentsStyles.listSpace); - } - }, - ), + ); + } + }).toList(), ), - 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, - ), + ), + if (hideItemsCount > 0) + TMailButtonWidget( + text: AppLocalizations.of(context).moreAttachments(hideItemsCount), + backgroundColor: Colors.transparent, + borderRadius: EmailAttachmentsStyles.buttonBorderRadius, + padding: EmailAttachmentsStyles.buttonPadding, + margin: EmailAttachmentsStyles.moreButtonMargin, + textStyle: const TextStyle( + fontSize: EmailAttachmentsStyles.buttonMoreAttachmentsTextSize, + color: EmailAttachmentsStyles.buttonMoreAttachmentsTextColor, + fontWeight: EmailAttachmentsStyles.buttonMoreAttachmentsFontWeight, ), - ] - ) + onTapActionCallback: onTapShowAllAttachmentFile, + ), + ] ), ], ), ); } + + List _getAttachmentDisplayed(BuildContext context) { + if (attachments.length <= 2) { + return attachments; + } + + if (attachments.length == 3) { + if (PlatformInfo.isWeb) { + return responsiveUtils.isDesktop(context) + ? attachments + : attachments.sublist(0, 2); + } else { + return responsiveUtils.isMobile(context) + ? attachments + : attachments.sublist(0, 2); + } + } + + if (PlatformInfo.isWeb) { + return responsiveUtils.isDesktop(context) || responsiveUtils.isMobile(context) + ? attachments.sublist(0, 4) + : attachments.sublist(0, 2); + } else { + return responsiveUtils.isMobile(context) + ? attachments.sublist(0, 4) + : attachments.sublist(0, 2); + } + } } diff --git a/lib/features/email/presentation/widgets/information_sender_and_receiver_builder.dart b/lib/features/email/presentation/widgets/information_sender_and_receiver_builder.dart index cbc882ff4..9873df007 100644 --- a/lib/features/email/presentation/widgets/information_sender_and_receiver_builder.dart +++ b/lib/features/email/presentation/widgets/information_sender_and_receiver_builder.dart @@ -37,7 +37,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget { Widget build(BuildContext context) { return Container( color: Colors.white, - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), + padding: const EdgeInsetsDirectional.only(start: 16, end: 16, top: 16), child: Row( crossAxisAlignment: emailSelected.numberOfAllEmailAddress() > 0 ? CrossAxisAlignment.start