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

TF-248 Update UI for web

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