TF-682 Update padding quick search form for tablet landscape

This commit is contained in:
dab246
2022-07-01 19:54:49 +07:00
committed by Dat H. Pham
parent 6b58073790
commit 93177d042d
8 changed files with 162 additions and 156 deletions
@@ -116,4 +116,12 @@ class ResponsiveUtils {
isTablet(context); isTablet(context);
} }
} }
bool isMailboxDashboardSplitView(BuildContext context) {
if (BuildUtils.isWeb) {
return isTabletLarge(context);
} else {
return isLandscapeTablet(context) || isDesktop(context);
}
}
} }
@@ -1120,19 +1120,18 @@ class _SuggestionsListState<T, R> extends State<_SuggestionsList<T, R>>
final loadingWidget = widget.loadingBuilder != null final loadingWidget = widget.loadingBuilder != null
? widget.loadingBuilder!(context) ? widget.loadingBuilder!(context)
: Align( : Align(
alignment: Alignment.center, alignment: Alignment.center,
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0), padding: const EdgeInsets.symmetric(vertical: 8.0),
child: CircularProgressIndicator(), child: CircularProgressIndicator(),
), ),
); );
final listAction = Row( final listAction = Wrap(
mainAxisSize: MainAxisSize.min,
children: widget.listActionButton!.map((dynamic action) { children: widget.listActionButton!.map((dynamic action) {
if (widget.actionButtonBuilder != null) { if (widget.actionButtonBuilder != null) {
return Padding( return Padding(
padding: const EdgeInsets.only(right: 8), padding: const EdgeInsets.only(right: 8, bottom: kIsWeb ? 8 : 0),
child: InkWell( child: InkWell(
child: widget.actionButtonBuilder!(context, action), child: widget.actionButtonBuilder!(context, action),
borderRadius: BorderRadius.all(Radius.circular(10)), borderRadius: BorderRadius.all(Radius.circular(10)),
@@ -1202,19 +1201,18 @@ class _SuggestionsListState<T, R> extends State<_SuggestionsList<T, R>>
final loadingWidget = widget.loadingBuilder != null final loadingWidget = widget.loadingBuilder != null
? widget.loadingBuilder!(context) ? widget.loadingBuilder!(context)
: Align( : Align(
alignment: Alignment.center, alignment: Alignment.center,
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0), padding: const EdgeInsets.symmetric(vertical: 8.0),
child: CircularProgressIndicator(), child: CircularProgressIndicator(),
), ),
); );
final listAction = Row( final listAction = Wrap(
mainAxisSize: MainAxisSize.min,
children: widget.listActionButton!.map((dynamic action) { children: widget.listActionButton!.map((dynamic action) {
if (widget.actionButtonBuilder != null) { if (widget.actionButtonBuilder != null) {
return Padding( return Padding(
padding: const EdgeInsets.only(right: 8), padding: EdgeInsets.only(right: 8, bottom: kIsWeb ? 8 : 0),
child: InkWell( child: InkWell(
child: widget.actionButtonBuilder!(context, action), child: widget.actionButtonBuilder!(context, action),
borderRadius: BorderRadius.all(Radius.circular(10)), borderRadius: BorderRadius.all(Radius.circular(10)),
+27 -33
View File
@@ -37,7 +37,7 @@ class EmailView extends GetWidget<EmailController> with NetworkConnectionMixin {
? AppColor.colorBgDesktop ? AppColor.colorBgDesktop
: Colors.white, : Colors.white,
body: Row(children: [ body: Row(children: [
if (_isMailboxDashboardSplitView(context)) if (responsiveUtils.isMailboxDashboardSplitView(context))
const VerticalDivider(color: AppColor.lineItemListColor, width: 1, thickness: 0.2), const VerticalDivider(color: AppColor.lineItemListColor, width: 1, thickness: 0.2),
Expanded(child: SafeArea( Expanded(child: SafeArea(
right: responsiveUtils.isLandscapeMobile(context), right: responsiveUtils.isLandscapeMobile(context),
@@ -79,15 +79,6 @@ class EmailView extends GetWidget<EmailController> with NetworkConnectionMixin {
); );
} }
bool _isMailboxDashboardSplitView(BuildContext context) {
if (BuildUtils.isWeb) {
return responsiveUtils.isTabletLarge(context);
} else {
return responsiveUtils.isLandscapeTablet(context)
|| responsiveUtils.isDesktop(context);
}
}
Widget _buildDivider({EdgeInsets? edgeInsets}){ Widget _buildDivider({EdgeInsets? edgeInsets}){
return Padding( return Padding(
padding: edgeInsets ?? const EdgeInsets.symmetric(horizontal: 16), padding: edgeInsets ?? const EdgeInsets.symmetric(horizontal: 16),
@@ -138,31 +129,34 @@ class EmailView extends GetWidget<EmailController> with NetworkConnectionMixin {
} }
Widget _buildEmailBody(BuildContext context) { Widget _buildEmailBody(BuildContext context) {
return Container( return GestureDetector(
color: Colors.white, onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
margin: EdgeInsets.zero, child: Container(
alignment: Alignment.topCenter, color: Colors.white,
child: Obx(() { margin: EdgeInsets.zero,
if (controller.currentEmail != null) { alignment: Alignment.topCenter,
if (kIsWeb) { child: Obx(() {
return _buildEmailMessage(context); if (controller.currentEmail != null) {
if (kIsWeb) {
return _buildEmailMessage(context);
} else {
return SingleChildScrollView(
physics : const ClampingScrollPhysics(),
child: Container(
margin: EdgeInsets.zero,
width: double.infinity,
alignment: Alignment.center,
padding: EdgeInsets.zero,
color: Colors.white,
child: _buildEmailMessage(context)
)
);
}
} else { } else {
return SingleChildScrollView( return Center(child: _buildEmailEmpty(context));
physics : const ClampingScrollPhysics(),
child: Container(
margin: EdgeInsets.zero,
width: double.infinity,
alignment: Alignment.center,
padding: EdgeInsets.zero,
color: Colors.white,
child: _buildEmailMessage(context)
)
);
} }
} else { })
return Center(child: _buildEmailEmpty(context)); ),
}
})
); );
} }
@@ -24,25 +24,26 @@ abstract class BaseMailboxDashBoardView extends GetWidget<MailboxDashBoardContro
quickSearchFilter: filter, quickSearchFilter: filter,
); );
return Container( return Chip(
decoration: BoxDecoration( labelPadding: const EdgeInsets.only(top: 2, bottom: 2, right: 10),
borderRadius: BorderRadius.circular(10), label: Text(
color: filter.getBackgroundColor(quickSearchFilterSelected: isQuickSearchFilterSelected)), filter.getTitle(context, receiveTimeType: controller.searchController.emailReceiveTimeType.value),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), maxLines: 1,
child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [ overflow: TextOverflow.ellipsis,
SvgPicture.asset( style: filter.getTextStyle(quickSearchFilterSelected: isQuickSearchFilterSelected),
filter.getIcon(imagePaths, quickSearchFilterSelected: isQuickSearchFilterSelected), ),
width: 16, avatar: SvgPicture.asset(
height: 16, filter.getIcon(imagePaths, quickSearchFilterSelected: isQuickSearchFilterSelected),
fit: BoxFit.fill), width: 16,
const SizedBox(width: 4), height: 16,
Text( fit: BoxFit.fill),
filter.getTitle(context, receiveTimeType: controller.searchController.emailReceiveTimeType.value), labelStyle: filter.getTextStyle(quickSearchFilterSelected: isQuickSearchFilterSelected),
maxLines: 1, backgroundColor: filter.getBackgroundColor(quickSearchFilterSelected: isQuickSearchFilterSelected),
overflow: TextOverflow.ellipsis, shape: RoundedRectangleBorder(
style: filter.getTextStyle(quickSearchFilterSelected: isQuickSearchFilterSelected), borderRadius: BorderRadius.circular(10),
) side: BorderSide(color: filter.getBackgroundColor(quickSearchFilterSelected: isQuickSearchFilterSelected)),
])); ),
);
}); });
} }
} }
@@ -149,6 +149,7 @@ class SearchController extends BaseController {
searchInputController.clear(); searchInputController.clear();
cleanSearchFilter(); cleanSearchFilter();
searchFocus.unfocus(); searchFocus.unfocus();
searchState.value = searchState.value.disableSearchState();
} }
}); });
} }
@@ -520,10 +520,7 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
} }
}, },
listActionPadding: const EdgeInsets.only( listActionPadding: const EdgeInsets.only(
left: 24, left: 24, right: 24, top: 20, bottom: 12),
top: 24,
right: 24,
bottom: 16),
titleHeaderRecent: Padding( titleHeaderRecent: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8), padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
child: Text(AppLocalizations.of(context).recent, child: Text(AppLocalizations.of(context).recent,
@@ -22,66 +22,75 @@ class EmailQuickSearchItemTileWidget extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Padding( return LayoutBuilder(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14), builder: (context, constraints) {
child: Row( final maxWidthItem = constraints.maxWidth;
crossAxisAlignment: CrossAxisAlignment.start, log('EmailQuickSearchItemTileWidget::build(): maxWidthItem: $maxWidthItem');
mainAxisAlignment: MainAxisAlignment.center, return Padding(
children: [ padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
Padding( child: Row(
padding: const EdgeInsets.only(top: 2), crossAxisAlignment: CrossAxisAlignment.start,
child: SvgPicture.asset( mainAxisAlignment: MainAxisAlignment.center,
_presentationEmail.hasStarred ? imagePath.icStar : imagePath.icUnStar, children: [
width: 18, height: 18, fit: BoxFit.fill), Padding(
padding: const EdgeInsets.only(top: 2),
child: SvgPicture.asset(
_presentationEmail.hasStarred ? imagePath.icStar : imagePath.icUnStar,
width: 18, height: 18, fit: BoxFit.fill),
),
const SizedBox(width: 8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(mainAxisAlignment: MainAxisAlignment.center, children: [
Container(
constraints: BoxConstraints(maxWidth: maxWidthItem / 3),
child: Text(_getInformationSender(),
maxLines: 1,
overflow: BuildUtils.isWeb ? null : TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Colors.black)),
),
const SizedBox(width: 16),
Expanded(
child: Text(_presentationEmail.getEmailTitle(),
maxLines: 1,
overflow: BuildUtils.isWeb ? null : TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.normal,
color: Colors.black)),
),
if (_presentationEmail.hasAttachment == true)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: SvgPicture.asset(imagePath.icAttachment, width: 14, height: 14, fit: BoxFit.fill),
),
Text(_presentationEmail.getReceivedAt(Localizations.localeOf(context).toLanguageTag()),
textAlign: TextAlign.right,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.normal,
color: Colors.black))
]),
const SizedBox(height: 3),
Text(_presentationEmail.getPartialContent(),
maxLines: 1,
overflow: BuildUtils.isWeb ? null : TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.normal,
color: AppColor.colorContentEmail))
]
),
),
],
), ),
const SizedBox(width: 8), );
Expanded( }
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(mainAxisAlignment: MainAxisAlignment.center, children: [
Text(_getInformationSender(),
maxLines: 1,
overflow: BuildUtils.isWeb ? null : TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Colors.black)),
const SizedBox(width: 16),
Expanded(
child: Text(_presentationEmail.getEmailTitle(),
maxLines: 1,
overflow: BuildUtils.isWeb ? null : TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.normal,
color: Colors.black)),
),
if (_presentationEmail.hasAttachment == true)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: SvgPicture.asset(imagePath.icAttachment, width: 14, height: 14, fit: BoxFit.fill),
),
Text(_presentationEmail.getReceivedAt(Localizations.localeOf(context).toLanguageTag()),
textAlign: TextAlign.right,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.normal,
color: Colors.black))
]),
const SizedBox(height: 3),
Text(_presentationEmail.getPartialContent(),
maxLines: 1,
overflow: BuildUtils.isWeb ? null : TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.normal,
color: AppColor.colorContentEmail))
]
),
),
],
),
); );
} }
@@ -294,10 +294,7 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
} }
}, },
listActionPadding: const EdgeInsets.only( listActionPadding: const EdgeInsets.only(
left: 24, left: 24, right: 24, top: 20, bottom: 12),
top: 24,
right: 24,
bottom: 16),
titleHeaderRecent: Padding( titleHeaderRecent: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8), padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
child: Text(AppLocalizations.of(context).recent, child: Text(AppLocalizations.of(context).recent,
@@ -787,25 +784,26 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
quickSearchFilter: filter, quickSearchFilter: filter,
); );
return Container( return Chip(
decoration: BoxDecoration( labelPadding: const EdgeInsets.only(top: 2, bottom: 2, right: 10),
borderRadius: BorderRadius.circular(10), label: Text(
color: filter.getBackgroundColor(quickSearchFilterSelected: quickSearchFilterSelected)), filter.getTitle(context),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), maxLines: 1,
child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [ overflow: TextOverflow.ellipsis,
SvgPicture.asset( style: filter.getTextStyle(quickSearchFilterSelected: quickSearchFilterSelected),
filter.getIcon(_imagePaths, quickSearchFilterSelected: quickSearchFilterSelected), ),
width: 16, avatar: SvgPicture.asset(
height: 16, filter.getIcon(_imagePaths, quickSearchFilterSelected: quickSearchFilterSelected),
fit: BoxFit.fill), width: 16,
const SizedBox(width: 4), height: 16,
Text( fit: BoxFit.fill),
filter.getTitle(context), labelStyle: filter.getTextStyle(quickSearchFilterSelected: quickSearchFilterSelected),
maxLines: 1, backgroundColor: filter.getBackgroundColor(quickSearchFilterSelected: quickSearchFilterSelected),
overflow: TextOverflow.ellipsis, shape: RoundedRectangleBorder(
style: filter.getTextStyle(quickSearchFilterSelected: quickSearchFilterSelected), borderRadius: BorderRadius.circular(10),
) side: BorderSide(color: filter.getBackgroundColor(quickSearchFilterSelected: quickSearchFilterSelected)),
])); ),
);
}); });
} }