TF-2196 Add identities bottom sheet
(cherry picked from commit 186f41eb712937d647866d84c02652fff4b36620)
This commit is contained in:
hieubt
+57
@@ -0,0 +1,57 @@
|
|||||||
|
import 'package:core/presentation/extensions/color_extension.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class FromComposerBottomSheetStyle {
|
||||||
|
static const double space = 8.0;
|
||||||
|
static const double searchIconSize = 14.0;
|
||||||
|
static const double searchBarBottomSpace = 24.0;
|
||||||
|
static const double scrollbarThickness = 8.0;
|
||||||
|
static const double identityItemSize = 48.0;
|
||||||
|
static const double identityItemBorderWidth = 0.5;
|
||||||
|
static const double identityItemSpace = 12.0;
|
||||||
|
|
||||||
|
static const EdgeInsetsGeometry closeButtonPadding = EdgeInsets.all(16.0);
|
||||||
|
static const EdgeInsetsGeometry bodyPadding = EdgeInsets.symmetric(horizontal: 12.0);
|
||||||
|
static const EdgeInsetsGeometry searchTextInputPadding = EdgeInsets.all(12.0);
|
||||||
|
|
||||||
|
static const Color barrierColor = AppColor.colorDefaultCupertinoActionSheet;
|
||||||
|
static const Color searchIconColor = AppColor.loginTextFieldHintColor;
|
||||||
|
|
||||||
|
static const BorderRadius backgroundBorderRadius = BorderRadius.only(
|
||||||
|
topLeft: Radius.circular(14),
|
||||||
|
topRight: Radius.circular(14),
|
||||||
|
);
|
||||||
|
static const Radius radius = Radius.circular(10.0);
|
||||||
|
static const BorderRadius borderRadius = BorderRadius.all(radius);
|
||||||
|
|
||||||
|
static const BoxDecoration searchBarDecoration = BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.all(Radius.circular(10)),
|
||||||
|
color: AppColor.colorBgSearchBar
|
||||||
|
);
|
||||||
|
|
||||||
|
static const TextStyle appBarTitleTextStyle = TextStyle(
|
||||||
|
color: Colors.black,
|
||||||
|
fontWeight: FontWeight.w700,
|
||||||
|
fontSize: 20.0,
|
||||||
|
);
|
||||||
|
static const TextStyle searchBarTextStyle = TextStyle(
|
||||||
|
color: Colors.black,
|
||||||
|
fontSize: 16.0,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
);
|
||||||
|
static const TextStyle searchHintTextStyle = TextStyle(
|
||||||
|
color: AppColor.loginTextFieldHintColor,
|
||||||
|
fontSize: 16.0,
|
||||||
|
fontWeight: FontWeight.w400,
|
||||||
|
);
|
||||||
|
static const TextStyle identityItemTitleTextStyle = TextStyle(
|
||||||
|
color: Colors.black,
|
||||||
|
fontSize: 16.0,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
);
|
||||||
|
static const TextStyle identityItemSubTitleTextStyle = TextStyle(
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: FontWeight.w400,
|
||||||
|
color: AppColor.colorLabelQuotas
|
||||||
|
);
|
||||||
|
}
|
||||||
+231
@@ -0,0 +1,231 @@
|
|||||||
|
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:core/presentation/views/button/icon_button_web.dart';
|
||||||
|
import 'package:core/presentation/views/text/text_field_builder.dart';
|
||||||
|
import 'package:core/utils/direction_utils.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_svg/flutter_svg.dart';
|
||||||
|
import 'package:get/get.dart';
|
||||||
|
import 'package:jmap_dart_client/jmap/identities/identity.dart';
|
||||||
|
import 'package:pointer_interceptor/pointer_interceptor.dart';
|
||||||
|
import 'package:tmail_ui_user/features/composer/presentation/styles/mobile/from_composer_bottom_sheet_style.dart';
|
||||||
|
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
|
||||||
|
|
||||||
|
typedef OnChangeIdentity = void Function(Identity? identity);
|
||||||
|
typedef OnTextSearchChanged = void Function(String text);
|
||||||
|
|
||||||
|
class FromComposerBottomSheetBuilder {
|
||||||
|
|
||||||
|
final BuildContext _context;
|
||||||
|
final ImagePaths _imagePaths;
|
||||||
|
final List<Identity> _identities;
|
||||||
|
final ScrollController _scrollController;
|
||||||
|
final TextEditingController _textInputSearchController;
|
||||||
|
|
||||||
|
late double _statusBarHeight;
|
||||||
|
|
||||||
|
FocusNode? _textInputSearchFocusNode;
|
||||||
|
OnChangeIdentity? _onChangeIdentity;
|
||||||
|
VoidCallback? _onClose;
|
||||||
|
OnTextSearchChanged? _onTextSearchChanged;
|
||||||
|
|
||||||
|
FromComposerBottomSheetBuilder(
|
||||||
|
this._context,
|
||||||
|
this._imagePaths,
|
||||||
|
this._identities,
|
||||||
|
this._scrollController,
|
||||||
|
this._textInputSearchController,
|
||||||
|
) {
|
||||||
|
_statusBarHeight = Get.statusBarHeight / MediaQuery.of(_context).devicePixelRatio;
|
||||||
|
}
|
||||||
|
|
||||||
|
void onChangeIdentityAction(OnChangeIdentity onChangeIdentity) {
|
||||||
|
_onChangeIdentity = onChangeIdentity;
|
||||||
|
}
|
||||||
|
|
||||||
|
void onCloseAction(VoidCallback onClose) {
|
||||||
|
_onClose = onClose;
|
||||||
|
}
|
||||||
|
|
||||||
|
void onTextSearchChangedAction(OnTextSearchChanged onTextSearchChanged) {
|
||||||
|
_onTextSearchChanged = onTextSearchChanged;
|
||||||
|
}
|
||||||
|
|
||||||
|
Future build() {
|
||||||
|
return showModalBottomSheet(
|
||||||
|
context: _context,
|
||||||
|
isScrollControlled: true,
|
||||||
|
backgroundColor: Colors.transparent,
|
||||||
|
enableDrag: false,
|
||||||
|
barrierColor: FromComposerBottomSheetStyle.barrierColor,
|
||||||
|
builder: (context) {
|
||||||
|
return Obx(() => PointerInterceptor(
|
||||||
|
child: SafeArea(
|
||||||
|
top: true,
|
||||||
|
bottom: false,
|
||||||
|
left: false,
|
||||||
|
right: false,
|
||||||
|
child: GestureDetector(
|
||||||
|
onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
|
||||||
|
child: Padding(
|
||||||
|
padding: EdgeInsets.only(top: _statusBarHeight),
|
||||||
|
child: ClipRRect(
|
||||||
|
borderRadius: FromComposerBottomSheetStyle.backgroundBorderRadius,
|
||||||
|
child: Scaffold(
|
||||||
|
resizeToAvoidBottomInset: true,
|
||||||
|
appBar: AppBar(
|
||||||
|
leading: const SizedBox.shrink(),
|
||||||
|
title: Text(AppLocalizations.of(context).yourIdentities),
|
||||||
|
titleTextStyle: FromComposerBottomSheetStyle.appBarTitleTextStyle,
|
||||||
|
centerTitle: true,
|
||||||
|
actions: [
|
||||||
|
GestureDetector(
|
||||||
|
child: Padding(
|
||||||
|
padding: FromComposerBottomSheetStyle.closeButtonPadding,
|
||||||
|
child: SvgPicture.asset(_imagePaths.icCircleClose),
|
||||||
|
),
|
||||||
|
onTapDown: (_) {
|
||||||
|
_onClose?.call();
|
||||||
|
},
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
body: Padding(
|
||||||
|
padding: FromComposerBottomSheetStyle.bodyPadding,
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
Container(
|
||||||
|
decoration: FromComposerBottomSheetStyle.searchBarDecoration,
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
const SizedBox(width: FromComposerBottomSheetStyle.space),
|
||||||
|
buildIconWeb(
|
||||||
|
icon: SvgPicture.asset(
|
||||||
|
_imagePaths.icSearchBar,
|
||||||
|
fit: BoxFit.fill,
|
||||||
|
colorFilter: FromComposerBottomSheetStyle.searchIconColor.asFilter(),
|
||||||
|
),
|
||||||
|
iconPadding: EdgeInsets.zero,
|
||||||
|
iconSize: FromComposerBottomSheetStyle.searchIconSize,
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: TextFieldBuilder(
|
||||||
|
controller: _textInputSearchController,
|
||||||
|
focusNode: _textInputSearchFocusNode,
|
||||||
|
onTextChange: _onTextSearchChanged,
|
||||||
|
textInputAction: TextInputAction.search,
|
||||||
|
maxLines: 1,
|
||||||
|
textDirection: DirectionUtils.getDirectionByLanguage(context),
|
||||||
|
textStyle: FromComposerBottomSheetStyle.searchBarTextStyle,
|
||||||
|
keyboardType: TextInputType.text,
|
||||||
|
decoration: InputDecoration(
|
||||||
|
contentPadding: FromComposerBottomSheetStyle.searchTextInputPadding,
|
||||||
|
hintText: AppLocalizations.of(context).searchForIdentities,
|
||||||
|
hintStyle: FromComposerBottomSheetStyle.searchHintTextStyle,
|
||||||
|
border: InputBorder.none
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: FromComposerBottomSheetStyle.searchBarBottomSpace),
|
||||||
|
Expanded(
|
||||||
|
child: RawScrollbar(
|
||||||
|
trackColor: AppColor.colorScrollbarTrackColor,
|
||||||
|
thumbColor: AppColor.colorScrollbarThumbColor,
|
||||||
|
radius: FromComposerBottomSheetStyle.radius,
|
||||||
|
trackRadius: FromComposerBottomSheetStyle.radius,
|
||||||
|
thickness: FromComposerBottomSheetStyle.scrollbarThickness,
|
||||||
|
thumbVisibility: true,
|
||||||
|
trackVisibility: true,
|
||||||
|
controller: _scrollController,
|
||||||
|
trackBorderColor: Colors.transparent,
|
||||||
|
child: ScrollConfiguration(
|
||||||
|
behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
|
||||||
|
child: ListView.builder(
|
||||||
|
controller: _scrollController,
|
||||||
|
shrinkWrap: true,
|
||||||
|
physics: const ScrollPhysics(),
|
||||||
|
itemCount: _identities.length,
|
||||||
|
itemBuilder: ((context, index) {
|
||||||
|
final Identity identity = _identities[index];
|
||||||
|
return Material(
|
||||||
|
color: Colors.transparent,
|
||||||
|
child: InkWell(
|
||||||
|
borderRadius: FromComposerBottomSheetStyle.borderRadius,
|
||||||
|
onTap: () => _onChangeIdentity?.call(identity),
|
||||||
|
child: Padding(
|
||||||
|
padding: FromComposerBottomSheetStyle.searchTextInputPadding,
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Container(
|
||||||
|
width: FromComposerBottomSheetStyle.identityItemSize,
|
||||||
|
height: FromComposerBottomSheetStyle.identityItemSize,
|
||||||
|
alignment: Alignment.center,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
color: AppColor.avatarColor,
|
||||||
|
border: Border.all(
|
||||||
|
color: AppColor.colorShadowBgContentEmail,
|
||||||
|
width: FromComposerBottomSheetStyle.identityItemBorderWidth
|
||||||
|
)
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
identity.name!.isNotEmpty
|
||||||
|
? identity.name!.firstLetterToUpperCase
|
||||||
|
: identity.email!.firstLetterToUpperCase,
|
||||||
|
style: FromComposerBottomSheetStyle.searchBarTextStyle,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: FromComposerBottomSheetStyle.identityItemSpace),
|
||||||
|
Expanded(
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
if (identity.name!.isNotEmpty)
|
||||||
|
Text(
|
||||||
|
identity.name!,
|
||||||
|
maxLines: 1,
|
||||||
|
softWrap: CommonTextStyle.defaultSoftWrap,
|
||||||
|
overflow: CommonTextStyle.defaultTextOverFlow,
|
||||||
|
style: FromComposerBottomSheetStyle.identityItemTitleTextStyle,
|
||||||
|
),
|
||||||
|
if (identity.email!.isNotEmpty)
|
||||||
|
Text(
|
||||||
|
identity.email!,
|
||||||
|
maxLines: 1,
|
||||||
|
softWrap: CommonTextStyle.defaultSoftWrap,
|
||||||
|
overflow: CommonTextStyle.defaultTextOverFlow,
|
||||||
|
style: FromComposerBottomSheetStyle.identityItemSubTitleTextStyle,
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
)
|
||||||
|
));
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user