From c22bc94052719a21c0d3566cb2cbf25a4674b86b Mon Sep 17 00:00:00 2001 From: dab246 Date: Thu, 10 Feb 2022 18:07:48 +0700 Subject: [PATCH] TF-248 Update UI for web --- .../presentation/utils/responsive_utils.dart | 20 ++-- .../scrolling_floating_button_animated.dart | 4 + .../views/image/avatar_builder.dart | 24 ++--- .../presentation/destination_picker_view.dart | 45 ++++---- .../app_bar_destination_picker_builder.dart | 18 ++-- ...and_receiver_information_tile_builder.dart | 3 +- .../mailbox/presentation/mailbox_view.dart | 11 +- .../widgets/mailbox_folder_tile_builder.dart | 11 +- .../widgets/mailbox_tile_builder.dart | 100 ++++++++++-------- .../user_information_widget_builder.dart | 82 +++++++------- .../presentation/mailbox_dashboard_view.dart | 9 +- .../thread/presentation/thread_view.dart | 3 +- .../app_bar_thread_widget_builder.dart | 53 ++++++---- .../widgets/email_tile_builder.dart | 6 +- .../search_bar_thread_view_widget.dart | 5 +- 15 files changed, 205 insertions(+), 189 deletions(-) diff --git a/core/lib/presentation/utils/responsive_utils.dart b/core/lib/presentation/utils/responsive_utils.dart index 4eeba309e..2acb28039 100644 --- a/core/lib/presentation/utils/responsive_utils.dart +++ b/core/lib/presentation/utils/responsive_utils.dart @@ -2,18 +2,18 @@ import 'package:flutter/widgets.dart'; class ResponsiveUtils { - static const int minDesktopWidth = 1366; + static const int minDesktopWidth = 1288; static const int minTabletWidth = 600; - static const int minTabletLargeWidth = 800; + static const int minTabletLargeWidth = 900; static const double _loginTextFieldWidthSmallScreen = 280.0; static const double _loginTextFieldWidthLargeScreen = 320.0; static const double _loginButtonWidth = 240.0; - static const double _tabletHorizontalMargin = 144.0; - static const double _tabletVerticalMargin = 234.0; - static const double _desktopVerticalMargin = 144.0; - static const double _desktopHorizontalMargin = 234.0; + static const double _tabletHorizontalMargin = 120.0; + static const double _tabletVerticalMargin = 200.0; + static const double _desktopVerticalMargin = 120.0; + static const double _desktopHorizontalMargin = 200.0; bool isMobileDevice(BuildContext context) => MediaQuery.of(context).size.shortestSide < 600; @@ -29,7 +29,7 @@ class ResponsiveUtils { bool isDesktop(BuildContext context) => getSizeWidthScreen(context) > minDesktopWidth; - bool isTabletLarge(BuildContext context) => getMinSizeScreen(context) >= minTabletLargeWidth && getMinSizeScreen(context) <= minDesktopWidth; + bool isTabletLarge(BuildContext context) => getSizeWidthScreen(context) >= minTabletLargeWidth && getSizeWidthScreen(context) <= minDesktopWidth; bool isPortrait(BuildContext context) => MediaQuery.of(context).orientation == Orientation.portrait; @@ -48,7 +48,7 @@ class ResponsiveUtils { : EdgeInsets.symmetric( horizontal: _tabletHorizontalMargin, vertical: _tabletVerticalMargin); - } else if (isDesktop(context)) { + } else if (isDesktop(context) || isTabletLarge(context)) { return getSizeHeightScreen(context) <= _desktopVerticalMargin * 2 ? EdgeInsets.symmetric( horizontal: _desktopHorizontalMargin, @@ -66,12 +66,12 @@ class ResponsiveUtils { return getSizeHeightScreen(context) <= _tabletVerticalMargin * 2 ? BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius)) : BorderRadius.circular(radius); - } else if (isDesktop(context)) { + } else if (isDesktop(context) || isTabletLarge(context)) { return getSizeHeightScreen(context) <= _desktopVerticalMargin * 2 ? BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius)) : BorderRadius.circular(radius); } else { - return BorderRadius.zero; + return BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius)); } } } \ No newline at end of file diff --git a/core/lib/presentation/views/floating_button/scrolling_floating_button_animated.dart b/core/lib/presentation/views/floating_button/scrolling_floating_button_animated.dart index 64d54802b..dd50541cf 100644 --- a/core/lib/presentation/views/floating_button/scrolling_floating_button_animated.dart +++ b/core/lib/presentation/views/floating_button/scrolling_floating_button_animated.dart @@ -123,6 +123,10 @@ class _ScrollingFloatingButtonAnimatedState @override Widget build(BuildContext context) { + final shortestSide = MediaQuery.of(context).size.shortestSide; + if (shortestSide < 60) { + return SizedBox.shrink(); + } return Card( elevation: widget.elevation, shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(widget.height! / 2))), diff --git a/core/lib/presentation/views/image/avatar_builder.dart b/core/lib/presentation/views/image/avatar_builder.dart index 3238de154..9508f762e 100644 --- a/core/lib/presentation/views/image/avatar_builder.dart +++ b/core/lib/presentation/views/image/avatar_builder.dart @@ -1,6 +1,5 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:flutter/material.dart'; -// import 'package:flutter_svg/flutter_svg.dart'; typedef OnTapAvatarActionClick = void Function(); @@ -8,7 +7,6 @@ class AvatarBuilder { Key? _key; String? _text; double? _size; - // String? _iconStatus; Color? _bgColor; Color? _textColor; OnTapAvatarActionClick? _onTapAvatarActionClick; @@ -27,11 +25,6 @@ class AvatarBuilder { _text = text; } - // AvatarBuilder iconStatus(String iconStatus) { - // _iconStatus = iconStatus; - // return this; - // } - void backgroundColor(Color bgColor) { _bgColor = bgColor; } @@ -62,15 +55,19 @@ class AvatarBuilder { key: _key, width: _size ?? 40, height: _size ?? 40, + padding: EdgeInsets.zero, + margin: EdgeInsets.zero, alignment: Alignment.center, child: Stack( children: [ Container( width: _size ?? 40, height: _size ?? 40, + padding: EdgeInsets.zero, + margin: EdgeInsets.zero, alignment: Alignment.center, decoration: BoxDecoration( - borderRadius: BorderRadius.circular((_size ?? 40) / 2), + borderRadius: BorderRadius.circular((_size ?? 40) * 0.5), border: Border.all(color: Colors.transparent), boxShadow: _boxShadows ?? [], gradient: _avatarColors?.isNotEmpty == true @@ -80,14 +77,13 @@ class AvatarBuilder { tileMode: TileMode.decal, colors: _avatarColors ?? []) : null, - color: _bgColor ?? AppColor.avatarColor), + color: _bgColor ?? AppColor.avatarColor + ), child: Text( '${_text ?? ''}', - style: TextStyle(fontSize: 20, color: _textColor ?? AppColor.avatarTextColor, fontWeight: FontWeight.w500))), - // if (_iconStatus != null && _iconStatus!.isNotEmpty) - // Align( - // child: SvgPicture.asset(_iconStatus!, width: 12, height: 12, fit: BoxFit.fill), - // alignment: Alignment.bottomRight) + style: TextStyle(fontSize: 20, color: _textColor ?? AppColor.avatarTextColor, fontWeight: FontWeight.w500) + ) + ), ], )), ); diff --git a/lib/features/destination_picker/presentation/destination_picker_view.dart b/lib/features/destination_picker/presentation/destination_picker_view.dart index b384a7184..80e353789 100644 --- a/lib/features/destination_picker/presentation/destination_picker_view.dart +++ b/lib/features/destination_picker/presentation/destination_picker_view.dart @@ -29,22 +29,20 @@ class DestinationPickerView extends GetWidget { borderRadius: _responsiveUtils.radiusDestinationPicker(context, 20), child: GestureDetector( onTap: () => {}, - child: Scaffold( - resizeToAvoidBottomInset: false, - backgroundColor: Colors.white, - body: SafeArea( + child: SafeArea( + top: _responsiveUtils.isMobile(context) ? true : false, + bottom: false, right: false, left: false, child: Column( children: [ _buildAppBar(context), Expanded(child: - Container( - color: AppColor.bgMailboxListMail, + Container( + color: AppColor.colorBgMailbox, child: _buildBodyDestinationPicker(context))) ], ) - ) ) ) ) @@ -67,7 +65,7 @@ class DestinationPickerView extends GetWidget { physics: AlwaysScrollableScrollPhysics(), child: Container( alignment: Alignment.center, - color: AppColor.bgMailboxListMail, + color: AppColor.colorBgMailbox, padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom), child: Column( mainAxisSize: MainAxisSize.max, @@ -101,9 +99,19 @@ class DestinationPickerView extends GetWidget { primary: false, shrinkWrap: true, children: [ - _buildDefaultMailbox(context), + Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(14), + color: Colors.white), + margin: EdgeInsets.only(left: 16, right: 16, top: 16), + child: _buildDefaultMailbox(context)), SizedBox(height: 20), - _buildFolderMailbox(context), + Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(14), + color: Colors.white), + margin: EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 30), + child: _buildFolderMailbox(context)), ] ); } @@ -115,7 +123,7 @@ class DestinationPickerView extends GetWidget { if (success is GetAllMailboxSuccess) { final defaultMailboxList = success.defaultMailboxList; return ListView.builder( - padding: EdgeInsets.only(top: 16, left: 8, right: 10), + padding: EdgeInsets.only(top: 8, left: 8, right: 10, bottom: 8), key: Key('default_mailbox_list'), itemCount: defaultMailboxList.length, shrinkWrap: true, @@ -123,7 +131,8 @@ class DestinationPickerView extends GetWidget { itemBuilder: (context, index) => (MailboxTileBuilder( _imagePaths, defaultMailboxList[index], - mailboxDisplayed: MailboxDisplayed.destinationPicker) + mailboxDisplayed: MailboxDisplayed.destinationPicker, + isLastElement: index == defaultMailboxList.length - 1) ..onOpenMailboxAction((mailbox) => controller.moveEmailToMailboxAction(mailbox.toPresentationMailboxWithMailboxPath(mailbox.name?.name ?? '')))) .build()); @@ -136,14 +145,12 @@ class DestinationPickerView extends GetWidget { Widget _buildFolderMailbox(BuildContext context) { return Obx(() => controller.folderMailboxNodeList.isNotEmpty - ? Transform( - transform: Matrix4.translationValues(-12.0, 0.0, 0.0), - child: Padding( - padding: EdgeInsets.zero, - child: TreeView( + ? Padding( + padding: EdgeInsets.only(top: 8, bottom: 8), + child: TreeView( startExpanded: false, key: Key('folder_mailbox_list'), - children: _buildListChildTileWidget(context, controller.folderMailboxNodeList)))) + children: _buildListChildTileWidget(context, controller.folderMailboxNodeList))) : SizedBox.shrink() ); } @@ -160,7 +167,6 @@ class DestinationPickerView extends GetWidget { parent: (MailBoxFolderTileBuilder( context, _imagePaths, - _responsiveUtils, mailboxNode, mailboxDisplayed: MailboxDisplayed.destinationPicker) ..addOnSelectMailboxFolderClick((mailboxNode) => controller.moveEmailToMailboxAction(mailboxNode.item.toPresentationMailboxWithMailboxPath( @@ -177,7 +183,6 @@ class DestinationPickerView extends GetWidget { child: (MailBoxFolderTileBuilder( context, _imagePaths, - _responsiveUtils, mailboxNode, mailboxDisplayed: MailboxDisplayed.destinationPicker) ..addOnSelectMailboxFolderClick((mailboxNode) => controller.moveEmailToMailboxAction(mailboxNode.item.toPresentationMailboxWithMailboxPath( diff --git a/lib/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart b/lib/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart index a8073abd5..6315f5abf 100644 --- a/lib/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart +++ b/lib/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart @@ -1,6 +1,7 @@ import 'package:core/core.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; typedef OnCloseActionClick = void Function(); @@ -39,14 +40,15 @@ class AppBarDestinationPickerBuilder { } Widget _buildBackButton() { - return (ButtonBuilder(_imagePaths.icComposerClose) - ..paddingIcon(EdgeInsets.all(5)) - ..size(30) - ..onPressActionClick(() { - if (_onCloseActionClick != null) { - _onCloseActionClick!(); - }})) - .build(); + return Material( + borderRadius: BorderRadius.circular(12), + color: Colors.transparent, + child: IconButton( + color: AppColor.baseTextColor, + icon: SvgPicture.asset(_imagePaths.icComposerClose, fit: BoxFit.fill), + onPressed: () => _onCloseActionClick?.call() + ) + ); } Widget _buildCountItemSelected() { diff --git a/lib/features/email/presentation/widgets/sender_and_receiver_information_tile_builder.dart b/lib/features/email/presentation/widgets/sender_and_receiver_information_tile_builder.dart index 39fb1769e..13a01f7ee 100644 --- a/lib/features/email/presentation/widgets/sender_and_receiver_information_tile_builder.dart +++ b/lib/features/email/presentation/widgets/sender_and_receiver_information_tile_builder.dart @@ -2,6 +2,7 @@ import 'package:core/core.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; +import 'package:get/get.dart'; import 'package:model/model.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; @@ -48,7 +49,7 @@ class SenderAndReceiverInformationTileBuilder { ..text('${_presentationEmail!.getAvatarText()}') ..textColor(Colors.white) ..avatarColor(_presentationEmail?.avatarColors) - ..size(40)) + ..size(GetPlatform.isWeb ? 48 : 56)) // .iconStatus(_imagePaths.icOffline) .build()), title: Transform( diff --git a/lib/features/mailbox/presentation/mailbox_view.dart b/lib/features/mailbox/presentation/mailbox_view.dart index 912e3be86..02ec432ae 100644 --- a/lib/features/mailbox/presentation/mailbox_view.dart +++ b/lib/features/mailbox/presentation/mailbox_view.dart @@ -26,7 +26,7 @@ class MailboxView extends GetWidget { child: ClipRRect( borderRadius: BorderRadius.only( topRight: Radius.circular(responsiveUtils.isMobile(context) ? 14 : 0), - topLeft: Radius.circular(14)), + topLeft: Radius.circular(responsiveUtils.isMobile(context) ? 14 : 0)), child: Drawer( child: Scaffold( backgroundColor: Colors.white, @@ -162,7 +162,7 @@ class MailboxView extends GetWidget { Widget _buildDefaultMailbox(BuildContext context, List defaultMailbox) { return ListView.builder( - padding: EdgeInsets.only(top: 8, left: 8, right: 8), + padding: EdgeInsets.all(8), key: PageStorageKey('default_mailbox_list'), itemCount: defaultMailbox.length, shrinkWrap: true, @@ -173,7 +173,8 @@ class MailboxView extends GetWidget { defaultMailbox[index], selectMode: controller.getSelectMode( defaultMailbox[index], - controller.mailboxDashBoardController.selectedMailbox.value)) + controller.mailboxDashBoardController.selectedMailbox.value), + isLastElement: index == defaultMailbox.length - 1) ..onOpenMailboxAction((mailbox) => controller.selectMailbox(context, mailbox))) .build())); } @@ -183,7 +184,7 @@ class MailboxView extends GetWidget { ? Transform( transform: Matrix4.translationValues(-4.0, 0.0, 0.0), child: Padding( - padding: EdgeInsets.only(right: 12, top: 10), + padding: EdgeInsets.only(top: 10, bottom: 10), child: TreeView( startExpanded: false, key: Key('folder_mailbox_list'), @@ -205,7 +206,6 @@ class MailboxView extends GetWidget { parent: Obx(() => (MailBoxFolderTileBuilder( context, imagePaths, - responsiveUtils, mailboxNode, selectMode: controller.getSelectMode( mailboxNode.item, @@ -220,7 +220,6 @@ class MailboxView extends GetWidget { child: Obx(() => (MailBoxFolderTileBuilder( context, imagePaths, - responsiveUtils, mailboxNode, selectMode: controller.getSelectMode( mailboxNode.item, diff --git a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart b/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart index 431d0e8bd..b9503a300 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart @@ -14,7 +14,6 @@ class MailBoxFolderTileBuilder { final MailboxNode _mailboxNode; final BuildContext _context; final ImagePaths _imagePaths; - final ResponsiveUtils _responsiveUtils; final SelectMode selectMode; final MailboxDisplayed mailboxDisplayed; @@ -24,7 +23,6 @@ class MailBoxFolderTileBuilder { MailBoxFolderTileBuilder( this._context, this._imagePaths, - this._responsiveUtils, this._mailboxNode, { this.selectMode = SelectMode.INACTIVE, @@ -49,10 +47,8 @@ class MailBoxFolderTileBuilder { key: Key('mailbox_folder_tile'), alignment: Alignment.center, decoration: BoxDecoration( - borderRadius: BorderRadius.circular(mailboxDisplayed == MailboxDisplayed.mailbox ? 10 : 0), - color: mailboxDisplayed == MailboxDisplayed.mailbox - ? selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedBackgroundColor : AppColor.mailboxBackgroundColor - : Colors.white + borderRadius: BorderRadius.circular(0), + color: Colors.white ), child: MediaQuery( data: MediaQueryData(padding: EdgeInsets.zero), @@ -70,8 +66,9 @@ class MailBoxFolderTileBuilder { title: _buildTitleFolderItem(), trailing: _mailboxNode.hasChildren() ? Padding( - padding: EdgeInsets.only(right: mailboxDisplayed == MailboxDisplayed.mailbox ? _responsiveUtils.isMobile(_context) ? 0 : 8 : 0, left: 16), + padding: EdgeInsets.only(right: 0, left: 16), child: IconButton( + padding: EdgeInsets.zero, color: AppColor.primaryColor, icon: SvgPicture.asset( _mailboxNode.expandMode == ExpandMode.EXPAND ? _imagePaths.icExpandFolder : _imagePaths.icFolderArrow, diff --git a/lib/features/mailbox/presentation/widgets/mailbox_tile_builder.dart b/lib/features/mailbox/presentation/widgets/mailbox_tile_builder.dart index edf4db526..99534777a 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_tile_builder.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_tile_builder.dart @@ -13,6 +13,7 @@ class MailboxTileBuilder { final SelectMode selectMode; final ImagePaths _imagePaths; final MailboxDisplayed mailboxDisplayed; + final bool isLastElement; OnOpenMailboxActionClick? _onOpenMailboxActionClick; @@ -21,7 +22,8 @@ class MailboxTileBuilder { this._presentationMailbox, { this.selectMode = SelectMode.INACTIVE, - this.mailboxDisplayed = MailboxDisplayed.mailbox + this.mailboxDisplayed = MailboxDisplayed.mailbox, + this.isLastElement = false, } ); @@ -38,56 +40,60 @@ class MailboxTileBuilder { key: Key('mailbox_list_tile'), alignment: Alignment.center, decoration: BoxDecoration( - borderRadius: BorderRadius.circular(mailboxDisplayed == MailboxDisplayed.mailbox ? 10 : 0), - color: mailboxDisplayed == MailboxDisplayed.mailbox - ? selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedBackgroundColor : AppColor.mailboxBackgroundColor - : Colors.white + borderRadius: BorderRadius.circular(0), + color: Colors.white ), child: MediaQuery( data: MediaQueryData(padding: EdgeInsets.zero), - child: ListTile( - contentPadding: EdgeInsets.zero, - onTap: () => { - if (_onOpenMailboxActionClick != null) { - _onOpenMailboxActionClick!(_presentationMailbox) - } - }, - leading: Padding( - padding: EdgeInsets.only(left: 8), - child: SvgPicture.asset( - '${_presentationMailbox.getMailboxIcon(_imagePaths)}', - width: 28, - height: 28, - fit: BoxFit.fill)), - title: Transform( - transform: Matrix4.translationValues(-10.0, 0.0, 0.0), - child: Row(children: [ - Expanded(child: Text( - '${_presentationMailbox.name?.name ?? ''}', - maxLines: 1, - overflow:TextOverflow.ellipsis, - style: TextStyle(fontSize: 15, color: AppColor.colorNameEmail), - )), - if (mailboxDisplayed == MailboxDisplayed.mailbox) - Transform( - transform: Matrix4.translationValues(40.0, 0.0, 0.0), - child: Text( - '${_presentationMailbox.getCountUnReadEmails()}', - maxLines: 1, - style: TextStyle(fontSize: 13, color: AppColor.colorNameEmail))) - ])), - trailing: Transform( - transform: Matrix4.translationValues(8.0, 0.0, 0.0), - child: IconButton( - color: AppColor.primaryColor, - icon: SvgPicture.asset(_imagePaths.icFolderArrow, color: AppColor.colorArrowUserMailbox, fit: BoxFit.fill), - onPressed: () { - if (_onOpenMailboxActionClick != null) { - _onOpenMailboxActionClick!(_presentationMailbox); - } - } - )) + child: Column(children: [ + ListTile( + contentPadding: EdgeInsets.zero, + onTap: () => { + if (_onOpenMailboxActionClick != null) { + _onOpenMailboxActionClick!(_presentationMailbox) + } + }, + leading: Padding( + padding: EdgeInsets.only(left: 8), + child: SvgPicture.asset( + '${_presentationMailbox.getMailboxIcon(_imagePaths)}', + width: 28, + height: 28, + fit: BoxFit.fill)), + title: Transform( + transform: Matrix4.translationValues(-10.0, 0.0, 0.0), + child: Row(children: [ + Expanded(child: Text( + '${_presentationMailbox.name?.name ?? ''}', + maxLines: 1, + overflow:TextOverflow.ellipsis, + style: TextStyle(fontSize: 15, color: AppColor.colorNameEmail), + )), + if (mailboxDisplayed == MailboxDisplayed.mailbox) + Transform( + transform: Matrix4.translationValues(40.0, 0.0, 0.0), + child: Text( + '${_presentationMailbox.getCountUnReadEmails()}', + maxLines: 1, + style: TextStyle(fontSize: 13, color: AppColor.colorNameEmail))) + ])), + trailing: Transform( + transform: Matrix4.translationValues(8.0, 0.0, 0.0), + child: IconButton( + color: AppColor.primaryColor, + icon: SvgPicture.asset(_imagePaths.icFolderArrow, color: AppColor.colorArrowUserMailbox, fit: BoxFit.fill), + onPressed: () { + if (_onOpenMailboxActionClick != null) { + _onOpenMailboxActionClick!(_presentationMailbox); + } + } + )) ), + if (!isLastElement) + Padding( + padding: EdgeInsets.only(left: 45), + child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)), + ]), ) ) ); diff --git a/lib/features/mailbox/presentation/widgets/user_information_widget_builder.dart b/lib/features/mailbox/presentation/widgets/user_information_widget_builder.dart index 49f44f1f6..b04bb6ca7 100644 --- a/lib/features/mailbox/presentation/widgets/user_information_widget_builder.dart +++ b/lib/features/mailbox/presentation/widgets/user_information_widget_builder.dart @@ -2,6 +2,7 @@ import 'package:core/core.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; +import 'package:get/get_utils/src/platform/platform.dart'; import 'package:model/model.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; @@ -30,54 +31,55 @@ class UserInformationWidgetBuilder { color: Colors.transparent, padding: EdgeInsets.zero, margin: EdgeInsets.zero, - child: ListTile( - contentPadding: EdgeInsets.zero, - onTap: () {}, - leading: Transform( - transform: Matrix4.translationValues(0.0, 0.0, 0.0), - child: (AvatarBuilder() - ..text(_userProfile != null ? _userProfile!.getAvatarText() : '') - ..backgroundColor(Colors.white) - ..textColor(Colors.black) - ..addBoxShadows([BoxShadow( + child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [ + (AvatarBuilder() + ..text(_userProfile != null ? _userProfile!.getAvatarText() : '') + ..backgroundColor(Colors.white) + ..textColor(Colors.black) + ..addBoxShadows([BoxShadow( color: AppColor.colorShadowBgContentEmail, spreadRadius: 2, blurRadius: 2, - offset: Offset(0, 1), // changes position of shadow - )]) - ..size(56)) - .build(), - ), - title: Transform( - transform: Matrix4.translationValues(8.0, 16.0, 0.0), - child: Text( - _userProfile != null ? _userProfile!.email : '', - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: TextStyle(fontSize: 17, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600)) - ), - subtitle: Transform( - transform: Matrix4.translationValues(0.0, 8.0, 0.0), - child: Material( - borderRadius: BorderRadius.circular(12), - color: Colors.transparent, - child: Align( - alignment: Alignment.centerLeft, - child: TextButton( - onPressed: () => _onLogoutActionClick?.call(), + offset: Offset(0, 1))]) + ..size(GetPlatform.isWeb ? 48 : 56)) + .build(), + Expanded(child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding( + padding: EdgeInsets.only(left: 16, top: 10), child: Text( - AppLocalizations.of(_context).logout, - style: TextStyle(fontSize: 14, color: AppColor.colorTextButton), - ), + _userProfile != null ? '${_userProfile?.email}' : '', + maxLines: 1, + overflow: GetPlatform.isWeb ? TextOverflow.clip : TextOverflow.ellipsis, + style: TextStyle(fontSize: 17, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600) + ) + ), + Padding( + padding: EdgeInsets.only(left: 10), + child: Material( + borderRadius: BorderRadius.circular(20), + color: Colors.transparent, + child: Align( + alignment: Alignment.centerLeft, + child: TextButton( + onPressed: () => _onLogoutActionClick?.call(), + child: Text( + AppLocalizations.of(_context).logout, + style: TextStyle(fontSize: 14, color: AppColor.colorTextButton), + ), + ) + ) ) ) - ) - ), - trailing: Transform( - transform: Matrix4.translationValues(10.0, 0.0, 0.0), + ])), + Transform( + transform: Matrix4.translationValues(14.0, 0.0, 0.0), child: IconButton( icon: SvgPicture.asset(_imagePaths.icNextArrow, width: 7, height: 12, fit: BoxFit.fill, color: AppColor.colorArrowUserMailbox), - onPressed: () => {}))), + onPressed: () => {})) + ]), ); } } \ No newline at end of file diff --git a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart index 13a5dda73..4721f6a65 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart @@ -27,7 +27,7 @@ class MailboxDashBoardView extends GetWidget { tabletLarge: Container( child: MailboxView(), width: responsiveUtils.getSizeWidthScreen(context) * 0.35), - desktop: null + desktop: SizedBox.shrink() ), drawerEnableOpenDragGesture: !responsiveUtils.isDesktop(context), body: ResponsiveWidget( @@ -38,12 +38,7 @@ class MailboxDashBoardView extends GetWidget { mainAxisAlignment: MainAxisAlignment.start, children: [ Expanded(flex: 1, child: MailboxView()), - Expanded( - flex: 1, - child: Padding( - padding: EdgeInsets.symmetric(horizontal: 16), - child: ThreadView(), - )), + Expanded(flex: 1, child: ThreadView()), Expanded(flex: 2, child: EmailView()), ], ), diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index dd1049c45..d86b46dfd 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -378,7 +378,8 @@ class ThreadView extends GetWidget { ..onOpenEmailAction((selectedEmail) => controller.previewEmail(context, selectedEmail)) ..onSelectEmailAction((selectedEmail) => controller.selectEmail(context, selectedEmail))) .build()), - )); + ) + ); } Widget _buildEmptyEmail(BuildContext context) { diff --git a/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart b/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart index 8bff80680..23c64ef46 100644 --- a/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart +++ b/lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart @@ -2,6 +2,7 @@ import 'package:core/core.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; +import 'package:get/get.dart'; import 'package:model/model.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; @@ -57,15 +58,23 @@ class AppBarThreadWidgetBuilder { padding: EdgeInsets.only(left: 8, top: 16, bottom: 8, right: 8), child: MediaQuery( data: MediaQueryData(padding: EdgeInsets.zero), - child: Row( - children: [ - if (_selectMode != SelectMode.ACTIVE) _buildEditButton(), - if (_selectMode == SelectMode.ACTIVE) _buildBackButton(), - if (_selectMode == SelectMode.ACTIVE) _buildCountItemSelected(), - Expanded(child: _buildContentCenterAppBar()), - _buildFilterButton(), - ] - ) + child: Row(children: [ + Expanded(child: Stack( + alignment: Alignment.center, + children: [ + if (_selectMode != SelectMode.ACTIVE) + Positioned(left: 0,child: _buildEditButton()), + if (_selectMode == SelectMode.ACTIVE) + Positioned(left: 0, child: _buildBackButton()), + if (_selectMode == SelectMode.ACTIVE) + Positioned(left: 40, child: _buildCountItemSelected()), + Positioned(right: 0, child: _buildFilterButton()), + Padding( + padding: EdgeInsets.only(left: 60, right: 40), + child: _buildContentCenterAppBar()), + ] + )) + ]) ) ); } @@ -135,7 +144,7 @@ class AppBarThreadWidgetBuilder { mainAxisAlignment: MainAxisAlignment.center, children: [ GestureDetector( - onTap: () => _onOpenListMailboxActionClick?.call(), + onTap: () => !_responsiveUtils.isDesktop(_context) ? _onOpenListMailboxActionClick?.call() : null, child: Padding( padding: EdgeInsets.zero, child: Container( @@ -145,19 +154,17 @@ class AppBarThreadWidgetBuilder { child: Text( '${_presentationMailbox?.name?.name.capitalizeFirstEach ?? ''}', maxLines: 1, - overflow: TextOverflow.ellipsis, + overflow: GetPlatform.isWeb ? TextOverflow.clip : TextOverflow.ellipsis, style: TextStyle(fontSize: 21, color: AppColor.colorNameEmail, fontWeight: FontWeight.w700)) ))), - Transform( - transform: Matrix4.translationValues(-10.0, 0.0, 0.0), - child: Material( - borderRadius: BorderRadius.circular(12), - color: Colors.transparent, - child: IconButton( - padding: EdgeInsets.zero, - color: AppColor.baseTextColor, - icon: SvgPicture.asset(_imagePaths.icChevronDown, width: 20, height: 16, fit: BoxFit.fill), - onPressed: () => _onOpenListMailboxActionClick?.call()))) + if (!_responsiveUtils.isDesktop(_context)) + Transform( + transform: Matrix4.translationValues(-8.0, 0.0, 0.0), + child: IconButton( + padding: EdgeInsets.zero, + color: AppColor.baseTextColor, + icon: SvgPicture.asset(_imagePaths.icChevronDown, width: 20, height: 16, fit: BoxFit.fill), + onPressed: () => !_responsiveUtils.isDesktop(_context) ? _onOpenListMailboxActionClick?.call() : null)) ] ); } @@ -172,8 +179,8 @@ class AppBarThreadWidgetBuilder { width = width * 0.35; widthSiblingsWidget = 250; } else if (_responsiveUtils.isDesktop(_context)) { - width = width * 0.2; - widthSiblingsWidget = 300; + width = width * 0.25; + widthSiblingsWidget = 150; } final maxWidth = width > widthSiblingsWidget ? width - widthSiblingsWidget : 0.0; return maxWidth; diff --git a/lib/features/thread/presentation/widgets/email_tile_builder.dart b/lib/features/thread/presentation/widgets/email_tile_builder.dart index 14e474b2e..1eac57639 100644 --- a/lib/features/thread/presentation/widgets/email_tile_builder.dart +++ b/lib/features/thread/presentation/widgets/email_tile_builder.dart @@ -3,6 +3,7 @@ import 'dart:math'; import 'package:core/core.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; +import 'package:get/get.dart'; import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart'; import 'package:model/model.dart'; import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart'; @@ -197,18 +198,17 @@ class EmailTileBuilder { transitionBuilder: _transitionBuilder, child: (IconBuilder(_presentationEmail.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelectedV2 : _imagePaths.icUnSelectedV2) ..padding(EdgeInsets.all(14)) - ..size(55) + ..size(GetPlatform.isWeb ? 48 : 56) ..addOnTapActionClick(() { if (_selectModeAll == SelectMode.ACTIVE && _onSelectEmailActionClick != null) { _onSelectEmailActionClick!(_presentationEmail); }})) .build() - ); } else { return (AvatarBuilder() ..text('${_presentationEmail.getAvatarText()}') - ..size(56) + ..size(GetPlatform.isWeb ? 48 : 56) ..textColor(Colors.white) ..avatarColor(_presentationEmail.avatarColors)) // .iconStatus(_imagePaths.icOffline) diff --git a/lib/features/thread/presentation/widgets/search_bar_thread_view_widget.dart b/lib/features/thread/presentation/widgets/search_bar_thread_view_widget.dart index 3ce18c8da..bdc0372e7 100644 --- a/lib/features/thread/presentation/widgets/search_bar_thread_view_widget.dart +++ b/lib/features/thread/presentation/widgets/search_bar_thread_view_widget.dart @@ -55,9 +55,10 @@ class SearchBarThreadViewWidget { crossAxisAlignment: CrossAxisAlignment.center, children: [ _buildSearchButton(), - Text( + Expanded(child: Text( _hintTextSearch ?? '', - style: TextStyle(fontSize: 17, color: AppColor.colorHintSearchBar),) + maxLines: 1, + style: TextStyle(fontSize: 17, color: AppColor.colorHintSearchBar))) ] ) )