diff --git a/core/lib/presentation/views/button/icon_button_web.dart b/core/lib/presentation/views/button/icon_button_web.dart index a0009b36b..e4032e486 100644 --- a/core/lib/presentation/views/button/icon_button_web.dart +++ b/core/lib/presentation/views/button/icon_button_web.dart @@ -173,4 +173,72 @@ Widget buildButtonWrapText(String name, { color: Colors.white)), ), ); +} + +Widget buildIconWithLowerMenu( + Widget icon, + BuildContext context, + List popupMenuItems, + Function(BuildContext context, RelativeRect? position, + List popupMenuItems) + openPopUpMenuAction, +) { + return Builder( + builder: (iconContext) { + final screenSize = MediaQuery.of(context).size; + + return buildIconWeb( + icon: icon, + onTap: () { + // get size and position of the icon + RenderBox box = iconContext.findRenderObject() as RenderBox; + Offset iconTopLeft = box.localToGlobal(Offset.zero); + final iconSize = box.size; + + // calculate the popup position for popup menu action + final popupLeft = iconTopLeft.dx + iconSize.width * 3 / 4; + final popupTop = iconTopLeft.dy + iconSize.height * 4 / 5; + final popupRight = screenSize.width - popupLeft; + final popupBottom = screenSize.height - popupRight; + final position = RelativeRect.fromLTRB( + popupLeft, popupTop, popupRight, popupBottom); + + openPopUpMenuAction(context, position, popupMenuItems); + }); + }, + ); +} + +Widget buildIconWithUpperMenu( + Widget icon, + BuildContext context, + List popupMenuItems, + Function(BuildContext context, RelativeRect? position, + List popupMenuItems) + openPopUpMenuAction, +) { + return Builder( + builder: (iconContext) { + final screenSize = MediaQuery.of(context).size; + + return buildIconWeb( + icon: icon, + onTap: () { + // get size and position of the icon + RenderBox box = iconContext.findRenderObject() as RenderBox; + Offset iconTopLeft = box.localToGlobal(Offset.zero); + final iconSize = box.size; + + // calculate the popup position for popup menu action + final popupLeft = iconTopLeft.dx + iconSize.width * 3 / 4; + final popupTop = iconTopLeft.dy - iconSize.height * 9 / 5; + final popupRight = screenSize.width - popupLeft; + final popupBottom = screenSize.height - popupRight; + final position = RelativeRect.fromLTRB( + popupLeft, popupTop, popupRight, popupBottom); + + openPopUpMenuAction(context, position, popupMenuItems); + }); + }, + ); } \ No newline at end of file diff --git a/lib/features/composer/presentation/composer_view.dart b/lib/features/composer/presentation/composer_view.dart index a4e6a484d..efa3d276a 100644 --- a/lib/features/composer/presentation/composer_view.dart +++ b/lib/features/composer/presentation/composer_view.dart @@ -150,42 +150,83 @@ class ComposerView extends GetWidget fit: BoxFit.fill), tooltip: AppLocalizations.of(context).send, onTap: () => controller.sendEmailAction(context)), - ] + if (responsiveUtils.isScreenWithShortestSide(context)) + buildIconWithLowerMenu( + SvgPicture.asset(imagePaths.icRequestReadReceipt), + context, + _popUpMoreActionMenu(context), + controller.openPopupMenuAction), + ], ), ); } + List _popUpMoreActionMenu(BuildContext context) { + return [ + PopupMenuItem( + padding: const EdgeInsets.symmetric(horizontal: 8), + child: Row( + children: [ + Obx(() => buildIconWeb( + icon: Icon(controller.hasRequestReadReceipt.value ? Icons.done : null, color: Colors.black))), + IgnorePointer( + child: buildTextIcon( + AppLocalizations.of(context).requestReadReceipt, + textStyle: const TextStyle(color: Colors.black, fontSize: 15)), + ), + ]), + onTap: () { + controller.toggleRequestReadReceipt(); + }, + ) + ]; + } + Widget _buildBottomBar(BuildContext context, bool isEnableSendButton) { return Container( padding: const EdgeInsets.symmetric(vertical: 16), color: Colors.white, - child: Row(mainAxisAlignment: MainAxisAlignment.center, - children: [ - buildTextButton( - AppLocalizations.of(context).cancel, - textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.lineItemListColor), - backgroundColor: AppColor.emailAddressChipColor, - width: 150, - height: 44, - radius: 10, - onTap: () => controller.closeComposer()), - const SizedBox(width: 12), - buildTextButton( - AppLocalizations.of(context).save_to_drafts, - textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.colorTextButton), - backgroundColor: AppColor.emailAddressChipColor, - width: 150, - height: 44, - radius: 10, - onTap: () => controller.saveEmailAsDrafts(context)), - const SizedBox(width: 12), - buildTextButton( - AppLocalizations.of(context).send, - width: 150, - height: 44, - radius: 10, - onTap: () => controller.sendEmailAction(context)), - ] + child: Stack( + alignment: Alignment.centerRight, + children: [ + Row(mainAxisAlignment: MainAxisAlignment.center, + children: [ + buildTextButton( + AppLocalizations.of(context).cancel, + textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.lineItemListColor), + backgroundColor: AppColor.emailAddressChipColor, + width: 150, + height: 44, + radius: 10, + onTap: () => controller.closeComposer()), + const SizedBox(width: 12), + buildTextButton( + AppLocalizations.of(context).save_to_drafts, + textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.colorTextButton), + backgroundColor: AppColor.emailAddressChipColor, + width: 150, + height: 44, + radius: 10, + onTap: () => controller.saveEmailAsDrafts(context)), + const SizedBox(width: 12), + buildTextButton( + AppLocalizations.of(context).send, + width: 150, + height: 44, + radius: 10, + onTap: () => controller.sendEmailAction(context)), + ] + ), + Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + buildIconWithUpperMenu( + SvgPicture.asset(imagePaths.icRequestReadReceipt), + context, + _popUpMoreActionMenu(context), + controller.openPopupMenuAction) + ]), + ], ), ); } diff --git a/lib/features/composer/presentation/composer_view_web.dart b/lib/features/composer/presentation/composer_view_web.dart index 8145721fc..84af12519 100644 --- a/lib/features/composer/presentation/composer_view_web.dart +++ b/lib/features/composer/presentation/composer_view_web.dart @@ -227,46 +227,103 @@ class ComposerView extends GetWidget fit: BoxFit.fill), tooltip: AppLocalizations.of(context).send, onTap: () => controller.sendEmailAction(context)), + buildIconWithLowerMenu( + SvgPicture.asset(imagePaths.icRequestReadReceipt), + context, + _popUpMoreActionMenu(context), + controller.openPopupMenuAction), ] ), ); } - Widget _buildBottomBar(BuildContext context, bool isEnableSendButton) { + List _popUpMoreActionMenu(BuildContext context) { + return [ + PopupMenuItem( + padding: const EdgeInsets.symmetric(horizontal: 8), + child: PointerInterceptor( + child: IntrinsicHeight( + child: Row( + children: [ + Obx(() => buildIconWeb( + icon: Icon(controller.hasRequestReadReceipt.value ? Icons.done : null, color: Colors.black))), + Expanded( + child: InkResponse( + child: SizedBox( + width: double.infinity, + height: double.infinity, + child: Center( + child: Text( + AppLocalizations.of(context).requestReadReceipt, + style: const TextStyle(color: Colors.black, fontSize: 15), + ) + ), + ), + ), + ), + ]), + ), + ), + onTap: () { + controller.toggleRequestReadReceipt(); + }, + ) + ]; + } + + Widget _buildBottomBar(BuildContext context, bool isEnableSendButton, BoxConstraints constraints) { return Container( padding: const EdgeInsets.symmetric(vertical: 16), color: Colors.white, child: SingleChildScrollView( scrollDirection: Axis.horizontal, - child: Row(mainAxisAlignment: MainAxisAlignment.center, + child: ConstrainedBox( + constraints: constraints.widthConstraints(), + child: Stack( + alignment: Alignment.centerRight, children: [ - const SizedBox(width: 24), - buildButtonWrapText( - AppLocalizations.of(context).cancel, - textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.lineItemListColor), - bgColor: AppColor.emailAddressChipColor, - minWidth: 150, - height: 44, - radius: 10, - onTap: () => controller.closeComposerWeb()), - const SizedBox(width: 12), - buildButtonWrapText( - AppLocalizations.of(context).save_to_drafts, - textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.colorTextButton), - bgColor: AppColor.emailAddressChipColor, - minWidth: 150, - height: 44, - radius: 10, - onTap: () => controller.saveEmailAsDrafts(context)), - const SizedBox(width: 12), - buildButtonWrapText( - AppLocalizations.of(context).send, - minWidth: 150, - height: 44, - radius: 10, - onTap: () => controller.sendEmailAction(context)), - const SizedBox(width: 24), - ] + Row(mainAxisAlignment: MainAxisAlignment.center, + children: [ + const SizedBox(width: 24), + buildButtonWrapText( + AppLocalizations.of(context).cancel, + textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.lineItemListColor), + bgColor: AppColor.emailAddressChipColor, + minWidth: 150, + height: 44, + radius: 10, + onTap: () => controller.closeComposerWeb()), + const SizedBox(width: 12), + buildButtonWrapText( + AppLocalizations.of(context).save_to_drafts, + textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.colorTextButton), + bgColor: AppColor.emailAddressChipColor, + minWidth: 150, + height: 44, + radius: 10, + onTap: () => controller.saveEmailAsDrafts(context)), + const SizedBox(width: 12), + buildButtonWrapText( + AppLocalizations.of(context).send, + minWidth: 150, + height: 44, + radius: 10, + onTap: () => controller.sendEmailAction(context)), + const SizedBox(width: 24), + ] + ), + if(!responsiveUtils.isMobile(context)) + Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + buildIconWithUpperMenu( + SvgPicture.asset(imagePaths.icRequestReadReceipt), + context, + _popUpMoreActionMenu(context), + controller.openPopupMenuAction) + ]), + ], + ), ), ), ); @@ -317,7 +374,7 @@ class ComposerView extends GetWidget ] ))), const Divider(color: AppColor.colorDividerComposer, height: 1), - Obx(() => _buildBottomBar(context, controller.isEnableEmailSendButton.value)), + Obx(() => _buildBottomBar(context, controller.isEnableEmailSendButton.value, constraints)), ]); } @@ -644,6 +701,7 @@ class ComposerView extends GetWidget }, onBlur: () { controller.onEditorFocusChange(false); }, onMouseDown: () { + Navigator.maybePop(context); controller.onEditorFocusChange(true); }, onChangeSelection: (settings) { controller.richTextWebController.onEditorSettingsChange(settings);