From 3cb2b588271687ea65b1437acba72fd82f53e0b4 Mon Sep 17 00:00:00 2001 From: dab246 Date: Tue, 22 Mar 2022 02:10:39 +0700 Subject: [PATCH] TF-381 Apply new UI for MailboxView in browser --- .../views/button/button_builder.dart | 6 + .../views/search/search_bar_view.dart | 3 +- .../mailbox/presentation/mailbox_view.dart | 167 ++++++++++++------ .../mailbox_dashboard_controller.dart | 11 ++ .../presentation/thread_controller.dart | 8 +- .../thread/presentation/thread_view.dart | 1 + .../widgets/search_app_bar_widget.dart | 9 +- lib/main/localizations/app_localizations.dart | 2 +- 8 files changed, 142 insertions(+), 65 deletions(-) diff --git a/core/lib/presentation/views/button/button_builder.dart b/core/lib/presentation/views/button/button_builder.dart index c1d33a34f..d3dff7143 100644 --- a/core/lib/presentation/views/button/button_builder.dart +++ b/core/lib/presentation/views/button/button_builder.dart @@ -23,6 +23,7 @@ class ButtonBuilder { BoxDecoration? _decoration; Widget? _iconAction; double? _radiusSplash; + double? _maxWidth; EdgeInsets? _padding; void key(Key key) { @@ -37,6 +38,10 @@ class ButtonBuilder { _size = size; } + void maxWidth(double? size) { + _maxWidth = size; + } + void iconColor(Color color) { _iconColor = color; } @@ -106,6 +111,7 @@ class ButtonBuilder { alignment: Alignment.center, color: _decoration == null ? _colorButton ?? Colors.white : null, decoration: _decoration, + width: _maxWidth, padding: _padding ?? EdgeInsets.zero, child: _buildBody() ) diff --git a/core/lib/presentation/views/search/search_bar_view.dart b/core/lib/presentation/views/search/search_bar_view.dart index 753943d88..29cb8acb2 100644 --- a/core/lib/presentation/views/search/search_bar_view.dart +++ b/core/lib/presentation/views/search/search_bar_view.dart @@ -75,11 +75,12 @@ class SearchBarView { Widget _buildSearchButton() { return Material( - borderRadius: BorderRadius.circular(12), color: Colors.transparent, + shape: CircleBorder(), child: Padding( padding: EdgeInsets.only(left: 2), child: IconButton( + splashRadius: 20, icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 18, height: 18, fit: BoxFit.fill), onPressed: () => _onOpenSearchViewAction?.call() ) diff --git a/lib/features/mailbox/presentation/mailbox_view.dart b/lib/features/mailbox/presentation/mailbox_view.dart index cb2923c7d..d527e74ef 100644 --- a/lib/features/mailbox/presentation/mailbox_view.dart +++ b/lib/features/mailbox/presentation/mailbox_view.dart @@ -1,4 +1,5 @@ import 'package:core/core.dart'; +import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; @@ -34,12 +35,13 @@ class MailboxView extends GetWidget { topLeft: Radius.circular(_responsiveUtils.isMobile(context) ? 14 : 0)), child: Drawer( child: Scaffold( - backgroundColor: Colors.white, + backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white, body: Column( children: [ if (_responsiveUtils.isDesktop(context)) - Padding( - padding: EdgeInsets.only(left: 20, top: 30), + Container( + color: Colors.white, + padding: EdgeInsets.only(left: 20, top: 20, bottom: 24), child: (SloganBuilder(arrangedByHorizontal: true) ..setSloganText(AppLocalizations.of(context).app_name) ..setSloganTextAlign(TextAlign.center) @@ -47,10 +49,55 @@ class MailboxView extends GetWidget { ..setSizeLogo(28) ..setLogo(_imagePaths.icLogoTMail)) .build()), - _buildHeaderMailbox(context), + if (!_responsiveUtils.isDesktop(context)) _buildHeaderMailbox(context), + if (_responsiveUtils.isDesktop(context)) + Row(children: [ + Expanded(child: Container( + padding: EdgeInsets.only(top: 16, left: 20), + color: AppColor.colorBgDesktop, + alignment: Alignment.centerLeft, + child: (ButtonBuilder(_imagePaths.icCompose) + ..key(Key('button_compose_email')) + ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(25), color: AppColor.colorTextButton)) + ..paddingIcon(EdgeInsets.only(right: 8)) + ..iconColor(Colors.white) + ..maxWidth(140) + ..size(20) + ..radiusSplash(10) + ..padding(EdgeInsets.symmetric(vertical: 13)) + ..textStyle(TextStyle(fontSize: 15, color: Colors.white, fontWeight: FontWeight.w500)) + ..onPressActionClick(() => controller.mailboxDashBoardController.composeEmailAction()) + ..text(AppLocalizations.of(context).compose, isVertical: false)) + .build()) + ), + Obx(() { + if (controller.isSearchActive()) { + return controller.listMailboxSearched.isNotEmpty + ? Padding( + padding: EdgeInsets.only(top: 16), + child: _buildEditMailboxButton(context, controller.isSelectionEnabled())) + : SizedBox.shrink(); + } else { + return Padding( + padding: EdgeInsets.only(top: 16), + child: _buildEditMailboxButton(context, controller.isSelectionEnabled())); + } + }) + ]), + Obx(() => !controller.isSearchActive() && _responsiveUtils.isDesktop(context) + ? Row(children: [ + Expanded(child: _buildSearchBarWidget(context)), + buildIconWeb( + icon: SvgPicture.asset(_imagePaths.icAddNewFolder, color: AppColor.colorTextButton, fit: BoxFit.fill), + tooltip: AppLocalizations.of(context).new_mailbox, + onTap: () => controller.goToCreateNewMailboxView()), + ]) + : SizedBox.shrink()), Obx(() => controller.isSearchActive() ? _buildInputSearchFormWidget(context) : SizedBox.shrink()), Expanded(child: Obx(() => Container( - color: controller.isSearchActive() ? Colors.white : AppColor.colorBgMailbox, + color: _responsiveUtils.isDesktop(context) + ? Colors.transparent + : controller.isSearchActive() ? Colors.white : AppColor.colorBgMailbox, child: RefreshIndicator( color: AppColor.primaryColor, onRefresh: () async => controller.refreshAllMailbox(), @@ -59,10 +106,7 @@ class MailboxView extends GetWidget { : _buildListMailbox(context)), ))), Obx(() => controller.isSelectionEnabled() - ? Column(children: [ - Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2), - _buildOptionSelectionBottomBar(context) - ]) + ? _buildOptionSelectionMailbox(context) : SizedBox.shrink()), ] ), @@ -82,7 +126,9 @@ class MailboxView extends GetWidget { top: _responsiveUtils.isMobile(context) ? 14 : 30, bottom: 10), child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [ - !_responsiveUtils.isDesktop(context) ? _buildCloseScreenButton(context) : SizedBox(width: 50), + !_responsiveUtils.isDesktop(context) && !_responsiveUtils.isTabletLarge(context) + ? _buildCloseScreenButton(context) + : SizedBox(width: 50), Obx(() { if (controller.isSearchActive()) { return controller.listMailboxSearched.isNotEmpty @@ -132,7 +178,7 @@ class MailboxView extends GetWidget { Widget _buildEditMailboxButton(BuildContext context, bool isSelectionEnabled) { return Material( - borderRadius: BorderRadius.circular(20), + shape: CircleBorder(), color: Colors.transparent, child: TextButton( child: Text( @@ -158,7 +204,7 @@ class MailboxView extends GetWidget { Widget _buildSearchBarWidget(BuildContext context) { return Padding( - padding: EdgeInsets.only(top: 12, bottom: 16, left: 16, right: 16), + padding: EdgeInsets.only(top: _responsiveUtils.isDesktop(context) ? 16 : 12, bottom: 16, left: 16, right: 16), child: (SearchBarView(_imagePaths) ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes) ..addOnOpenSearchViewAction(() => controller.enableSearch())) @@ -174,7 +220,7 @@ class MailboxView extends GetWidget { child: SizedBox( width: 24, height: 24, - child: CircularProgressIndicator(color: AppColor.primaryColor)))) + child: CupertinoActivityIndicator(color: AppColor.colorTextButton)))) : SizedBox.shrink())); } @@ -186,12 +232,10 @@ class MailboxView extends GetWidget { padding: EdgeInsets.zero, children: [ Obx(() => (controller.isSelectionEnabled() && _responsiveUtils.isMobileDevice(context) && _responsiveUtils.isLandscape(context)) - ? SizedBox.shrink() - : _buildUserInformationWidget(context)), + || _responsiveUtils.isDesktop(context) ? SizedBox.shrink() : _buildUserInformationWidget(context)), Obx(() => (controller.isSelectionEnabled() && _responsiveUtils.isMobileDevice(context) && _responsiveUtils.isLandscape(context)) - ? SizedBox.shrink() - : _buildLineSpaceUserInformation()), - _buildSearchBarWidget(context), + || _responsiveUtils.isDesktop(context) ? SizedBox.shrink() : _buildLineSpaceUserInformation()), + if (!_responsiveUtils.isDesktop(context)) _buildSearchBarWidget(context), _buildLoadingView(), Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false ? Container( @@ -201,13 +245,14 @@ class MailboxView extends GetWidget { margin: EdgeInsets.only(left: 16, right: 16, top: 4), child: _buildDefaultMailbox(context)) : SizedBox.shrink()), - Padding( - padding: EdgeInsets.only(left: 25, top: 26, bottom: 12), - child: Text( - AppLocalizations.of(context).folders, - maxLines: 1, - style: TextStyle(fontSize: 20, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600)) - ), + Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false + ? Padding( + padding: EdgeInsets.only(left: 25, top: 26, bottom: 12), + child: Text( + AppLocalizations.of(context).folders, + maxLines: 1, + style: TextStyle(fontSize: 20, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600))) + : SizedBox.shrink()), Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(14), @@ -321,30 +366,32 @@ class MailboxView extends GetWidget { return Padding( padding: EdgeInsets.only(left: 5), child: Material( - borderRadius: BorderRadius.circular(12), + shape: CircleBorder(), color: Colors.transparent, child: IconButton( + splashRadius: 20, color: AppColor.colorTextButton, - icon: SvgPicture.asset( - _imagePaths.icBack, - width: 20, - height: 20, - color: AppColor.colorTextButton, - fit: BoxFit.fill), + icon: SvgPicture.asset(_imagePaths.icBack, width: 20, height: 20, color: AppColor.colorTextButton, fit: BoxFit.fill), onPressed: () => controller.disableSearch(context) ) )); } Widget _buildListMailboxSearched(BuildContext context, List listMailbox) { - return ListView.builder( - padding: EdgeInsets.only(left: 16, right: 8, bottom: 30), - key: Key('list_mailbox_searched'), - itemCount: listMailbox.length, - shrinkWrap: true, - primary: false, - itemBuilder: (context, index) => - Obx(() => (MailboxTileBuilder( + return Container( + margin: _responsiveUtils.isDesktop(context) + ? EdgeInsets.only(left: 16, right: 16) + : EdgeInsets.zero, + decoration: _responsiveUtils.isDesktop(context) + ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white) + : null, + child: ListView.builder( + padding: EdgeInsets.only(left: 16, right: 8), + key: Key('list_mailbox_searched'), + itemCount: listMailbox.length, + shrinkWrap: true, + primary: false, + itemBuilder: (context, index) => Obx(() => (MailboxTileBuilder( _imagePaths, listMailbox[index], isSearchActive: controller.isSearchActive(), @@ -352,19 +399,33 @@ class MailboxView extends GetWidget { isLastElement: index == listMailbox.length - 1) ..addOnOpenMailboxAction((mailbox) => controller.openMailbox(context, mailbox)) ..addOnSelectMailboxActionClick((mailbox) => controller.selectMailbox(context, mailbox))) - .build())); - } - - Widget _buildOptionSelectionBottomBar(BuildContext context) { - return Padding( - padding: EdgeInsets.only(bottom: 30, top: 5), - child: (BottomBarSelectionMailboxWidget( - context, - _imagePaths, - controller.listMailboxSelected) - ..addOnMailboxActionsClick((actions, listMailboxSelected) => - controller.pressMailboxSelectionAction(context, actions, listMailboxSelected))) - .build() + .build())) ); } + + Widget _buildOptionSelectionMailbox(BuildContext context) { + if (_responsiveUtils.isDesktop(context)) { + return Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(16), + boxShadow: [BoxShadow(color: AppColor.colorEmailAddressTag, spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5))], + color: Colors.white), + margin: EdgeInsets.only(left: 10, bottom: 10, right: 10), + padding: EdgeInsets.all(8), + child: (BottomBarSelectionMailboxWidget(context, _imagePaths, controller.listMailboxSelected) + ..addOnMailboxActionsClick((actions, listMailboxSelected) => controller.pressMailboxSelectionAction(context, actions, listMailboxSelected))) + .build(), + ); + } else { + return Column(children: [ + Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2), + Padding( + padding: EdgeInsets.only(bottom: 30, top: 5), + child: (BottomBarSelectionMailboxWidget(context, _imagePaths, controller.listMailboxSelected) + ..addOnMailboxActionsClick((actions, listMailboxSelected) => controller.pressMailboxSelectionAction(context, actions, listMailboxSelected))) + .build() + ) + ]); + } + } } \ No newline at end of file diff --git a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_controller.dart b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_controller.dart index 72e375ce4..7891a5941 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_controller.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_controller.dart @@ -15,6 +15,7 @@ import 'package:tmail_ui_user/features/composer/domain/state/update_email_drafts import 'package:tmail_ui_user/features/composer/presentation/composer_bindings.dart'; import 'package:tmail_ui_user/features/composer/presentation/composer_controller.dart'; import 'package:tmail_ui_user/features/email/presentation/email_controller.dart'; +import 'package:tmail_ui_user/features/email/presentation/model/composer_arguments.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/get_user_profile_state.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/remove_email_drafts_state.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_user_profile_interactor.dart'; @@ -263,6 +264,16 @@ class MailboxDashBoardController extends ReloadableController { accountId.value = sessionCurrent?.accounts.keys.first; } + void composeEmailAction() { + if (kIsWeb) { + if (dashBoardAction != DashBoardAction.compose) { + dispatchDashBoardAction(DashBoardAction.compose, arguments: ComposerArguments()); + } + } else { + push(AppRoutes.COMPOSER, arguments: ComposerArguments()); + } + } + @override void onClose() { searchInputController.dispose(); diff --git a/lib/features/thread/presentation/thread_controller.dart b/lib/features/thread/presentation/thread_controller.dart index 6d5c2168b..7459cf57d 100644 --- a/lib/features/thread/presentation/thread_controller.dart +++ b/lib/features/thread/presentation/thread_controller.dart @@ -739,12 +739,6 @@ class ThreadController extends BaseController { } void composeEmailAction() { - if (kIsWeb) { - if (mailboxDashBoardController.dashBoardAction != DashBoardAction.compose) { - mailboxDashBoardController.dispatchDashBoardAction(DashBoardAction.compose, arguments: ComposerArguments()); - } - } else { - push(AppRoutes.COMPOSER, arguments: ComposerArguments()); - } + mailboxDashBoardController.composeEmailAction(); } } \ No newline at end of file diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index 744126ef6..6481356c0 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -143,6 +143,7 @@ class ThreadView extends GetWidget { Widget _buildOptionTopBar(BuildContext context) { return Row(children: [ + SizedBox(width: 16), (ButtonBuilder(_imagePaths.icRefresh) ..key(Key('button_reload_thread')) ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.colorButtonHeaderThread)) diff --git a/lib/features/thread/presentation/widgets/search_app_bar_widget.dart b/lib/features/thread/presentation/widgets/search_app_bar_widget.dart index e0a8b85ff..be0a69af8 100644 --- a/lib/features/thread/presentation/widgets/search_app_bar_widget.dart +++ b/lib/features/thread/presentation/widgets/search_app_bar_widget.dart @@ -108,11 +108,12 @@ class SearchAppBarWidget { Widget _buildBackButton() { return Material( - borderRadius: BorderRadius.circular(12), + shape: CircleBorder(), color: Colors.transparent, child: Padding( padding: EdgeInsets.only(left: 8), child: IconButton( + splashRadius: 20, color: AppColor.appColor, icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.appColor, fit: BoxFit.fill), onPressed: () { @@ -126,9 +127,10 @@ class SearchAppBarWidget { Widget _buildClearTextSearchButton() { return Material( - borderRadius: BorderRadius.circular(12), + shape: CircleBorder(), color: Colors.transparent, child: IconButton( + splashRadius: 20, padding: EdgeInsets.zero, icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, fit: BoxFit.fill), onPressed: () { @@ -163,9 +165,10 @@ class SearchAppBarWidget { Widget _buildSearchButton() { return Material( - borderRadius: BorderRadius.circular(12), + shape: CircleBorder(), color: Colors.transparent, child: IconButton( + splashRadius: 20, icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 18, height: 18, fit: BoxFit.fill), onPressed: () => _onSearchTextAction?.call(_searchInputController?.text ?? '') ) diff --git a/lib/main/localizations/app_localizations.dart b/lib/main/localizations/app_localizations.dart index 397ef6f24..5183cae21 100644 --- a/lib/main/localizations/app_localizations.dart +++ b/lib/main/localizations/app_localizations.dart @@ -527,7 +527,7 @@ class AppLocalizations { String get hint_search_mailboxes { return Intl.message( - 'Search for mailboxes', + 'Search mailboxes', name: 'hint_search_mailboxes'); }