Apply new style modal profile UI for desktop
Signed-off-by: dab246 <tdvu@linagora.com>
This commit is contained in:
dab246
@@ -1,11 +1,15 @@
|
||||
|
||||
import 'package:core/core.dart';
|
||||
import 'package:core/presentation/extensions/color_extension.dart';
|
||||
import 'package:core/presentation/extensions/string_extension.dart';
|
||||
import 'package:core/presentation/resources/image_paths.dart';
|
||||
import 'package:core/presentation/utils/theme_utils.dart';
|
||||
import 'package:core/presentation/views/button/tmail_button_widget.dart';
|
||||
import 'package:core/presentation/views/dialog/confirm_dialog_button.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
|
||||
import 'package:model/model.dart';
|
||||
import 'package:model/extensions/email_address_extension.dart';
|
||||
import 'package:tmail_ui_user/features/base/widget/email_address_with_copy_widget.dart';
|
||||
import 'package:tmail_ui_user/features/base/widget/user_avatar_builder.dart';
|
||||
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
|
||||
import 'package:tmail_ui_user/main/utils/app_utils.dart';
|
||||
|
||||
typedef OnCloseDialogAction = void Function();
|
||||
typedef OnCopyEmailAddressDialogAction = void Function(EmailAddress);
|
||||
@@ -13,174 +17,129 @@ typedef OnComposeEmailDialogAction = void Function(EmailAddress);
|
||||
typedef OnQuickCreatingRuleEmailDialogAction = void Function(EmailAddress);
|
||||
|
||||
class EmailAddressDialogBuilder extends StatelessWidget {
|
||||
|
||||
final EmailAddress _emailAddress;
|
||||
final ImagePaths imagePaths;
|
||||
final EmailAddress emailAddress;
|
||||
final OnCloseDialogAction? onCloseDialogAction;
|
||||
final OnCopyEmailAddressDialogAction? onCopyEmailAddressAction;
|
||||
final OnComposeEmailDialogAction? onComposeEmailAction;
|
||||
final OnQuickCreatingRuleEmailDialogAction? onQuickCreatingRuleEmailDialogAction;
|
||||
final OnQuickCreatingRuleEmailDialogAction?
|
||||
onQuickCreatingRuleEmailDialogAction;
|
||||
|
||||
const EmailAddressDialogBuilder(
|
||||
this._emailAddress, {
|
||||
Key? key,
|
||||
this.onCloseDialogAction,
|
||||
this.onCopyEmailAddressAction,
|
||||
this.onComposeEmailAction,
|
||||
this.onQuickCreatingRuleEmailDialogAction,
|
||||
const EmailAddressDialogBuilder({
|
||||
Key? key,
|
||||
required this.imagePaths,
|
||||
required this.emailAddress,
|
||||
this.onCloseDialogAction,
|
||||
this.onCopyEmailAddressAction,
|
||||
this.onComposeEmailAction,
|
||||
this.onQuickCreatingRuleEmailDialogAction,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final imagePaths = Get.find<ImagePaths>();
|
||||
|
||||
return Dialog(
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(16))),
|
||||
insetPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 24.0,
|
||||
vertical: 16.0),
|
||||
borderRadius: BorderRadius.all(Radius.circular(16)),
|
||||
),
|
||||
child: Container(
|
||||
margin: EdgeInsets.zero,
|
||||
padding: EdgeInsets.zero,
|
||||
width: 400,
|
||||
decoration: const BoxDecoration(
|
||||
width: 383,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.all(Radius.circular(16))),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: TMailButtonWidget.fromIcon(
|
||||
onTapActionCallback: onCloseDialogAction,
|
||||
icon: imagePaths.icCircleClose,
|
||||
backgroundColor: Colors.transparent,
|
||||
margin: const EdgeInsetsDirectional.only(top: 8, end: 8),
|
||||
iconSize: 24,
|
||||
)
|
||||
),
|
||||
Padding(padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Center(child: (AvatarBuilder()
|
||||
..text(_emailAddress.asString().firstLetterToUpperCase)
|
||||
..size(64)
|
||||
..addTextStyle(const TextStyle(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 23,
|
||||
color: Colors.white))
|
||||
..avatarColor(_emailAddress.avatarColors))
|
||||
.build())),
|
||||
if (_emailAddress.displayName.isNotEmpty)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 16,
|
||||
right: 16,
|
||||
top: 16),
|
||||
child: Center(child: SelectableText(
|
||||
_emailAddress.displayName,
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 2,
|
||||
style: const TextStyle(
|
||||
overflow: CommonTextStyle.defaultTextOverFlow,
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.colorNameEmail),
|
||||
))
|
||||
borderRadius: const BorderRadius.all(Radius.circular(16)),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.15),
|
||||
blurRadius: 8,
|
||||
spreadRadius: 3,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: () {},
|
||||
onLongPress: () {
|
||||
AppUtils.copyEmailAddressToClipboard(context, _emailAddress.emailAddress);
|
||||
},
|
||||
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
||||
child: Padding(
|
||||
padding: const EdgeInsetsDirectional.symmetric(horizontal: 16, vertical: 8),
|
||||
child: Text(
|
||||
_emailAddress.emailAddress,
|
||||
textAlign: TextAlign.center,
|
||||
overflow: CommonTextStyle.defaultTextOverFlow,
|
||||
softWrap: CommonTextStyle.defaultSoftWrap,
|
||||
maxLines: 2,
|
||||
style: const TextStyle(
|
||||
fontSize: 17,
|
||||
fontWeight: FontWeight.normal,
|
||||
color: AppColor.colorMessageConfirmDialog),
|
||||
)
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.3),
|
||||
blurRadius: 3,
|
||||
spreadRadius: 0,
|
||||
offset: const Offset(0, 1),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
Padding(
|
||||
padding:
|
||||
const EdgeInsets.symmetric(vertical: 24, horizontal: 32),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
UserAvatarBuilder(
|
||||
username: emailAddress.asString().firstLetterToUpperCase,
|
||||
size: 67,
|
||||
textStyle: ThemeUtils.textStyleInter500().copyWith(
|
||||
fontSize: 33.5,
|
||||
height: 50.25 / 33.5,
|
||||
letterSpacing: 0.31,
|
||||
color: AppColor.secondaryContrastText,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
if (emailAddress.displayName.isNotEmpty)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: SelectableText(
|
||||
emailAddress.displayName,
|
||||
textAlign: TextAlign.center,
|
||||
style: ThemeUtils.textStyleM3HeadlineSmall.copyWith(
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
EmailAddressWithCopyWidget(
|
||||
label: emailAddress.emailAddress,
|
||||
copyLabelIcon: imagePaths.icCopy,
|
||||
onCopyButtonAction: () =>
|
||||
onCopyEmailAddressAction?.call(emailAddress),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 48,
|
||||
child: ConfirmDialogButton(
|
||||
label: AppLocalizations.of(context).quickCreatingRule,
|
||||
backgroundColor: Colors.white,
|
||||
textColor: AppColor.primaryMain,
|
||||
borderColor: AppColor.primaryMain,
|
||||
onTapAction: () =>
|
||||
onQuickCreatingRuleEmailDialogAction?.call(emailAddress),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 48,
|
||||
child: ConfirmDialogButton(
|
||||
label: AppLocalizations.of(context).compose_email,
|
||||
backgroundColor: AppColor.primaryMain,
|
||||
textColor: Colors.white,
|
||||
onTapAction: () =>
|
||||
onComposeEmailAction?.call(emailAddress),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Center(child: Material(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
color: Colors.transparent,
|
||||
child: TextButton(
|
||||
child: Text(
|
||||
AppLocalizations.of(context).copy_email_address,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
color: AppColor.colorTextButton,
|
||||
fontWeight: FontWeight.normal),
|
||||
),
|
||||
onPressed: () => onCopyEmailAddressAction?.call(_emailAddress)
|
||||
)
|
||||
))),
|
||||
const SizedBox(height: 24),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 24, right: 24, bottom: 12),
|
||||
child: SizedBox(
|
||||
key: const Key('quick_creating_rule_email_button'),
|
||||
width: double.infinity,
|
||||
height: 44,
|
||||
child: TextButton(
|
||||
style: ButtonStyle(
|
||||
foregroundColor: WidgetStateProperty.resolveWith<Color>(
|
||||
(Set<WidgetState> states) => AppColor.colorTextButton),
|
||||
backgroundColor: WidgetStateProperty.resolveWith<Color>(
|
||||
(Set<WidgetState> states) => AppColor.colorItemEmailSelectedDesktop),
|
||||
shape: WidgetStateProperty.all(RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
side: const BorderSide(
|
||||
width: 0,
|
||||
color: AppColor.colorItemEmailSelectedDesktop)))),
|
||||
child: Text(
|
||||
AppLocalizations.of(context).quickCreatingRule,
|
||||
style: const TextStyle(
|
||||
fontSize: 17,
|
||||
color: AppColor.colorTextButton,
|
||||
fontWeight: FontWeight.w500)),
|
||||
onPressed: () => onQuickCreatingRuleEmailDialogAction?.call(_emailAddress)),
|
||||
PositionedDirectional(
|
||||
top: 0,
|
||||
end: 0,
|
||||
child: TMailButtonWidget.fromIcon(
|
||||
icon: imagePaths.icCloseDialog,
|
||||
iconSize: 24,
|
||||
iconColor: AppColor.m3Tertiary,
|
||||
padding: const EdgeInsets.all(10),
|
||||
borderRadius: 24,
|
||||
backgroundColor: Colors.transparent,
|
||||
onTapActionCallback: onCloseDialogAction,
|
||||
),
|
||||
)
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 24, right: 24, bottom: 24),
|
||||
child: SizedBox(
|
||||
key: const Key('compose_email_button'),
|
||||
width: double.infinity,
|
||||
height: 44,
|
||||
child: TextButton(
|
||||
style: ButtonStyle(
|
||||
foregroundColor: WidgetStateProperty.resolveWith<Color>(
|
||||
(Set<WidgetState> states) => Colors.white),
|
||||
backgroundColor: WidgetStateProperty.resolveWith<Color>(
|
||||
(Set<WidgetState> states) => AppColor.colorTextButton),
|
||||
shape: WidgetStateProperty.all(RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
side: const BorderSide(
|
||||
width: 0,
|
||||
color: AppColor.colorTextButton)))),
|
||||
child: Text(
|
||||
AppLocalizations.of(context).compose_email,
|
||||
style: const TextStyle(
|
||||
fontSize: 17,
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.w500)),
|
||||
onPressed: () => onComposeEmailAction?.call(_emailAddress)),
|
||||
)
|
||||
)
|
||||
],
|
||||
)
|
||||
),
|
||||
],
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user