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

Apply new UI for contact support

Browse Source 
Signed-off-by: dab246 <tdvu@linagora.com>
This commit is contained in:
dab246
2025-05-23 16:52:21 +07:00
committed by Dat H. Pham
parent a40cfb9797
commit ca264dde9c
11 changed files with 282 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/mailbox/presentation/mailbox_view.dart
+80 -16
View File
@@ -4,11 +4,13 @@ import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:model/model.dart';
import 'package:tmail_ui_user/features/base/widget/application_version_widget.dart';
import 'package:tmail_ui_user/features/home/domain/extensions/session_extensions.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/base_mailbox_view.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/app_grid_view.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/bottom_bar_selection_mailbox_widget.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folder_widget.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_loading_bar_widget.dart';
@@ -89,7 +91,7 @@ class MailboxView extends BaseMailboxView {
mainAxisSize: MainAxisSize.min,
children: [
Divider(color: AppColor.colorDividerHorizontal),
QuotasView(isDisplayedContactSupport: true)
QuotasView()
],
);
}),
@@ -292,27 +294,80 @@ class MailboxView extends BaseMailboxView {
return const SizedBox.shrink();
}
}),
Obx(() {
final accountId = controller
.mailboxDashBoardController
.accountId
.value;
if (accountId == null) return const SizedBox.shrink();
final contactSupportCapability = controller
.mailboxDashBoardController
.sessionCurrent
?.getContactSupportCapability(accountId);
if (contactSupportCapability?.isAvailable != true) {
return const SizedBox.shrink();
}
return Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 8),
const Divider(color: AppColor.colorDividerMailbox, height: 1),
const SizedBox(height: 8),
FolderWidget(
icon: controller.imagePaths.icHelp,
label: AppLocalizations.of(context).support,
onOpenFolderAction: () => controller
.mailboxDashBoardController
.onGetHelpOrReportBug(contactSupportCapability!),
tooltip: AppLocalizations.of(context).getHelpOrReportABug,
padding: const EdgeInsets.symmetric(horizontal: 16)
),
],
);
}),
])
);
}
Widget _buildBodyMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
Widget _buildBodyMailboxCategory({
required BuildContext context,
required MailboxCategories categories,
required MailboxNode mailboxNode,
EdgeInsetsGeometry? padding,
}) {
final lastNode = mailboxNode.childrenItems?.last;
return Container(
margin: EdgeInsetsDirectional.only(
start: controller.responsiveUtils.isLandscapeMobile(context) ? 0 : 8,
end: 16
),
padding: const EdgeInsetsDirectional.only(start: 12),
child: TreeView(
key: Key('${categories.keyValue}_mailbox_list'),
children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode)));
final treeView = TreeView(
key: Key('${categories.keyValue}_mailbox_list'),
children: _buildListChildTileWidget(
context,
mailboxNode,
lastNode: lastNode,
),
);
if (padding != null) {
return Padding(
padding: padding,
child: treeView,
);
} else {
return treeView;
}
}
Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
if (categories == MailboxCategories.exchange) {
return _buildBodyMailboxCategory(context, categories, mailboxNode);
return _buildBodyMailboxCategory(
context: context,
categories: categories,
mailboxNode: mailboxNode,
padding: const EdgeInsets.symmetric(horizontal: 16),
);
}
return Column(children: [
Obx(() => MailboxCategoryWidget(
@@ -327,15 +382,24 @@ class MailboxView extends BaseMailboxView {
itemKey,
),
isArrangeLTR: false,
padding: EdgeInsetsDirectional.only(
start: 16,
end: controller.responsiveUtils.isLandscapeMobile(context) ? 8 : 28,
showIcon: true,
padding: const EdgeInsetsDirectional.only(
start: 26,
end: 16,
),
)),
AnimatedContainer(
duration: const Duration(milliseconds: 400),
child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
? _buildBodyMailboxCategory(context, categories, mailboxNode)
? _buildBodyMailboxCategory(
context: context,
categories: categories,
mailboxNode: mailboxNode,
padding: const EdgeInsetsDirectional.only(
start: 30,
end: 16,
),
)
: const Offstage())
]);
}
lib/features/mailbox/presentation/mailbox_view_web.dart
+86 -24
View File
@@ -6,10 +6,12 @@ import 'package:model/model.dart';
import 'package:tmail_ui_user/features/base/widget/application_logo_with_text_widget.dart';
import 'package:tmail_ui_user/features/base/widget/application_version_widget.dart';
import 'package:tmail_ui_user/features/base/widget/scrollbar_list_view.dart';
import 'package:tmail_ui_user/features/home/domain/extensions/session_extensions.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/base_mailbox_view.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/app_grid_view.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folder_widget.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_loading_bar_widget.dart';
@@ -60,12 +62,11 @@ class MailboxView extends BaseMailboxView {
),
)),
const Divider(color: AppColor.colorDividerHorizontal),
QuotasView(
padding: const EdgeInsetsDirectional.only(
const QuotasView(
padding: EdgeInsetsDirectional.only(
start: QuotasViewStyles.padding,
top: QuotasViewStyles.padding,
),
isDisplayedContactSupport: !controller.responsiveUtils.isWebDesktop(context),
),
Container(
width: double.infinity,
@@ -196,7 +197,45 @@ class MailboxView extends BaseMailboxView {
} else {
return const SizedBox.shrink();
}
})
}),
Obx(() {
final accountId = controller
.mailboxDashBoardController
.accountId
.value;
if (accountId == null) return const SizedBox.shrink();
final contactSupportCapability = controller
.mailboxDashBoardController
.sessionCurrent
?.getContactSupportCapability(accountId);
if (contactSupportCapability?.isAvailable != true) {
return const SizedBox.shrink();
}
return Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 8),
const Divider(color: AppColor.colorDividerMailbox, height: 1),
const SizedBox(height: 8),
FolderWidget(
icon: controller.imagePaths.icHelp,
label: AppLocalizations.of(context).support,
onOpenFolderAction: () => controller
.mailboxDashBoardController
.onGetHelpOrReportBug(contactSupportCapability!),
tooltip: AppLocalizations.of(context).getHelpOrReportABug,
padding: !controller.responsiveUtils.isDesktop(context)
? const EdgeInsets.symmetric(horizontal: 16)
: null,
),
const SizedBox(height: 16),
],
);
}),
])
);
return Stack(
@@ -246,23 +285,31 @@ class MailboxView extends BaseMailboxView {
);
}
Widget _buildBodyMailboxCategory(
BuildContext context,
MailboxCategories categories,
MailboxNode mailboxNode
) {
Widget _buildBodyMailboxCategory({
required BuildContext context,
required MailboxCategories categories,
required MailboxNode mailboxNode,
EdgeInsetsGeometry? padding,
}) {
final lastNode = mailboxNode.childrenItems?.last;
return Container(
padding: EdgeInsets.only(
right: controller.responsiveUtils.isDesktop(context) ? 0 : 16,
left: controller.responsiveUtils.isDesktop(context) ? 0 : 16),
child: TreeView(
key: Key('${categories.keyValue}_mailbox_list'),
children: _buildListChildTileWidget(
context,
mailboxNode,
lastNode: lastNode)));
final treeView = TreeView(
key: Key('${categories.keyValue}_mailbox_list'),
children: _buildListChildTileWidget(
context,
mailboxNode,
lastNode: lastNode,
),
);
if (padding != null) {
return Padding(
padding: padding,
child: treeView,
);
} else {
return treeView;
}
}
Widget _buildMailboxCategory(
@@ -271,7 +318,14 @@ class MailboxView extends BaseMailboxView {
MailboxNode mailboxNode
) {
if (categories == MailboxCategories.exchange) {
return _buildBodyMailboxCategory(context, categories, mailboxNode);
return _buildBodyMailboxCategory(
context: context,
categories: categories,
mailboxNode: mailboxNode,
padding: !controller.responsiveUtils.isDesktop(context)
? const EdgeInsets.symmetric(horizontal: 16)
: null,
);
} else {
return Column(
children: [
@@ -287,14 +341,22 @@ class MailboxView extends BaseMailboxView {
itemKey,
),
isArrangeLTR: false,
padding: controller.responsiveUtils.isDesktop(context)
? null
: const EdgeInsetsDirectional.only(start: 16),
showIcon: true,
padding: !controller.responsiveUtils.isDesktop(context)
? const EdgeInsetsDirectional.only(start: 26, end: 16)
: const EdgeInsetsDirectional.only(start: 10),
)),
AnimatedContainer(
duration: const Duration(milliseconds: 400),
child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
? _buildBodyMailboxCategory(context, categories, mailboxNode)
? _buildBodyMailboxCategory(
context: context,
categories: categories,
mailboxNode: mailboxNode,
padding: !controller.responsiveUtils.isDesktop(context)
? const EdgeInsetsDirectional.only(start: 30, end: 16)
: const EdgeInsetsDirectional.only(start: 10),
)
: const Offstage()
),
const SizedBox(height: 8)
lib/features/mailbox/presentation/widgets/folder_widget.dart
+85
View File
@@ -0,0 +1,85 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/utils/theme_utils.dart';
import 'package:core/presentation/views/text/text_overflow_builder.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
class FolderWidget extends StatelessWidget {
final String icon;
final String label;
final VoidCallback onOpenFolderAction;
final String? tooltip;
final EdgeInsetsGeometry? padding;
const FolderWidget({
super.key,
required this.icon,
required this.label,
required this.onOpenFolderAction,
this.tooltip,
this.padding,
});
@override
Widget build(BuildContext context) {
Widget item = Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(MailboxItemWidgetStyles.borderRadius),
),
),
padding: const EdgeInsets.symmetric(
horizontal: MailboxItemWidgetStyles.itemPadding,
),
height: MailboxItemWidgetStyles.height,
child: Row(children: [
SvgPicture.asset(
icon,
width: MailboxIconWidgetStyles.iconSize,
height: MailboxIconWidgetStyles.iconSize,
fit: BoxFit.fill,
),
const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 3),
child: TextOverflowBuilder(
label,
style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
),
),
)
]),
);
if (tooltip != null) {
item = Tooltip(
message: tooltip,
child: item,
);
}
item = Material(
color: Colors.transparent,
child: InkWell(
onTap: onOpenFolderAction,
borderRadius: const BorderRadius.all(
Radius.circular(MailboxItemWidgetStyles.borderRadius),
),
hoverColor: AppColor.blue100,
child: item,
),
);
if (padding != null) {
return Padding(
padding: padding!,
child: item,
);
} else {
return item;
}
}
}
lib/features/mailbox/presentation/widgets/mailbox_category_widget.dart
+15
View File
@@ -3,10 +3,13 @@ import 'package:core/presentation/utils/theme_utils.dart';
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:core/utils/direction_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:model/mailbox/expand_mode.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
typedef OnToggleMailboxCategories = Function(MailboxCategories, GlobalKey);
@@ -16,6 +19,7 @@ class MailboxCategoryWidget extends StatefulWidget {
final ExpandMode expandMode;
final OnToggleMailboxCategories onToggleMailboxCategories;
final bool isArrangeLTR;
final bool showIcon;
final EdgeInsetsGeometry? padding;
const MailboxCategoryWidget({
@@ -24,6 +28,7 @@ class MailboxCategoryWidget extends StatefulWidget {
required this.expandMode,
required this.onToggleMailboxCategories,
this.isArrangeLTR = true,
this.showIcon = false,
this.padding,
});
@@ -42,6 +47,16 @@ class _MailboxCategoryWidgetState extends State<MailboxCategoryWidget> {
final item = Row(
key: _key,
children: [
if (widget.showIcon)
...[
SvgPicture.asset(
_imagePaths.icFolderMailbox,
width: MailboxIconWidgetStyles.iconSize,
height: MailboxIconWidgetStyles.iconSize,
fit: BoxFit.fill,
),
const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
],
if (!widget.isArrangeLTR)
Flexible(
child: Text(