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

TF-3410 Update color and icon size of mailbox view

Browse Source
This commit is contained in:
dab246
2025-01-08 19:32:04 +07:00
committed by Dat H. Pham
parent ee180b4962
commit 67ebd137a8
14 changed files with 102 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/extensions/color_extension.dart
+3 -1
View File
@@ -103,7 +103,7 @@ extension AppColor on Color {
static const colorTextSettingDescriptions = colorTextButtonHeaderThread;
static const colorButtonHeaderThread = Color(0x99EBEDF0);
static const colorBorderBodyThread = Color(0x5CB8C1CC);
static const colorBgDesktop = Color(0xFFF6F6F6);
static const colorBgDesktop = Color(0xFFF3F6F9);
static const colorItemEmailSelectedDesktop = Color(0xFFDFEEFF);
static const colorAvatar = Color(0xFFDE5E5E);
static const colorFocusButton = Color(0x14818C99);
@@ -242,6 +242,8 @@ extension AppColor on Color {
static const steelGray200 = Color(0xFFAEB7C2);
static const blue700 = Color(0xFF208BFF);
static const steelGray400 = Color(0xFF818C99);
static const blue700 = Color(0xFF208BFF);
static const blue100 = Color(0xFFDFEEFF);
static const mapGradientColor = [
[Color(0xFF21D4FD), Color(0xFFB721FF)],
core/lib/presentation/views/quick_search/type_ahead_field_quick_search.dart
+1 -1
View File
@@ -660,7 +660,7 @@ class _TypeAheadFieldQuickSearchState<T, P, R>
)
: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12)),
color: AppColor.colorBgSearchBar,
color: AppColor.colorBgDesktop,
),
height: widget.maxHeight,
child: Row(
lib/features/destination_picker/presentation/destination_picker_view.dart
+11 -7
View File
@@ -476,7 +476,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
MailboxId? mailboxIdSelected
) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Material(
color: Colors.transparent,
child: InkWell(
@@ -491,26 +491,30 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
customBorder: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
hoverColor: AppColor.colorMailboxHovered,
child: Obx(() => Container(
padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 8),
padding: const EdgeInsetsDirectional.symmetric(
horizontal: 8,
vertical: 10,
),
color: controller.mailboxDestination.value == PresentationMailbox.unifiedMailbox
? AppColor.colorItemSelected
: Colors.transparent,
child: Row(children: [
const SizedBox(width: 26),
SvgPicture.asset(
controller.imagePaths.icFolderMailbox,
width: PlatformInfo.isWeb ? 24 : 20,
height: PlatformInfo.isWeb ? 24 : 20,
width: 20,
height: 20,
fit: BoxFit.fill
),
const SizedBox(width: 8),
const SizedBox(width: 10),
Expanded(child: Text(
AppLocalizations.of(context).allFolders,
maxLines: 1,
softWrap: CommonTextStyle.defaultSoftWrap,
overflow: CommonTextStyle.defaultTextOverFlow,
style: const TextStyle(
fontSize: 15,
color: AppColor.colorNameEmail,
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.normal
),
)),
lib/features/mailbox/presentation/mailbox_view_web.dart
+5 -3
View File
@@ -193,7 +193,7 @@ class MailboxView extends BaseMailboxView {
child: Text(
AppLocalizations.of(context).folders,
style: const TextStyle(
fontSize: 17,
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.bold,
),
@@ -207,14 +207,16 @@ class MailboxView extends BaseMailboxView {
TMailButtonWidget.fromIcon(
icon: controller.imagePaths.icSearchBar,
backgroundColor: Colors.transparent,
iconColor: AppColor.primaryColor,
iconColor: AppColor.steelGrayA540,
iconSize: 20,
tooltipMessage: AppLocalizations.of(context).searchForFolders,
onTapActionCallback: () => controller.openSearchViewAction(context)
),
TMailButtonWidget.fromIcon(
icon: controller.imagePaths.icAddNewFolder,
backgroundColor: Colors.transparent,
iconColor: AppColor.primaryColor,
iconColor: AppColor.steelGrayA540,
iconSize: 20,
tooltipMessage: AppLocalizations.of(context).newFolder,
onTapActionCallback: () => controller.goToCreateNewMailboxView(context)
),
lib/features/mailbox/presentation/mixin/mailbox_widget_mixin.dart
+6 -5
View File
@@ -354,9 +354,10 @@ mixin MailboxWidgetMixin {
: DirectionUtils.isDirectionRTLByLanguage(context)
? imagePaths.icArrowLeft
: imagePaths.icArrowRight,
iconColor: AppColor.primaryColor,
iconColor: Colors.black,
iconSize: 20,
backgroundColor: Colors.transparent,
padding: EdgeInsets.zero,
padding: const EdgeInsets.all(5),
tooltipMessage: expandMode == ExpandMode.EXPAND
? AppLocalizations.of(context).collapse
: AppLocalizations.of(context).expand,
@@ -368,10 +369,10 @@ mixin MailboxWidgetMixin {
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap,
style: const TextStyle(
fontSize: 17,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.bold
fontWeight: FontWeight.w400,
)
)),
])
lib/features/mailbox/presentation/styles/label_mailbox_item_widget_styles.dart
+1
View File
@@ -14,4 +14,5 @@ class LabelMailboxItemWidgetStyles {
static const FontWeight labelTeamMailboxTextFontWeight = FontWeight.bold;
static const FontWeight labelFolderTextFontWeight = FontWeight.normal;
static const FontWeight teamMailboxTextFontWeight = FontWeight.w400;
static const FontWeight labelFolderSelectedFontWeight = FontWeight.bold;
}
lib/features/mailbox/presentation/styles/leading_mailbox_item_widget_styles.dart
+2 -3
View File
@@ -1,14 +1,13 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/utils/direction_utils.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class LeadingMailboxItemWidgetStyles {
static const double expandIconSize = 15;
static const double expandIconSplashRadius = 12;
static const double emptyBoxSize = 32;
static const Color displayColor = AppColor.primaryColor;
static const Color displayColor = Colors.black;
static const Color normalColor = AppColor.colorIconUnSubscribedMailbox;
static const EdgeInsetsGeometry expandIconPadding = EdgeInsetsDirectional.only(start: 8);
lib/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart
+1 -3
View File
@@ -1,6 +1,4 @@
import 'package:core/utils/platform_info.dart';
class MailboxIconWidgetStyles {
static double iconSize = PlatformInfo.isWeb ? 24 : 20;
static const double iconSize = 20.0;
}
lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart
+15 -8
View File
@@ -1,7 +1,6 @@
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/views/text/text_overflow_builder.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:model/extensions/presentation_mailbox_extension.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
@@ -12,19 +11,21 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/trailing_mai
class LabelMailboxItemWidget extends StatelessWidget {
final ResponsiveUtils responsiveUtils;
final MailboxNode mailboxNode;
final bool showTrailing;
final bool isItemHovered;
final bool isSelected;
final OnClickOpenMenuMailboxNodeAction? onMenuActionClick;
final OnEmptyMailboxActionCallback? onEmptyMailboxActionCallback;
final _responsiveUtils = Get.find<ResponsiveUtils>();
LabelMailboxItemWidget({
const LabelMailboxItemWidget({
super.key,
required this.mailboxNode,
required this.responsiveUtils,
this.showTrailing = true,
this.isItemHovered = false,
this.isSelected = false,
this.onMenuActionClick,
this.onEmptyMailboxActionCallback,
});
@@ -47,7 +48,7 @@ class LabelMailboxItemWidget extends StatelessWidget {
),
),
),
if (_responsiveUtils.isWebDesktop(context) && mailboxNode.item.allowedHasEmptyAction)
if (responsiveUtils.isWebDesktop(context) && mailboxNode.item.allowedHasEmptyAction)
EmptyMailboxPopupDialogWidget(
mailboxNode: mailboxNode,
onEmptyMailboxActionCallback: (mailboxNode) => onEmptyMailboxActionCallback?.call(mailboxNode),
@@ -89,7 +90,13 @@ class LabelMailboxItemWidget extends StatelessWidget {
? LabelMailboxItemWidgetStyles.labelTeamMailboxTextColor
: LabelMailboxItemWidgetStyles.labelFolderTextColor;
FontWeight get _mailboxNameTextFontWeight => mailboxNode.item.isTeamMailboxes
? LabelMailboxItemWidgetStyles.labelTeamMailboxTextFontWeight
: LabelMailboxItemWidgetStyles.labelFolderTextFontWeight;
FontWeight get _mailboxNameTextFontWeight {
if (isSelected) {
return LabelMailboxItemWidgetStyles.labelFolderSelectedFontWeight;
} else {
return mailboxNode.item.isTeamMailboxes
? LabelMailboxItemWidgetStyles.labelTeamMailboxTextFontWeight
: LabelMailboxItemWidgetStyles.labelFolderTextFontWeight;
}
}
}
lib/features/mailbox/presentation/widgets/leading_mailbox_item_widget.dart
+10 -10
View File
@@ -3,7 +3,6 @@ import 'package:core/presentation/resources/image_paths.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:get/get.dart';
import 'package:model/extensions/presentation_mailbox_extension.dart';
import 'package:model/mailbox/expand_mode.dart';
import 'package:model/mailbox/select_mode.dart';
@@ -15,6 +14,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class LeadingMailboxItemWidget extends StatelessWidget {
final ImagePaths imagePaths;
final MailboxNode mailboxNode;
final SelectMode selectionMode;
final OnSelectMailboxNodeAction? onSelectMailboxFolderClick;
@@ -22,6 +22,7 @@ class LeadingMailboxItemWidget extends StatelessWidget {
const LeadingMailboxItemWidget({
super.key,
required this.imagePaths,
required this.mailboxNode,
this.selectionMode = SelectMode.INACTIVE,
this.onExpandFolderActionClick,
@@ -30,24 +31,23 @@ class LeadingMailboxItemWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final imagePaths = Get.find<ImagePaths>();
return Row(children: [
if (mailboxNode.hasChildren())
TMailButtonWidget.fromIcon(
Visibility.maintain(
visible: mailboxNode.hasChildren(),
child: TMailButtonWidget.fromIcon(
icon: _getExpandIcon(context, imagePaths),
iconColor: _expandIconColor,
padding: EdgeInsets.zero,
margin: const EdgeInsetsDirectional.only(start: 4),
iconSize: 20,
padding: const EdgeInsets.all(5),
backgroundColor: Colors.transparent,
tooltipMessage: _getExpandTooltipMessage(context),
onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode)
)
else
const SizedBox(width: LeadingMailboxItemWidgetStyles.emptyBoxSize),
),
),
Transform(
transform: LeadingMailboxItemWidgetStyles.mailboxIconTransform(context),
child: MailboxIconWidget(
imagePaths: imagePaths,
mailboxNode: mailboxNode,
selectionMode: selectionMode,
onSelectMailboxFolderClick: onSelectMailboxFolderClick
lib/features/mailbox/presentation/widgets/mailbox_icon_widget.dart
+2 -3
View File
@@ -3,7 +3,6 @@ import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:model/extensions/presentation_mailbox_extension.dart';
import 'package:model/mailbox/select_mode.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
@@ -13,6 +12,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method
class MailboxIconWidget extends StatelessWidget {
final ImagePaths imagePaths;
final MailboxNode mailboxNode;
final SelectMode selectionMode;
final OnSelectMailboxNodeAction? onSelectMailboxFolderClick;
@@ -20,14 +20,13 @@ class MailboxIconWidget extends StatelessWidget {
const MailboxIconWidget({
super.key,
required this.mailboxNode,
required this.imagePaths,
this.selectionMode = SelectMode.INACTIVE,
this.onSelectMailboxFolderClick,
});
@override
Widget build(BuildContext context) {
final imagePaths = Get.find<ImagePaths>();
if (_isSelectionActivatedOnMobile) {
return InkWell(
onTap: () => onSelectMailboxFolderClick?.call(mailboxNode),
lib/features/mailbox/presentation/widgets/mailbox_item_widget.dart
+34 -26
View File
@@ -75,15 +75,15 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
color: backgroundColorItem
),
padding: widget.mailboxNode.hasChildren()
? const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.padding,
vertical: MailboxItemWidgetStyles.space
)
: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
padding: const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.padding,
vertical: MailboxItemWidgetStyles.space,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
LeadingMailboxItemWidget(
imagePaths: _imagePaths,
mailboxNode: widget.mailboxNode,
selectionMode: widget.selectionMode,
onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
@@ -92,8 +92,10 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
const SizedBox(width: MailboxItemWidgetStyles.space),
Expanded(
child: LabelMailboxItemWidget(
responsiveUtils: _responsiveUtils,
mailboxNode: widget.mailboxNode,
isItemHovered: _isItemHovered,
isSelected: _isSelected,
onMenuActionClick: widget.onMenuActionClick,
onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
)
@@ -116,15 +118,14 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
color: backgroundColorItem
),
padding: widget.mailboxNode.hasChildren()
? const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.padding,
vertical: MailboxItemWidgetStyles.space
)
: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
padding: const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.padding,
vertical: MailboxItemWidgetStyles.space,
),
child: Row(
children: [
LeadingMailboxItemWidget(
imagePaths: _imagePaths,
mailboxNode: widget.mailboxNode,
selectionMode: widget.selectionMode,
onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
@@ -133,8 +134,10 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
const SizedBox(width: MailboxItemWidgetStyles.space),
Expanded(
child: LabelMailboxItemWidget(
responsiveUtils: _responsiveUtils,
mailboxNode: widget.mailboxNode,
isItemHovered: _isItemHovered,
isSelected: _isSelected,
onMenuActionClick: widget.onMenuActionClick,
onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
)
@@ -157,12 +160,10 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
borderRadius: const BorderRadius.all(Radius.circular(MailboxItemWidgetStyles.borderRadius)),
color: backgroundColorItem
),
padding: widget.mailboxNode.hasChildren()
? const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.padding,
vertical: MailboxItemWidgetStyles.space
)
: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
padding: const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.padding,
vertical: MailboxItemWidgetStyles.space,
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
@@ -170,6 +171,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
Row(
children: [
LeadingMailboxItemWidget(
imagePaths: _imagePaths,
mailboxNode: widget.mailboxNode,
selectionMode: widget.selectionMode,
onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
@@ -178,8 +180,10 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
const SizedBox(width: MailboxItemWidgetStyles.padding),
Expanded(
child: LabelMailboxItemWidget(
responsiveUtils: _responsiveUtils,
mailboxNode: widget.mailboxNode,
isItemHovered: _isItemHovered,
isSelected: _isSelected,
onMenuActionClick: widget.onMenuActionClick,
onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
)
@@ -213,18 +217,17 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
customBorder: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
hoverColor: AppColor.colorMailboxHovered,
child: Container(
padding: widget.mailboxNode.hasChildren()
? const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.padding,
vertical: MailboxItemWidgetStyles.space
)
: const EdgeInsets.all(MailboxItemWidgetStyles.padding),
padding: const EdgeInsetsDirectional.symmetric(
horizontal: MailboxItemWidgetStyles.padding,
vertical: MailboxItemWidgetStyles.space,
),
color: widget.mailboxNode.isSelected
? AppColor.colorItemSelected
: Colors.transparent,
child: Row(
children: [
LeadingMailboxItemWidget(
imagePaths: _imagePaths,
mailboxNode: widget.mailboxNode,
selectionMode: widget.selectionMode,
onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
@@ -233,8 +236,10 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
const SizedBox(width: MailboxItemWidgetStyles.padding),
Expanded(
child: LabelMailboxItemWidget(
responsiveUtils: _responsiveUtils,
mailboxNode: widget.mailboxNode,
showTrailing: false,
isSelected: _isSelected,
isItemHovered: _isItemHovered,
onMenuActionClick: widget.onMenuActionClick,
onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
@@ -259,12 +264,15 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
}
}
bool get _isSelected =>
widget.mailboxNodeSelected?.id == widget.mailboxNode.item.id;
Color get backgroundColorItem {
if (widget.mailboxDisplayed == MailboxDisplayed.destinationPicker) {
return Colors.white;
} else {
if (widget.mailboxNodeSelected?.id == widget.mailboxNode.item.id || _isItemHovered) {
return AppColor.colorBgMailboxSelected;
if (_isSelected || _isItemHovered) {
return AppColor.blue100;
} else {
return Colors.transparent;
}
lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart
+1 -7
View File
@@ -716,13 +716,7 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
iconSize: 24,
iconColor: Colors.white,
padding: const EdgeInsetsDirectional.symmetric(vertical: 8),
backgroundColor: AppColor.colorTextButton,
boxShadow: const [
BoxShadow(
blurRadius: 12.0,
color: AppColor.colorShadowComposerButton
)
],
backgroundColor: AppColor.blue700,
textStyle: const TextStyle(
fontSize: 15,
color: Colors.white,
lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart
+10 -11
View File
@@ -35,9 +35,7 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
onTap: () {},
borderRadius: const BorderRadius.all(Radius.circular(8)),
child: Padding(
padding: _mailboxNode.hasChildren()
? const EdgeInsets.symmetric(horizontal: 8, vertical: 5)
: const EdgeInsets.all(8),
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
child: Row(
children: [
_buildLeadingMailboxItem(context),
@@ -56,21 +54,22 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
if (_mailboxNode.hasChildren() && _mailboxNode.item.isPersonal)
TMailButtonWidget.fromIcon(
Visibility.maintain(
visible: _mailboxNode.hasChildren() && _mailboxNode.item.isPersonal,
child: TMailButtonWidget.fromIcon(
icon: _getExpandIcon(context, _imagePaths),
iconColor: _mailboxNode.item.allowedToDisplay
? AppColor.primaryColor
? Colors.black
: AppColor.colorIconUnSubscribedMailbox,
padding: EdgeInsets.zero,
padding: const EdgeInsets.all(5),
iconSize: 20,
backgroundColor: Colors.transparent,
tooltipMessage: _mailboxNode.expandMode == ExpandMode.EXPAND
? AppLocalizations.of(context).collapse
: AppLocalizations.of(context).expand,
onTapActionCallback: () => onClickExpandMailboxNodeAction?.call(_mailboxNode)
)
else
const SizedBox(width: 28),
),
),
if (!_mailboxNode.item.isTeamMailboxes)
_buildMailboxIcon(context),
]
@@ -97,7 +96,7 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
softWrap: CommonTextStyle.defaultSoftWrap,
overflow: CommonTextStyle.defaultTextOverFlow,
style: TextStyle(
fontSize: _mailboxNode.item.isTeamMailboxes ? 16 : 15,
fontSize: _mailboxNode.item.isTeamMailboxes ? 16 : 14,
color: _mailboxNode.item.allowedToDisplay
? Colors.black
: AppColor.colorTitleAUnSubscribedMailbox,