Skip to content

Commit

Permalink
TF-2421 Update new UI for selection mode 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 9, 2024
1 parent cc2b46e commit 105b997
Show file tree
Hide file tree
Showing 13 changed files with 190 additions and 158 deletions.
5 changes: 5 additions & 0 deletions assets/images/ic_checkbox_off.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.
5 changes: 5 additions & 0 deletions assets/images/ic_checkbox_on.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: 2 additions & 0 deletions core/lib/presentation/resources/image_paths.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,8 @@ class ImagePaths {
String get icUnsubscribe => _getImagePath('ic_unsubscribe.svg');
String get icRecoverDeletedMessages => _getImagePath('ic_recover_deleted_messages.svg');
String get icLogoTwakeWelcome => _getImagePath('ic_logo_twake_welcome.svg');
String get icCheckboxOn => _getImagePath('ic_checkbox_on.svg');
String get icCheckboxOff => _getImagePath('ic_checkbox_off.svg');

String _getImagePath(String imageName) {
return AssetsPaths.images + imageName;
Expand Down
4 changes: 3 additions & 1 deletion core/lib/presentation/views/image/avatar_builder.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,9 @@ class AvatarBuilder extends StatelessWidget {
tileMode: TileMode.decal,
colors: avatarColors ?? [])
: null,
color: bgColor ?? AppColor.avatarColor
color: avatarColors?.isNotEmpty == true
? null
: bgColor ?? AppColor.avatarColor
),
child: Text(
text ?? '',
Expand Down
2 changes: 0 additions & 2 deletions lib/features/base/widget/email_avatar_builder.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@

import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/views/image/avatar_builder.dart';
import 'package:flutter/material.dart';
import 'package:model/email/presentation_email.dart';
Expand All @@ -24,7 +23,6 @@ class EmailAvatarBuilder extends StatelessWidget {
fontSize: 21,
color: Colors.white
),
bgColor: AppColor.colorAvatar,
avatarColors: emailSelected.avatarColors,
);
}
Expand Down
29 changes: 21 additions & 8 deletions lib/features/search/email/presentation/search_email_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -489,6 +489,9 @@ class SearchEmailView extends GetWidget<SearchEmailController>
physics: const AlwaysScrollableScrollPhysics(),
key: const PageStorageKey('list_presentation_email_in_search_view'),
itemCount: listPresentationEmail.length,
padding: controller.selectionMode.value == SelectMode.INACTIVE
? null
: const EdgeInsets.symmetric(horizontal: 8),
itemBuilder: (context, index) {
final currentPresentationEmail = listPresentationEmail[index];
return Obx(() => EmailTileBuilder(
Expand All @@ -497,7 +500,11 @@ class SearchEmailView extends GetWidget<SearchEmailController>
searchQuery: controller.searchQuery,
isShowingEmailContent: controller.mailboxDashBoardController.selectedEmail.value?.id == currentPresentationEmail.id,
isSearchEmailRunning: true,
padding: SearchEmailUtils.getPaddingItemListMobile(context, controller.responsiveUtils),
padding: SearchEmailUtils.getPaddingItemListMobile(
context,
controller.responsiveUtils,
controller.selectionMode.value
),
mailboxContain: currentPresentationEmail.mailboxContain,
emailActionClick: (action, email) {
controller.pressEmailAction(
Expand All @@ -524,13 +531,19 @@ class SearchEmailView extends GetWidget<SearchEmailController>
));
},
separatorBuilder: (BuildContext context, int index) {
if (index < listPresentationEmail.length - 1) {
return Padding(
padding: SearchEmailUtils.getPaddingItemListMobile(context, controller.responsiveUtils),
child: const Divider());
} else {
return const SizedBox.shrink();
}
return Padding(
padding: ItemEmailTileStyles.getMobilePaddingDivider(
context: context,
responsiveUtils: controller.responsiveUtils,
selectMode: controller.selectionMode.value
),
child: Divider(
color: index < listPresentationEmail.length - 1 &&
controller.selectionMode.value == SelectMode.INACTIVE
? null
: Colors.white,
)
);
},
)
: ScrollbarListView(
Expand Down
15 changes: 12 additions & 3 deletions lib/features/search/email/presentation/utils/search_email_utils.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart';
import 'package:model/mailbox/select_mode.dart';

class SearchEmailUtils {
static EdgeInsets getPaddingAppBar(BuildContext context, ResponsiveUtils responsiveUtils) {
Expand Down Expand Up @@ -64,11 +65,19 @@ class SearchEmailUtils {
}
}

static EdgeInsets getPaddingItemListMobile(BuildContext context, ResponsiveUtils responsiveUtils) {
static EdgeInsets getPaddingItemListMobile(
BuildContext context,
ResponsiveUtils responsiveUtils,
SelectMode selectMode
) {
if (responsiveUtils.isPortraitMobile(context)) {
return const EdgeInsets.symmetric(horizontal: 16);
return EdgeInsets.symmetric(
horizontal: selectMode == SelectMode.ACTIVE ? 8 : 16
);
} else {
return const EdgeInsets.symmetric(horizontal: 32);
return EdgeInsets.symmetric(
horizontal: selectMode == SelectMode.ACTIVE ? 24 : 32
);
}
}

Expand Down
11 changes: 3 additions & 8 deletions lib/features/thread/presentation/mixin/base_email_item_tile.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,14 +271,9 @@ mixin BaseEmailItemTile {
fit: BoxFit.fill),
);
} else {
return Container(
alignment: Alignment.center,
color: Colors.transparent,
child: SvgPicture.asset(
email.isSelected
? imagePaths.icSelected
: imagePaths.icUnSelected,
width: 24, height: 24));
return SvgPicture.asset(
email.isSelected ? imagePaths.icCheckboxOn : imagePaths.icCheckboxOff
);
}
}

Expand Down
33 changes: 30 additions & 3 deletions lib/features/thread/presentation/styles/item_email_tile_styles.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@

import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:flutter/cupertino.dart';
import 'package:model/mailbox/select_mode.dart';

class ItemEmailTileStyles {

Expand All @@ -17,11 +18,37 @@ class ItemEmailTileStyles {
}
}

static EdgeInsetsGeometry getMobilePaddingItemList(BuildContext context, ResponsiveUtils responsiveUtils) {
static EdgeInsetsGeometry getMobilePaddingItemList({
required BuildContext context,
required ResponsiveUtils responsiveUtils,
SelectMode? selectMode
}) {
if (responsiveUtils.isPortraitMobile(context) || responsiveUtils.isLandscapeTablet(context)) {
return const EdgeInsets.symmetric(horizontal: 16);
return EdgeInsets.symmetric(
horizontal: selectMode == SelectMode.ACTIVE ? 8 : 16
);
} else {
return const EdgeInsets.symmetric(horizontal: 32);
return EdgeInsets.symmetric(
horizontal: selectMode == SelectMode.ACTIVE ? 24 : 32
);
}
}

static EdgeInsetsGeometry getMobilePaddingDivider({
required BuildContext context,
required ResponsiveUtils responsiveUtils,
SelectMode? selectMode
}) {
if (responsiveUtils.isPortraitMobile(context) || responsiveUtils.isLandscapeTablet(context)) {
return EdgeInsets.symmetric(
horizontal: 16,
vertical: selectMode == SelectMode.ACTIVE ? 2 : 0.0
);
} else {
return EdgeInsets.symmetric(
horizontal: 32,
vertical: selectMode == SelectMode.ACTIVE ? 2 : 0.0
);
}
}

Expand Down
123 changes: 69 additions & 54 deletions lib/features/thread/presentation/thread_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,54 +113,60 @@ class ThreadView extends GetWidget<ThreadController>
}
}),
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
Obx(() {
final selectionMode = controller.mailboxDashBoardController.currentSelectMode.value;
if (selectionMode == SelectMode.INACTIVE) {
return 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
),
),
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,
);
})
],
),
)
Obx(() {
final filterOption = controller.mailboxDashBoardController.filterMessageOption.value;
return TMailButtonWidget.fromIcon(
key: const Key('filter_email_button'),
icon: controller.imagePaths.icFilter,
iconColor: MobileAppBarThreadWidgetStyle.getFilterButtonColor(filterOption),
padding: EdgeInsets.zero,
backgroundColor: Colors.transparent,
tooltipMessage: AppLocalizations.of(context).filter_messages,
onTapActionCallback: controller.responsiveUtils.isScreenWithShortestSide(context)
? () => controller.openContextMenuAction(
context,
_filterMessagesCupertinoActionTile(
context,
filterOption
)
)
: null,
onTapActionAtPositionCallback: !controller.responsiveUtils.isScreenWithShortestSide(context)
? (position) => controller.openPopupMenuAction(
context,
position,
popupMenuFilterEmailActionTile(
context,
filterOption,
(option) => controller.filterMessagesAction(context, option)
)
)
: null,
);
})
],
),
);
} else {
return const SizedBox.shrink();
}
})
else
SearchBarView(
key: const Key('email_search_bar_view'),
Expand Down Expand Up @@ -419,15 +425,24 @@ class ThreadView extends GetWidget<ThreadController>
controller: controller.listEmailController,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: listPresentationEmail.length,
padding: controller.mailboxDashBoardController.currentSelectMode.value == SelectMode.INACTIVE
? null
: const EdgeInsets.symmetric(horizontal: 8),
itemBuilder: (context, index) => Obx(() => _buildEmailItemNotDraggable(context, listPresentationEmail[index])),
separatorBuilder: (context, index) {
if (index < listPresentationEmail.length - 1) {
return Padding(
padding: ItemEmailTileStyles.getMobilePaddingItemList(context, controller.responsiveUtils),
child: const Divider());
} else {
return const SizedBox.shrink();
}
return Padding(
padding: ItemEmailTileStyles.getMobilePaddingDivider(
context: context,
responsiveUtils: controller.responsiveUtils,
selectMode: controller.mailboxDashBoardController.currentSelectMode.value
),
child: Divider(
color: index < listPresentationEmail.length - 1 &&
controller.mailboxDashBoardController.currentSelectMode.value == SelectMode.INACTIVE
? null
: Colors.white,
)
);
},
)
: Focus(
Expand Down
26 changes: 25 additions & 1 deletion 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 @@ -102,7 +102,31 @@ class MobileAppBarThreadWidget extends StatelessWidget {
],
);
} else {
child = const SizedBox.shrink();
child = Row(
children: [
TMailButtonWidget.fromIcon(
key: const Key('cancel_selection_button'),
icon: _imagePaths.icArrowLeft,
backgroundColor: Colors.transparent,
iconColor: AppColor.primaryColor,
padding: const EdgeInsets.all(3),
tooltipMessage: AppLocalizations.of(context).cancel,
onTapActionCallback: cancelEditThreadAction,
),
Expanded(
child: Text(
AppLocalizations.of(context).count_email_selected(listEmailSelected.length),
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
fontSize: 16,
color: AppColor.primaryColor
)
)
),
],
);
}

return Container(
Expand Down
Loading

0 comments on commit 105b997

Please sign in to comment.