TF-2510 Fix padding/style attachment item

Signed-off-by: dab246 <tdvu@linagora.com>
This commit is contained in:
dab246
2024-01-26 13:18:33 +07:00
committed by Dat H. Pham
parent 27bf35a513
commit 5f41cb2321
11 changed files with 282 additions and 332 deletions
@@ -4,29 +4,27 @@ import 'package:flutter/material.dart';
class AttachmentItemWidgetStyle { class AttachmentItemWidgetStyle {
static const double radius = 8; static const double radius = 8;
static const double mobileWidth = 224; static const double maxWidthMobile = 260;
static const double width = 260; static const double maxWidthTablet = 240;
static const double maxWidthTabletLarge = 200;
static const double height = 36; static const double height = 36;
static const double iconSize = 20; static const double iconSize = 20;
static const double space = 8; static const double space = 8;
static const double downloadIconSize = 20; static const double downloadIconSize = 22;
static const double attachmentNameMaxWidth = 130;
static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(end: 0); static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.symmetric(horizontal: 8, vertical: 5);
static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.all(8);
static const Color borderColor = AppColor.attachmentFileBorderColor; static const Color borderColor = AppColor.attachmentFileBorderColor;
static const Color downloadIconColor = AppColor.primaryColor;
static const TextStyle labelTextStyle = TextStyle( static const TextStyle labelTextStyle = TextStyle(
fontSize: 14, fontSize: 14,
color: AppColor.attachmentFileNameColor, color: AppColor.attachmentFileNameColor,
fontWeight: FontWeight.normal fontWeight: FontWeight.w500
); );
static const TextStyle dotsLabelTextStyle = TextStyle( static const TextStyle dotsLabelTextStyle = TextStyle(
fontSize: 12, fontSize: 12,
color: AppColor.attachmentFileNameColor, color: AppColor.attachmentFileNameColor,
fontWeight: FontWeight.normal fontWeight: FontWeight.w500
); );
static const TextStyle sizeLabelTextStyle = TextStyle( static const TextStyle sizeLabelTextStyle = TextStyle(
fontSize: 12, fontSize: 12,
@@ -3,27 +3,22 @@ import 'package:core/presentation/extensions/color_extension.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class AttachmentListItemWidgetStyle { class AttachmentListItemWidgetStyle {
static const double height = 60;
static const double iconSize = 44; static const double iconSize = 44;
static const double space = 8; static const double space = 8;
static const double downloadIconSize = 24; static const double downloadIconSize = 24;
static const double fileTitleBottomSpace = 4; static const double fileTitleBottomSpace = 4;
static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.all(8); static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.all(12);
static const EdgeInsetsGeometry fileTitlePadding = EdgeInsetsDirectional.all(4);
static const EdgeInsetsGeometry downloadIconPadding = EdgeInsets.only(right: 13.0);
static const Color downloadIconColor = AppColor.primaryColor;
static const TextStyle labelTextStyle = TextStyle( static const TextStyle labelTextStyle = TextStyle(
fontSize: 14, fontSize: 14,
color: AppColor.attachmentFileNameColor, color: AppColor.attachmentFileNameColor,
fontWeight: FontWeight.normal fontWeight: FontWeight.w500
); );
static const TextStyle dotsLabelTextStyle = TextStyle( static const TextStyle dotsLabelTextStyle = TextStyle(
fontSize: 12, fontSize: 12,
color: AppColor.attachmentFileNameColor, color: AppColor.attachmentFileNameColor,
fontWeight: FontWeight.normal fontWeight: FontWeight.w500
); );
static const TextStyle sizeLabelTextStyle = TextStyle( static const TextStyle sizeLabelTextStyle = TextStyle(
fontSize: 12, fontSize: 12,
@@ -5,7 +5,6 @@ class AttachmentListStyles {
static const double headerBorderWidth = 1.0; static const double headerBorderWidth = 1.0;
static const double titleSpace = 8.0; static const double titleSpace = 8.0;
static const double scrollbarThickness = 8.0; static const double scrollbarThickness = 8.0;
static const double separatorHeight = 1.0;
static const double buttonsSpaceBetween = 12.0; static const double buttonsSpaceBetween = 12.0;
static const double dialogBottomSpace = 20.0; static const double dialogBottomSpace = 20.0;
static const double buttonBorderWidth = 1.0; static const double buttonBorderWidth = 1.0;
@@ -28,8 +27,6 @@ class AttachmentListStyles {
); );
static const EdgeInsetsGeometry listAreaPadding = EdgeInsets.all(12.0); static const EdgeInsetsGeometry listAreaPadding = EdgeInsets.all(12.0);
static const EdgeInsetsGeometry listAreaPaddingMobile = EdgeInsets.symmetric(vertical: 12); 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( static const EdgeInsetsGeometry buttonsPadding = EdgeInsets.symmetric(
horizontal: 24.0, horizontal: 24.0,
vertical: 12.0 vertical: 12.0
@@ -10,20 +10,18 @@ class EmailAttachmentsStyles {
static const double buttonTextSize = 13; static const double buttonTextSize = 13;
static const double buttonMoreAttachmentsTextSize = 14; static const double buttonMoreAttachmentsTextSize = 14;
static const double buttonBorderRadius = 8; static const double buttonBorderRadius = 8;
static const double listSpace = 12; static const double listSpace = 8;
static const double listHeight = 36;
static const double mobileListHeight = 100;
static const double moreAttachmentsButtonPadding = 8;
static const Color headerTextColor = AppColor.colorTitleHeaderAttachment; static const Color headerTextColor = AppColor.colorTitleHeaderAttachment;
static const Color headerIconColor = AppColor.colorAttachmentIcon; static const Color headerIconColor = AppColor.colorAttachmentIcon;
static const Color buttonTextColor = AppColor.primaryColor; 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 headerFontWeight = FontWeight.w400;
static const FontWeight buttonFontWeight = FontWeight.w400; static const FontWeight buttonFontWeight = FontWeight.w400;
static const FontWeight buttonMoreAttachmentsFontWeight = FontWeight.w500; 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 buttonPadding = EdgeInsets.symmetric(vertical: 8, horizontal: 12);
static const EdgeInsetsGeometry moreButtonMargin = EdgeInsetsDirectional.only(bottom: 2, start: 8);
} }
@@ -1,7 +1,7 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.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:extended_text/extended_text.dart';
import 'package:filesize/filesize.dart'; import 'package:filesize/filesize.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@@ -19,6 +19,7 @@ class AttachmentItemWidget extends StatelessWidget {
final OnDownloadAttachmentFileActionClick? downloadAttachmentAction; final OnDownloadAttachmentFileActionClick? downloadAttachmentAction;
final _imagePaths = Get.find<ImagePaths>(); final _imagePaths = Get.find<ImagePaths>();
final _responsiveUtils = Get.find<ResponsiveUtils>();
AttachmentItemWidget({ AttachmentItemWidget({
Key? key, Key? key,
@@ -41,73 +42,63 @@ class AttachmentItemWidget extends StatelessWidget {
borderRadius: const BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius)), borderRadius: const BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius)),
border: Border.all(color: AttachmentItemWidgetStyle.borderColor), border: Border.all(color: AttachmentItemWidgetStyle.borderColor),
), ),
width: AttachmentItemWidgetStyle.width, width: _getMaxWidthItem(context),
height: AttachmentItemWidgetStyle.height, child: Row(
child: Stack(
children: [ children: [
Positioned.fill( SvgPicture.asset(
child: Row( attachment.getIcon(_imagePaths),
children: [ width: AttachmentItemWidgetStyle.iconSize,
SvgPicture.asset( height: AttachmentItemWidgetStyle.iconSize,
attachment.getIcon(_imagePaths), fit: BoxFit.fill
width: AttachmentItemWidgetStyle.iconSize, ),
height: AttachmentItemWidgetStyle.iconSize, const SizedBox(width: AttachmentItemWidgetStyle.space),
fit: BoxFit.fill 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( style: AttachmentItemWidgetStyle.labelTextStyle,
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)
),
),
]
), ),
), ),
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;
}
}
}
} }
@@ -1,6 +1,6 @@
import 'package:core/presentation/resources/image_paths.dart'; 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/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:model/email/attachment.dart'; import 'package:model/email/attachment.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart'; import 'package:pointer_interceptor/pointer_interceptor.dart';
import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_list_styles.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, centerTitle: true,
actions: [ actions: [
GestureDetector( TMailButtonWidget.fromIcon(
child: Padding( icon: imagePaths.icCircleClose,
padding: AttachmentListStyles.closeButtonPadding, backgroundColor: Colors.transparent,
child: SvgPicture.asset(imagePaths.icCircleClose), iconSize: 28,
), margin: const EdgeInsetsDirectional.only(end: 12),
onTapDown: (_) { padding: const EdgeInsets.all(5),
onCloseButtonAction?.call(); onTapActionCallback: onCloseButtonAction,
},
) )
], ],
), ),
@@ -80,44 +79,34 @@ class AttachmentListBottomSheetBodyBuilder extends StatelessWidget {
child: Column( child: Column(
children: [ children: [
Expanded( Expanded(
child: Padding( child: RawScrollbar(
padding: AttachmentListStyles.listAreaPaddingMobile, trackColor: AttachmentListStyles.scrollbarTrackColor,
child: RawScrollbar( thumbColor: AttachmentListStyles.scrollbarThumbColor,
trackColor: AttachmentListStyles.scrollbarTrackColor, radius: AttachmentListStyles.scrollbarThumbRadius,
thumbColor: AttachmentListStyles.scrollbarThumbColor, trackRadius: AttachmentListStyles.scrollbarTrackRadius,
radius: AttachmentListStyles.scrollbarThumbRadius, thickness: AttachmentListStyles.scrollbarThickness,
trackRadius: AttachmentListStyles.scrollbarTrackRadius, thumbVisibility: true,
thickness: AttachmentListStyles.scrollbarThickness, trackVisibility: true,
thumbVisibility: true, controller: scrollController,
trackVisibility: true, trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor,
controller: scrollController, child: ScrollConfiguration(
trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor, behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
child: Padding( child: ListView.separated(
padding: AttachmentListStyles.listItemPadding, controller: scrollController,
child: ScrollConfiguration( shrinkWrap: true,
behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false), physics: const ScrollPhysics(),
child: ListView.separated( itemCount: attachments.length,
controller: scrollController, itemBuilder: (context, index) {
shrinkWrap: true, return AttachmentListItemWidget(
physics: const ScrollPhysics(), attachment: attachments[index],
itemCount: attachments.length, downloadAttachmentAction: onDownloadAttachmentFileAction,
itemBuilder: (context, index) { );
return AttachmentListItemWidget( },
attachment: attachments[index], separatorBuilder: (context, index) {
downloadAttachmentAction: onDownloadAttachmentFileAction, return const Divider(
); color: AttachmentListStyles.separatorColor,
}, );
separatorBuilder: (context, index) { },
return const Padding(
padding: AttachmentListStyles.separatorPadding,
child: Divider(
height: AttachmentListStyles.separatorHeight,
color: AttachmentListStyles.separatorColor,
),
);
},
),
),
), ),
), ),
), ),
@@ -1,7 +1,6 @@
import 'package:core/presentation/resources/image_paths.dart'; 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/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:model/email/attachment.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/styles/attachment/attachment_list_styles.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_list/attachment_list_action_button_builder.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, padding: AttachmentListStyles.headerPadding,
decoration: AttachmentListStyles.headerDecoration, decoration: AttachmentListStyles.headerDecoration,
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
const Spacer(), const SizedBox(width: 50),
Text( Expanded(
AppLocalizations.of(context).attachmentList, child: Center(
style: AttachmentListStyles.titleTextStyle 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), const SizedBox(width: 8),
Text( TMailButtonWidget.fromIcon(
'${attachments.length} ${AppLocalizations.of(context).files}', icon: imagePaths.icCircleClose,
style: AttachmentListStyles.subTitleTextStyle onTapActionCallback: onCloseButtonAction,
), iconSize: 28,
if (onCloseButtonAction != null) backgroundColor: Colors.transparent,
const Spacer(), padding: const EdgeInsets.all(5),
buildIconWeb(
icon: SvgPicture.asset(imagePaths.icCircleClose),
onTap: () {
onCloseButtonAction!.call();
},
), ),
const SizedBox(width: 8)
], ],
) )
), ),
Expanded( Expanded(
child: Padding( child: RawScrollbar(
padding: AttachmentListStyles.listAreaPadding, trackColor: AttachmentListStyles.scrollbarTrackColor,
child: RawScrollbar( thumbColor: AttachmentListStyles.scrollbarThumbColor,
trackColor: AttachmentListStyles.scrollbarTrackColor, radius: AttachmentListStyles.scrollbarThumbRadius,
thumbColor: AttachmentListStyles.scrollbarThumbColor, trackRadius: AttachmentListStyles.scrollbarTrackRadius,
radius: AttachmentListStyles.scrollbarThumbRadius, thickness: AttachmentListStyles.scrollbarThickness,
trackRadius: AttachmentListStyles.scrollbarTrackRadius, thumbVisibility: true,
thickness: AttachmentListStyles.scrollbarThickness, trackVisibility: true,
thumbVisibility: true, controller: scrollController,
trackVisibility: true, trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor,
controller: scrollController, child: ScrollConfiguration(
trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor, behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
child: Padding( child: ListView.separated(
padding: AttachmentListStyles.listItemPadding, controller: scrollController,
child: ScrollConfiguration( shrinkWrap: true,
behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false), physics: const ScrollPhysics(),
child: ListView.separated( itemCount: attachments.length,
controller: scrollController, itemBuilder: (context, index) {
shrinkWrap: true, return AttachmentListItemWidget(
physics: const ScrollPhysics(), attachment: attachments[index],
itemCount: attachments.length, downloadAttachmentAction: onDownloadAttachmentFileAction,
itemBuilder: (context, index) { );
return AttachmentListItemWidget( },
attachment: attachments[index], separatorBuilder: (context, index) {
downloadAttachmentAction: onDownloadAttachmentFileAction, return const Divider(
); color: AttachmentListStyles.separatorColor,
}, );
separatorBuilder: (context, index) { },
return const Padding(
padding: AttachmentListStyles.separatorPadding,
child: Divider(
height: AttachmentListStyles.separatorHeight,
color: AttachmentListStyles.separatorColor,
),
);
},
),
),
), ),
), ),
), ),
@@ -1,7 +1,6 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/style_utils.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:extended_text/extended_text.dart';
import 'package:filesize/filesize.dart'; import 'package:filesize/filesize.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@@ -29,84 +28,55 @@ class AttachmentListItemWidget extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Material( return Material(
color: Colors.transparent, type: MaterialType.transparency,
child: InkWell( child: InkWell(
onTap: () => downloadAttachmentAction?.call(attachment), onTap: () => downloadAttachmentAction?.call(attachment),
child: Container( child: Padding(
padding: AttachmentListItemWidgetStyle.contentPadding, padding: AttachmentListItemWidgetStyle.contentPadding,
height: AttachmentListItemWidgetStyle.height, child: Row(
child: Stack(
children: [ children: [
Positioned.fill( SvgPicture.asset(
child: Row( attachment.getIcon(_imagePaths),
crossAxisAlignment: CrossAxisAlignment.center, width: AttachmentListItemWidgetStyle.iconSize,
height: AttachmentListItemWidgetStyle.iconSize,
fit: BoxFit.fill
),
const SizedBox(width: AttachmentListItemWidgetStyle.space),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
SvgPicture.asset( ExtendedText(
attachment.getIcon(_imagePaths), (attachment.name ?? ''),
width: AttachmentListItemWidgetStyle.iconSize, maxLines: 1,
height: AttachmentListItemWidgetStyle.iconSize, overflowWidget: const TextOverflowWidget(
fit: BoxFit.fill position: TextOverflowPosition.middle,
), child: Text(
const SizedBox(width: AttachmentListItemWidgetStyle.space), "...",
Expanded( style: AttachmentListItemWidgetStyle.dotsLabelTextStyle,
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,
)
]
), ),
) ),
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)
)
] ]
) ),
), ),
), ),
); );
@@ -1,7 +1,6 @@
import 'package:core/core.dart'; import 'package:core/core.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:jmap_dart_client/jmap/mail/email/email_address.dart'; import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
import 'package:model/model.dart'; import 'package:model/model.dart';
@@ -51,15 +50,15 @@ class EmailAddressDialogBuilder extends StatelessWidget {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Align( Align(
alignment: Alignment.centerRight, alignment: Alignment.centerRight,
child: IconButton( child: TMailButtonWidget.fromIcon(
padding: const EdgeInsets.only(top: 16, right: 16), onTapActionCallback: onCloseDialogAction,
onPressed: () => onCloseDialogAction?.call(), icon: imagePaths.icCircleClose,
icon: SvgPicture.asset( backgroundColor: Colors.transparent,
imagePaths.icCircleClose, margin: const EdgeInsetsDirectional.only(top: 8, end: 8),
width: 24, iconSize: 24,
height: 24, )
fit: BoxFit.fill))), ),
Padding(padding: const EdgeInsets.symmetric(horizontal: 16), Padding(padding: const EdgeInsets.symmetric(horizontal: 16),
child: Center(child: (AvatarBuilder() child: Center(child: (AvatarBuilder()
..text(_emailAddress.asString().firstLetterToUpperCase) ..text(_emailAddress.asString().firstLetterToUpperCase)
@@ -37,16 +37,8 @@ class EmailAttachmentsWidget extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
int getItemCount() { final attachmentDisplayed = _getAttachmentDisplayed(context);
if (attachments.length <= 2) { int hideItemsCount = attachments.length - attachmentDisplayed.length;
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( return Padding(
padding: EmailAttachmentsStyles.padding, padding: EmailAttachmentsStyles.padding,
child: Column( child: Column(
@@ -99,63 +91,78 @@ class EmailAttachmentsWidget extends StatelessWidget {
], ],
), ),
const SizedBox(height: EmailAttachmentsStyles.marginHeader), const SizedBox(height: EmailAttachmentsStyles.marginHeader),
SizedBox( Row(
height: responsiveUtils.isMobile(context) ? EmailAttachmentsStyles.mobileListHeight : EmailAttachmentsStyles.listHeight, crossAxisAlignment: responsiveUtils.isMobile(context)
child: Row( ? CrossAxisAlignment.end
children: [ : CrossAxisAlignment.center,
Flexible( children: [
child: ListView.separated( Flexible(
shrinkWrap: true, child: Wrap(
scrollDirection: responsiveUtils.isMobile(context) ? Axis.vertical : Axis.horizontal, spacing: EmailAttachmentsStyles.listSpace,
itemCount: getItemCount(), runSpacing: EmailAttachmentsStyles.listSpace,
itemBuilder: (context, index) { children: attachmentDisplayed.map((attachment) {
if (PlatformInfo.isWeb) { if (PlatformInfo.isWeb) {
return DraggableAttachmentItemWidget( return DraggableAttachmentItemWidget(
attachment: attachments[index], attachment: attachment,
onDragStarted: onDragStarted, onDragStarted: onDragStarted,
onDragEnd: onDragEnd, onDragEnd: onDragEnd,
downloadAttachmentAction: downloadAttachmentAction downloadAttachmentAction: downloadAttachmentAction
); );
} else { } else {
return AttachmentItemWidget( return AttachmentItemWidget(
attachment: attachments[index], attachment: attachment,
downloadAttachmentAction: downloadAttachmentAction downloadAttachmentAction: downloadAttachmentAction
); );
} }
}, }).toList(),
separatorBuilder: (context, index) {
if (responsiveUtils.isMobile(context)) {
return const SizedBox(height: EmailAttachmentsStyles.listSpace);
} else {
return const SizedBox(width: EmailAttachmentsStyles.listSpace);
}
},
),
), ),
if (hideItemsCount != 0) ),
Container( if (hideItemsCount > 0)
padding: EdgeInsets.only(bottom: responsiveUtils.isMobile(context) ? EmailAttachmentsStyles.moreAttachmentsButtonPadding : 0), TMailButtonWidget(
alignment: responsiveUtils.isMobile(context) text: AppLocalizations.of(context).moreAttachments(hideItemsCount),
? Alignment.bottomRight backgroundColor: Colors.transparent,
: Alignment.centerRight, borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
child: TMailButtonWidget( padding: EmailAttachmentsStyles.buttonPadding,
text: AppLocalizations.of(context).moreAttachments(hideItemsCount), margin: EmailAttachmentsStyles.moreButtonMargin,
backgroundColor: Colors.transparent, textStyle: const TextStyle(
borderRadius: EmailAttachmentsStyles.buttonBorderRadius, fontSize: EmailAttachmentsStyles.buttonMoreAttachmentsTextSize,
padding: EmailAttachmentsStyles.buttonPadding, color: EmailAttachmentsStyles.buttonMoreAttachmentsTextColor,
textStyle: const TextStyle( fontWeight: EmailAttachmentsStyles.buttonMoreAttachmentsFontWeight,
fontSize: EmailAttachmentsStyles.buttonMoreAttachmentsTextSize,
color: EmailAttachmentsStyles.ButtonMoreAttachmentsTextColor,
fontWeight: EmailAttachmentsStyles.buttonMoreAttachmentsFontWeight,
),
onTapActionCallback: onTapShowAllAttachmentFile,
),
), ),
] onTapActionCallback: onTapShowAllAttachmentFile,
) ),
]
), ),
], ],
), ),
); );
} }
List<Attachment> _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);
}
}
} }
@@ -37,7 +37,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
color: Colors.white, color: Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), padding: const EdgeInsetsDirectional.only(start: 16, end: 16, top: 16),
child: Row( child: Row(
crossAxisAlignment: emailSelected.numberOfAllEmailAddress() > 0 crossAxisAlignment: emailSelected.numberOfAllEmailAddress() > 0
? CrossAxisAlignment.start ? CrossAxisAlignment.start