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

Apply new style left menu in Settings

Browse Source 
Signed-off-by: dab246 <tdvu@linagora.com>
This commit is contained in:
dab246
2025-07-03 10:41:27 +07:00
committed by Dat H. Pham
parent 561972bc0d
commit 141fa2cc2c
5 changed files with 212 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/extensions/color_extension.dart
+3
View File
@@ -243,6 +243,7 @@ extension AppColor on Color {
static const steelGray600 = Color(0xFF4E5966);
static const blue100 = Color(0xFFDFEEFF);
static const blue400 = Color(0xFF80BDFF);
static const blue900 = Color(0xFF0F76E7);
static const m3Tertiary = Color(0xFF8C9CAF);
static const m3Neutral70 = Color(0xFFAEAAAE);
static const m3Neutral90 = Color(0xFFE6E1E5);
@@ -263,6 +264,8 @@ extension AppColor on Color {
static const profileMenuDivider = Color(0xFF1D192B);
static const popupMenuItemHovered = Color(0xFFF8F8F8);
static const secondaryContrastText = Color(0xFFFFFFFF);
static const primaryLinShare = Color(0xFF007AFF);
static const lightGrayEAEDF2 = Color(0xFFEAEDF2);
static const mapGradientColor = [
[Color(0xFF21D4FD), Color(0xFFB721FF)],
core/lib/presentation/utils/theme_utils.dart
+2 -1
View File
@@ -6,12 +6,13 @@ import 'package:flutter/services.dart';
class ThemeUtils {
ThemeUtils._();
static ThemeData get appTheme {
static ThemeData buildAppTheme(BuildContext context) {
return ThemeData(
scaffoldBackgroundColor: Colors.white,
fontFamily: ConstantsUI.fontApp,
appBarTheme: _appBarTheme,
textTheme: _textTheme,
hoverColor: Theme.of(context).colorScheme.outline.withOpacity(0.08),
textSelectionTheme: _textSelectionTheme,
dividerTheme: _dividerTheme,
visualDensity: VisualDensity.adaptivePlatformDensity,
lib/features/manage_account/presentation/menu/manage_account_menu_view.dart
+169 -135
View File
@@ -1,5 +1,6 @@
import 'package:core/presentation/extensions/color_extension.dart';
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';
@@ -23,146 +24,179 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
backgroundColor: controller.responsiveUtils.isWebDesktop(context)
? AppColor.colorBgDesktop
: Colors.white,
body: SafeArea(right: false, bottom: false,
child: Column(
children: [
if (!controller.responsiveUtils.isWebDesktop(context))
Padding(
padding: const EdgeInsetsDirectional.only(top: 16, bottom: 16, start: 16),
child: Row(children: [
ApplicationLogoWidthTextWidget(),
const ApplicationVersionWidget(
padding: EdgeInsets.only(top: 8),
),
])
body: SafeArea(
right: false,
bottom: false,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (!controller.responsiveUtils.isWebDesktop(context))
...[
Padding(
padding: const EdgeInsetsDirectional.only(
top: 16,
bottom: 16,
start: 16,
),
if (!controller.responsiveUtils.isWebDesktop(context))
const Divider(color: AppColor.colorDividerMailbox, height: 1),
Expanded(child: Container(
color: controller.responsiveUtils.isWebDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
child: Row(
children: [
Padding(
padding: const EdgeInsetsDirectional.only(start: 20, top: 24),
child: TMailButtonWidget(
key: const Key('back_to_dashboard_button'),
text: AppLocalizations.of(context).back,
icon: DirectionUtils.isDirectionRTLByLanguage(context)
? controller.imagePaths.icArrowRight
: controller.imagePaths.icBack,
borderRadius: 10,
backgroundColor: AppColor.colorBgMailboxSelected,
iconColor: AppColor.colorTextButton,
maxWidth: 100,
padding: DirectionUtils.isDirectionRTLByLanguage(context)
? const EdgeInsets.symmetric(vertical: 5)
: const EdgeInsets.symmetric(vertical: 10),
iconSize: DirectionUtils.isDirectionRTLByLanguage(context) ? null : 16,
textStyle: const TextStyle(
fontSize: 15,
color: AppColor.colorTextButton,
fontWeight: FontWeight.normal
),
onTapActionCallback: () => controller.backToMailboxDashBoard(context),
),
ApplicationLogoWidthTextWidget(),
const ApplicationVersionWidget(
padding: EdgeInsets.only(top: 8),
),
Padding(
padding: const EdgeInsetsDirectional.only(start: 32, top: 20),
child: Text(
AppLocalizations.of(context).manage_account,
style: const TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 17
)
)
),
const SizedBox(height: 12),
Flexible(
child: Obx(() {
if (controller.listAccountMenuItem.isNotEmpty) {
return ListView.builder(
key: const Key('list_manage_account_menu_item'),
padding: const EdgeInsetsDirectional.only(start: 16, end: 8),
shrinkWrap: true,
itemCount: controller.listAccountMenuItem.length,
itemBuilder: (context, index) => Obx(() {
final menuItem = controller.listAccountMenuItem[index];
return AccountMenuItemTileBuilder(
imagePaths: controller.imagePaths,
responsiveUtils: controller.responsiveUtils,
menuItem: menuItem,
menuItemSelected: controller.dashBoardController.accountMenuItemSelected.value,
onSelectAccountMenuItemAction: controller.selectAccountMenuItem
);
})
);
} else {
return const SizedBox.shrink();
}
}),
),
const Padding(
padding: EdgeInsets.symmetric(vertical: 16),
child: Divider()),
Obx(() {
final accountId = controller
.dashBoardController
.accountId
.value;
if (accountId == null) return const SizedBox.shrink();
final contactSupportCapability = controller
.dashBoardController
.sessionCurrent
?.getContactSupportCapability(accountId);
if (contactSupportCapability?.isAvailable != true) return const SizedBox.shrink();
return AccountMenuItemTileBuilder(
imagePaths: controller.imagePaths,
responsiveUtils: controller.responsiveUtils,
menuItem: AccountMenuItem.contactSupport,
padding: const EdgeInsetsDirectional.only(start: 16, end: 8, bottom: 6),
onSelectAccountMenuItemAction: (_) {
controller.onGetHelpOrReportBug(
contactSupportCapability!,
route: AppRoutes.settings,
);
},
);
}),
AccountMenuItemTileBuilder(
imagePaths: controller.imagePaths,
responsiveUtils: controller.responsiveUtils,
menuItem: AccountMenuItem.signOut,
padding: const EdgeInsetsDirectional.only(start: 16, end: 8),
onSelectAccountMenuItemAction: (_) {
controller.dashBoardController.logout(
context,
controller.dashBoardController.sessionCurrent,
controller.dashBoardController.accountId.value,
);
}
),
]
),
)),
Container(
color: AppColor.colorBgDesktop,
width: double.infinity,
alignment: controller.responsiveUtils.isDesktop(context)
? AlignmentDirectional.centerStart
: AlignmentDirectional.center,
padding: const EdgeInsets.all(16),
child: ApplicationVersionWidget(
title: '${AppLocalizations.of(context).version.toLowerCase()} ',
],
),
),
]
)
const Divider(
color: AppColor.colorDividerMailbox,
height: 1,
),
],
Expanded(
child: Padding(
padding: const EdgeInsetsDirectional.only(
start: 9,
end: 8,
top: 16,
bottom: 16,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8),
child: TMailButtonWidget(
key: const Key('back_to_dashboard_button'),
text: AppLocalizations.of(context).back,
icon: DirectionUtils.isDirectionRTLByLanguage(context)
? controller.imagePaths.icArrowRight
: controller.imagePaths.icBack,
borderRadius: 8,
mainAxisSize: MainAxisSize.min,
backgroundColor: AppColor.lightGrayEAEDF2,
iconColor: AppColor.primaryLinShare,
minWidth: 79,
iconSize:
DirectionUtils.isDirectionRTLByLanguage(context)
? null
: 9,
padding: const EdgeInsetsDirectional.only(
start: 19,
end: 12,
top: 8,
bottom: 8,
),
textStyle:
Theme.of(context).textTheme.bodySmall?.copyWith(
color: AppColor.blue900,
),
onTapActionCallback: () =>
controller.backToMailboxDashBoard(context),
),
),
Padding(
padding: const EdgeInsets.all(8),
child: Text(
AppLocalizations.of(context).manage_account,
style: ThemeUtils.textStyleHeadingHeadingSmall(
fontWeight: FontWeight.bold,
),
)
),
Flexible(
child: Obx(() {
if (controller.listAccountMenuItem.isNotEmpty) {
return ListView.builder(
key: const Key('list_manage_account_menu_item'),
padding: const EdgeInsetsDirectional.symmetric(
horizontal: 8,
),
shrinkWrap: true,
itemCount: controller.listAccountMenuItem.length,
itemBuilder: (context, index) => Obx(() {
final menuItem = controller.listAccountMenuItem[index];
return AccountMenuItemTileBuilder(
imagePaths: controller.imagePaths,
responsiveUtils: controller.responsiveUtils,
menuItem: menuItem,
menuItemSelected: controller.dashBoardController.accountMenuItemSelected.value,
onSelectAccountMenuItemAction: controller.selectAccountMenuItem
);
})
);
} else {
return const SizedBox.shrink();
}
}),
),
const Padding(
padding: EdgeInsets.only(top: 20, bottom: 12),
child: Divider(color: Colors.black12),
),
Obx(() {
final accountId = controller
.dashBoardController
.accountId
.value;
if (accountId == null) return const SizedBox.shrink();
final contactSupportCapability = controller
.dashBoardController
.sessionCurrent
?.getContactSupportCapability(accountId);
if (contactSupportCapability?.isAvailable != true) return const SizedBox.shrink();
return AccountMenuItemTileBuilder(
imagePaths: controller.imagePaths,
responsiveUtils: controller.responsiveUtils,
menuItem: AccountMenuItem.contactSupport,
padding: const EdgeInsetsDirectional.symmetric(
horizontal: 8,
),
onSelectAccountMenuItemAction: (_) {
controller.onGetHelpOrReportBug(
contactSupportCapability!,
route: AppRoutes.settings,
);
},
);
}),
AccountMenuItemTileBuilder(
imagePaths: controller.imagePaths,
responsiveUtils: controller.responsiveUtils,
menuItem: AccountMenuItem.signOut,
padding: const EdgeInsetsDirectional.only(
start: 8,
end: 8,
top: 4,
),
onSelectAccountMenuItemAction: (_) {
controller.dashBoardController.logout(
context,
controller.dashBoardController.sessionCurrent,
controller.dashBoardController.accountId.value,
);
}
),
]
),
),
),
Container(
color: AppColor.colorBgDesktop,
width: double.infinity,
alignment: controller.responsiveUtils.isDesktop(context)
? AlignmentDirectional.centerStart
: AlignmentDirectional.center,
padding: const EdgeInsets.all(16),
child: ApplicationVersionWidget(
title: '${AppLocalizations.of(context).version.toLowerCase()} ',
),
),
],
),
),
);
}
lib/features/manage_account/presentation/menu/widgets/account_menu_item_tile_builder.dart
+37 -19
View File
@@ -32,36 +32,54 @@ class AccountMenuItemTileBuilder extends StatelessWidget {
Widget build(BuildContext context) {
return Padding(
key: Key('${menuItem.getAliasBrowser()}_account_menu_item_tile'),
padding: padding ?? const EdgeInsets.only(top: 6),
padding: padding ?? const EdgeInsets.only(top: 4),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () => onSelectAccountMenuItemAction.call(menuItem),
borderRadius: const BorderRadius.all(Radius.circular(10)),
borderRadius: const BorderRadius.all(Radius.circular(8)),
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(10)),
color: menuItemSelected == menuItem
? AppColor.colorBgMailboxSelected
borderRadius: const BorderRadius.all(Radius.circular(8)),
color: _isSelected
? AppColor.lightGrayEAEDF2
: Colors.transparent,
),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
child: Column(children: [
Row(children: [
SvgPicture.asset(
menuItem.getIcon(imagePaths),
width: 20,
height: 20,
fit: BoxFit.fill),
const SizedBox(width: 12),
Expanded(child: Text(
menuItem.getName(AppLocalizations.of(context)),
style: ThemeUtils.textStyleBodyBody3(color: Colors.black)
))
]),
padding: const EdgeInsets.all(8),
height: 36,
child: Row(children: [
SvgPicture.asset(
menuItem.getIcon(imagePaths),
width: 20,
height: 20,
fit: BoxFit.fill,
colorFilter: AppColor.primaryLinShare.asFilter(),
),
const SizedBox(width: 8),
Expanded(child: Text(
menuItem.getName(AppLocalizations.of(context)),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: _titleStyle,
)),
])
)),
),
);
}
bool get _isSelected => menuItemSelected == menuItem;
TextStyle get _titleStyle {
if (_isSelected) {
return ThemeUtils.textStyleInter600().copyWith(
fontSize: 15,
height: 20 / 15,
letterSpacing: 0.0,
color: Colors.black,
);
} else {
return ThemeUtils.textStyleBodyBody2(color: Colors.black);
}
}
}
lib/main.dart
+1 -1
View File
@@ -71,7 +71,7 @@ class _TMailAppState extends State<TMailApp> {
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeUtils.appTheme,
theme: ThemeUtils.buildAppTheme(context),
supportedLocales: LocalizationService.supportedLocales,
localizationsDelegates: const [
AppLocalizationsDelegate(),