Skip to content

Commit cc2b46e

Browse files
dab246dab246
committed
TF-2421 Update new UI for SearchBar/FilterEmail in email list view
Signed-off-by: dab246 <[email protected]>
1 parent c22c141 commit cc2b46e

File tree

8 files changed

+121
-53
lines changed

8 files changed

+121
-53
lines changed

‎assets/images/ic_filter.svg‎

Lines changed: 4 additions & 2 deletions
Loading

‎core/lib/presentation/extensions/color_extension.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ extension AppColor on Color {
6969
static const colorContentEmail = Color(0xFF6D7885);
7070
static const colorTextButton = Color(0xFF007AFF);
7171
static const colorHintSearchBar = Color(0xFF818C99);
72-
static const colorBgSearchBar = Color(0x99EBEDF0);
72+
static const colorBgSearchBar = Color(0xFFF2F3F5);
7373
static const colorBgIdentityButton = Color(0x00EBEDF0);
7474
static const colorShadowBgContentEmail = Color(0x14000000);
7575
static const colorDividerMailbox = Color(0x1F000000);

‎core/lib/presentation/utils/theme_utils.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@ class ThemeUtils {
4242
fontWeight: FontWeight.w600,
4343
fontSize: 32,
4444
),
45+
labelSmall: TextStyle(
46+
fontWeight: FontWeight.normal
47+
)
4548
);
4649
}
4750

‎core/lib/presentation/views/search/search_bar_view.dart‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -32,35 +32,36 @@ class SearchBarView extends StatelessWidget {
3232
splashColor: Colors.transparent,
3333
borderRadius: const BorderRadius.all(Radius.circular(12)),
3434
child: Container(
35-
alignment: Alignment.center,
36-
height: 40,
37-
width: double.infinity,
38-
decoration: const BoxDecoration(
39-
borderRadius: BorderRadius.all(Radius.circular(12)),
40-
color: AppColor.colorBgSearchBar
41-
),
42-
child: Row(
43-
mainAxisAlignment: MainAxisAlignment.center,
44-
children: [
45-
TMailButtonWidget.fromIcon(
46-
icon: imagePaths.icSearchBar,
47-
backgroundColor: Colors.transparent,
48-
onTapActionCallback: onOpenSearchViewAction
35+
alignment: Alignment.center,
36+
height: 44,
37+
width: double.infinity,
38+
decoration: const BoxDecoration(
39+
borderRadius: BorderRadius.all(Radius.circular(12)),
40+
color: AppColor.colorBgSearchBar
41+
),
42+
child: Row(
43+
mainAxisAlignment: MainAxisAlignment.center,
44+
children: [
45+
TMailButtonWidget.fromIcon(
46+
icon: imagePaths.icSearchBar,
47+
iconColor: AppColor.colorAttachmentIcon,
48+
backgroundColor: Colors.transparent,
49+
onTapActionCallback: onOpenSearchViewAction
50+
),
51+
Expanded(
52+
child: Text(
53+
hintTextSearch ?? '',
54+
maxLines: 1,
55+
overflow: CommonTextStyle.defaultTextOverFlow,
56+
softWrap: CommonTextStyle.defaultSoftWrap,
57+
style: Theme.of(context).textTheme.labelSmall?.copyWith(
58+
fontSize: 15,
59+
color: AppColor.colorHintSearchBar
60+
)
4961
),
50-
Expanded(
51-
child: Text(
52-
hintTextSearch ?? '',
53-
maxLines: 1,
54-
overflow: CommonTextStyle.defaultTextOverFlow,
55-
softWrap: CommonTextStyle.defaultSoftWrap,
56-
style: const TextStyle(
57-
fontSize: 17,
58-
color: AppColor.colorHintSearchBar
59-
)
60-
),
61-
)
62-
]
63-
),
62+
)
63+
]
64+
),
6465
),
6566
),
6667
);

‎lib/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ class MobileAppBarThreadWidgetStyle {
99

1010
static EdgeInsetsGeometry getPadding(BuildContext context, ResponsiveUtils responsiveUtils) {
1111
if (responsiveUtils.isPortraitMobile(context) || responsiveUtils.isLandscapeTablet(context)) {
12-
return const EdgeInsets.symmetric(horizontal: 16, vertical: 8);
12+
return const EdgeInsetsDirectional.only(start: 8, end: 16, top: 8, bottom: 8);
1313
} else {
14-
return const EdgeInsets.symmetric(horizontal: 32, vertical: 8);
14+
return const EdgeInsetsDirectional.only(start: 24, end: 32, top: 8, bottom: 8);
1515
}
1616
}
1717

‎lib/features/thread/presentation/thread_view.dart‎

Lines changed: 58 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import 'package:tmail_ui_user/features/quotas/presentation/widget/quotas_banner_
2121
import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
2222
import 'package:tmail_ui_user/features/thread/domain/state/search_email_state.dart';
2323
import 'package:tmail_ui_user/features/thread/presentation/model/delete_action_type.dart';
24+
import 'package:tmail_ui_user/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart';
2425
import 'package:tmail_ui_user/features/thread/presentation/styles/banner_delete_all_spam_emails_styles.dart';
2526
import 'package:tmail_ui_user/features/thread/presentation/styles/banner_empty_trash_styles.dart';
2627
import 'package:tmail_ui_user/features/thread/presentation/styles/item_email_tile_styles.dart';
@@ -111,13 +112,63 @@ class ThreadView extends GetWidget<ThreadController>
111112
return const SizedBox.shrink();
112113
}
113114
}),
114-
SearchBarView(
115-
key: const Key('email_search_bar_view'),
116-
imagePaths: controller.imagePaths,
117-
margin: _getBannerMargin(context, controller.responsiveUtils),
118-
hintTextSearch: AppLocalizations.of(context).search_emails,
119-
onOpenSearchViewAction: controller.goToSearchView
120-
),
115+
if (PlatformInfo.isMobile)
116+
Padding(
117+
padding: _getBannerMargin(context, controller.responsiveUtils),
118+
child: Row(
119+
children: [
120+
Expanded(
121+
child: SearchBarView(
122+
key: const Key('email_search_bar_view'),
123+
imagePaths: controller.imagePaths,
124+
margin: const EdgeInsetsDirectional.only(end: 8),
125+
hintTextSearch: AppLocalizations.of(context).search_emails,
126+
onOpenSearchViewAction: controller.goToSearchView
127+
),
128+
),
129+
Obx(() {
130+
return TMailButtonWidget.fromIcon(
131+
key: const Key('filter_email_button'),
132+
icon: controller.imagePaths.icFilter,
133+
iconColor: MobileAppBarThreadWidgetStyle.getFilterButtonColor(
134+
controller.mailboxDashBoardController.filterMessageOption.value
135+
),
136+
padding: EdgeInsets.zero,
137+
backgroundColor: Colors.transparent,
138+
tooltipMessage: AppLocalizations.of(context).filter_messages,
139+
onTapActionCallback: controller.responsiveUtils.isScreenWithShortestSide(context)
140+
? () => controller.openContextMenuAction(
141+
context,
142+
_filterMessagesCupertinoActionTile(
143+
context,
144+
controller.mailboxDashBoardController.filterMessageOption.value
145+
)
146+
)
147+
: null,
148+
onTapActionAtPositionCallback: !controller.responsiveUtils.isScreenWithShortestSide(context)
149+
? (position) => controller.openPopupMenuAction(
150+
context,
151+
position,
152+
popupMenuFilterEmailActionTile(
153+
context,
154+
controller.mailboxDashBoardController.filterMessageOption.value,
155+
(option) => controller.filterMessagesAction(context, option)
156+
)
157+
)
158+
: null,
159+
);
160+
})
161+
],
162+
),
163+
)
164+
else
165+
SearchBarView(
166+
key: const Key('email_search_bar_view'),
167+
imagePaths: controller.imagePaths,
168+
margin: _getBannerMargin(context, controller.responsiveUtils),
169+
hintTextSearch: AppLocalizations.of(context).search_emails,
170+
onOpenSearchViewAction: controller.goToSearchView
171+
),
121172
SpamReportBannerWidget(
122173
spamReportController: controller.mailboxDashBoardController.spamReportController,
123174
margin: _getBannerMargin(context, controller.responsiveUtils),

‎lib/features/thread/presentation/widgets/app_bar/app_bar_thread_widget.dart‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,6 @@ class AppBarThreadWidget extends StatelessWidget {
7272
openMailboxAction: openMailboxAction,
7373
editThreadAction: editThreadAction,
7474
cancelEditThreadAction: cancelEditThreadAction,
75-
onPopupMenuFilterEmailAction: onPopupMenuFilterEmailAction,
76-
onContextMenuFilterEmailAction: onContextMenuFilterEmailAction,
7775
);
7876
}
7977
}

‎lib/features/thread/presentation/widgets/app_bar/mobile_app_bar_thread_widget.dart‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@ class MobileAppBarThreadWidget extends StatelessWidget {
2828
final FilterMessageOption filterOption;
2929
final OnOpenMailboxMenuActionClick openMailboxAction;
3030
final OnEditThreadAction editThreadAction;
31-
final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction;
32-
final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction;
3331
final OnCancelEditThreadAction cancelEditThreadAction;
3432

3533
MobileAppBarThreadWidget({
@@ -42,8 +40,6 @@ class MobileAppBarThreadWidget extends StatelessWidget {
4240
required this.openMailboxAction,
4341
required this.editThreadAction,
4442
required this.cancelEditThreadAction,
45-
this.onPopupMenuFilterEmailAction,
46-
this.onContextMenuFilterEmailAction,
4743
});
4844

4945
@override
@@ -60,15 +56,32 @@ class MobileAppBarThreadWidget extends StatelessWidget {
6056
tooltipMessage: AppLocalizations.of(context).openFolderMenu,
6157
onTapActionCallback: openMailboxAction,
6258
),
63-
Expanded(
59+
Flexible(
6460
child: Padding(
6561
padding: const EdgeInsetsDirectional.only(start: 8, end: 16),
66-
child: Text(
67-
mailboxSelected?.getDisplayName(context) ?? '',
68-
maxLines: 1,
69-
overflow: CommonTextStyle.defaultTextOverFlow,
70-
softWrap: CommonTextStyle.defaultSoftWrap,
71-
style: Theme.of(context).textTheme.titleLarge
62+
child: Row(
63+
crossAxisAlignment: CrossAxisAlignment.end,
64+
children: [
65+
Flexible(
66+
child: Text(
67+
mailboxSelected?.getDisplayName(context) ?? '',
68+
maxLines: 1,
69+
overflow: CommonTextStyle.defaultTextOverFlow,
70+
softWrap: CommonTextStyle.defaultSoftWrap,
71+
style: Theme.of(context).textTheme.titleLarge
72+
)
73+
),
74+
Padding(
75+
padding: const EdgeInsetsDirectional.only(start: 8, bottom: 4),
76+
child: Text(
77+
filterOption.getTitle(context),
78+
style: Theme.of(context).textTheme.labelSmall?.copyWith(
79+
fontSize: 11,
80+
color: AppColor.colorContentEmail
81+
)
82+
),
83+
)
84+
],
7285
),
7386
),
7487
),

0 commit comments

Comments
 (0)