eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

TF-467 Apply new UI for mailbox mobile

Browse Source
This commit is contained in:
dab246
2022-04-08 12:43:45 +07:00
committed by Dat H. Pham
parent 3eb5f31dcd
commit 7b5a2dd820
22 changed files with 1058 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart
+36 -52
View File
@@ -18,6 +18,7 @@ class MailBoxFolderTileBuilder {
final ImagePaths _imagePaths;
final SelectMode allSelectMode;
final MailboxDisplayed mailboxDisplayed;
final MailboxNode? lastNode;
OnExpandFolderActionClick? _onExpandFolderActionClick;
OnOpenMailboxFolderClick? _onOpenMailboxFolderClick;
@@ -30,6 +31,7 @@ class MailBoxFolderTileBuilder {
{
this.allSelectMode = SelectMode.INACTIVE,
this.mailboxDisplayed = MailboxDisplayed.mailbox,
this.lastNode,
}
);
@@ -52,7 +54,6 @@ class MailBoxFolderTileBuilder {
highlightColor: Colors.transparent),
child: Container(
key: Key('mailbox_folder_tile'),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(0),
color: Colors.white
@@ -70,21 +71,26 @@ class MailBoxFolderTileBuilder {
: _buildMailboxIcon(),
title: _buildTitleFolderItem(),
trailing: _mailboxNode.hasChildren()
? Padding(
padding: EdgeInsets.only(right: 0, left: 16),
? Transform(
transform: Matrix4.translationValues(8.0, 0.0, 0.0),
child: buildIconWeb(
icon: SvgPicture.asset(
_mailboxNode.expandMode == ExpandMode.EXPAND ? _imagePaths.icExpandFolder : _imagePaths.icFolderArrow,
color: AppColor.colorArrowUserMailbox,
_mailboxNode.expandMode == ExpandMode.EXPAND ? _imagePaths.icExpandFolder : _imagePaths.icCollapseFolder,
color: _mailboxNode.expandMode == ExpandMode.EXPAND ? AppColor.colorExpandMailbox : AppColor.colorCollapseMailbox,
fit: BoxFit.fill),
splashRadius: 15,
tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND ? AppLocalizations.of(_context).collapse : AppLocalizations.of(_context).expand,
onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)))
: null
: _mailboxNode.item.getCountUnReadEmails().isNotEmpty
&& mailboxDisplayed == MailboxDisplayed.mailbox
&& !_mailboxNode.hasChildren()
? Padding(padding: EdgeInsets.only(right: 12), child: _buildCounter())
: SizedBox.shrink()
),
Padding(
padding: EdgeInsets.only(left: allSelectMode == SelectMode.ACTIVE ? 50 : 45),
child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
if (lastNode?.item.id != _mailboxNode.item.id)
Padding(
padding: EdgeInsets.only(left: allSelectMode == SelectMode.ACTIVE ? 50 : 35),
child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
])
)
)
@@ -96,70 +102,48 @@ class MailBoxFolderTileBuilder {
children: [
if (allSelectMode == SelectMode.ACTIVE)
Transform(
transform: Matrix4.translationValues(-16.0, 0.0, 0.0),
transform: Matrix4.translationValues(-24.0, 0.0, 0.0),
child: _buildMailboxIcon()),
Expanded(child: Transform(
transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
transform: Matrix4.translationValues(allSelectMode == SelectMode.ACTIVE ? -16.0 : -20.0, 0.0, 0.0),
child: Text(
'${_mailboxNode.item.name?.name ?? ''}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 15,
color: AppColor.colorNameEmail),
style: TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.normal),
))),
if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty && mailboxDisplayed == MailboxDisplayed.mailbox)
!_mailboxNode.hasChildren()
? _buildCounter()
: Transform(
transform: Matrix4.translationValues(40.0, 0.0, 0.0),
child: _buildCounter())
if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty && mailboxDisplayed == MailboxDisplayed.mailbox && _mailboxNode.hasChildren())
Transform(transform: Matrix4.translationValues(30.0, 0.0, 0.0), child: _buildCounter())
],
);
}
Widget _buildCounter() {
return Container(
margin: EdgeInsets.only(left: 8, right: _mailboxNode.hasChildren() ? 0 : 16),
padding: EdgeInsets.only(left: 8, right: 8, top: 2.5, bottom: 2.5),
decoration:BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: AppColor.backgroundCounterMailboxColor),
child: Text(
'${_mailboxNode.item.getCountUnReadEmails()} ${AppLocalizations.of(_context).unread_email_notification}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 12, color: AppColor.colorNameEmail),
));
return Text(
'${_mailboxNode.item.getCountUnReadEmails()}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 13, color: Colors.black, fontWeight: FontWeight.normal),
);
}
Widget _buildMailboxIcon() {
return Padding(
padding: EdgeInsets.only(
left: allSelectMode == SelectMode.ACTIVE ? 0 : 8,
right: allSelectMode == SelectMode.ACTIVE ? 8 : 0),
child: SvgPicture.asset(
'${_mailboxNode.item.getMailboxIcon(_imagePaths)}',
width: 28,
height: 28,
fit: BoxFit.fill
)
return SvgPicture.asset(
'${_mailboxNode.item.getMailboxIcon(_imagePaths)}',
width: 28,
height: 28,
fit: BoxFit.fill
);
}
Widget _buildSelectModeIcon() {
return Material(
borderRadius: BorderRadius.circular(10),
color: Colors.transparent,
child: IconButton(
padding: EdgeInsets.zero,
return Transform(
transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
child: buildIconWeb(
icon: SvgPicture.asset(
_mailboxNode.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected,
width: 20,
height: 20,
fit: BoxFit.fill),
onPressed: () => _onSelectMailboxFolderClick?.call(_mailboxNode)
)
);
splashRadius: 15,
onTap: () => _onSelectMailboxFolderClick?.call(_mailboxNode)));
}
}
lib/features/mailbox/presentation/widgets/mailbox_tile_builder.dart → lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart
+28 -60
View File
@@ -3,31 +3,26 @@ import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:model/model.dart';
import 'package:tmail_ui_user/features/mailbox/domain/extensions/presentation_mailbox_extension.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displayed.dart';
typedef OnOpenMailboxActionClick = void Function(PresentationMailbox);
typedef OnSelectMailboxActionClick = void Function(PresentationMailbox);
class MailboxTileBuilder {
class MailboxSearchTileBuilder {
final PresentationMailbox _presentationMailbox;
final PresentationMailbox? lastMailbox;
final SelectMode allSelectMode;
final ImagePaths _imagePaths;
final MailboxDisplayed mailboxDisplayed;
final bool isLastElement;
final bool isSearchActive;
OnOpenMailboxActionClick? _onOpenMailboxActionClick;
OnSelectMailboxActionClick? _onSelectMailboxActionClick;
MailboxTileBuilder(
MailboxSearchTileBuilder(
this._imagePaths,
this._presentationMailbox,
{
this.allSelectMode = SelectMode.INACTIVE,
this.mailboxDisplayed = MailboxDisplayed.mailbox,
this.isLastElement = false,
this.isSearchActive = false,
this.lastMailbox,
}
);
@@ -62,30 +57,23 @@ class MailboxTileBuilder {
leading: allSelectMode == SelectMode.ACTIVE
? _buildSelectModeIcon()
: _buildMailboxIcon(),
title: Transform(
transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
child: Row(children: [
title: Row(children: [
if (allSelectMode == SelectMode.ACTIVE)
Transform(
transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
transform: Matrix4.translationValues(-24.0, 0.0, 0.0),
child: _buildMailboxIcon()),
Expanded(child: Text(
'${_presentationMailbox.name?.name ?? ''}',
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(fontSize: isSearchActive ? 17 : 15, color: AppColor.colorNameEmail),
)),
if (mailboxDisplayed == MailboxDisplayed.mailbox && !isSearchActive)
Transform(
transform: Matrix4.translationValues(40.0, 0.0, 0.0),
child: Text(
'${_presentationMailbox.getCountUnReadEmails()}',
maxLines: 1,
style: TextStyle(fontSize: 13, color: AppColor.colorNameEmail)))
])),
subtitle: isSearchActive && _presentationMailbox.mailboxPath?.isNotEmpty == true
Expanded(child: Transform(
transform: Matrix4.translationValues(allSelectMode == SelectMode.ACTIVE ? -16.0 : -20.0, 0.0, 0.0),
child: Text(
'${_presentationMailbox.name?.name ?? ''}',
maxLines: 1,
overflow:TextOverflow.ellipsis,
style: TextStyle(fontSize: 17, color: AppColor.colorNameEmail, fontWeight: FontWeight.normal),
))),
]),
subtitle: _presentationMailbox.mailboxPath?.isNotEmpty == true
? Transform(
transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
transform: Matrix4.translationValues(allSelectMode == SelectMode.ACTIVE ? 12.0 : -20.0, 0.0, 0.0),
child: Text(
_presentationMailbox.mailboxPath ?? '',
maxLines: 1,
@@ -94,18 +82,8 @@ class MailboxTileBuilder {
),
)
: null,
trailing: (mailboxDisplayed == MailboxDisplayed.mailbox && !isSearchActive)
? Transform(
transform: Matrix4.translationValues(8.0, 0.0, 0.0),
child: IconButton(
color: AppColor.primaryColor,
icon: SvgPicture.asset(_imagePaths.icFolderArrow, color: AppColor.colorArrowUserMailbox, fit: BoxFit.fill),
onPressed: () => _onOpenMailboxActionClick?.call(_presentationMailbox)
)
)
: null
),
if (!isLastElement)
if (lastMailbox?.id != _presentationMailbox.id)
Padding(
padding: EdgeInsets.only(left: allSelectMode == SelectMode.ACTIVE ? 50 : 45),
child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
@@ -116,32 +94,22 @@ class MailboxTileBuilder {
}
Widget _buildMailboxIcon() {
return Padding(
padding: EdgeInsets.only(
left: allSelectMode == SelectMode.ACTIVE ? 4 : 8,
right: allSelectMode == SelectMode.ACTIVE ? 4 : 0),
child: SvgPicture.asset(
'${_presentationMailbox.getMailboxIcon(_imagePaths)}',
width: 28,
height: 28,
fit: BoxFit.fill
)
return SvgPicture.asset(
'${_presentationMailbox.getMailboxIcon(_imagePaths)}',
width: 28,
height: 28,
fit: BoxFit.fill
);
}
Widget _buildSelectModeIcon() {
return Material(
borderRadius: BorderRadius.circular(10),
color: Colors.transparent,
child: IconButton(
padding: EdgeInsets.zero,
return Transform(
transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
child: buildIconWeb(
icon: SvgPicture.asset(
_presentationMailbox.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected,
width: 20,
height: 20,
fit: BoxFit.fill),
onPressed: () => _onSelectMailboxActionClick?.call(_presentationMailbox)
)
);
splashRadius: 15,
onTap: () => _onSelectMailboxActionClick?.call(_presentationMailbox)));
}
}
lib/features/mailbox/presentation/widgets/user_information_widget_builder.dart
+1 -1
View File
@@ -75,7 +75,7 @@ class UserInformationWidgetBuilder {
Transform(
transform: Matrix4.translationValues(14.0, 0.0, 0.0),
child: IconButton(
icon: SvgPicture.asset(_imagePaths.icNextArrow, width: 7, height: 12, fit: BoxFit.fill, color: AppColor.colorArrowUserMailbox),
icon: SvgPicture.asset(_imagePaths.icCollapseFolder, fit: BoxFit.fill, color: AppColor.colorCollapseMailbox),
onPressed: () => {}))
]),
);