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

TF-682 Standardize layout of Mailbox Dashboard on web

Browse Source
This commit is contained in:
dab246
2022-07-01 18:40:42 +07:00
committed by Dat H. Pham
parent ffe5fe5056
commit 6b58073790
9 changed files with 118 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/utils/responsive_utils.dart
+24 -2
View File
@@ -84,8 +84,8 @@ class ResponsiveUtils {
bool hasLeftMenuDrawerActive(BuildContext context) {
if (BuildUtils.isWeb) {
return isMobile(context) &&
isTablet(context) &&
return isMobile(context) ||
isTablet(context) ||
isTabletLarge(context);
} else {
return true;
@@ -94,4 +94,26 @@ class ResponsiveUtils {
bool isWebDesktop(BuildContext context) =>
BuildUtils.isWeb && isDesktop(context);
bool mailboxDashboardHasMailboxAndEmailView(BuildContext context) {
if (BuildUtils.isWeb) {
return isDesktop(context) ||
isMobile(context) ||
isTablet(context);
} else {
return isPortraitMobile(context) ||
isLandscapeMobile(context) ||
isTablet(context);
}
}
bool mailboxDashboardOnlyHasEmailView(BuildContext context) {
if (BuildUtils.isWeb) {
return isMobile(context) || isTablet(context);
} else {
return isPortraitMobile(context) ||
isLandscapeMobile(context) ||
isTablet(context);
}
}
}
core/lib/presentation/views/button/button_builder.dart
+3 -1
View File
@@ -122,6 +122,7 @@ class ButtonBuilder {
if (_text != null) {
return _isVertical!
? Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildIcon(),
@@ -129,6 +130,7 @@ class ButtonBuilder {
if (_iconAction != null) _iconAction!
])
: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildIcon(),
@@ -148,7 +150,7 @@ class ButtonBuilder {
return Text(
'${_text ?? ''}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
overflow: CommonTextStyle.defaultTextOverFlow,
style: _textStyle ?? TextStyle(fontSize: 12, color: AppColor.colorTextButton),
);
}
core/lib/presentation/views/responsive/responsive_widget.dart
+40 -19
View File
@@ -26,30 +26,51 @@ class ResponsiveWidget extends StatelessWidget {
Widget build(BuildContext context) {
log('ResponsiveWidget::build(): WIDTH_SIZE: ${responsiveUtils.getDeviceWidth(context)}');
if (responsiveUtils.isLandscapeMobile(context)) {
return landscapeMobile ?? mobile;
}
if (BuildUtils.isWeb) {
if (responsiveUtils.isLandscapeTablet(context)) {
return landscapeTablet ?? tablet ?? mobile;
}
if (responsiveUtils.isMobile(context)) {
return tablet ?? mobile;
}
if (responsiveUtils.isMobile(context)) {
return tablet ?? mobile;
}
if (responsiveUtils.isTablet(context)) {
return tablet ?? mobile;
}
if (responsiveUtils.isTablet(context)) {
return tablet ?? mobile;
}
if (responsiveUtils.isTabletLarge(context)) {
return tabletLarge ?? tablet ?? mobile;
}
if (responsiveUtils.isTabletLarge(context)) {
return tabletLarge ?? tablet ?? mobile;
}
if (responsiveUtils.isDesktop(context)) {
return desktop ?? tablet ?? mobile;
}
if (responsiveUtils.isDesktop(context)) {
return desktop ?? tablet ?? mobile;
}
return mobile;
} else {
if (responsiveUtils.isLandscapeMobile(context)) {
return landscapeMobile ?? mobile;
}
return mobile;
if (responsiveUtils.isLandscapeTablet(context)) {
return landscapeTablet ?? tablet ?? mobile;
}
if (responsiveUtils.isMobile(context)) {
return tablet ?? mobile;
}
if (responsiveUtils.isTablet(context)) {
return tablet ?? mobile;
}
if (responsiveUtils.isTabletLarge(context)) {
return tabletLarge ?? tablet ?? mobile;
}
if (responsiveUtils.isDesktop(context)) {
return desktop ?? tablet ?? mobile;
}
return mobile;
}
}
}
lib/features/email/presentation/email_view.dart
+2 -2
View File
@@ -122,11 +122,11 @@ class EmailView extends GetWidget<EmailController> with NetworkConnectionMixin {
}
Widget _buildBottomBar(BuildContext context) {
bool isMobileDevice = responsiveUtils.isPortraitMobile(context) &&
bool isMobileDevice = responsiveUtils.isPortraitMobile(context) ||
responsiveUtils.isLandscapeMobile(context);
return Padding(
padding: EdgeInsets.only(
bottom: !BuildUtils.isWeb && isMobileDevice ? 16 : 0),
bottom: isMobileDevice ? 16 : 0),
child: Obx(() => (BottomBarMailWidgetBuilder(
context,
imagePaths,
lib/features/email/presentation/widgets/app_bar_mail_widget_builder.dart
+2 -12
View File
@@ -51,9 +51,9 @@ class AppBarMailWidgetBuilder {
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
if (_mailboxDashboardOnlyHasEmailView(_context))
if (_responsiveUtils.mailboxDashboardHasMailboxAndEmailView(_context))
_buildBackButton(),
if (_mailboxDashboardOnlyHasEmailView(_context))
if (_responsiveUtils.mailboxDashboardHasMailboxAndEmailView(_context))
Expanded(child: _buildMailboxName()),
if (_presentationEmail != null) _buildListOptionButton(),
]
@@ -62,16 +62,6 @@ class AppBarMailWidgetBuilder {
);
}
bool _mailboxDashboardOnlyHasEmailView(BuildContext context) {
if (BuildUtils.isWeb) {
return _responsiveUtils.isDesktop(context);
} else {
return _responsiveUtils.isPortraitMobile(context) ||
_responsiveUtils.isLandscapeMobile(context) ||
_responsiveUtils.isTablet(context);
}
}
Widget _buildBackButton() {
return buildIconWeb(
icon: SvgPicture.asset(_imagePaths.icBack, width: 18, height: 18, color: AppColor.colorTextButton, fit: BoxFit.fill),
lib/features/email/presentation/widgets/bottom_bar_mail_widget_builder.dart
+6 -2
View File
@@ -7,6 +7,8 @@ typedef OnPressEmailActionClick = void Function(EmailActionType emailActionType)
class BottomBarMailWidgetBuilder {
static const double maxWidthBottomBar = 540;
final BuildContext _context;
final ImagePaths _imagePaths;
final ResponsiveUtils _responsiveUtils;
@@ -32,7 +34,9 @@ class BottomBarMailWidgetBuilder {
color: Colors.white,
child: MediaQuery(
data: const MediaQueryData(padding: EdgeInsets.zero),
child: _presentationEmail != null ? _buildListOptionButton(_presentationEmail!) : const SizedBox.shrink()
child: _presentationEmail != null
? _buildListOptionButton(_presentationEmail!)
: const SizedBox.shrink()
)
);
}
@@ -91,7 +95,7 @@ class BottomBarMailWidgetBuilder {
}})
..text(AppLocalizations.of(_context).forward, isVertical: _responsiveUtils.isMobile(_context)))
.build()),
if (!_responsiveUtils.isDesktop(_context))
if (_responsiveUtils.mailboxDashboardOnlyHasEmailView(_context))
Expanded(child: (ButtonBuilder(_imagePaths.icNewMessage)
..key(const Key('button_new_message'))
..size(20)
lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart
+37 -52
View File
@@ -18,8 +18,6 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/ad
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/recent_search_item_tile_widget.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/model/app_setting.dart';
import 'package:tmail_ui_user/features/manage_account/presentation/model/reading_pane.dart';
import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
import 'package:tmail_ui_user/features/thread/presentation/thread_view.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -34,8 +32,7 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
@override
Widget build(BuildContext context) {
if (controller.isDrawerOpen && (responsiveUtils.isDesktop(context)
|| responsiveUtils.isTabletLarge(context))) {
if (controller.isDrawerOpen && responsiveUtils.isDesktop(context)) {
WidgetsBinding.instance.addPostFrameCallback((_) {
controller.closeMailboxMenuDrawer();
});
@@ -48,10 +45,9 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
responsiveUtils: responsiveUtils,
mobile: SizedBox(child: MailboxView(), width: ResponsiveUtils.defaultSizeDrawer),
tablet: SizedBox(child: MailboxView(), width: ResponsiveUtils.defaultSizeDrawer),
tabletLarge: const SizedBox.shrink(),
desktop: const SizedBox.shrink(),
),
drawerEnableOpenDragGesture: responsiveUtils.isMobile(context) || responsiveUtils.isTablet(context),
tabletLarge: SizedBox(child: MailboxView(), width: ResponsiveUtils.defaultSizeLeftMenuMobile),
desktop: const SizedBox.shrink()),
drawerEnableOpenDragGesture: !responsiveUtils.isDesktop(context),
body: Portal(
child: Stack(children: [
ResponsiveWidget(
@@ -97,7 +93,16 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeMenu),
Expanded(child: Column(children: [
_buildMarkAsMailboxReadLoading(context),
Expanded(child: _wrapContainerForThreadAndEmail(context))
Expanded(child: Obx(() {
switch(controller.routePath.value) {
case AppRoutes.THREAD:
return ThreadView();
case AppRoutes.EMAIL:
return EmailView();
default:
return const SizedBox.shrink();
}
}))
]))
],
))
@@ -106,60 +111,40 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
tabletLarge: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeMenu),
Expanded(child: _wrapContainerForThreadAndEmail(context))
SizedBox(
width: ResponsiveUtils.defaultSizeLeftMenuMobile,
child: ThreadView()),
Expanded(child: EmailView()),
],
),
tablet: ThreadView(),
mobile: ThreadView(),
mobile: Obx(() {
switch(controller.routePath.value) {
case AppRoutes.THREAD:
return ThreadView();
case AppRoutes.EMAIL:
return EmailView();
default:
return ThreadView();
}
}),
),
Obx(() => controller.composerOverlayState.value == ComposerOverlayState.active
? ComposerView()
: const SizedBox.shrink()),
Obx(() => controller.isNetworkConnectionAvailable()
? const SizedBox.shrink()
: Align(alignment: Alignment.bottomCenter, child: buildNetworkConnectionWidget(context))),
Obx(() {
if (controller.isNetworkConnectionAvailable()) {
return const SizedBox.shrink();
} else {
return Align(
alignment: Alignment.bottomCenter,
child: buildNetworkConnectionWidget(context));
}
}),
]),
),
);
}
Widget _wrapContainerForThreadAndEmail(BuildContext context) {
switch(AppSetting.readingPane) {
case ReadingPane.noSplit:
return Obx(() {
switch(controller.routePath.value) {
case AppRoutes.THREAD:
return ThreadView();
case AppRoutes.EMAIL:
return EmailView();
default:
return const SizedBox.shrink();
}
});
case ReadingPane.rightOfInbox:
if (responsiveUtils.isDesktop(context)) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(flex: 1, child: ThreadView()),
Expanded(flex: 2, child: EmailView()),
],
);
} else {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(flex: 1, child: ThreadView()),
Expanded(flex: 1, child: EmailView()),
],
);
}
default:
return const SizedBox.shrink();
}
}
Widget _buildRightHeader(BuildContext context) {
return Row(children: [
Obx(() {
lib/features/manage_account/presentation/model/app_setting.dart
-6
View File
@@ -1,6 +0,0 @@
import 'package:tmail_ui_user/features/manage_account/presentation/model/reading_pane.dart';
class AppSetting {
static ReadingPane readingPane = ReadingPane.noSplit;
}
lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart
+4 -2
View File
@@ -88,8 +88,10 @@ class AppBarThreadWidgetBuilder {
Widget _buildBodyAppBarForWeb() {
return Row(children: [
if (!_responsiveUtils.isTabletLarge(_context)) _buildMenuButton(),
if (_responsiveUtils.isTabletLarge(_context)) const SizedBox(width: 16),
if (_responsiveUtils.hasLeftMenuDrawerActive(_context))
_buildMenuButton(),
if (_responsiveUtils.hasLeftMenuDrawerActive(_context))
const SizedBox(width: 16),
Expanded(child: Text(
_currentMailbox?.name?.name.capitalizeFirstEach ?? '',
maxLines: 1,