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

TF-4093 Make interface more compact

Browse Source
This commit is contained in:
dab246
2025-10-16 10:00:41 +07:00
committed by Dat H. Pham
parent 804f5e2a02
commit 7d80557582
23 changed files with 373 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/extensions/color_extension.dart
+1 -1
View File
@@ -93,7 +93,6 @@ extension AppColor on Color {
static const colorDividerEmailView = Color(0xFFD7D8D9);
static const colorButton = Color(0xFF959DAD);
static const colorTime = Color(0xFF92A1B4);
static const colorEmailAddressPrefix = Color(0xFF9AA7B6);
static const colorEmailAddressTag = Color(0xFFF4F4F4);
static const colorLineLeftEmailView = Color(0x2999A2AD);
static const colorShadowComposer = Color(0x1F000000);
@@ -258,6 +257,7 @@ extension AppColor on Color {
static const gray424244 = Color(0xFF424244);
static const lightGrayF4F4F4 = Color(0xFFF4F4F4);
static const gray959DAD = Color(0xFF959DAD);
static const gray9AA7B6 = Color(0xFF9AA7B6);
static const redFF3347 = Color(0xFFFF3347);
static const gray686E76 = Color(0xFF686E76);
static const lightGrayEBEDF0 = Color(0xFFEBEDF0);
core/lib/presentation/utils/theme_utils.dart
+8
View File
@@ -142,6 +142,14 @@ class ThemeUtils {
backgroundColor: backgroundColor,
);
static TextStyle textStyleBodySmallHeadline = defaultTextStyleInterFont.copyWith(
fontWeight: FontWeight.w600,
letterSpacing: -0.13,
fontSize: 13,
height: 16 / 13,
color: Colors.black,
);
static TextStyle textStyleHeadingH6({
Color? color,
FontWeight? fontWeight,
core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart
+3
View File
@@ -23,6 +23,7 @@ class HtmlContentViewerOnWeb extends StatefulWidget {
final TextDirection? direction;
final double? contentPadding;
final bool useDefaultFontStyle;
final double fontSize;
/// Handler for mailto: links
final OnMailtoClicked? mailtoDelegate;
@@ -60,6 +61,7 @@ class HtmlContentViewerOnWeb extends StatefulWidget {
this.keepAlive = false,
this.disableScrolling = false,
this.autoAdjustHeight = false,
this.fontSize = 14,
this.htmlContentMinHeight = ConstantsUI.htmlContentMinHeight,
this.htmlContentMinWidth = ConstantsUI.htmlContentMinWidth,
this.offsetHtmlContentHeight = ConstantsUI.htmlContentOffsetHeight,
@@ -406,6 +408,7 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb>
direction: widget.direction,
contentPadding: widget.contentPadding,
useDefaultFontStyle: widget.useDefaultFontStyle,
fontSize: widget.fontSize,
);
return htmlTemplate;
core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart
+3
View File
@@ -30,6 +30,7 @@ class HtmlContentViewer extends StatefulWidget {
final bool keepWidthWhileLoading;
final double? contentPadding;
final bool useDefaultFontStyle;
final double fontSize;
final double? maxHtmlContentHeight;
final double htmlContentMinHeight;
final double offsetHtmlContentHeight;
@@ -58,6 +59,7 @@ class HtmlContentViewer extends StatefulWidget {
this.contentPadding,
this.useDefaultFontStyle = false,
this.disableScrolling = false,
this.fontSize = 16,
this.maxViewHeight,
this.maxHtmlContentHeight,
this.onLoadWidthHtmlViewer,
@@ -151,6 +153,7 @@ class HtmlContentViewState extends State<HtmlContentViewer> with AutomaticKeepAl
styleCSS: combinedCss,
contentPadding: widget.contentPadding,
useDefaultFontStyle: widget.useDefaultFontStyle,
fontSize: widget.fontSize,
);
}
core/lib/presentation/views/html_viewer/ios_html_content_viewer_widget.dart
+1
View File
@@ -54,6 +54,7 @@ class _IosHtmlContentViewerWidgetState extends State<IosHtmlContentViewerWidget>
direction: widget.direction,
javaScripts: HtmlInteraction.scriptsHandleLazyLoadingBackgroundImage,
useDefaultFontStyle: widget.useDefaultFontStyle,
fontSize: 16,
));
}
core/lib/presentation/views/image/avatar_builder.dart
+12 -1
View File
@@ -18,6 +18,7 @@ class AvatarBuilder {
List<Color>? _avatarColors;
List<BoxShadow>? _boxShadows;
TextStyle? _textStyle;
EdgeInsetsGeometry? _padding;
void key(Key key) {
_key = key;
@@ -55,6 +56,10 @@ class AvatarBuilder {
_textStyle = textStyle;
}
void addPadding(EdgeInsetsGeometry? padding) {
_padding = padding;
}
void addOnTapActionClick(OnTapAvatarActionClick onTapAvatarActionClick) {
_onTapAvatarActionClick = onTapAvatarActionClick;
}
@@ -64,7 +69,7 @@ class AvatarBuilder {
}
Widget build() {
return InkWell(
final bodyWidget = InkWell(
onTap: _onTapAvatarActionClick,
onTapDown: (detail) {
if (_onTapAvatarActionWithPositionClick != null && _context != null) {
@@ -102,5 +107,11 @@ class AvatarBuilder {
)
),
);
if (_padding != null) {
return Padding(padding: _padding!, child: bodyWidget);
} else {
return bodyWidget;
}
}
}
core/lib/utils/html/html_template.dart
+4 -5
View File
@@ -103,12 +103,11 @@ class HtmlTemplate {
}
''';
static const String defaultFontStyle = '''
div, p, span, th, td, tr, ul, ol, li, a, button {
static String defaultFontStyle({double fontSize = 14}) => '''
body {
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.01em; /* -1% */
font-size: ${fontSize}px;
font-style: normal;
}
p {
core/lib/utils/html/html_utils.dart
+2 -1
View File
@@ -123,6 +123,7 @@ class HtmlUtils {
String? javaScripts,
bool hideScrollBar = true,
bool useDefaultFontStyle = false,
double fontSize = 14,
TextDirection? direction,
double? contentPadding,
}) {
@@ -135,7 +136,7 @@ class HtmlUtils {
<style>
${HtmlTemplate.fontFaceStyle}
${useDefaultFontStyle ? HtmlTemplate.defaultFontStyle : ''}
${useDefaultFontStyle ? HtmlTemplate.defaultFontStyle(fontSize: fontSize) : ''}
.tmail-content {
min-height: ${minHeight ?? 0}px;
lib/features/base/widget/email_avatar_builder.dart
+6 -1
View File
@@ -11,12 +11,16 @@ class EmailAvatarBuilder extends StatelessWidget {
final PresentationEmail emailSelected;
final OnTapAvatarActionClick? onTapAvatarActionClick;
final double? size;
final TextStyle? textStyle;
final EdgeInsetsGeometry? padding;
const EmailAvatarBuilder({
Key? key,
required this.emailSelected,
this.onTapAvatarActionClick,
this.size,
this.textStyle,
this.padding,
}) : super(key: key);
@override
@@ -24,8 +28,9 @@ class EmailAvatarBuilder extends StatelessWidget {
return (AvatarBuilder()
..text(emailSelected.getAvatarText())
..size(size ?? 50)
..addTextStyle(ThemeUtils.textStyleHeadingH4(color: Colors.white))
..addTextStyle(textStyle ?? ThemeUtils.textStyleHeadingH4(color: Colors.white))
..backgroundColor(AppColor.colorAvatar)
..addPadding(padding)
..addOnTapActionClick(onTapAvatarActionClick ?? () {})
..avatarColor(emailSelected.avatarColors))
.build();
lib/features/email/presentation/email_view.dart
+8 -13
View File
@@ -244,9 +244,8 @@ class EmailView extends GetWidget<SingleEmailController> {
presentationEmail: presentationEmail.copyWith(
subject: threadSubject,
),
)
else
const SizedBox(height: 16),
isMobileResponsive: isMobileResponsive,
),
Obx(() => InformationSenderAndReceiverBuilder(
emailSelected: presentationEmail,
imagePaths: controller.imagePaths,
@@ -254,6 +253,7 @@ class EmailView extends GetWidget<SingleEmailController> {
sMimeStatus: controller.currentEmailLoaded.value?.sMimeStatus,
emailUnsubscribe: controller.emailUnsubscribe.value,
maxBodyHeight: bodyConstraints.maxHeight,
isInsideThreadCollapsed: false,
openEmailAddressDetailAction: (_, emailAddress) => controller.openEmailAddressDialog(emailAddress),
onEmailActionClick: (presentationEmail, actionType) => controller.handleEmailAction(context, presentationEmail, actionType),
isInsideThreadDetailView: isInsideThreadDetailView,
@@ -287,8 +287,6 @@ class EmailView extends GetWidget<SingleEmailController> {
controller.mailboxDashBoardController.mapMailboxById,
),
)),
if (!isMobileResponsive)
const SizedBox(height: 16),
Obx(() => MailUnsubscribedBanner(
presentationEmail: controller.currentEmail,
emailUnsubscribe: controller.emailUnsubscribe.value
@@ -359,6 +357,7 @@ class EmailView extends GetWidget<SingleEmailController> {
useDefaultFontStyle: true,
scrollController: scrollController,
enableQuoteToggle: true,
fontSize: isMobileResponsive ? 16 : 14,
),
);
} else if (PlatformInfo.isIOS) {
@@ -370,10 +369,7 @@ class EmailView extends GetWidget<SingleEmailController> {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsetsDirectional.symmetric(
vertical: EmailViewStyles.mobileContentVerticalMargin,
horizontal: EmailViewStyles.mobileContentHorizontalMargin,
),
padding: EmailViewStyles.mobileEmailContentPadding,
child: HtmlContentViewer(
key: PlatformInfo.isIntegrationTesting
? controller.htmlContentViewKey
@@ -389,6 +385,7 @@ class EmailView extends GetWidget<SingleEmailController> {
onScrollHorizontalEnd: controller.onScrollHorizontalEnd,
keepAlive: isInsideThreadDetailView,
enableQuoteToggle: true,
fontSize: isMobileResponsive ? 16 : 14,
),
),
Obx(() {
@@ -411,10 +408,7 @@ class EmailView extends GetWidget<SingleEmailController> {
});
} else {
return Padding(
padding: const EdgeInsetsDirectional.symmetric(
vertical: EmailViewStyles.mobileContentVerticalMargin,
horizontal: EmailViewStyles.mobileContentHorizontalMargin
),
padding: EmailViewStyles.mobileEmailContentPadding,
child: HtmlContentViewer(
key: PlatformInfo.isIntegrationTesting
? controller.htmlContentViewKey
@@ -428,6 +422,7 @@ class EmailView extends GetWidget<SingleEmailController> {
keepAlive: isInsideThreadDetailView,
enableQuoteToggle: true,
onScrollHorizontalEnd: controller.onScrollHorizontalEnd,
fontSize: isMobileResponsive ? 16 : 14,
)
);
}
lib/features/email/presentation/styles/email_subject_styles.dart
+10 -4
View File
@@ -1,12 +1,18 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/utils/theme_utils.dart';
import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart';
class EmailSubjectStyles {
static int? maxLines = PlatformInfo.isWeb ? 2 : null;
static const Color cursorColor = AppColor.colorTextButton;
static const EdgeInsetsGeometry padding = EdgeInsets.all(16);
static const EdgeInsetsGeometry mobilePadding = EdgeInsets.all(12);
static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(vertical: 12, horizontal: 16);
static final TextStyle textStyle = ThemeUtils.textStyleInter500().copyWith(
overflow: PlatformInfo.isWeb ? TextOverflow.ellipsis : null,
color: Colors.black,
fontSize: 24,
height: 1,
letterSpacing: -0.24,
);
}
lib/features/email/presentation/styles/email_view_app_bar_widget_styles.dart
+12 -3
View File
@@ -25,10 +25,19 @@ class EmailViewAppBarWidgetStyles {
if (responsiveUtils.isLandscapeMobile(context)) {
return EdgeInsets.zero;
} else if (responsiveUtils.isPortraitTablet(context) || responsiveUtils.isLandscapeTablet(context)) {
return const EdgeInsetsDirectional.only(top: 40, start: 16, end: 16, bottom: 4);
return const EdgeInsetsDirectional.only(
top: 40,
start: 12,
end: 12,
bottom: 4,
);
} else {
return const EdgeInsetsDirectional.only(start: 16, end: 16, bottom: 4);
return const EdgeInsetsDirectional.only(start: 12, end: 12, bottom: 4);
}
}
static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(horizontal: 16);
static const EdgeInsetsGeometry mobilePadding =
EdgeInsetsDirectional.only(start: 8, end: 12);
static const EdgeInsetsGeometry padding =
EdgeInsetsDirectional.symmetric(horizontal: 16);
}
lib/features/email/presentation/styles/email_view_styles.dart
+3 -15
View File
@@ -1,20 +1,8 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/utils/icon_utils.dart';
import 'package:flutter/material.dart';
class EmailViewStyles {
static const double mobileContentHorizontalMargin = 16;
static const double mobileContentVerticalMargin = 12;
static double pageViewIconSize = IconUtils.defaultIconSize;
static const double initialHtmlViewHeight = 200;
static const Color iconColor = AppColor.steelGrayA540;
static const EdgeInsetsGeometry emailContentPadding =
EdgeInsetsDirectional.only(
start: 16,
end: 16,
top: 8,
);
EdgeInsetsDirectional.symmetric(horizontal: 16);
static const EdgeInsetsGeometry mobileEmailContentPadding =
EdgeInsetsDirectional.only(start: 12, end: 12, top: 12);
}
lib/features/email/presentation/widgets/email_receiver_widget.dart
+119 -129
View File
@@ -63,37 +63,11 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
primary: false,
shrinkWrap: true,
padding: EdgeInsets.zero,
children: [
if (widget.emailSelected.to.numberEmailAddress() > 0)
_buildRecipientsWidgetToDisplayFull(
context: context,
prefixEmailAddress: PrefixEmailAddress.to,
listEmailAddress: PrefixEmailAddress.to.listEmailAddress(widget.emailSelected)
),
if (widget.emailSelected.cc.numberEmailAddress() > 0)
_buildRecipientsWidgetToDisplayFull(
context: context,
prefixEmailAddress: PrefixEmailAddress.cc,
listEmailAddress: PrefixEmailAddress.cc.listEmailAddress(widget.emailSelected)
),
if (widget.emailSelected.bcc.numberEmailAddress() > 0)
_buildRecipientsWidgetToDisplayFull(
context: context,
prefixEmailAddress: PrefixEmailAddress.bcc,
listEmailAddress: PrefixEmailAddress.bcc.listEmailAddress(widget.emailSelected)
),
],
children: _buildListFullDisplayRecipients(),
),
)
),
TMailButtonWidget.fromText(
text: AppLocalizations.of(context).hide,
textStyle: ThemeUtils.textStyleBodyBody1(
color: AppColor.steelGray400,
),
backgroundColor: Colors.transparent,
onTapActionCallback: () => setState(() => _isDisplayAll = false),
)
_buildHideButton(),
]
);
} else {
@@ -103,44 +77,18 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: _getMaxWidth(context),
maxHeight: _responsiveUtils.isMobile(context) ? 22 : 28,
maxHeight: 22,
),
child: ListView(
scrollDirection: Axis.horizontal,
physics: const NeverScrollableScrollPhysics(),
padding: EdgeInsets.zero,
shrinkWrap: true,
children: [
if (widget.emailSelected.to.numberEmailAddress() > 0)
..._buildRecipientsWidget(
context: context,
prefixEmailAddress: PrefixEmailAddress.to,
listEmailAddress: PrefixEmailAddress.to.listEmailAddress(widget.emailSelected)
),
if (widget.emailSelected.cc.numberEmailAddress() > 0)
..._buildRecipientsWidget(
context: context,
prefixEmailAddress: PrefixEmailAddress.cc,
listEmailAddress: PrefixEmailAddress.cc.listEmailAddress(widget.emailSelected)
),
if (widget.emailSelected.bcc.numberEmailAddress() > 0)
..._buildRecipientsWidget(
context: context,
prefixEmailAddress: PrefixEmailAddress.bcc,
listEmailAddress: PrefixEmailAddress.bcc.listEmailAddress(widget.emailSelected)
),
]
children: _buildListRecipients(),
),
),
if (widget.emailSelected.countRecipients > 1)
TMailButtonWidget.fromIcon(
icon: _imagePaths.icChevronDownOutline,
iconColor: AppColor.steelGray400,
padding: const EdgeInsets.all(3),
iconSize: 20,
backgroundColor: Colors.transparent,
onTapActionCallback: () => setState(() => _isDisplayAll = true),
)
_buildShowAllButton(),
]
);
}
@@ -153,38 +101,10 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
if (widget.emailSelected.to.numberEmailAddress() > 0)
_buildRecipientsWidgetToDisplayFull(
context: context,
prefixEmailAddress: PrefixEmailAddress.to,
listEmailAddress: PrefixEmailAddress.to.listEmailAddress(widget.emailSelected)
),
if (widget.emailSelected.cc.numberEmailAddress() > 0)
_buildRecipientsWidgetToDisplayFull(
context: context,
prefixEmailAddress: PrefixEmailAddress.cc,
listEmailAddress: PrefixEmailAddress.cc.listEmailAddress(widget.emailSelected)
),
if (widget.emailSelected.bcc.numberEmailAddress() > 0)
_buildRecipientsWidgetToDisplayFull(
context: context,
prefixEmailAddress: PrefixEmailAddress.bcc,
listEmailAddress: PrefixEmailAddress.bcc.listEmailAddress(widget.emailSelected)
),
],
children: _buildListFullDisplayRecipients(),
)
),
TMailButtonWidget.fromText(
text: AppLocalizations.of(context).hide,
textStyle: Theme.of(context).textTheme.labelMedium?.copyWith(
color: AppColor.primaryColor,
fontSize: 15
),
backgroundColor: Colors.transparent,
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
onTapActionCallback: () => setState(() => _isDisplayAll = false),
)
_buildHideButton(),
]
);
} else {
@@ -193,67 +113,128 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 40,
height: 22,
constraints: BoxConstraints(maxWidth: _getMaxWidth(context)),
child: ListView(
scrollDirection: Axis.horizontal,
physics: const NeverScrollableScrollPhysics(),
padding: EdgeInsets.zero,
shrinkWrap: true,
children: [
if (widget.emailSelected.to.numberEmailAddress() > 0)
..._buildRecipientsWidget(
context: context,
prefixEmailAddress: PrefixEmailAddress.to,
listEmailAddress: PrefixEmailAddress.to.listEmailAddress(widget.emailSelected)
),
if (widget.emailSelected.cc.numberEmailAddress() > 0)
..._buildRecipientsWidget(
context: context,
prefixEmailAddress: PrefixEmailAddress.cc,
listEmailAddress: PrefixEmailAddress.cc.listEmailAddress(widget.emailSelected)
),
if (widget.emailSelected.bcc.numberEmailAddress() > 0)
..._buildRecipientsWidget(
context: context,
prefixEmailAddress: PrefixEmailAddress.bcc,
listEmailAddress: PrefixEmailAddress.bcc.listEmailAddress(widget.emailSelected)
),
]
children: _buildListRecipients(),
),
),
if (widget.emailSelected.countRecipients > 1)
TMailButtonWidget.fromIcon(
icon: _imagePaths.icChevronDown,
backgroundColor: Colors.transparent,
padding: const EdgeInsets.all(3),
onTapActionCallback: () => setState(() => _isDisplayAll = true),
)
_buildShowAllButton(),
]
);
}
}
}
Widget _buildHideButton() {
return TMailButtonWidget.fromText(
text: AppLocalizations.of(context).hide,
textStyle: ThemeUtils.textStyleInter500().copyWith(
color: AppColor.gray6D7885,
fontSize: 14,
height: 1,
letterSpacing: -0.14,
),
padding: const EdgeInsetsDirectional.symmetric(
horizontal: 8,
vertical: 3,
),
backgroundColor: Colors.transparent,
onTapActionCallback: () => setState(() => _isDisplayAll = false),
);
}
Widget _buildShowAllButton() {
return TMailButtonWidget.fromIcon(
icon: _imagePaths.icChevronDownOutline,
iconColor: AppColor.steelGray400,
padding: const EdgeInsets.all(2),
iconSize: 20,
backgroundColor: Colors.transparent,
onTapActionCallback: () => setState(() => _isDisplayAll = true),
);
}
List<Widget> _buildListFullDisplayRecipients() {
return [
if (widget.emailSelected.to.numberEmailAddress() > 0)
_buildRecipientsWidgetToDisplayFull(
context: context,
prefixEmailAddress: PrefixEmailAddress.to,
listEmailAddress: PrefixEmailAddress.to.listEmailAddress(
widget.emailSelected,
),
padding: const EdgeInsets.only(bottom: 4),
),
if (widget.emailSelected.cc.numberEmailAddress() > 0)
_buildRecipientsWidgetToDisplayFull(
context: context,
prefixEmailAddress: PrefixEmailAddress.cc,
listEmailAddress: PrefixEmailAddress.cc.listEmailAddress(
widget.emailSelected,
),
padding: const EdgeInsets.only(bottom: 4),
),
if (widget.emailSelected.bcc.numberEmailAddress() > 0)
_buildRecipientsWidgetToDisplayFull(
context: context,
prefixEmailAddress: PrefixEmailAddress.bcc,
listEmailAddress: PrefixEmailAddress.bcc.listEmailAddress(
widget.emailSelected,
),
),
];
}
List<Widget> _buildListRecipients() {
return [
if (widget.emailSelected.to.numberEmailAddress() > 0)
..._buildRecipientsWidget(
context: context,
prefixEmailAddress: PrefixEmailAddress.to,
listEmailAddress: PrefixEmailAddress.to.listEmailAddress(
widget.emailSelected,
),
),
if (widget.emailSelected.cc.numberEmailAddress() > 0)
..._buildRecipientsWidget(
context: context,
prefixEmailAddress: PrefixEmailAddress.cc,
listEmailAddress: PrefixEmailAddress.cc.listEmailAddress(
widget.emailSelected,
),
),
if (widget.emailSelected.bcc.numberEmailAddress() > 0)
..._buildRecipientsWidget(
context: context,
prefixEmailAddress: PrefixEmailAddress.bcc,
listEmailAddress: PrefixEmailAddress.bcc.listEmailAddress(
widget.emailSelected,
),
),
];
}
List<Widget> _buildRecipientsTag({required List<EmailAddress> listEmailAddress}) {
final isMobileResponsive = _responsiveUtils.isMobile(context);
return listEmailAddress
.mapIndexed((index, emailAddress) => TMailButtonWidget.fromText(
text: index == listEmailAddress.length - 1
? emailAddress.asString()
: '${emailAddress.asString()},',
textStyle: ThemeUtils.textStyleHeadingHeadingSmall(
color: _responsiveUtils.isMobile(context) ? AppColor.gray6D7885 : Colors.black,
fontWeight: FontWeight.w400,
).copyWith(
fontSize: _responsiveUtils.isMobile(context) ? 14 : 17,
textStyle: ThemeUtils.textStyleInter400.copyWith(
fontSize: 14,
height: 1,
letterSpacing: _responsiveUtils.isMobile(context) ? -0.14 : -0.17,
letterSpacing: -0.14,
color: isMobileResponsive ? AppColor.gray6D7885 : Colors.black,
),
padding: EdgeInsetsDirectional.symmetric(
vertical: _responsiveUtils.isMobile(context) ? 2.5 : 3.5,
horizontal: 8,
),
margin: EdgeInsetsDirectional.only(top: _responsiveUtils.isMobile(context) ? 1.5 : 2),
padding: const EdgeInsetsDirectional.all(4),
backgroundColor: Colors.transparent,
onTapActionCallback: () => widget.openEmailAddressDetailAction?.call(context, emailAddress),
onLongPressActionCallback: () => AppUtils.copyEmailAddressToClipboard(context, emailAddress.emailAddress),
@@ -261,26 +242,34 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
.toList();
}
Widget _buildRecipientsWidgetToDisplayFull({
required BuildContext context,
required PrefixEmailAddress prefixEmailAddress,
required List<EmailAddress> listEmailAddress,
EdgeInsetsGeometry? padding,
}) {
return Row(
final bodyWidget = Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
PrefixRecipientWidget(
prefixEmailAddress: prefixEmailAddress,
responsiveUtils: _responsiveUtils,
isMobileResponsive: _responsiveUtils.isMobile(context),
padding: const EdgeInsetsDirectional.symmetric(vertical: 4),
),
Expanded(
child: Wrap(
runSpacing: 4,
children: _buildRecipientsTag(listEmailAddress: listEmailAddress)
)
)
],
);
if (padding != null) {
return Padding(padding: padding, child: bodyWidget);
} else {
return bodyWidget;
}
}
List<Widget> _buildRecipientsWidget({
@@ -291,7 +280,8 @@ class _EmailReceiverWidgetState extends State<EmailReceiverWidget> {
return [
PrefixRecipientWidget(
prefixEmailAddress: prefixEmailAddress,
responsiveUtils: _responsiveUtils,
isMobileResponsive: _responsiveUtils.isMobile(context),
padding: const EdgeInsetsDirectional.only(top: 4),
),
..._buildRecipientsTag(listEmailAddress: listEmailAddress).map(
(child) => Align(alignment: AlignmentDirectional.topStart, child: child),
lib/features/email/presentation/widgets/email_sender_builder.dart
+10 -7
View File
@@ -15,12 +15,14 @@ class EmailSenderBuilder extends StatelessWidget {
final EmailAddress emailAddress;
final OnOpenEmailAddressDetailAction? openEmailAddressDetailAction;
final bool showSenderEmail;
final bool isMobileResponsive;
const EmailSenderBuilder({
super.key,
required this.emailAddress,
this.openEmailAddressDetailAction,
this.showSenderEmail = true,
this.isMobileResponsive = false,
});
@override
@@ -43,10 +45,12 @@ class EmailSenderBuilder extends StatelessWidget {
},
borderRadius: 8,
padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 4),
customStyle: ThemeUtils.textStyleHeadingH6(
customStyle: ThemeUtils.textStyleInter500().copyWith(
color: Colors.black,
fontWeight: FontWeight.w500,
).copyWith(height: 1, letterSpacing: -0.2),
fontSize: isMobileResponsive ? 20 : 15,
height: isMobileResponsive ? 1 : 20 / 15,
letterSpacing: isMobileResponsive ? -0.2 : 0.0,
),
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap
),
@@ -59,12 +63,11 @@ class EmailSenderBuilder extends StatelessWidget {
},
borderRadius: 8,
padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 4),
customStyle: ThemeUtils.textStyleBodyBody1(
customStyle: ThemeUtils.textStyleInter500().copyWith(
color: AppColor.gray6D7885,
).copyWith(
fontSize: 17,
fontSize: 14,
height: 1,
letterSpacing: -0.17,
letterSpacing: -0.14,
),
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap
lib/features/email/presentation/widgets/email_subject_widget.dart
+10 -7
View File
@@ -1,5 +1,3 @@
import 'package:core/presentation/utils/theme_utils.dart';
import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart';
import 'package:model/email/presentation_email.dart';
import 'package:tmail_ui_user/features/email/presentation/styles/email_subject_styles.dart';
@@ -7,8 +5,13 @@ import 'package:tmail_ui_user/features/email/presentation/styles/email_subject_s
class EmailSubjectWidget extends StatelessWidget {
final PresentationEmail presentationEmail;
final bool isMobileResponsive;
const EmailSubjectWidget({super.key, required this.presentationEmail});
const EmailSubjectWidget({
super.key,
required this.presentationEmail,
this.isMobileResponsive = false,
});
@override
Widget build(BuildContext context) {
@@ -17,12 +20,12 @@ class EmailSubjectWidget extends StatelessWidget {
}
return Padding(
padding: EmailSubjectStyles.padding,
padding: isMobileResponsive
? EmailSubjectStyles.mobilePadding
: EmailSubjectStyles.padding,
child: Text(
presentationEmail.getEmailTitle(),
style: ThemeUtils.textStyleHeadingH5(color: Colors.black).copyWith(
overflow: PlatformInfo.isWeb ? TextOverflow.ellipsis : null,
),
style: EmailSubjectStyles.textStyle,
maxLines: EmailSubjectStyles.maxLines,
)
);
lib/features/email/presentation/widgets/information_sender_and_receiver_builder.dart
+49 -15
View File
@@ -42,6 +42,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
final VoidCallback? onToggleThreadDetailCollapseExpand;
final PresentationMailbox? mailboxContain;
final bool showUnreadVisualization;
final bool isInsideThreadCollapsed;
const InformationSenderAndReceiverBuilder({
Key? key,
@@ -60,16 +61,18 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
this.onToggleThreadDetailCollapseExpand,
this.mailboxContain,
this.showUnreadVisualization = false,
this.isInsideThreadCollapsed = false,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final isMobileResponsive = responsiveUtils.isMobile(context);
final crossAxisAlignment = _getAxisAlignment(isMobileResponsive);
return Padding(
padding: const EdgeInsetsDirectional.symmetric(horizontal: 16, vertical: 4),
padding: _getPadding(isMobileResponsive),
child: Row(
crossAxisAlignment: emailSelected.countRecipients > 0 && (showRecipients || responsiveUtils.isMobile(context))
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
crossAxisAlignment: crossAxisAlignment,
children: [
EmailAvatarBuilder(
emailSelected: emailSelected,
@@ -81,7 +84,18 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
);
}
},
size: 56,
size: isMobileResponsive ? 44 : 32,
textStyle: !isMobileResponsive
? ThemeUtils.textStyleHeadingHeadingSmall(color: Colors.white)
: ThemeUtils.textStyleInter600().copyWith(
fontSize: 18.86,
height: 17.29 / 18.86,
letterSpacing: -0.32,
color: Colors.white,
),
padding: crossAxisAlignment == CrossAxisAlignment.start
? const EdgeInsetsDirectional.only(top: 4)
: null,
),
const SizedBox(width: 16),
Expanded(child: LayoutBuilder(builder: (context, constraints) {
@@ -98,7 +112,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
children: [
if (showUnreadVisualization &&
!emailSelected.hasRead &&
responsiveUtils.isMobile(context))
isMobileResponsive)
TMailButtonWidget.fromIcon(
icon: imagePaths.icUnreadStatus,
backgroundColor: Colors.transparent,
@@ -114,9 +128,10 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
emailAddress: emailSelected.from!.first,
openEmailAddressDetailAction: openEmailAddressDetailAction,
showSenderEmail: _showSenderEmail(
responsiveUtils.isMobile(context),
isMobileResponsive,
senderEmail: emailSelected.from!.first,
),
isMobileResponsive: isMobileResponsive,
),
),
if (sMimeStatus != null && sMimeStatus != SMimeSignatureStatus.notSigned)
@@ -134,19 +149,20 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
if (!emailSelected.isSubscribed && emailUnsubscribe != null && !responsiveUtils.isPortraitMobile(context))
TMailButtonWidget.fromText(
text: AppLocalizations.of(context).unsubscribe,
textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
fontWeight: FontWeight.normal,
textStyle: ThemeUtils.textStyleInter400.copyWith(
fontSize: 14,
color: AppColor.colorTextBody,
height: 1,
letterSpacing: -0.14,
color: AppColor.gray6D7885,
decoration: TextDecoration.underline,
),
padding: const EdgeInsetsDirectional.symmetric(vertical: 4, horizontal: 8),
backgroundColor: Colors.transparent,
onTapActionCallback: () => onEmailActionClick?.call(emailSelected, EmailActionType.unsubscribe),
),
if (_showAttachmentIcon() && !responsiveUtils.isMobile(context))
if (_showAttachmentIcon() && !isMobileResponsive)
Padding(
padding: const EdgeInsetsDirectional.only(start: 16),
padding: const EdgeInsetsDirectional.only(start: 8),
child: SvgPicture.asset(
imagePaths.icAttachment,
colorFilter: AppColor.steelGray200.asFilter(),
@@ -154,7 +170,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
height: 20,
),
),
if (isInsideThreadDetailView && !responsiveUtils.isMobile(context))
if (isInsideThreadDetailView && !isMobileResponsive)
ReceivedTimeBuilder(
emailSelected: emailSelected,
padding: const EdgeInsetsDirectional.only(start: 8, top: 2),
@@ -162,7 +178,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
),
if (showUnreadVisualization &&
!emailSelected.hasRead &&
!responsiveUtils.isMobile(context))
!isMobileResponsive)
TMailButtonWidget.fromIcon(
icon: imagePaths.icUnreadStatus,
backgroundColor: Colors.transparent,
@@ -208,7 +224,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
),
],
),
if (responsiveUtils.isMobile(context) && isInsideThreadDetailView)
if (isMobileResponsive && isInsideThreadDetailView)
Row(
children: [
if (_showAttachmentIcon())
@@ -244,6 +260,24 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
);
}
EdgeInsetsGeometry _getPadding(bool isMobileResponsive) {
if (isInsideThreadCollapsed) {
return EdgeInsetsDirectional.symmetric(
horizontal: isMobileResponsive ? 12 : 16,
vertical: isMobileResponsive ? 12 : 8,
);
} else {
return EdgeInsetsDirectional.all(isMobileResponsive ? 12 : 16);
}
}
CrossAxisAlignment _getAxisAlignment(bool isMobileResponsive) {
return emailSelected.countRecipients > 0 &&
(showRecipients || isMobileResponsive)
? CrossAxisAlignment.start
: CrossAxisAlignment.center;
}
bool _showSenderEmail(
bool isResponsiveMobile, {
required EmailAddress senderEmail,
lib/features/email/presentation/widgets/prefix_recipient_widget.dart
+17 -16
View File
@@ -1,6 +1,4 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/utils/theme_utils.dart';
import 'package:flutter/material.dart';
import 'package:model/email/prefix_email_address.dart';
@@ -8,29 +6,32 @@ import 'package:tmail_ui_user/features/composer/presentation/extensions/prefix_e
class PrefixRecipientWidget extends StatelessWidget {
final PrefixEmailAddress prefixEmailAddress;
final ResponsiveUtils responsiveUtils;
final EdgeInsetsGeometry? padding;
final bool isMobileResponsive;
const PrefixRecipientWidget({
super.key,
required this.prefixEmailAddress,
required this.responsiveUtils,
this.isMobileResponsive = false,
this.padding,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.symmetric(vertical: responsiveUtils.isMobile(context) ? 4 : 5.5),
child: Text(
'${prefixEmailAddress.asName(context)}:',
style: ThemeUtils.textStyleBodyBody1(
color: AppColor.steelGray400,
fontWeight: FontWeight.w400,
).copyWith(
fontSize: responsiveUtils.isMobile(context) ? 14 : 17,
height: 1,
letterSpacing: responsiveUtils.isMobile(context) ? -0.14 : -0.17
),
final bodyWidget = Text(
'${prefixEmailAddress.asName(context)}:',
style: ThemeUtils.textStyleInter400.copyWith(
fontSize: 14,
height: 1,
letterSpacing: -0.14,
color: isMobileResponsive ? AppColor.gray6D7885 : AppColor.gray9AA7B6,
),
);
if (padding != null) {
return Padding(padding: padding!, child: bodyWidget);
} else {
return bodyWidget;
}
}
}
lib/features/email/presentation/widgets/received_time_builder.dart
+4 -2
View File
@@ -37,9 +37,11 @@ class ReceivedTimeBuilder extends StatelessWidget {
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap,
style: ThemeUtils.textStyleBodyBody3(color: AppColor.steelGray400).copyWith(
style: ThemeUtils.textStyleInter400.copyWith(
fontSize: 14,
height: 1,
letterSpacing: -0.14
letterSpacing: -0.14,
color: AppColor.gray6D7885,
),
),
);
lib/features/thread_detail/presentation/extension/get_thread_details_email_views.dart
+16 -22
View File
@@ -67,37 +67,31 @@ extension GetThreadDetailEmailViews on ThreadDetailController {
}
if (isFirstEmailInThreadDetail) {
return Padding(
padding: const EdgeInsetsDirectional.only(bottom: 16),
child: EmailView(
key: PlatformInfo.isWeb
? GlobalObjectKey(presentationEmail.id?.id.value ?? '')
: null,
isInsideThreadDetailView: true,
emailId: presentationEmail.id,
isFirstEmailInThreadDetail: true,
threadSubject: emailIdsPresentation.values.last?.subject,
onToggleThreadDetailCollapseExpand: () {
toggleThreadDetailCollapseExpand(presentationEmail);
},
scrollController: scrollController,
),
);
}
return Padding(
padding: const EdgeInsetsDirectional.only(bottom: 16),
child: EmailView(
return EmailView(
key: PlatformInfo.isWeb
? GlobalObjectKey(presentationEmail.id?.id.value ?? '')
: null,
isInsideThreadDetailView: true,
emailId: presentationEmail.id,
isFirstEmailInThreadDetail: true,
threadSubject: emailIdsPresentation.values.last?.subject,
onToggleThreadDetailCollapseExpand: () {
toggleThreadDetailCollapseExpand(presentationEmail);
},
scrollController: scrollController,
),
);
}
return EmailView(
key: PlatformInfo.isWeb
? GlobalObjectKey(presentationEmail.id?.id.value ?? '')
: null,
isInsideThreadDetailView: true,
emailId: presentationEmail.id,
onToggleThreadDetailCollapseExpand: () {
toggleThreadDetailCollapseExpand(presentationEmail);
},
scrollController: scrollController,
);
}).toList();
}
lib/features/thread_detail/presentation/widgets/thread_detail_app_bar.dart
+4 -2
View File
@@ -108,7 +108,7 @@ class ThreadDetailAppBar extends StatelessWidget {
if (isMobile) {
backButton = Expanded(
child: Align(
alignment: Alignment.centerLeft,
alignment: AlignmentDirectional.centerStart,
child: backButton,
),
);
@@ -141,7 +141,9 @@ class ThreadDetailAppBar extends StatelessWidget {
: EmailViewAppBarWidgetStyles.height,
padding: PlatformInfo.isIOS
? EmailViewAppBarWidgetStyles.paddingIOS(context, responsiveUtils)
: EmailViewAppBarWidgetStyles.padding,
: isMobile
? EmailViewAppBarWidgetStyles.mobilePadding
: EmailViewAppBarWidgetStyles.padding,
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(
lib/features/thread_detail/presentation/widgets/thread_detail_collapsed_email.dart
+47 -15
View File
@@ -2,7 +2,6 @@ import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/utils/theme_utils.dart';
import 'package:core/presentation/views/text/text_overflow_builder.dart';
import 'package:flutter/material.dart';
import 'package:model/email/presentation_email.dart';
import 'package:model/mailbox/presentation_mailbox.dart';
@@ -40,6 +39,8 @@ class ThreadDetailCollapsedEmail extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isMobileResponsive = responsiveUtils.isMobile(context);
return DecoratedBox(
decoration: const BoxDecoration(
color: Colors.white,
@@ -57,9 +58,10 @@ class ThreadDetailCollapsedEmail extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
if (showSubject)
EmailSubjectWidget(presentationEmail: presentationEmail)
else
const SizedBox(height: 16),
EmailSubjectWidget(
presentationEmail: presentationEmail,
isMobileResponsive: isMobileResponsive,
),
InformationSenderAndReceiverBuilder(
emailSelected: presentationEmail,
responsiveUtils: responsiveUtils,
@@ -71,22 +73,27 @@ class ThreadDetailCollapsedEmail extends StatelessWidget {
showRecipients: false,
mailboxContain: mailboxContain,
showUnreadVisualization: true,
isInsideThreadCollapsed: true,
),
Padding(
padding: const EdgeInsets.all(16),
child: TextOverflowBuilder(
padding: isMobileResponsive
? const EdgeInsetsDirectional.only(
top: 12,
bottom: 21,
start: 12,
end: 12,
)
: const EdgeInsetsDirectional.only(
top: 8,
bottom: 24,
start: 16,
end: 16,
),
child: Text(
preview,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: ThemeUtils.textStyleBodyBody1(
fontWeight: presentationEmail.hasRead
? FontWeight.normal
: FontWeight.w600,
fontSize: presentationEmail.hasRead ? null : 15,
).copyWith(
height: presentationEmail.hasRead ? 24 / 16 : 20 / 15,
letterSpacing: presentationEmail.hasRead ? -0.16 : 0,
),
style: _getPreviewTextStyle(isMobileResponsive),
),
),
],
@@ -94,4 +101,29 @@ class ThreadDetailCollapsedEmail extends StatelessWidget {
),
);
}
TextStyle _getPreviewTextStyle(bool isMobileResponsive) {
if (isMobileResponsive) {
return presentationEmail.hasRead
? ThemeUtils.textStyleInter400.copyWith(
color: Colors.black,
fontSize: 16,
height: 24 / 16,
letterSpacing: -0.16,
)
: ThemeUtils.textStyleInter600().copyWith(
color: Colors.black,
fontSize: 16,
height: 24 / 16,
letterSpacing: -0.16,
);
} else {
return presentationEmail.hasRead
? ThemeUtils.textStyleBodyBody3().copyWith(color: Colors.black)
: ThemeUtils.textStyleBodyBody3().copyWith(
color: Colors.black,
fontWeight: FontWeight.w600,
);
}
}
}
lib/features/thread_detail/presentation/widgets/thread_detail_load_more_circle.dart
+24 -13
View File
@@ -1,5 +1,7 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/utils/theme_utils.dart';
import 'package:core/presentation/views/loading/cupertino_loading_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
@@ -29,6 +31,7 @@ class ThreadDetailLoadMoreCircle extends StatefulWidget {
class _ThreadDetailLoadMoreCircleState extends State<ThreadDetailLoadMoreCircle> {
final _isHover = ValueNotifier(false);
final threadDetailController = Get.find<ThreadDetailController>();
final _responsiveUtils = Get.find<ResponsiveUtils>();
@override
void dispose() {
@@ -38,8 +41,10 @@ class _ThreadDetailLoadMoreCircleState extends State<ThreadDetailLoadMoreCircle>
@override
Widget build(BuildContext context) {
final isMobileResponsive = _responsiveUtils.isMobile(context);
return Container(
padding: const EdgeInsets.symmetric(vertical: 16),
padding: EdgeInsets.symmetric(vertical: isMobileResponsive ? 12 : 16),
color: Colors.white,
child: Stack(
alignment: Alignment.centerLeft,
@@ -57,9 +62,11 @@ class _ThreadDetailLoadMoreCircleState extends State<ThreadDetailLoadMoreCircle>
onTap: widget.onTap,
onHover: (value) => _isHover.value = value,
child: Container(
margin: const EdgeInsetsDirectional.only(start: 16),
width: 56,
height: 56,
margin: EdgeInsetsDirectional.only(
start: isMobileResponsive ? 12 : 16,
),
width: isMobileResponsive ? 44 : 32,
height: isMobileResponsive ? 44 : 32,
decoration: BoxDecoration(
border: Border.all(
color: AppColor.colorDividerEmailView,
@@ -80,10 +87,10 @@ class _ThreadDetailLoadMoreCircleState extends State<ThreadDetailLoadMoreCircle>
);
if (isLoading) {
return const SizedBox(
width: 24,
height: 24,
child: CupertinoLoadingWidget(),
return SizedBox(
width: isMobileResponsive ? 24 : 16,
height: isMobileResponsive ? 24 : 16,
child: const CupertinoLoadingWidget(),
);
}
@@ -93,15 +100,19 @@ class _ThreadDetailLoadMoreCircleState extends State<ThreadDetailLoadMoreCircle>
return Text(
'${widget.count}',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.normal,
height: 24 / 16,
letterSpacing: -0.1,
style: ThemeUtils.textStyleBodyBody3().copyWith(
color: Colors.black,
fontSize: isMobileResponsive ? 14 : 13,
height: isMobileResponsive ? 18 / 14 : 16 / 13,
),
);
});
},
child: SvgPicture.asset(widget.imagePaths.icExpandArrows),
child: SvgPicture.asset(
widget.imagePaths.icExpandArrows,
width: isMobileResponsive ? 20 : 16,
height: isMobileResponsive ? 20 : 16,
),
),
),
),