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

create icon open advanced_search_filter_overlay for web

Browse Source
This commit is contained in:
ManhNTX
2022-06-26 13:57:48 +07:00
committed by Dat H. Pham
parent 856d98f947
commit 01b3d879f0
2 changed files with 219 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart
+216 -198
View File
@@ -1,5 +1,6 @@
import 'package:core/core.dart'; import 'package:core/core.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_portal/flutter_portal.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:model/model.dart'; import 'package:model/model.dart';
@@ -12,6 +13,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/base_mailb
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/search_controller.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/search_controller.dart';
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/composer_overlay_state.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/composer_overlay_state.dart';
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/quick_search_filter.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/quick_search_filter.dart';
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_overlay.dart';
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/icon_open_advanced_search_widget.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/icon_open_advanced_search_widget.dart';
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/email_quick_search_item_tile_widget.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/email_quick_search_item_tile_widget.dart';
import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/recent_search_item_tile_widget.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/recent_search_item_tile_widget.dart';
@@ -49,66 +51,68 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
desktop: const SizedBox.shrink(), desktop: const SizedBox.shrink(),
), ),
drawerEnableOpenDragGesture: responsiveUtils.isMobile(context) || responsiveUtils.isTablet(context), drawerEnableOpenDragGesture: responsiveUtils.isMobile(context) || responsiveUtils.isTablet(context),
body: Stack(children: [ body: Portal(
ResponsiveWidget( child: Stack(children: [
responsiveUtils: responsiveUtils, ResponsiveWidget(
desktop: Column(children: [ responsiveUtils: responsiveUtils,
Row(children: [ desktop: Column(children: [
Container( Row(children: [
width: responsiveUtils.defaultSizeMenu, Container(
color: Colors.white, width: responsiveUtils.defaultSizeMenu,
padding: const EdgeInsets.only(top: 25, bottom: 25, left: 28), color: Colors.white,
child: Row(children: [ padding: const EdgeInsets.only(top: 25, bottom: 25, left: 28),
(SloganBuilder(arrangedByHorizontal: true) child: Row(children: [
..setSloganText(AppLocalizations.of(context).app_name) (SloganBuilder(arrangedByHorizontal: true)
..setSloganTextAlign(TextAlign.center) ..setSloganText(AppLocalizations.of(context).app_name)
..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)) ..setSloganTextAlign(TextAlign.center)
..setSizeLogo(24) ..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold))
..setLogo(imagePaths.icLogoTMail)) ..setSizeLogo(24)
.build(), ..setLogo(imagePaths.icLogoTMail))
Obx(() { .build(),
if (controller.appInformation.value != null) { Obx(() {
return Padding(padding: const EdgeInsets.only(top: 6), if (controller.appInformation.value != null) {
child: Text( return Padding(padding: const EdgeInsets.only(top: 6),
'v.${controller.appInformation.value!.version}', child: Text(
textAlign: TextAlign.center, 'v.${controller.appInformation.value!.version}',
style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500), textAlign: TextAlign.center,
)); style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500),
} else { ));
return const SizedBox.shrink(); } else {
} return const SizedBox.shrink();
}), }
]) }),
), ])
Expanded(child: Padding( ),
padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10), Expanded(child: Padding(
child: _buildRightHeader(context))) padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10),
child: _buildRightHeader(context)))
]),
Expanded(child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeMenu),
Expanded(child: _wrapContainerForThreadAndEmail(context))
],
))
]), ]),
Expanded(child: Row( tabletLarge: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeMenu), SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeDrawer),
Expanded(child: _wrapContainerForThreadAndEmail(context)) Expanded(child: _wrapContainerForThreadAndEmail(context))
], ],
)) ),
]), tablet: ThreadView(),
tabletLarge: Row( mobile: ThreadView(),
crossAxisAlignment: CrossAxisAlignment.start, ),
children: [ Obx(() => controller.composerOverlayState.value == ComposerOverlayState.active
SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeDrawer), ? ComposerView()
Expanded(child: _wrapContainerForThreadAndEmail(context)) : const SizedBox.shrink()),
], Obx(() => controller.isNetworkConnectionAvailable()
), ? const SizedBox.shrink()
tablet: ThreadView(), : Align(alignment: Alignment.bottomCenter, child: buildNetworkConnectionWidget(context))),
mobile: ThreadView(), ]),
), ),
Obx(() => controller.composerOverlayState.value == ComposerOverlayState.active
? ComposerView()
: const SizedBox.shrink()),
Obx(() => controller.isNetworkConnectionAvailable()
? const SizedBox.shrink()
: Align(alignment: Alignment.bottomCenter, child: buildNetworkConnectionWidget(context))),
]),
); );
} }
@@ -412,157 +416,171 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
borderRadius: BorderRadius.all(Radius.circular(10)), borderRadius: BorderRadius.all(Radius.circular(10)),
color: AppColor.colorBgSearchBar), color: AppColor.colorBgSearchBar),
height: 45, height: 45,
child: QuickSearchInputForm<PresentationEmail, RecentSearch>( child: PortalTarget(
textFieldConfiguration: QuickSearchTextFieldConfiguration( visible: controller.searchController.isAdvancedSearchViewOpen.isTrue,
controller: searchController.searchInputController, anchor: const Aligned(
autofocus: true, follower: Alignment.topLeft,
focusNode: searchController.searchFocus, target: Alignment.bottomLeft,
textInputAction: TextInputAction.done, widthFactor: 1,
onSubmitted: (keyword) { backup: Aligned(
if (keyword.trim().isNotEmpty) { follower: Alignment.bottomLeft,
searchController.saveRecentSearch(RecentSearch.now(keyword)); target: Alignment.topLeft,
} widthFactor: 1,
controller.searchEmail(context, keyword);
},
onChanged: (query) {
log('MailboxDashBoardView::_buildSearchForm(): onChanged: $query');
searchController.onChangeTextSearch(query);
},
decoration: InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
contentPadding: EdgeInsets.zero,
hintText: AppLocalizations.of(context).search_mail,
hintStyle: const TextStyle(
color: AppColor.colorHintSearchBar,
fontSize: 17.0),
labelStyle: const TextStyle(
color: AppColor.colorHintSearchBar,
fontSize: 17.0)
),
leftButton: buildIconWeb(
icon: SvgPicture.asset(
imagePaths.icSearchBar,
width: 16,
height: 16,
fit: BoxFit.fill),
onTap: () {
final keyword = searchController.searchInputController.text;
if (keyword.trim().isNotEmpty) {
searchController.saveRecentSearch(RecentSearch.now(keyword));
}
controller.searchEmail(context, keyword);
}),
clearTextButton: buildIconWeb(
icon: SvgPicture.asset(
imagePaths.icClearTextSearch,
width: 16,
height: 16,
fit: BoxFit.fill),
onTap: () {
searchController.clearTextSearch();
}),
rightButton: IconOpenAdvancedSearchWidget(context)
), ),
suggestionsBoxDecoration: QuickSearchSuggestionsBoxDecoration( ),
color: Colors.white, portalFollower:const AdvancedSearchFilterOverlay(),
borderRadius: const BorderRadius.all(Radius.circular(16)), child: QuickSearchInputForm<PresentationEmail, RecentSearch>(
constraints: BoxConstraints( textFieldConfiguration: QuickSearchTextFieldConfiguration(
maxWidth: responsiveUtils.isDesktop(context) controller: controller.searchController.searchInputController,
? 556 autofocus: true,
: double.infinity), focusNode: controller.searchController.searchFocus,
), textInputAction: TextInputAction.done,
debounceDuration: const Duration(milliseconds: 500), onSubmitted: (keyword) {
listActionButton: const [
QuickSearchFilter.hasAttachment,
QuickSearchFilter.last7Days,
QuickSearchFilter.fromMe,
],
actionButtonBuilder: (context, filterAction) {
if (filterAction is QuickSearchFilter) {
return buildQuickSearchFilterButton(context, filterAction);
}
return const SizedBox.shrink();
},
buttonActionCallback: (filterAction) {
if (filterAction is QuickSearchFilter) {
controller.selectQuickSearchFilter(
quickSearchFilter: filterAction,
fromSuggestionBox: true,
);
}
},
listActionPadding: const EdgeInsets.only(
left: 24,
top: 24,
right: 24,
bottom: 16),
titleHeaderRecent: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
child: Text(AppLocalizations.of(context).recent,
style: const TextStyle(fontSize: 13.0,
color: AppColor.colorTextButtonHeaderThread,
fontWeight: FontWeight.w500)
)
),
buttonShowAllResult: (context, keyword) {
if (keyword is String) {
return InkWell(
onTap: () {
if (keyword.trim().isNotEmpty) { if (keyword.trim().isNotEmpty) {
searchController.saveRecentSearch(RecentSearch.now(keyword)); searchController.saveRecentSearch(RecentSearch.now(keyword));
} }
controller.searchEmail(context, keyword); controller.searchEmail(context, keyword);
}, },
child: Padding( onChanged: (query) {
padding: const EdgeInsets.symmetric( log('MailboxDashBoardView::_buildSearchForm(): onChanged: $query');
horizontal: 24, controller.searchController.onChangeTextSearch(query);
vertical: 14), },
child: Row(children: [ decoration: InputDecoration(
Text(AppLocalizations.of(context).showingResultsFor, border: InputBorder.none,
style: const TextStyle(fontSize: 13.0, focusedBorder: InputBorder.none,
color: AppColor.colorTextButtonHeaderThread, enabledBorder: InputBorder.none,
fontWeight: FontWeight.w500) contentPadding: EdgeInsets.zero,
), hintText: AppLocalizations.of(context).search_mail,
const SizedBox(width: 4), hintStyle: const TextStyle(
Expanded(child: Text('"$keyword"', color: AppColor.colorHintSearchBar,
style: const TextStyle( fontSize: 17.0),
fontSize: 13.0, labelStyle: const TextStyle(
color: Colors.black, color: AppColor.colorHintSearchBar,
fontWeight: FontWeight.w500))) fontSize: 17.0)
])
), ),
); leftButton: buildIconWeb(
} else { icon: SvgPicture.asset(
imagePaths.icSearchBar,
width: 16,
height: 16,
fit: BoxFit.fill),
onTap: () {
final keyword = controller.searchController.searchInputController.text;
if (keyword.trim().isNotEmpty) {
controller.searchController.saveRecentSearch(RecentSearch.now(keyword));
}
controller.searchEmail(context, keyword);
}),
clearTextButton: buildIconWeb(
icon: SvgPicture.asset(
imagePaths.icClearTextSearch,
width: 16,
height: 16,
fit: BoxFit.fill),
onTap: () {
controller.searchController.clearTextSearch();
}),
rightButton: IconOpenAdvancedSearchWidget(context)
),
suggestionsBoxDecoration: QuickSearchSuggestionsBoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(Radius.circular(16)),
constraints: BoxConstraints(
maxWidth: responsiveUtils.isDesktop(context)
? 556
: double.infinity),
),
debounceDuration: const Duration(milliseconds: 500),
listActionButton: const [
QuickSearchFilter.hasAttachment,
QuickSearchFilter.last7Days,
QuickSearchFilter.fromMe,
],
actionButtonBuilder: (context, filterAction) {
if (filterAction is QuickSearchFilter) {
return buildQuickSearchFilterButton(context, filterAction);
}
return const SizedBox.shrink(); return const SizedBox.shrink();
} },
}, buttonActionCallback: (filterAction) {
loadingBuilder: (context) => Padding( if (filterAction is QuickSearchFilter) {
padding: const EdgeInsets.only(bottom: 16), controller.searchController.selectQuickSearchFilter(
child: loadingWidget, quickSearchFilter: filterAction,
), fromSuggestionBox: true,
fetchRecentActionCallback: (pattern) async { );
return searchController.getAllRecentSearchAction(pattern); }
}, },
itemRecentBuilder: (context, recent) { listActionPadding: const EdgeInsets.only(
return RecentSearchItemTileWidget(recent); left: 24,
}, top: 24,
onRecentSelected: (recent) { right: 24,
searchController.searchInputController.text = recent.value; bottom: 16),
controller.searchEmail(context, recent.value); titleHeaderRecent: Padding(
}, padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
suggestionsCallback: (pattern) async { child: Text(AppLocalizations.of(context).recent,
return controller.quickSearchEmails(); style: const TextStyle(fontSize: 13.0,
}, color: AppColor.colorTextButtonHeaderThread,
itemBuilder: (context, email) { fontWeight: FontWeight.w500)
return EmailQuickSearchItemTileWidget( )
email, controller.selectedMailbox.value); ),
}, buttonShowAllResult: (context, keyword) {
onSuggestionSelected: (presentationEmail) async { if (keyword is String) {
controller.dispatchAction( return InkWell(
OpenEmailDetailedAction(context, presentationEmail)); onTap: () {
}), if (keyword.trim().isNotEmpty) {
controller.searchController.saveRecentSearch(RecentSearch.now(keyword));
}
controller.searchEmail(context, keyword);
},
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 24,
vertical: 14),
child: Row(children: [
Text(AppLocalizations.of(context).showingResultsFor,
style: const TextStyle(fontSize: 13.0,
color: AppColor.colorTextButtonHeaderThread,
fontWeight: FontWeight.w500)
),
const SizedBox(width: 4),
Expanded(child: Text('"$keyword"',
style: const TextStyle(
fontSize: 13.0,
color: Colors.black,
fontWeight: FontWeight.w500)))
])
),
);
} else {
return const SizedBox.shrink();
}
},
loadingBuilder: (context) => Padding(
padding: const EdgeInsets.only(bottom: 16),
child: loadingWidget,
),
fetchRecentActionCallback: (pattern) async {
return controller.searchController.getAllRecentSearchAction(pattern);
},
itemRecentBuilder: (context, recent) {
return RecentSearchItemTileWidget(recent);
},
onRecentSelected: (recent) {
controller.searchController.searchInputController.text = recent.value;
controller.searchEmail(context, recent.value);
},
suggestionsCallback: (pattern) async {
return controller.searchController.quickSearchEmails();
},
itemBuilder: (context, email) {
return EmailQuickSearchItemTileWidget(
email, controller.selectedMailbox.value);
},
onSuggestionSelected: (presentationEmail) async {
controller.dispatchAction(
OpenEmailDetailedAction(context, presentationEmail));
}),
),
)), )),
const SizedBox(width: 16), const SizedBox(width: 16),
] ]
lib/features/mailbox_dashboard/presentation/widgets/advanced_search/icon_open_advanced_search_widget.dart
+3 -2
View File
@@ -14,7 +14,6 @@ class IconOpenAdvancedSearchWidget extends StatelessWidget {
}) : super(key: key); }) : super(key: key);
final _imagePaths = Get.find<ImagePaths>(); final _imagePaths = Get.find<ImagePaths>();
final _responsiveUtils = Get.find<ResponsiveUtils>();
final controller = Get.find<SearchController>(); final controller = Get.find<SearchController>();
final BuildContext _parentContext; final BuildContext _parentContext;
@@ -30,7 +29,9 @@ class IconOpenAdvancedSearchWidget extends StatelessWidget {
: AppColor.colorFilterMessageDisabled, : AppColor.colorFilterMessageDisabled,
width: 16, width: 16,
height: 16), height: 16),
onTap: _responsiveUtils.isMobile(context) ? () {controller.showAdvancedFilterView(_parentContext);} : null), onTap: () {
controller.showAdvancedFilterView(_parentContext);
}),
); );
} }
} }