TF-2196 Add 'From' field dropdown
(cherry picked from commit a798d4beb7734bb4ad5856bd6662276cde335a10)
This commit is contained in:
hieubt
+99
@@ -0,0 +1,99 @@
|
|||||||
|
import 'package:core/presentation/extensions/color_extension.dart';
|
||||||
|
import 'package:dropdown_button2/dropdown_button2.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class FromComposerDropDownWidgetStyle {
|
||||||
|
static const double space = 8.0;
|
||||||
|
static const double dropdownItemSpace = 12.0;
|
||||||
|
static const double avatarSize = 48.0;
|
||||||
|
static const double avatarBorderWidth = 0.5;
|
||||||
|
static const double dropdownTopBarHeight = 32.0;
|
||||||
|
static const double buttonHeight = 32.0;
|
||||||
|
static const double buttonWidth = 411.0;
|
||||||
|
|
||||||
|
static const EdgeInsetsGeometry prefixPadding = EdgeInsetsDirectional.only(top: 16.0);
|
||||||
|
static const EdgeInsetsGeometry editIdentityIconPadding = EdgeInsets.all(5.0);
|
||||||
|
static const EdgeInsetsGeometry dropdownButtonPadding = EdgeInsets.symmetric(vertical: 8.0);
|
||||||
|
static const EdgeInsetsGeometry dropdownItemPadding = EdgeInsets.symmetric(vertical: 12.0);
|
||||||
|
static const EdgeInsetsGeometry dropdownTopBarPadding = EdgeInsets.only(
|
||||||
|
top: 12.0,
|
||||||
|
left: 20.0,
|
||||||
|
right: 20.0,
|
||||||
|
);
|
||||||
|
static const EdgeInsetsGeometry buttonPadding = EdgeInsets.only(
|
||||||
|
top: 4.0,
|
||||||
|
bottom: 4.0,
|
||||||
|
right: 4.0,
|
||||||
|
left: 8.0,
|
||||||
|
);
|
||||||
|
|
||||||
|
static const editIdentityIconBorderRadius = BorderRadius.all(Radius.circular(12.0));
|
||||||
|
|
||||||
|
static const BoxDecoration buttonDecoration = BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.all(Radius.circular(10.0)),
|
||||||
|
color: AppColor.colorComposerAppBar,
|
||||||
|
);
|
||||||
|
|
||||||
|
static const ButtonStyleData buttonStyleData = ButtonStyleData(
|
||||||
|
width: buttonWidth,
|
||||||
|
height: buttonHeight,
|
||||||
|
padding: buttonPadding,
|
||||||
|
decoration: buttonDecoration,
|
||||||
|
);
|
||||||
|
static DropdownStyleData dropdownStyleData = DropdownStyleData(
|
||||||
|
maxHeight: 272.0,
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.all(Radius.circular(10.0)),
|
||||||
|
color: Colors.white,
|
||||||
|
),
|
||||||
|
width: 381.0,
|
||||||
|
elevation: 4,
|
||||||
|
offset: const Offset(0.0, -8.0),
|
||||||
|
scrollbarTheme: ScrollbarThemeData(
|
||||||
|
radius: const Radius.circular(40.0),
|
||||||
|
thickness: MaterialStateProperty.all<double>(6.0),
|
||||||
|
thumbVisibility: MaterialStateProperty.all<bool>(true),
|
||||||
|
)
|
||||||
|
);
|
||||||
|
static MenuItemStyleData menuIemStyleData = MenuItemStyleData(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||||
|
height: 72,
|
||||||
|
overlayColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => Colors.white)
|
||||||
|
);
|
||||||
|
|
||||||
|
static const TextStyle prefixTextStyle = TextStyle(
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: FontWeight.w400,
|
||||||
|
color: AppColor.colorLabelComposer,
|
||||||
|
);
|
||||||
|
static const TextStyle avatarTextStyle = TextStyle(
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: Colors.black,
|
||||||
|
);
|
||||||
|
static const TextStyle dropdownItemTitleTextStyle = TextStyle(
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
color: AppColor.colorDropDownItemTitleComposer,
|
||||||
|
);
|
||||||
|
static const TextStyle dropdownItemSubTitleTextStyle = TextStyle(
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: FontWeight.w400,
|
||||||
|
color: AppColor.colorLabelQuotas
|
||||||
|
);
|
||||||
|
static const TextStyle dropdownTitleTextStyle = TextStyle(
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
color: AppColor.colorDropDownTitleComposer,
|
||||||
|
);
|
||||||
|
static const TextStyle dropdownButtonTitleTextStyle = TextStyle(
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
color: AppColor.colorCalendarEventUnread
|
||||||
|
);
|
||||||
|
static const TextStyle dropdownButtonSubTitleTextStyle = TextStyle(
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
color: AppColor.colorLabelComposer
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,191 @@
|
|||||||
|
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/style_utils.dart';
|
||||||
|
import 'package:dropdown_button2/dropdown_button2.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_svg/flutter_svg.dart';
|
||||||
|
import 'package:jmap_dart_client/jmap/identities/identity.dart';
|
||||||
|
import 'package:model/model.dart';
|
||||||
|
import 'package:pointer_interceptor/pointer_interceptor.dart';
|
||||||
|
import 'package:tmail_ui_user/features/composer/presentation/extensions/prefix_email_address_extension.dart';
|
||||||
|
import 'package:tmail_ui_user/features/composer/presentation/styles/web/from_composer_drop_down_widget_style.dart';
|
||||||
|
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
|
||||||
|
|
||||||
|
typedef OnChangeIdentity = void Function(Identity? identity);
|
||||||
|
|
||||||
|
class FromComposerDropDownWidget extends StatelessWidget {
|
||||||
|
|
||||||
|
final List<Identity> items;
|
||||||
|
final GlobalKey<DropdownButton2State>? dropdownKey;
|
||||||
|
final Identity? itemSelected;
|
||||||
|
final EdgeInsetsGeometry? padding;
|
||||||
|
final EdgeInsetsGeometry? margin;
|
||||||
|
final OnChangeIdentity? onChangeIdentity;
|
||||||
|
final ImagePaths imagePaths;
|
||||||
|
|
||||||
|
const FromComposerDropDownWidget({
|
||||||
|
super.key,
|
||||||
|
required this.items,
|
||||||
|
required this.dropdownKey,
|
||||||
|
required this.imagePaths,
|
||||||
|
this.itemSelected,
|
||||||
|
this.padding,
|
||||||
|
this.margin,
|
||||||
|
this.onChangeIdentity,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
border: Border(
|
||||||
|
bottom: BorderSide(
|
||||||
|
color: AppColor.colorLineComposer,
|
||||||
|
width: 1,
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
padding: padding,
|
||||||
|
margin: margin,
|
||||||
|
child: Row(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Padding(
|
||||||
|
padding: FromComposerDropDownWidgetStyle.prefixPadding,
|
||||||
|
child: Text(
|
||||||
|
'${PrefixEmailAddress.from.asName(context)}:',
|
||||||
|
style: FromComposerDropDownWidgetStyle.prefixTextStyle,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: FromComposerDropDownWidgetStyle.space),
|
||||||
|
Padding(
|
||||||
|
padding: FromComposerDropDownWidgetStyle.dropdownButtonPadding,
|
||||||
|
child: DropdownButtonHideUnderline(
|
||||||
|
child: PointerInterceptor(
|
||||||
|
child: DropdownButton2<Identity>(
|
||||||
|
key: dropdownKey,
|
||||||
|
isExpanded: false,
|
||||||
|
items: items.map((item) => DropdownMenuItem<Identity>(
|
||||||
|
value: item,
|
||||||
|
child: PointerInterceptor(
|
||||||
|
child: Container(
|
||||||
|
color: Colors.transparent,
|
||||||
|
padding: FromComposerDropDownWidgetStyle.dropdownItemPadding,
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Container(
|
||||||
|
width: FromComposerDropDownWidgetStyle.avatarSize,
|
||||||
|
height: FromComposerDropDownWidgetStyle.avatarSize,
|
||||||
|
alignment: Alignment.center,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
color: AppColor.avatarColor,
|
||||||
|
border: Border.all(
|
||||||
|
color: AppColor.colorShadowBgContentEmail,
|
||||||
|
width: FromComposerDropDownWidgetStyle.avatarBorderWidth
|
||||||
|
)
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
item.name!.isNotEmpty
|
||||||
|
? item.name!.firstLetterToUpperCase
|
||||||
|
: item.email!.firstLetterToUpperCase,
|
||||||
|
style: FromComposerDropDownWidgetStyle.avatarTextStyle,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: FromComposerDropDownWidgetStyle.dropdownItemSpace),
|
||||||
|
Expanded(
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
if (item.name!.isNotEmpty)
|
||||||
|
Text(
|
||||||
|
item.name!,
|
||||||
|
maxLines: 1,
|
||||||
|
softWrap: CommonTextStyle.defaultSoftWrap,
|
||||||
|
overflow: CommonTextStyle.defaultTextOverFlow,
|
||||||
|
style: FromComposerDropDownWidgetStyle.dropdownItemTitleTextStyle,
|
||||||
|
),
|
||||||
|
if (item.email!.isNotEmpty)
|
||||||
|
Text(
|
||||||
|
item.email!,
|
||||||
|
maxLines: 1,
|
||||||
|
softWrap: CommonTextStyle.defaultSoftWrap,
|
||||||
|
overflow: CommonTextStyle.defaultTextOverFlow,
|
||||||
|
style: FromComposerDropDownWidgetStyle.dropdownItemSubTitleTextStyle,
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)).toList(),
|
||||||
|
value: itemSelected,
|
||||||
|
buttonStyleData: FromComposerDropDownWidgetStyle.buttonStyleData,
|
||||||
|
dropdownSearchData: DropdownSearchData(
|
||||||
|
searchInnerWidget: Container(
|
||||||
|
padding: FromComposerDropDownWidgetStyle.dropdownTopBarPadding,
|
||||||
|
child: Text(
|
||||||
|
AppLocalizations.of(context).yourIdentities,
|
||||||
|
style: FromComposerDropDownWidgetStyle.dropdownTitleTextStyle,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
searchInnerWidgetHeight: FromComposerDropDownWidgetStyle.dropdownTopBarHeight,
|
||||||
|
),
|
||||||
|
dropdownStyleData: FromComposerDropDownWidgetStyle.dropdownStyleData,
|
||||||
|
iconStyleData: IconStyleData(
|
||||||
|
icon: SvgPicture.asset(imagePaths.icDropDown),
|
||||||
|
),
|
||||||
|
menuItemStyleData: FromComposerDropDownWidgetStyle.menuIemStyleData,
|
||||||
|
customButton: Tooltip(
|
||||||
|
message: itemSelected != null ? itemSelected!.email : '',
|
||||||
|
child: Container(
|
||||||
|
height: FromComposerDropDownWidgetStyle.buttonHeight,
|
||||||
|
width: FromComposerDropDownWidgetStyle.buttonWidth,
|
||||||
|
padding: FromComposerDropDownWidgetStyle.buttonPadding,
|
||||||
|
decoration: FromComposerDropDownWidgetStyle.buttonDecoration,
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
if (itemSelected != null)
|
||||||
|
Expanded(
|
||||||
|
child: RichText(
|
||||||
|
maxLines: 1,
|
||||||
|
softWrap: CommonTextStyle.defaultSoftWrap,
|
||||||
|
overflow: CommonTextStyle.defaultTextOverFlow,
|
||||||
|
text: TextSpan(
|
||||||
|
children: [
|
||||||
|
if (itemSelected!.name!.isNotEmpty)
|
||||||
|
TextSpan(
|
||||||
|
text: '${itemSelected!.name} ',
|
||||||
|
style: FromComposerDropDownWidgetStyle.dropdownButtonTitleTextStyle,
|
||||||
|
),
|
||||||
|
TextSpan(
|
||||||
|
text: '(${itemSelected!.email})',
|
||||||
|
style: itemSelected!.name!.isNotEmpty
|
||||||
|
? FromComposerDropDownWidgetStyle.dropdownButtonSubTitleTextStyle
|
||||||
|
: FromComposerDropDownWidgetStyle.dropdownButtonTitleTextStyle
|
||||||
|
)
|
||||||
|
]
|
||||||
|
),
|
||||||
|
)
|
||||||
|
)
|
||||||
|
else
|
||||||
|
const SizedBox.shrink(),
|
||||||
|
SvgPicture.asset(imagePaths.icDropDown)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
onChanged: onChangeIdentity,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user