Skip to content

Commit

Permalink
TF-2421 Update new UI for SearchBar/FilterEmail in email list view
Browse files Browse the repository at this point in the history 
Signed-off-by: dab246 <[email protected]>
  • Loading branch information
@dab246
dab246 committed Jan 5, 2024
1 parent 062c124 commit 1972730
Show file tree
Hide file tree
Showing 8 changed files with 121 additions and 53 deletions.
6 changes: 4 additions & 2 deletions assets/images/ic_filter.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion core/lib/presentation/extensions/color_extension.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ extension AppColor on Color {
static const colorContentEmail = Color(0xFF6D7885);
static const colorTextButton = Color(0xFF007AFF);
static const colorHintSearchBar = Color(0xFF818C99);
static const colorBgSearchBar = Color(0x99EBEDF0);
static const colorBgSearchBar = Color(0xFFF2F3F5);
static const colorBgIdentityButton = Color(0x00EBEDF0);
static const colorShadowBgContentEmail = Color(0x14000000);
static const colorDividerMailbox = Color(0x1F000000);
Expand Down
3 changes: 3 additions & 0 deletions core/lib/presentation/utils/theme_utils.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@ class ThemeUtils {
fontWeight: FontWeight.w600,
fontSize: 32,
),
labelSmall: TextStyle(
fontWeight: FontWeight.normal
)
);
}

Expand Down
57 changes: 29 additions & 28 deletions core/lib/presentation/views/search/search_bar_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,35 +32,36 @@ class SearchBarView extends StatelessWidget {
splashColor: Colors.transparent,
borderRadius: const BorderRadius.all(Radius.circular(12)),
child: Container(
alignment: Alignment.center,
height: 40,
width: double.infinity,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12)),
color: AppColor.colorBgSearchBar
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TMailButtonWidget.fromIcon(
icon: imagePaths.icSearchBar,
backgroundColor: Colors.transparent,
onTapActionCallback: onOpenSearchViewAction
alignment: Alignment.center,
height: 44,
width: double.infinity,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12)),
color: AppColor.colorBgSearchBar
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TMailButtonWidget.fromIcon(
icon: imagePaths.icSearchBar,
iconColor: AppColor.colorAttachmentIcon,
backgroundColor: Colors.transparent,
onTapActionCallback: onOpenSearchViewAction
),
Expanded(
child: Text(
hintTextSearch ?? '',
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap,
style: Theme.of(context).textTheme.labelSmall?.copyWith(
fontSize: 15,
color: AppColor.colorHintSearchBar
)
),
Expanded(
child: Text(
hintTextSearch ?? '',
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap,
style: const TextStyle(
fontSize: 17,
color: AppColor.colorHintSearchBar
)
),
)
]
),
)
]
),
),
),
);
Expand Down
4 changes: 2 additions & 2 deletions lib/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ class MobileAppBarThreadWidgetStyle {

static EdgeInsetsGeometry getPadding(BuildContext context, ResponsiveUtils responsiveUtils) {
if (responsiveUtils.isPortraitMobile(context) || responsiveUtils.isLandscapeTablet(context)) {
return const EdgeInsets.symmetric(horizontal: 16, vertical: 8);
return const EdgeInsetsDirectional.only(start: 8, end: 16, top: 8, bottom: 8);
} else {
return const EdgeInsets.symmetric(horizontal: 32, vertical: 8);
return const EdgeInsetsDirectional.only(start: 24, end: 32, top: 8, bottom: 8);
}
}

Expand Down
65 changes: 58 additions & 7 deletions lib/features/thread/presentation/thread_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import 'package:tmail_ui_user/features/quotas/presentation/widget/quotas_banner_
import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
import 'package:tmail_ui_user/features/thread/domain/state/search_email_state.dart';
import 'package:tmail_ui_user/features/thread/presentation/model/delete_action_type.dart';
import 'package:tmail_ui_user/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart';
import 'package:tmail_ui_user/features/thread/presentation/styles/banner_delete_all_spam_emails_styles.dart';
import 'package:tmail_ui_user/features/thread/presentation/styles/banner_empty_trash_styles.dart';
import 'package:tmail_ui_user/features/thread/presentation/styles/item_email_tile_styles.dart';
Expand Down Expand Up @@ -110,13 +111,63 @@ class ThreadView extends GetWidget<ThreadController>
return const SizedBox.shrink();
}
}),
SearchBarView(
key: const Key('email_search_bar_view'),
imagePaths: controller.imagePaths,
margin: _getBannerMargin(context, controller.responsiveUtils),
hintTextSearch: AppLocalizations.of(context).search_emails,
onOpenSearchViewAction: controller.goToSearchView
),
if (PlatformInfo.isMobile)
Padding(
padding: _getBannerMargin(context, controller.responsiveUtils),
child: Row(
children: [
Expanded(
child: SearchBarView(
key: const Key('email_search_bar_view'),
imagePaths: controller.imagePaths,
margin: const EdgeInsetsDirectional.only(end: 8),
hintTextSearch: AppLocalizations.of(context).search_emails,
onOpenSearchViewAction: controller.goToSearchView
),
),
Obx(() {
return TMailButtonWidget.fromIcon(
key: const Key('filter_email_button'),
icon: controller.imagePaths.icFilter,
iconColor: MobileAppBarThreadWidgetStyle.getFilterButtonColor(
controller.mailboxDashBoardController.filterMessageOption.value
),
padding: EdgeInsets.zero,
backgroundColor: Colors.transparent,
tooltipMessage: AppLocalizations.of(context).filter_messages,
onTapActionCallback: controller.responsiveUtils.isScreenWithShortestSide(context)
? () => controller.openContextMenuAction(
context,
_filterMessagesCupertinoActionTile(
context,
controller.mailboxDashBoardController.filterMessageOption.value
)
)
: null,
onTapActionAtPositionCallback: !controller.responsiveUtils.isScreenWithShortestSide(context)
? (position) => controller.openPopupMenuAction(
context,
position,
popupMenuFilterEmailActionTile(
context,
controller.mailboxDashBoardController.filterMessageOption.value,
(option) => controller.filterMessagesAction(context, option)
)
)
: null,
);
})
],
),
)
else
SearchBarView(
key: const Key('email_search_bar_view'),
imagePaths: controller.imagePaths,
margin: _getBannerMargin(context, controller.responsiveUtils),
hintTextSearch: AppLocalizations.of(context).search_emails,
onOpenSearchViewAction: controller.goToSearchView
),
SpamReportBannerWidget(
spamReportController: controller.mailboxDashBoardController.spamReportController,
margin: _getBannerMargin(context, controller.responsiveUtils),
Expand Down
2 changes: 0 additions & 2 deletions lib/features/thread/presentation/widgets/app_bar/app_bar_thread_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,6 @@ class AppBarThreadWidget extends StatelessWidget {
openMailboxAction: openMailboxAction,
editThreadAction: editThreadAction,
cancelEditThreadAction: cancelEditThreadAction,
onPopupMenuFilterEmailAction: onPopupMenuFilterEmailAction,
onContextMenuFilterEmailAction: onContextMenuFilterEmailAction,
);
}
}
Expand Down
35 changes: 24 additions & 11 deletions lib/features/thread/presentation/widgets/app_bar/mobile_app_bar_thread_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@ class MobileAppBarThreadWidget extends StatelessWidget {
final FilterMessageOption filterOption;
final OnOpenMailboxMenuActionClick openMailboxAction;
final OnEditThreadAction editThreadAction;
final OnPopupMenuFilterEmailAction? onPopupMenuFilterEmailAction;
final OnContextMenuFilterEmailAction? onContextMenuFilterEmailAction;
final OnCancelEditThreadAction cancelEditThreadAction;

MobileAppBarThreadWidget({
Expand All @@ -42,8 +40,6 @@ class MobileAppBarThreadWidget extends StatelessWidget {
required this.openMailboxAction,
required this.editThreadAction,
required this.cancelEditThreadAction,
this.onPopupMenuFilterEmailAction,
this.onContextMenuFilterEmailAction,
});

@override
Expand All @@ -60,15 +56,32 @@ class MobileAppBarThreadWidget extends StatelessWidget {
tooltipMessage: AppLocalizations.of(context).openFolderMenu,
onTapActionCallback: openMailboxAction,
),
Expanded(
Flexible(
child: Padding(
padding: const EdgeInsetsDirectional.only(start: 8, end: 16),
child: Text(
mailboxSelected?.getDisplayName(context) ?? '',
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap,
style: Theme.of(context).textTheme.titleLarge
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Flexible(
child: Text(
mailboxSelected?.getDisplayName(context) ?? '',
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap,
style: Theme.of(context).textTheme.titleLarge
)
),
Padding(
padding: const EdgeInsetsDirectional.only(start: 8, bottom: 4),
child: Text(
filterOption.getTitle(context),
style: Theme.of(context).textTheme.labelSmall?.copyWith(
fontSize: 11,
color: AppColor.colorContentEmail
)
),
)
],
),
),
),
Expand Down

0 comments on commit 1972730

Please sign in to comment.