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

TF-467 Apply new UI for mailbox browser

Browse Source
This commit is contained in:
dab246
2022-04-08 20:09:35 +07:00
committed by Dat H. Pham
parent 706ce81c03
commit 09be1eb833
15 changed files with 382 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart
+54 -18
View File
@@ -1,6 +1,8 @@
import 'package:core/core.dart';
import 'package:flutter/foundation.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/features/mailbox/domain/extensions/presentation_mailbox_extension.dart';
import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displayed.dart';
@@ -13,17 +15,22 @@ typedef OnSelectMailboxFolderClick = void Function(MailboxNode);
class MailBoxFolderTileBuilder {
final _responsiveUtils = Get.find<ResponsiveUtils>();
final MailboxNode _mailboxNode;
final BuildContext _context;
final ImagePaths _imagePaths;
final SelectMode allSelectMode;
final MailboxDisplayed mailboxDisplayed;
final MailboxNode? lastNode;
final PresentationMailbox? mailboxNodeSelected;
OnExpandFolderActionClick? _onExpandFolderActionClick;
OnOpenMailboxFolderClick? _onOpenMailboxFolderClick;
OnSelectMailboxFolderClick? _onSelectMailboxFolderClick;
bool isHoverIcon = false;
MailBoxFolderTileBuilder(
this._context,
this._imagePaths,
@@ -32,6 +39,7 @@ class MailBoxFolderTileBuilder {
this.allSelectMode = SelectMode.INACTIVE,
this.mailboxDisplayed = MailboxDisplayed.mailbox,
this.lastNode,
this.mailboxNodeSelected,
}
);
@@ -55,20 +63,20 @@ class MailBoxFolderTileBuilder {
child: Container(
key: Key('mailbox_folder_tile'),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(0),
color: Colors.white
borderRadius: BorderRadius.circular(kIsWeb ? 10 : 0),
color: backgroundColorItem
),
padding: kIsWeb ? EdgeInsets.only(left: 8, right: 4) : EdgeInsets.zero,
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: Column(children: [
ListTile(
hoverColor: Colors.transparent,
onTap: () => allSelectMode == SelectMode.ACTIVE
? _onSelectMailboxFolderClick?.call(_mailboxNode)
: _onOpenMailboxFolderClick?.call(_mailboxNode),
contentPadding: EdgeInsets.zero,
leading: allSelectMode == SelectMode.ACTIVE
? _buildSelectModeIcon()
: _buildMailboxIcon(),
leading: _buildLeadingIcon(),
title: _buildTitleFolderItem(),
trailing: _mailboxNode.hasChildren()
? Transform(
@@ -78,16 +86,16 @@ class MailBoxFolderTileBuilder {
_mailboxNode.expandMode == ExpandMode.EXPAND ? _imagePaths.icExpandFolder : _imagePaths.icCollapseFolder,
color: _mailboxNode.expandMode == ExpandMode.EXPAND ? AppColor.colorExpandMailbox : AppColor.colorCollapseMailbox,
fit: BoxFit.fill),
splashRadius: 15,
splashRadius: 10,
tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND ? AppLocalizations.of(_context).collapse : AppLocalizations.of(_context).expand,
onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)))
: _mailboxNode.item.getCountUnReadEmails().isNotEmpty
&& mailboxDisplayed == MailboxDisplayed.mailbox
&& !_mailboxNode.hasChildren()
? Padding(padding: EdgeInsets.only(right: 12), child: _buildCounter())
? SizedBox(width: 40)
: SizedBox.shrink()
),
if (lastNode?.item.id != _mailboxNode.item.id)
if (lastNode?.item.id != _mailboxNode.item.id && !kIsWeb)
Padding(
padding: EdgeInsets.only(left: allSelectMode == SelectMode.ACTIVE ? 50 : 35),
child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
@@ -97,6 +105,14 @@ class MailBoxFolderTileBuilder {
);
}
Widget _buildLeadingIcon() {
if (kIsWeb) {
return _mailboxNode.selectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon();
} else {
return allSelectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon();
}
}
Widget _buildTitleFolderItem() {
return Row(
children: [
@@ -112,8 +128,8 @@ class MailBoxFolderTileBuilder {
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.normal),
))),
if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty && mailboxDisplayed == MailboxDisplayed.mailbox && _mailboxNode.hasChildren())
Transform(transform: Matrix4.translationValues(30.0, 0.0, 0.0), child: _buildCounter())
if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty && mailboxDisplayed == MailboxDisplayed.mailbox)
Transform(transform: Matrix4.translationValues(25.0, 0.0, 0.0), child: _buildCounter())
],
);
}
@@ -128,22 +144,42 @@ class MailBoxFolderTileBuilder {
}
Widget _buildMailboxIcon() {
return SvgPicture.asset(
'${_mailboxNode.item.getMailboxIcon(_imagePaths)}',
width: 28,
height: 28,
fit: BoxFit.fill
);
if (kIsWeb) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return InkWell(
onTap: () {},
onHover: (value) => setState(() => isHoverIcon = value),
child: isHoverIcon
? _buildSelectModeIcon()
: SvgPicture.asset('${_mailboxNode.item.getMailboxIcon(_imagePaths)}', width: 28, height: 28, fit: BoxFit.fill)
);
});
} else {
return SvgPicture.asset('${_mailboxNode.item.getMailboxIcon(_imagePaths)}', width: 28, height: 28, fit: BoxFit.fill);
}
}
Widget _buildSelectModeIcon() {
return Transform(
transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0),
child: buildIconWeb(
icon: SvgPicture.asset(
_mailboxNode.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected,
width: kIsWeb ? 20 : 24,
height: kIsWeb ? 20 : 24,
fit: BoxFit.fill),
splashRadius: 15,
onTap: () => _onSelectMailboxFolderClick?.call(_mailboxNode)));
}
Color get backgroundColorItem {
if (kIsWeb) {
if (mailboxNodeSelected?.id == _mailboxNode.item.id) {
return AppColor.colorBgMailboxSelected;
}
return _responsiveUtils.isDesktop(_context) ? AppColor.colorBgDesktop : Colors.white;
} else {
return Colors.white;
}
}
}
lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart
+30 -16
View File
@@ -1,4 +1,5 @@
import 'package:core/core.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:model/model.dart';
@@ -14,6 +15,8 @@ class MailboxSearchTileBuilder {
final SelectMode allSelectMode;
final ImagePaths _imagePaths;
bool isHoverIcon = false;
OnOpenMailboxActionClick? _onOpenMailboxActionClick;
OnSelectMailboxActionClick? _onSelectMailboxActionClick;
@@ -42,10 +45,6 @@ class MailboxSearchTileBuilder {
child: Container(
key: Key('mailbox_list_tile'),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(0),
color: Colors.white
),
child: MediaQuery(
data: MediaQueryData(padding: EdgeInsets.zero),
child: Column(children: [
@@ -54,9 +53,7 @@ class MailboxSearchTileBuilder {
onTap: () => allSelectMode == SelectMode.ACTIVE
? _onSelectMailboxActionClick?.call(_presentationMailbox)
: _onOpenMailboxActionClick?.call(_presentationMailbox),
leading: allSelectMode == SelectMode.ACTIVE
? _buildSelectModeIcon()
: _buildMailboxIcon(),
leading: _buildLeadingIcon(),
title: Row(children: [
if (allSelectMode == SelectMode.ACTIVE)
Transform(
@@ -83,7 +80,7 @@ class MailboxSearchTileBuilder {
)
: null,
),
if (lastMailbox?.id != _presentationMailbox.id)
if (lastMailbox?.id != _presentationMailbox.id && !kIsWeb)
Padding(
padding: EdgeInsets.only(left: allSelectMode == SelectMode.ACTIVE ? 50 : 35),
child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
@@ -93,23 +90,40 @@ class MailboxSearchTileBuilder {
);
}
Widget _buildLeadingIcon() {
if (kIsWeb) {
return _presentationMailbox.selectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon();
} else {
return allSelectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon();
}
}
Widget _buildMailboxIcon() {
return SvgPicture.asset(
'${_presentationMailbox.getMailboxIcon(_imagePaths)}',
width: 28,
height: 28,
fit: BoxFit.fill
);
if (kIsWeb) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return InkWell(
onTap: () {},
onHover: (value) => setState(() => isHoverIcon = value),
child: isHoverIcon
? _buildSelectModeIcon()
: SvgPicture.asset('${_presentationMailbox.getMailboxIcon(_imagePaths)}', width: 28, height: 28, fit: BoxFit.fill)
);
});
} else {
return SvgPicture.asset('${_presentationMailbox.getMailboxIcon(_imagePaths)}', width: 28, height: 28, fit: BoxFit.fill);
}
}
Widget _buildSelectModeIcon() {
return Transform(
transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0),
child: buildIconWeb(
icon: SvgPicture.asset(
_presentationMailbox.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected,
width: kIsWeb ? 20 : 24,
height: kIsWeb ? 20 : 24,
fit: BoxFit.fill),
splashRadius: 15,
onTap: () => _onSelectMailboxActionClick?.call(_presentationMailbox)));
}
}
lib/features/mailbox/presentation/widgets/user_information_widget_builder.dart
+7 -5
View File
@@ -1,5 +1,6 @@
import 'package:core/core.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get_utils/src/platform/platform.dart';
@@ -72,11 +73,12 @@ class UserInformationWidgetBuilder {
)
)
])),
Transform(
transform: Matrix4.translationValues(14.0, 0.0, 0.0),
child: IconButton(
icon: SvgPicture.asset(_imagePaths.icCollapseFolder, fit: BoxFit.fill, color: AppColor.colorCollapseMailbox),
onPressed: () => {}))
if (!kIsWeb)
Transform(
transform: Matrix4.translationValues(14.0, 0.0, 0.0),
child: IconButton(
icon: SvgPicture.asset(_imagePaths.icCollapseFolder, fit: BoxFit.fill, color: AppColor.colorCollapseMailbox),
onPressed: () => {}))
]),
);
}