TF-599 Apply new icon mailbox for destination picker

This commit is contained in:
dab246
2022-05-31 18:29:51 +07:00
committed by Dat H. Pham
parent 30f3fc952d
commit 54203b234b
6 changed files with 101 additions and 63 deletions
@@ -5,6 +5,7 @@ import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:model/model.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart';
import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
import 'package:tmail_ui_user/features/destination_picker/presentation/destination_picker_controller.dart';
import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_picker_arguments.dart';
import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart';
@@ -17,7 +18,8 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_sear
import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_bar_widget.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class DestinationPickerView extends GetWidget<DestinationPickerController> {
class DestinationPickerView extends GetWidget<DestinationPickerController>
with AppLoaderMixin {
final _imagePaths = Get.find<ImagePaths>();
final _responsiveUtils = Get.find<ResponsiveUtils>();
@@ -161,12 +163,9 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
return Obx(() => controller.viewState.value.fold(
(failure) => const SizedBox.shrink(),
(success) => success is LoadingState
? const Center(child: Padding(
padding: EdgeInsets.only(top: 16),
child: SizedBox(
width: 24,
height: 24,
child: CircularProgressIndicator(color: AppColor.primaryColor))))
? Padding(
padding: const EdgeInsets.only(top: 16),
child: loadingWidget)
: const SizedBox.shrink()));
}
@@ -181,17 +180,18 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
const SizedBox(height: 12),
if (actions == MailboxActions.create) _buildUnifiedMailbox(context),
const SizedBox(height: 12),
Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultMailboxTree.value.root, actions)
Obx(() => controller.defaultMailboxHasChild
? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultRootNode, actions)
: const SizedBox.shrink()),
if (actions == MailboxActions.create) const SizedBox(height: 12),
if (actions != MailboxActions.create && !kIsWeb)
const Padding(
padding: EdgeInsets.only(left: 60),
child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderMailboxTree.value.root, actions)
Obx(() => controller.folderMailboxHasChild
? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderRootNode, actions)
: const SizedBox.shrink()),
const SizedBox(height: 12),
]
);
}
@@ -218,7 +218,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
child: Row(children: [
Expanded(child: Text(categories.getTitle(context),
maxLines: 1,
overflow: TextOverflow.ellipsis,
overflow: CommonTextStyle.defaultTextOverFlow,
style: const TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold))),
buildIconWeb(
icon: SvgPicture.asset(
@@ -239,7 +239,11 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
margin: EdgeInsets.only(
left: actions == MailboxActions.moveEmail ? 8 : _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
right: actions == MailboxActions.moveEmail ? 0 : 16),
padding: const EdgeInsets.only(left: 12, right: 8),
padding: EdgeInsets.only(
top: _responsiveUtils.isDesktop(context) && actions == MailboxActions.create ? 8 : 0,
bottom: _responsiveUtils.isDesktop(context) && actions == MailboxActions.create ? 8 : 0,
left: _responsiveUtils.isDesktop(context) ? 0 : 12,
right: actions == MailboxActions.create ? 8 : 16),
child: TreeView(
key: Key('${categories.keyValue}_mailbox_list'),
children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode)));
@@ -269,9 +273,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
Widget _buildListMailboxSearched(BuildContext context) {
return Obx(() => Container(
margin: _responsiveUtils.isDesktop(context)
? const EdgeInsets.only(left: 16, right: 16)
: EdgeInsets.zero,
margin: const EdgeInsets.only(right: 8, bottom: 12),
decoration: _responsiveUtils.isDesktop(context)
? BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white)
: null,
@@ -287,6 +289,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
_imagePaths,
_responsiveUtils,
controller.listMailboxSearched[index],
mailboxDisplayed: MailboxDisplayed.destinationPicker,
lastMailbox: controller.listMailboxSearched.last)
..addOnOpenMailboxAction((mailbox) => controller.selectMailboxAction(mailbox)))
.build())
@@ -309,7 +312,10 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
onTap: () => controller.selectMailboxAction(null),
leading: Padding(
padding: const EdgeInsets.only(left: 16),
child: SvgPicture.asset(_imagePaths.icFolderMailbox, width: 28, height: 28, fit: BoxFit.fill)),
child: SvgPicture.asset(_imagePaths.icFolderMailbox,
width: BuildUtils.isWeb ? 20 : 24,
height: BuildUtils.isWeb ? 20 : 24,
fit: BoxFit.fill)),
title: Transform(
transform: Matrix4.translationValues(-5.0, 0.0, 0.0),
child: Row(
@@ -329,7 +335,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
}
void _handleOpenMailboxClick(MailboxNode mailboxNode) {
var presentationMailbox;
PresentationMailbox presentationMailbox;
final path = controller.findNodePath(mailboxNode.item.id)
?? mailboxNode.item.name?.name;
if (path != null) {
@@ -79,7 +79,7 @@ class AppBarDestinationPickerBuilder {
return Text(
_mailboxAction?.getTitle(_context) ?? '',
maxLines: 1,
overflow: TextOverflow.ellipsis,
overflow: CommonTextStyle.defaultTextOverFlow,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20, color: AppColor.colorNameEmail, fontWeight: FontWeight.w700));
}
@@ -96,19 +96,19 @@ class MailBoxFolderTileBuilder {
} 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()
])
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(14)),
child: Container(
color: Colors.white,
padding: const EdgeInsets.only(left: 16, top: 8, bottom: 8),
child: Row(children: [
_buildLeadingMailboxItem(),
const SizedBox(width: 8),
Expanded(child: _buildTitleFolderItem()),
const SizedBox(width: 8),
_buildTrailingMailboxItem()
])
),
),
);
}
@@ -147,30 +147,34 @@ class MailBoxFolderTileBuilder {
Widget _buildLeadingMailboxItem() {
if (BuildUtils.isWeb) {
return Row(mainAxisSize: MainAxisSize.min, children: [
if (_mailboxNode.hasChildren())
buildIconWeb(
icon: SvgPicture.asset(
_mailboxNode.expandMode == ExpandMode.EXPAND
? _imagePaths.icExpandFolder
: _imagePaths.icCollapseFolder,
color: _mailboxNode.expandMode == ExpandMode.EXPAND
? AppColor.colorExpandMailbox
: AppColor.colorCollapseMailbox,
fit: BoxFit.fill),
minSize: 12,
splashRadius: 10,
iconPadding: EdgeInsets.zero,
tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
? AppLocalizations.of(_context).collapse
: AppLocalizations.of(_context).expand,
onTap: () => _onExpandFolderActionClick?.call(_mailboxNode))
else
const SizedBox(width: 24),
Transform(
transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
child: _buildLeadingIcon())
]);
if (mailboxDisplayed == MailboxDisplayed.mailbox) {
return Row(mainAxisSize: MainAxisSize.min, children: [
if (_mailboxNode.hasChildren())
buildIconWeb(
icon: SvgPicture.asset(
_mailboxNode.expandMode == ExpandMode.EXPAND
? _imagePaths.icExpandFolder
: _imagePaths.icCollapseFolder,
color: _mailboxNode.expandMode == ExpandMode.EXPAND
? AppColor.colorExpandMailbox
: AppColor.colorCollapseMailbox,
fit: BoxFit.fill),
minSize: 12,
splashRadius: 10,
iconPadding: EdgeInsets.zero,
tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
? AppLocalizations.of(_context).collapse
: AppLocalizations.of(_context).expand,
onTap: () => _onExpandFolderActionClick?.call(_mailboxNode))
else
const SizedBox(width: 24),
Transform(
transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
child: _buildLeadingIcon())
]);
} else {
return _buildLeadingIcon();
}
} else {
return _buildLeadingIcon();
}
@@ -186,6 +190,25 @@ class MailBoxFolderTileBuilder {
padding: const EdgeInsets.only(right: 10),
child: _buildCounter(),
);
} else if (_mailboxNode.hasChildren()
&& mailboxDisplayed == MailboxDisplayed.destinationPicker) {
return 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: 10,
iconPadding: EdgeInsets.zero,
minSize: 30,
tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
? AppLocalizations.of(_context).collapse
: AppLocalizations.of(_context).expand,
onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)
);
} else {
return const SizedBox(width: 20);
}
@@ -3,6 +3,7 @@ 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);
@@ -16,6 +17,7 @@ class MailboxSearchTileBuilder {
final ImagePaths _imagePaths;
final ResponsiveUtils _responsiveUtils;
final BuildContext _context;
final MailboxDisplayed mailboxDisplayed;
bool isHoverItem = false;
@@ -31,6 +33,7 @@ class MailboxSearchTileBuilder {
{
this.allSelectMode = SelectMode.INACTIVE,
this.lastMailbox,
this.mailboxDisplayed = MailboxDisplayed.mailbox,
}
);
@@ -159,7 +162,7 @@ class MailboxSearchTileBuilder {
}
Widget? _buildMenuIcon() {
if (isHoverItem) {
if (isHoverItem && mailboxDisplayed == MailboxDisplayed.mailbox) {
return Padding(
padding: const EdgeInsets.only(right: 8),
child: InkWell(
@@ -188,9 +191,13 @@ class MailboxSearchTileBuilder {
if (isHoverItem) {
return AppColor.colorBgMailboxSelected;
} else {
return _responsiveUtils.isDesktop(_context)
? AppColor.colorBgDesktop
: Colors.white;
if (mailboxDisplayed == MailboxDisplayed.mailbox) {
return _responsiveUtils.isDesktop(_context)
? AppColor.colorBgDesktop
: Colors.white;
} else {
return Colors.white;
}
}
}
}
@@ -13,6 +13,8 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
final _imagePaths = Get.find<ImagePaths>();
final _responsiveUtils = Get.find<ResponsiveUtils>();
MailboxCreatorView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return PointerInterceptor(child: Card(
@@ -131,8 +133,8 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
padding: const EdgeInsets.only(left: 16),
child: SvgPicture.asset(
_imagePaths.icFolderMailbox,
width: 28,
height: 28,
width: BuildUtils.isWeb ? 20 : 24,
height: BuildUtils.isWeb ? 20 : 24,
fit: BoxFit.fill)),
title: Transform(
transform: Matrix4.translationValues(-5.0, 0.0, 0.0),
@@ -76,7 +76,7 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
])
),
Expanded(child: Padding(
padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 48),
padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10),
child: _buildRightHeader(context)))
]),
Expanded(child: Row(