TF-985 Apply new design for list attachment in EmailView
This commit is contained in:
dab246
@@ -3,157 +3,102 @@ import 'package:core/core.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/model.dart';
|
||||
import 'package:tmail_ui_user/features/email/presentation/extensions/attachment_extension.dart';
|
||||
|
||||
typedef OnDownloadAttachmentFileActionClick = void Function(Attachment attachment);
|
||||
typedef OnExpandAttachmentActionClick = void Function();
|
||||
|
||||
class AttachmentFileTileBuilder {
|
||||
class AttachmentFileTileBuilder extends StatelessWidget{
|
||||
|
||||
final ImagePaths _imagePaths;
|
||||
final Attachment _attachment;
|
||||
final int _attachmentSize;
|
||||
final int _limitDisplayAttachment;
|
||||
ExpandMode? _expandMode;
|
||||
final OnDownloadAttachmentFileActionClick? onDownloadAttachmentFileActionClick;
|
||||
|
||||
OnDownloadAttachmentFileActionClick? _onDownloadAttachmentFileActionClick;
|
||||
OnExpandAttachmentActionClick? _onExpandAttachmentActionClick;
|
||||
const AttachmentFileTileBuilder(
|
||||
this._attachment, {
|
||||
Key? key,
|
||||
this.onDownloadAttachmentFileActionClick,
|
||||
}) : super(key: key);
|
||||
|
||||
Widget? buttonAction;
|
||||
double? heightItem;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final imagePaths = Get.find<ImagePaths>();
|
||||
final responsiveUtils = Get.find<ResponsiveUtils>();
|
||||
|
||||
AttachmentFileTileBuilder(
|
||||
this._imagePaths,
|
||||
this._attachment,
|
||||
this._attachmentSize,
|
||||
this._limitDisplayAttachment,
|
||||
);
|
||||
|
||||
void onDownloadAttachmentFileActionClick(OnDownloadAttachmentFileActionClick onDownloadAttachmentFileActionClick) {
|
||||
_onDownloadAttachmentFileActionClick = onDownloadAttachmentFileActionClick;
|
||||
}
|
||||
|
||||
void onExpandAttachmentActionClick(OnExpandAttachmentActionClick onExpandAttachmentActionClick) {
|
||||
_onExpandAttachmentActionClick = onExpandAttachmentActionClick;
|
||||
}
|
||||
|
||||
void setExpandMode(ExpandMode? expandMode) {
|
||||
_expandMode = expandMode;
|
||||
}
|
||||
|
||||
void addButtonAction(Widget action) {
|
||||
buttonAction = action;
|
||||
}
|
||||
|
||||
void height(double height) {
|
||||
heightItem = height;
|
||||
}
|
||||
|
||||
Widget build() {
|
||||
return Theme(
|
||||
data: ThemeData(
|
||||
splashColor: Colors.transparent ,
|
||||
highlightColor: Colors.transparent),
|
||||
child: Container(
|
||||
key: const Key('attach_file_tile'),
|
||||
alignment: Alignment.center,
|
||||
margin: EdgeInsets.only(top:heightItem != null ? 8 : 0),
|
||||
height: heightItem,
|
||||
padding: EdgeInsets.zero,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: AppColor.attachmentFileBorderColor),
|
||||
color: Colors.white),
|
||||
child: MediaQuery(
|
||||
data: const MediaQueryData(padding: EdgeInsets.zero),
|
||||
child: Stack(
|
||||
alignment: AlignmentDirectional.bottomEnd,
|
||||
children: [
|
||||
ListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
focusColor: AppColor.primaryColor,
|
||||
hoverColor: AppColor.primaryColor,
|
||||
onTap: () {
|
||||
if (_onDownloadAttachmentFileActionClick != null) {
|
||||
_onDownloadAttachmentFileActionClick!(_attachment);
|
||||
}},
|
||||
leading: Padding(
|
||||
padding: const EdgeInsets.only(left: 8, bottom: BuildUtils.isWeb ? 6 : 14),
|
||||
child: SvgPicture.asset(
|
||||
_attachment.getIcon(_imagePaths),
|
||||
width: 40,
|
||||
height: 40,
|
||||
fit: BoxFit.fill),
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(right: 12),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: () => onDownloadAttachmentFileActionClick?.call(_attachment),
|
||||
customBorder: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
border: Border.all(color: AppColor.attachmentFileBorderColor),
|
||||
color: Colors.transparent),
|
||||
width: responsiveUtils.isMobile(context) ? 224 : 250,
|
||||
height: 60,
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned.fill(
|
||||
child: Row(children: [
|
||||
SvgPicture.asset(
|
||||
_attachment.getIcon(imagePaths),
|
||||
width: 44,
|
||||
height: 44,
|
||||
fit: BoxFit.fill),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
_attachment.name ?? '',
|
||||
maxLines: 1,
|
||||
overflow: CommonTextStyle.defaultTextOverFlow,
|
||||
softWrap: CommonTextStyle.defaultSoftWrap,
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
color: AppColor.attachmentFileNameColor,
|
||||
fontWeight: FontWeight.normal),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
filesize(_attachment.size?.value),
|
||||
maxLines: 1,
|
||||
overflow: CommonTextStyle.defaultTextOverFlow,
|
||||
softWrap: CommonTextStyle.defaultSoftWrap,
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColor.attachmentFileSizeColor,
|
||||
fontWeight: FontWeight.normal),
|
||||
)
|
||||
]
|
||||
))
|
||||
]),
|
||||
),
|
||||
title: Transform(
|
||||
transform: Matrix4.translationValues(
|
||||
BuildUtils.isWeb ? 0.0 : -8.0,
|
||||
BuildUtils.isWeb ? -8.0 : -10.0,
|
||||
0.0),
|
||||
child: Text(
|
||||
_attachment.name ?? '',
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(fontSize: 12, color: AppColor.attachmentFileNameColor, fontWeight: FontWeight.w500),
|
||||
)),
|
||||
subtitle: _attachment.size != null && _attachment.size?.value != 0
|
||||
? Transform(
|
||||
transform: Matrix4.translationValues(
|
||||
BuildUtils.isWeb ? 0.0 : -8.0,
|
||||
BuildUtils.isWeb ? -8.0 : -10.0,
|
||||
0.0),
|
||||
child: Text(
|
||||
filesize(_attachment.size?.value),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(fontSize: 12, color: AppColor.attachmentFileSizeColor)))
|
||||
: null,
|
||||
trailing: buttonAction != null
|
||||
? Transform(
|
||||
transform: Matrix4.translationValues(-5.0, heightItem != null ? -6.0 : 0.0, 0.0),
|
||||
child: buttonAction)
|
||||
: null
|
||||
),
|
||||
if (buttonAction == null)
|
||||
Transform(
|
||||
transform: Matrix4.translationValues(5.0, 5.0, 0.0),
|
||||
child: IconButton(
|
||||
icon: SvgPicture.asset(
|
||||
_imagePaths.icDownload,
|
||||
Align(
|
||||
alignment: Alignment.bottomRight,
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
customBorder: const CircleBorder(),
|
||||
child: SvgPicture.asset(
|
||||
imagePaths.icDownloadAttachment,
|
||||
width: 24,
|
||||
height: 24,
|
||||
color: AppColor.primaryColor,
|
||||
fit: BoxFit.fill),
|
||||
onPressed: () {
|
||||
if (_onDownloadAttachmentFileActionClick != null) {
|
||||
_onDownloadAttachmentFileActionClick!(_attachment);
|
||||
}
|
||||
}
|
||||
)),
|
||||
if (_attachmentSize > _limitDisplayAttachment && _expandMode == ExpandMode.COLLAPSE) _buildItemBackground()
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildItemBackground() {
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
if (_onExpandAttachmentActionClick != null) {
|
||||
_onExpandAttachmentActionClick!();
|
||||
}
|
||||
},
|
||||
child: Stack(
|
||||
alignment: AlignmentDirectional.center,
|
||||
children: [
|
||||
Container(color: AppColor.backgroundCountAttachment),
|
||||
Text(
|
||||
'+${_attachmentSize - _limitDisplayAttachment + 1}',
|
||||
style: const TextStyle(fontSize: 16, color: Colors.white, fontWeight: FontWeight.bold))
|
||||
],
|
||||
onTap: () => onDownloadAttachmentFileActionClick?.call(_attachment)
|
||||
),
|
||||
),
|
||||
),
|
||||
]
|
||||
)
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -28,7 +28,13 @@ class BottomBarMailWidgetBuilder extends StatelessWidget {
|
||||
|
||||
return Container(
|
||||
alignment: Alignment.center,
|
||||
color: Colors.white,
|
||||
decoration: responsiveUtils.isWebDesktop(context)
|
||||
? const BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.only(
|
||||
bottomRight: Radius.circular(20),
|
||||
bottomLeft: Radius.circular(20)))
|
||||
: const BoxDecoration(color: Colors.white),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
|
||||
Reference in New Issue
Block a user