TF-656 add request read receipt to composer_view

core/lib/presentation/views/button/icon_button_web.dart

@@ -174,3 +174,71 @@ Widget buildButtonWrapText(String name, {
     ),
   );
 }
+
+Widget buildIconWithLowerMenu(
+  Widget icon,
+  BuildContext context,
+  List<PopupMenuEntry> popupMenuItems,
+  Function(BuildContext context, RelativeRect? position,
+          List<PopupMenuEntry> 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<PopupMenuEntry> popupMenuItems,
+  Function(BuildContext context, RelativeRect? position,
+          List<PopupMenuEntry> 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);
+          });
+    },
+  );
+}

lib/features/composer/presentation/composer_view.dart

@@ -150,42 +150,83 @@ class ComposerView extends GetWidget<ComposerController>
                       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<PopupMenuEntry> _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,
+      child: Stack(
-          children: [
+        alignment: Alignment.centerRight,
-            buildTextButton(
+        children: [
-                AppLocalizations.of(context).cancel,
+          Row(mainAxisAlignment: MainAxisAlignment.center,
-                textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.lineItemListColor),
+            children: [
-                backgroundColor: AppColor.emailAddressChipColor,
+              buildTextButton(
-                width: 150,
+                  AppLocalizations.of(context).cancel,
-                height: 44,
+                  textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.lineItemListColor),
-                radius: 10,
+                  backgroundColor: AppColor.emailAddressChipColor,
-                onTap: () => controller.closeComposer()),
+                  width: 150,
-            const SizedBox(width: 12),
+                  height: 44,
-            buildTextButton(
+                  radius: 10,
-                AppLocalizations.of(context).save_to_drafts,
+                  onTap: () => controller.closeComposer()),
-                textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.colorTextButton),
+              const SizedBox(width: 12),
-                backgroundColor: AppColor.emailAddressChipColor,
+              buildTextButton(
-                width: 150,
+                  AppLocalizations.of(context).save_to_drafts,
-                height: 44,
+                  textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.colorTextButton),
-                radius: 10,
+                  backgroundColor: AppColor.emailAddressChipColor,
-                onTap: () => controller.saveEmailAsDrafts(context)),
+                  width: 150,
-            const SizedBox(width: 12),
+                  height: 44,
-            buildTextButton(
+                  radius: 10,
-                AppLocalizations.of(context).send,
+                  onTap: () => controller.saveEmailAsDrafts(context)),
-                width: 150,
+              const SizedBox(width: 12),
-                height: 44,
+              buildTextButton(
-                radius: 10,
+                  AppLocalizations.of(context).send,
-                onTap: () => controller.sendEmailAction(context)),
+                  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)
+            ]),
+        ],
       ),
     );
   }

lib/features/composer/presentation/composer_view_web.dart

@@ -227,46 +227,103 @@ class ComposerView extends GetWidget<ComposerController>
                     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<PopupMenuEntry> _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),
+                Row(mainAxisAlignment: MainAxisAlignment.center,
-                buildButtonWrapText(
+                    children: [
-                  AppLocalizations.of(context).cancel,
+                      const SizedBox(width: 24),
-                  textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.lineItemListColor),
+                      buildButtonWrapText(
-                  bgColor: AppColor.emailAddressChipColor,
+                        AppLocalizations.of(context).cancel,
-                  minWidth: 150,
+                        textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.lineItemListColor),
-                  height: 44,
+                        bgColor: AppColor.emailAddressChipColor,
-                  radius: 10,
+                        minWidth: 150,
-                  onTap: () => controller.closeComposerWeb()),
+                        height: 44,
-                const SizedBox(width: 12),
+                        radius: 10,
-                buildButtonWrapText(
+                        onTap: () => controller.closeComposerWeb()),
-                    AppLocalizations.of(context).save_to_drafts,
+                      const SizedBox(width: 12),
-                    textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.colorTextButton),
+                      buildButtonWrapText(
-                    bgColor: AppColor.emailAddressChipColor,
+                          AppLocalizations.of(context).save_to_drafts,
-                    minWidth: 150,
+                          textStyle: const TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.colorTextButton),
-                    height: 44,
+                          bgColor: AppColor.emailAddressChipColor,
-                    radius: 10,
+                          minWidth: 150,
-                    onTap: () => controller.saveEmailAsDrafts(context)),
+                          height: 44,
-                const SizedBox(width: 12),
+                          radius: 10,
-                buildButtonWrapText(
+                          onTap: () => controller.saveEmailAsDrafts(context)),
-                    AppLocalizations.of(context).send,
+                      const SizedBox(width: 12),
-                    minWidth: 150,
+                      buildButtonWrapText(
-                    height: 44,
+                          AppLocalizations.of(context).send,
-                    radius: 10,
+                          minWidth: 150,
-                    onTap: () => controller.sendEmailAction(context)),
+                          height: 44,
-                const SizedBox(width: 24),
+                          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<ComposerController>
                 ]
             ))),
         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<ComposerController>
             }, onBlur: () {
               controller.onEditorFocusChange(false);
             }, onMouseDown: () {
+              Navigator.maybePop(context);  
               controller.onEditorFocusChange(true);
             }, onChangeSelection: (settings) {
               controller.richTextWebController.onEditorSettingsChange(settings);