diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index 36ab2eed9..c6740d52f 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -129,6 +129,7 @@ extension AppColor on Color { static const colorBorderWrapIconStyleCode = Color(0xFFE4E4E4); static const colorBackgroundWrapIconStyleCode = Color(0xFFF2F3F5); static const colorSelectedRichTextButton = Color(0x99EBEDF0); + static const colorShadowDestinationPicker = Color(0x33000000); static const mapGradientColor = [ [Color(0xFF21D4FD), Color(0xFFB721FF)], diff --git a/lib/features/destination_picker/presentation/destination_picker_view.dart b/lib/features/destination_picker/presentation/destination_picker_view.dart index 2eae3e3d3..44bc59fe4 100644 --- a/lib/features/destination_picker/presentation/destination_picker_view.dart +++ b/lib/features/destination_picker/presentation/destination_picker_view.dart @@ -8,6 +8,7 @@ import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart'; import 'package:tmail_ui_user/features/destination_picker/presentation/destination_picker_controller.dart'; import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_picker_arguments.dart'; import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart'; +import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/top_bar_destination_picker_web_builder.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displayed.dart'; @@ -33,6 +34,37 @@ class DestinationPickerView extends GetWidget actions = arguments.mailboxAction; } + if (BuildUtils.isWeb) { + return PointerInterceptor( + child: GestureDetector( + onTap: () => controller.closeDestinationPicker(), + child: Scaffold( + backgroundColor: AppColor.colorShadowDestinationPicker, + body: Align( + alignment: Alignment.center, + child: Card( + color: Colors.white, + margin: _getMarginDestinationPicker(context), + elevation: 16, + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(14))), + child: Container( + decoration: const BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.all(Radius.circular(14))), + width: _getWidthDestinationPicker(context), + child: ClipRRect( + borderRadius: const BorderRadius.all(Radius.circular(14)), + child: _buildDestinationPickerWebWidget(context, actions) + ) + ) + ) + ) + ), + ), + ); + } + if (actions == MailboxActions.create) { return PointerInterceptor(child: Card( margin: EdgeInsets.zero, @@ -100,6 +132,22 @@ class DestinationPickerView extends GetWidget } } + Widget _buildDestinationPickerWebWidget(BuildContext context, MailboxActions? actions) { + return Column(children: [ + Obx(() => TopBarDestinationPickerWebBuilder( + controller.mailboxAction.value, + onCloseAction: () => controller.closeDestinationPicker())), + Obx(() => controller.isSearchActive() + ? _buildInputSearchFormWidget(context) + : const SizedBox.shrink()), + Expanded(child: Container( + color: actions == MailboxActions.create + ? AppColor.colorBgMailbox + : Colors.white, + child: _buildBodyDestinationPicker(context, actions))) + ]); + } + Widget _buildBodyMailboxLocation(BuildContext context, MailboxActions? actions) { return SafeArea( top: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context), @@ -152,8 +200,10 @@ class DestinationPickerView extends GetWidget Widget _buildSearchBarWidget(BuildContext context) { return Padding( padding: EdgeInsets.only( - top: _responsiveUtils.isScreenWithShortestSide(context) || BuildUtils.isWeb ? 12 : 0, - left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16, + top: _responsiveUtils.isScreenWithShortestSide(context) && + !BuildUtils.isWeb ? 12 : 0, + left: _responsiveUtils.isLandscapeMobile(context) && + !BuildUtils.isWeb ? 0 : 16, right: 16), child: (SearchBarView(_imagePaths) ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes) @@ -415,7 +465,8 @@ class DestinationPickerView extends GetWidget Widget _buildInputSearchFormWidget(BuildContext context) { return Padding( - padding: const EdgeInsets.only(top: 16, bottom: 16), + padding: const EdgeInsets.symmetric( + vertical: BuildUtils.isWeb ? 0 : 16), child: Row( children: [ Padding(padding: const EdgeInsets.only(left: 5), child: buildIconWeb( @@ -441,4 +492,28 @@ class DestinationPickerView extends GetWidget ) ); } + + double _getWidthDestinationPicker(BuildContext context) { + if (BuildUtils.isWeb) { + if (_responsiveUtils.isMobile(context)) { + return double.infinity; + } else { + return 500; + } + } else { + return 500; + } + } + + EdgeInsets _getMarginDestinationPicker(BuildContext context) { + if (BuildUtils.isWeb) { + if (_responsiveUtils.isMobile(context)) { + return EdgeInsets.zero; + } else { + return const EdgeInsets.symmetric(vertical: 50); + } + } else { + return EdgeInsets.zero; + } + } } \ No newline at end of file diff --git a/lib/features/destination_picker/presentation/widgets/top_bar_destination_picker_web_builder.dart b/lib/features/destination_picker/presentation/widgets/top_bar_destination_picker_web_builder.dart new file mode 100644 index 000000000..aa7a59044 --- /dev/null +++ b/lib/features/destination_picker/presentation/widgets/top_bar_destination_picker_web_builder.dart @@ -0,0 +1,55 @@ + +import 'package:core/core.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:get/get.dart'; +import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class TopBarDestinationPickerWebBuilder extends StatelessWidget { + + final MailboxActions? _mailboxAction; + final VoidCallback? onCloseAction; + + const TopBarDestinationPickerWebBuilder( + this._mailboxAction, + { + Key? key, + this.onCloseAction, + } + ) : super(key: key); + + @override + Widget build(BuildContext context) { + final _imagePaths = Get.find(); + + return Container( + padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10), + color: Colors.white, + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + const SizedBox(width: 40), + Expanded( + child: Text( + _mailboxAction?.getTitle(context) ?? '', + maxLines: 1, + overflow: CommonTextStyle.defaultTextOverFlow, + textAlign: TextAlign.center, + style: const TextStyle( + fontSize: 20, + color: Colors.black, + fontWeight: FontWeight.w700))), + buildIconWeb( + iconSize: 32, + colorSelected: Colors.white, + splashRadius: 20, + iconPadding: const EdgeInsets.all(5), + icon: SvgPicture.asset(_imagePaths.icCloseMailbox, fit: BoxFit.fill), + tooltip: AppLocalizations.of(context).close, + onTap: () => onCloseAction?.call()), + ] + ), + ); + } +} \ No newline at end of file diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index 2afc9efa8..d91dae5a3 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -572,7 +572,7 @@ class ThreadView extends GetWidget with AppLoaderMixin, double? _getItemExtent(BuildContext context) { if (BuildUtils.isWeb) { - return _responsiveUtils.isDesktop(context) ? 52 : 85; + return _responsiveUtils.isDesktop(context) ? 52 : 90; } else { return null; }