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

TF-599 Apply new icon for mailbox on mobile/tablet

Browse Source
This commit is contained in:
dab246
2022-05-31 16:28:02 +07:00
committed by Dat H. Pham
parent 08b327737b
commit 2f99af4004
3 changed files with 145 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/mailbox/presentation/mailbox_view.dart
+1 -1
View File
@@ -317,7 +317,7 @@ class MailboxView extends GetWidget<MailboxController> {
margin: EdgeInsets.only( margin: EdgeInsets.only(
left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16, left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
right: 16), right: 16),
padding: const EdgeInsets.only(left: 12, right: 8), padding: const EdgeInsets.only(left: 12),
child: TreeView( child: TreeView(
key: Key('${categories.keyValue}_mailbox_list'), key: Key('${categories.keyValue}_mailbox_list'),
children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode))); children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode)));
lib/features/mailbox/presentation/mailbox_view_web.dart
+15 -8
View File
@@ -34,15 +34,20 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
body: Column( body: Column(
children: [ children: [
if (!_responsiveUtils.isDesktop(context)) _buildLogoApp(context), if (!_responsiveUtils.isDesktop(context)) _buildLogoApp(context),
if (!_responsiveUtils.isDesktop(context)) const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2), if (!_responsiveUtils.isDesktop(context))
const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
Expanded(child: Container( Expanded(child: Container(
padding: const EdgeInsets.only(left: 16), padding: EdgeInsets.only(left: _responsiveUtils.isDesktop(context) ? 16 : 0),
color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
child: Column(children: [ child: Column(children: [
if (_responsiveUtils.isDesktop(context)) _buildComposerButton(context), if (_responsiveUtils.isDesktop(context)) _buildComposerButton(context),
Obx(() => controller.isSearchActive() ? _buildInputSearchFormWidget(context) : const SizedBox.shrink()), Obx(() => controller.isSearchActive()
? _buildInputSearchFormWidget(context)
: const SizedBox.shrink()),
Expanded(child: Obx(() => Container( Expanded(child: Obx(() => Container(
color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, color: _responsiveUtils.isDesktop(context)
? AppColor.colorBgDesktop
: Colors.white,
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
margin: EdgeInsets.only(top: _responsiveUtils.isDesktop(context) ? 16 : 0), margin: EdgeInsets.only(top: _responsiveUtils.isDesktop(context) ? 16 : 0),
child: RefreshIndicator( child: RefreshIndicator(
@@ -147,7 +152,7 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
key: const PageStorageKey('mailbox_list'), key: const PageStorageKey('mailbox_list'),
primary: false, primary: false,
shrinkWrap: true, shrinkWrap: true,
padding: const EdgeInsets.only(right: 16), padding: EdgeInsets.only(right: _responsiveUtils.isDesktop(context) ? 16 : 0),
children: [ children: [
Obx(() { Obx(() {
if (controller.isSelectionEnabled() || _responsiveUtils.isDesktop(context)) { if (controller.isSelectionEnabled() || _responsiveUtils.isDesktop(context)) {
@@ -200,7 +205,9 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) { Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
return Padding( return Padding(
padding: const EdgeInsets.symmetric(vertical: 10), padding: EdgeInsets.only(top: 10, bottom: 10,
left: _responsiveUtils.isDesktop(context) ? 0 : 16,
right: _responsiveUtils.isDesktop(context) ? 0 : 16),
child: Row(children: [ child: Row(children: [
buildIconWeb( buildIconWeb(
splashRadius: 5, splashRadius: 5,
@@ -231,7 +238,7 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
return Container( return Container(
padding: EdgeInsets.only( padding: EdgeInsets.only(
right: _responsiveUtils.isDesktop(context) ? 0 : 16, right: _responsiveUtils.isDesktop(context) ? 0 : 16,
left: _responsiveUtils.isDesktop(context) ? 0 : 12), left: _responsiveUtils.isDesktop(context) ? 0 : 16),
child: TreeView( child: TreeView(
key: Key('${categories.keyValue}_mailbox_list'), key: Key('${categories.keyValue}_mailbox_list'),
children: _buildListChildTileWidget( children: _buildListChildTileWidget(
@@ -286,7 +293,7 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
Widget _buildInputSearchFormWidget(BuildContext context) { Widget _buildInputSearchFormWidget(BuildContext context) {
return Padding( return Padding(
padding: const EdgeInsets.only(left: 8, top: 16), padding: const EdgeInsets.only(top: 16),
child: Row( child: Row(
children: [ children: [
buildIconWeb( buildIconWeb(
lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart
+129 -86
View File
@@ -62,56 +62,75 @@ class MailBoxFolderTileBuilder {
Widget build() { Widget build() {
if (BuildUtils.isWeb) { if (BuildUtils.isWeb) {
return StatefulBuilder( if (mailboxDisplayed == MailboxDisplayed.mailbox) {
builder: (BuildContext context, StateSetter setState) { return StatefulBuilder(
return InkWell( builder: (BuildContext context, StateSetter setState) {
onTap: () => allSelectMode == SelectMode.ACTIVE return InkWell(
? _onSelectMailboxFolderClick?.call(_mailboxNode) onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
: _onOpenMailboxFolderClick?.call(_mailboxNode), onHover: (value) => setState(() => isHoverItem = value),
onHover: (value) => setState(() => isHoverItem = value), child: Container(
child: Container( decoration: BoxDecoration(
decoration: BoxDecoration( borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(BuildUtils.isWeb ? 10 : 0), color: backgroundColorItem),
color: backgroundColorItem), padding: const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8),
padding: BuildUtils.isWeb margin: const EdgeInsets.only(bottom: 4),
? const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8) child: Row(children: [
: EdgeInsets.zero,
margin: const EdgeInsets.only(bottom: 4),
child: Column(mainAxisSize: MainAxisSize.min, children: [
Row(children: [
_buildLeadingMailboxItem(), _buildLeadingMailboxItem(),
const SizedBox(width: BuildUtils.isWeb ? 4 : 8), const SizedBox(width: 4),
Expanded(child: _buildTitleFolderItem()), Expanded(child: _buildTitleFolderItem()),
const SizedBox(width: 8), const SizedBox(width: 8),
_buildTrailingMailboxItem() _buildTrailingMailboxItem()
]), ])
_buildDivider(), ),
]) );
), });
); } else {
}); return InkWell(
onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: backgroundColorItem),
padding: const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8),
margin: const EdgeInsets.only(bottom: 4),
child: Row(children: [
_buildLeadingMailboxItem(),
const SizedBox(width: 4),
Expanded(child: _buildTitleFolderItem()),
const SizedBox(width: 8),
_buildTrailingMailboxItem()
])
),
);
}
} else { } else {
return InkWell( return InkWell(
onTap: () => allSelectMode == SelectMode.ACTIVE onTap: () => allSelectMode == SelectMode.ACTIVE
? _onSelectMailboxFolderClick?.call(_mailboxNode) ? _onSelectMailboxFolderClick?.call(_mailboxNode)
: _onOpenMailboxFolderClick?.call(_mailboxNode), : _onOpenMailboxFolderClick?.call(_mailboxNode),
child: Container( child: ClipRRect(
decoration: BoxDecoration( borderRadius: const BorderRadius.all(Radius.circular(14)),
borderRadius: BorderRadius.circular(BuildUtils.isWeb ? 10 : 0), child: Container(
color: backgroundColorItem), color: Colors.white,
padding: BuildUtils.isWeb child: Column(
? const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8) mainAxisSize: MainAxisSize.min,
: EdgeInsets.zero, mainAxisAlignment: MainAxisAlignment.center,
child: Column(mainAxisSize: MainAxisSize.min, children: [ children: [
Row(children: [ Padding(
_buildLeadingMailboxItem(), padding: EdgeInsets.symmetric(
const SizedBox(width: BuildUtils.isWeb ? 4 : 8), vertical: _mailboxNode.hasChildren() ? 8 : 15),
Expanded(child: _buildTitleFolderItem()), child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
const SizedBox(width: 8), _buildLeadingMailboxItem(),
_buildTrailingMailboxItem() const SizedBox(width: 8),
]), Expanded(child: _buildTitleFolderItem()),
_buildDivider(), const SizedBox(width: 8),
]) _buildTrailingMailboxItem()
]),
),
_buildDivider(),
]
)
)
), ),
); );
} }
@@ -143,39 +162,63 @@ class MailBoxFolderTileBuilder {
transform: Matrix4.translationValues(-4.0, 0.0, 0.0), transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
child: _buildLeadingIcon()) child: _buildLeadingIcon())
]); ]);
} else {
return _buildLeadingIcon();
} }
return _buildLeadingIcon();
} }
Widget _buildTrailingMailboxItem() { Widget _buildTrailingMailboxItem() {
if (_mailboxNode.hasChildren() && !BuildUtils.isWeb) { if (BuildUtils.isWeb) {
return buildIconWeb( if (isHoverItem) {
icon: SvgPicture.asset( return _buildMenuIcon();
_mailboxNode.expandMode == ExpandMode.EXPAND } else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
? _imagePaths.icExpandFolder && mailboxDisplayed == MailboxDisplayed.mailbox) {
: _imagePaths.icCollapseFolder, return Padding(
color: _mailboxNode.expandMode == ExpandMode.EXPAND padding: const EdgeInsets.only(right: 10),
? AppColor.colorExpandMailbox child: _buildCounter(),
: AppColor.colorCollapseMailbox, );
fit: BoxFit.fill), } else {
splashRadius: 10, return const SizedBox(width: 20);
tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND }
? AppLocalizations.of(_context).collapse } else {
: AppLocalizations.of(_context).expand, if (_mailboxNode.hasChildren()) {
onTap: () => _onExpandFolderActionClick?.call(_mailboxNode) return Padding(
); padding: const EdgeInsets.only(right: 4),
child: Row(
children: [
if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
&& mailboxDisplayed == MailboxDisplayed.mailbox)
_buildCounter(),
buildIconWeb(
icon: SvgPicture.asset(
_mailboxNode.expandMode == ExpandMode.EXPAND
? _imagePaths.icExpandFolder
: _imagePaths.icCollapseFolder,
color: _mailboxNode.expandMode == ExpandMode.EXPAND
? AppColor.colorExpandMailbox
: AppColor.colorCollapseMailbox,
fit: BoxFit.fill),
splashRadius: 20,
iconPadding: EdgeInsets.zero,
minSize: 40,
tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
? AppLocalizations.of(_context).collapse
: AppLocalizations.of(_context).expand,
onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)
),
],
),
);
} else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
&& mailboxDisplayed == MailboxDisplayed.mailbox) {
return Padding(
padding: const EdgeInsets.only(right: 20),
child: _buildCounter(),
);
} else {
return const SizedBox(width: 20);
}
} }
if (BuildUtils.isWeb && isHoverItem) {
return _buildMenuIcon();
}
if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
&& mailboxDisplayed == MailboxDisplayed.mailbox) {
return _buildCounter();
}
return const SizedBox(width: 20);
} }
Widget _buildLeadingIcon() { Widget _buildLeadingIcon() {
@@ -201,22 +244,23 @@ class MailBoxFolderTileBuilder {
} }
Widget _buildCounter() { Widget _buildCounter() {
return Padding( return Text(
padding: const EdgeInsets.only(right: 10), _mailboxNode.item.getCountUnReadEmails(),
child: Text( maxLines: 1,
_mailboxNode.item.getCountUnReadEmails(), overflow: CommonTextStyle.defaultTextOverFlow,
maxLines: 1, style: const TextStyle(
overflow: CommonTextStyle.defaultTextOverFlow, fontSize: 13,
style: const TextStyle( color: Colors.black,
fontSize: 13, fontWeight: FontWeight.normal),
color: Colors.black,
fontWeight: FontWeight.normal),
),
); );
} }
Widget _buildMailboxIcon() { Widget _buildMailboxIcon() {
return SvgPicture.asset(_mailboxNode.item.getMailboxIcon(_imagePaths)); return SvgPicture.asset(
_mailboxNode.item.getMailboxIcon(_imagePaths),
width: BuildUtils.isWeb ? 20 : 24,
height: BuildUtils.isWeb ? 20 : 24,
fit: BoxFit.fill);
} }
Widget _buildMenuIcon() { Widget _buildMenuIcon() {
@@ -273,11 +317,10 @@ class MailBoxFolderTileBuilder {
} }
Widget _buildDivider() { Widget _buildDivider() {
if (lastNode?.item.id != _mailboxNode.item.id && !BuildUtils.isWeb) { if (lastNode?.item.id != _mailboxNode.item.id) {
return Padding( return const Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(left: 30),
left: allSelectMode == SelectMode.ACTIVE ? 50 : 35), child: Divider(
child: const Divider(
color: AppColor.lineItemListColor, color: AppColor.lineItemListColor,
height: 0.5, height: 0.5,
thickness: 0.2 thickness: 0.2