TF-2717 Display attachment bar below subject field on tablet

This commit is contained in:
dab246
2024-03-19 14:08:03 +07:00
committed by Dat H. Pham
parent 867e758d88
commit 0cdf89f0f9
2 changed files with 78 additions and 76 deletions
@@ -6,5 +6,6 @@ class MobileAttachmentComposerWidgetStyle {
static const double listItemHeight = 50;
static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(vertical: 8, horizontal: 16);
static const EdgeInsetsGeometry tabletPadding = EdgeInsetsDirectional.only(start: 16, end: 16, bottom: 8);
static const EdgeInsetsGeometry itemMargin = EdgeInsetsDirectional.only(top: 8);
}
@@ -53,80 +53,15 @@ class _MobileAttachmentComposerWidgetState extends State<MobileAttachmentCompose
@override
Widget build(BuildContext context) {
return Container(
padding: MobileAttachmentComposerWidgetStyle.padding,
padding: _responsiveUtils.isPortraitMobile(context)
? MobileAttachmentComposerWidgetStyle.padding
: MobileAttachmentComposerWidgetStyle.tabletPadding,
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (_responsiveUtils.isLandscapeMobile(context))
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(
flex: 7,
child: GridView.builder(
primary: false,
shrinkWrap: true,
itemCount: _listFileDisplayed.length,
gridDelegate: const SliverGridDelegateFixedHeight(
height: MobileAttachmentComposerWidgetStyle.listItemHeight,
crossAxisCount: MobileAttachmentComposerWidgetStyle.maxItemRow,
crossAxisSpacing: MobileAttachmentComposerWidgetStyle.listItemSpace,
),
itemBuilder: (context, index) {
return AttachmentItemComposerWidget(
fileState: _listFileDisplayed[index],
itemMargin: MobileAttachmentComposerWidgetStyle.itemMargin,
itemPadding: const EdgeInsets.symmetric(horizontal: 8),
onDeleteAttachmentAction: widget.onDeleteAttachmentAction
);
}
)
),
Flexible(
flex: 3,
child: _isExceededDisplayedAttachments
? Row(
children: [
if (!_isCollapsed)
TMailButtonWidget(
text: AppLocalizations.of(context).showLess,
icon: _imagePaths.icChevronUp,
iconAlignment: TextDirection.rtl,
iconSpace: 2,
iconSize: 24,
iconColor: AppColor.primaryColor,
backgroundColor: Colors.transparent,
textStyle: Theme.of(context).textTheme.labelSmall?.copyWith(
fontSize: 15,
color: AppColor.primaryColor
),
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: const EdgeInsetsDirectional.only(start: 8, top: 10),
onTapActionCallback: _toggleListAttachments
)
else
TMailButtonWidget.fromText(
text: AppLocalizations.of(context).showMoreAttachment(_countRemainingAttachments),
backgroundColor: Colors.transparent,
textStyle: Theme.of(context).textTheme.labelSmall?.copyWith(
fontSize: 15,
color: AppColor.primaryColor
),
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: const EdgeInsetsDirectional.only(start: 8, top: 10),
onTapActionCallback: _toggleListAttachments
),
const Spacer(),
],
)
: const SizedBox.shrink()
)
],
)
else
...[
child: _responsiveUtils.isPortraitMobile(context)
? Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
@@ -177,8 +112,74 @@ class _MobileAttachmentComposerWidgetState extends State<MobileAttachmentCompose
onTapActionCallback: _toggleListAttachments
)
]
]
),
)
: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
flex: 7,
child: GridView.builder(
primary: false,
shrinkWrap: true,
padding: EdgeInsets.zero,
itemCount: _listFileDisplayed.length,
gridDelegate: const SliverGridDelegateFixedHeight(
height: MobileAttachmentComposerWidgetStyle.listItemHeight,
crossAxisCount: MobileAttachmentComposerWidgetStyle.maxItemRow,
crossAxisSpacing: MobileAttachmentComposerWidgetStyle.listItemSpace,
),
itemBuilder: (context, index) {
return AttachmentItemComposerWidget(
fileState: _listFileDisplayed[index],
itemMargin: MobileAttachmentComposerWidgetStyle.itemMargin,
itemPadding: const EdgeInsets.symmetric(horizontal: 8),
onDeleteAttachmentAction: widget.onDeleteAttachmentAction
);
}
)
),
Flexible(
flex: 3,
child: _isExceededDisplayedAttachments
? Row(
children: [
if (!_isCollapsed)
TMailButtonWidget(
text: AppLocalizations.of(context).showLess,
icon: _imagePaths.icChevronUp,
iconAlignment: TextDirection.rtl,
iconSpace: 2,
iconSize: 24,
iconColor: AppColor.primaryColor,
backgroundColor: Colors.transparent,
textStyle: Theme.of(context).textTheme.labelSmall?.copyWith(
fontSize: 15,
color: AppColor.primaryColor
),
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: const EdgeInsetsDirectional.only(start: 8, top: 10),
onTapActionCallback: _toggleListAttachments
)
else
TMailButtonWidget.fromText(
text: AppLocalizations.of(context).showMoreAttachment(_countRemainingAttachments),
backgroundColor: Colors.transparent,
textStyle: Theme.of(context).textTheme.labelSmall?.copyWith(
fontSize: 15,
color: AppColor.primaryColor
),
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: const EdgeInsetsDirectional.only(start: 8, top: 10),
onTapActionCallback: _toggleListAttachments
),
const Spacer(),
],
)
: const SizedBox.shrink()
)
],
)
);
}
@@ -194,7 +195,7 @@ class _MobileAttachmentComposerWidgetState extends State<MobileAttachmentCompose
void _updateListFileDisplayed() {
final reversedList = widget.listFileUploaded.reversed.toList();
if (_isCollapsed) {
if (_isCollapsed && reversedList.length > _maxCountDisplayedAttachments) {
_listFileDisplayed = reversedList.sublist(0, _maxCountDisplayedAttachments);
} else {
_listFileDisplayed = reversedList;