TF-934 Implement open email in new tab

2022-11-14 16:30:25 +07:00
parent 83f8049c48
commit 4f981878c3
13 changed files with 432 additions and 251 deletions
@@ -30,6 +30,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:tmail_ui_user/main/routes/app_routes.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';
 import 'package:tmail_ui_user/main/routes/route_utils.dart';
+import 'package:url_launcher/url_launcher.dart';

 mixin EmailActionController on ViewAsDialogActionMixin {

@@ -288,4 +289,15 @@ mixin EmailActionController on ViewAsDialogActionMixin {
      mailboxCurrent: mailboxCurrent,
      onCancelSelectionEmail: onCancelSelectionEmail);
  }
+
+  void openEmailInNewTabAction(BuildContext context, PresentationEmail email) {
+    launchLink(email.routeWebAsString);
+  }
+
+  Future<void> launchLink(String url, {bool isNewTab = true}) async {
+    await launchUrl(
+      Uri.parse(url),
+      webOnlyWindowName: isNewTab ? '_blank' : '_self',
+    );
+  }
 }
@@ -803,6 +803,9 @@ class ThreadController extends BaseController with EmailActionController {
        popBack();
        unSpam(selectedEmail);
        break;
+      case EmailActionType.openInNewTab:
+        openEmailInNewTabAction(context, selectedEmail);
+        break;
      default:
        break;
    }
@@ -821,7 +824,7 @@ class ThreadController extends BaseController with EmailActionController {

  void calculateDragValue(PresentationEmail? currentPresentationEmail) {
    if(currentPresentationEmail != null) {
-      if(mailboxDashBoardController.listEmailSelected.contains(currentPresentationEmail)){
+      if(mailboxDashBoardController.listEmailSelected.findEmail(currentPresentationEmail.id) != null){
        listEmailDrag.clear();
        listEmailDrag.addAll(mailboxDashBoardController.listEmailSelected);
      } else {
@@ -6,6 +6,7 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
+import 'package:tmail_ui_user/features/base/mixin/popup_menu_widget_mixin.dart';
 import 'package:tmail_ui_user/features/email/presentation/model/composer_arguments.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/email_action_cupertino_action_sheet_action_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/state/mark_as_mailbox_read_state.dart';
@@ -24,9 +25,12 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/email_tile_bu
  if (dart.library.html) 'package:tmail_ui_user/features/thread/presentation/widgets/email_tile_web_builder.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/filter_message_cupertino_action_sheet_action_builder.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/routes/route_navigation.dart';

-class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
-    FilterEmailPopupMenuMixin {
+class ThreadView extends GetWidget<ThreadController>
+  with AppLoaderMixin,
+    FilterEmailPopupMenuMixin,
+    PopupMenuWidgetMixin {

  final _responsiveUtils = Get.find<ResponsiveUtils>();
  final _imagePaths = Get.find<ImagePaths>();
@@ -496,46 +500,132 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
  }

  List<Widget> _contextMenuActionTile(BuildContext context, PresentationEmail email) {
+    final mailboxContain = controller.getMailboxContain(email);
+
    return <Widget>[
-      _markAsEmailSpamOrUnSpamAction(context, email),
+      _openInNewTabContextMenuItemAction(context, email),
+      if (mailboxContain?.isDrafts == false)
+        _markAsEmailSpamOrUnSpamContextMenuItemAction(context, email, mailboxContain),
    ];
  }

-  Widget _markAsEmailSpamOrUnSpamAction(BuildContext context, PresentationEmail email) {
-    final mailboxContain = controller.getMailboxContain(email);
+  Widget _markAsEmailSpamOrUnSpamContextMenuItemAction(
+    BuildContext context,
+    PresentationEmail email,
+    PresentationMailbox? mailboxContain
+  ) {
    return (EmailActionCupertinoActionSheetActionBuilder(
-            const Key('mark_as_spam_or_un_spam_action'),
-            SvgPicture.asset(
-                mailboxContain?.isSpam == true ? _imagePaths.icNotSpam : _imagePaths.icSpam,
-                width: 28,
-                height: 28,
-                fit: BoxFit.fill,
-                color: AppColor.colorTextButton),
-            mailboxContain?.isSpam == true
-                ? AppLocalizations.of(context).remove_from_spam
-                : AppLocalizations.of(context).mark_as_spam,
-            email,
-            iconLeftPadding: _responsiveUtils.isMobile(context)
-                ? const EdgeInsets.only(left: 12, right: 16)
-                : const EdgeInsets.only(right: 12),
-            iconRightPadding: _responsiveUtils.isMobile(context)
-                ? const EdgeInsets.only(right: 12)
-                : EdgeInsets.zero)
-        ..onActionClick((email) => controller.pressEmailAction(context,
-            mailboxContain?.isSpam == true
-                ? EmailActionType.unSpam
-                : EmailActionType.moveToSpam,
-            email,
-            mailboxContain: mailboxContain)))
-      .build();
+        const Key('mark_as_spam_or_un_spam_action'),
+        SvgPicture.asset(
+          mailboxContain?.isSpam == true ? _imagePaths.icNotSpam : _imagePaths.icSpam,
+          width: 24,
+          height: 24,
+          fit: BoxFit.fill,
+          color: AppColor.colorTextButton),
+        mailboxContain?.isSpam == true
+          ? AppLocalizations.of(context).remove_from_spam
+          : AppLocalizations.of(context).mark_as_spam,
+        email,
+        iconLeftPadding: _responsiveUtils.isMobile(context)
+          ? const EdgeInsets.only(left: 12, right: 16)
+          : const EdgeInsets.only(right: 12),
+        iconRightPadding: _responsiveUtils.isMobile(context)
+          ? const EdgeInsets.only(right: 12)
+          : EdgeInsets.zero)
+      ..onActionClick((email) => controller.pressEmailAction(context,
+        mailboxContain?.isSpam == true ? EmailActionType.unSpam : EmailActionType.moveToSpam,
+        email,
+        mailboxContain: mailboxContain)
+      )
+    ).build();
+  }
+
+  Widget _openInNewTabContextMenuItemAction(BuildContext context, PresentationEmail email) {
+    return (EmailActionCupertinoActionSheetActionBuilder(
+      const Key('open_in_new_tab_action'),
+      SvgPicture.asset(
+        _imagePaths.icOpenInNewTab,
+        width: 24,
+        height: 24,
+        fit: BoxFit.fill,
+        color: AppColor.colorTextButton),
+      AppLocalizations.of(context).openInNewTab,
+      email,
+      iconLeftPadding: _responsiveUtils.isMobile(context)
+        ? const EdgeInsets.only(left: 12, right: 16)
+        : const EdgeInsets.only(right: 12),
+      iconRightPadding: _responsiveUtils.isMobile(context)
+        ? const EdgeInsets.only(right: 12)
+        : EdgeInsets.zero)
+      ..onActionClick((email) {
+        popBack();
+        controller.openEmailInNewTabAction(context, email);
+      })
+    ).build();
  }

  List<PopupMenuEntry> _popupMenuActionTile(BuildContext context, PresentationEmail email) {
+    final mailboxContain = controller.getMailboxContain(email);
+
    return [
-      PopupMenuItem(padding: const EdgeInsets.symmetric(horizontal: 8), child: _markAsEmailSpamOrUnSpamAction(context, email)),
+      _buildOpenInNewTabPopupMenuItem(context, email, mailboxContain),
+      if (mailboxContain?.isDrafts == false)
+        _buildMarkAsSpamPopupMenuItem(context, email, mailboxContain)
    ];
  }

+  PopupMenuEntry _buildMarkAsSpamPopupMenuItem(
+    BuildContext context,
+    PresentationEmail email,
+    PresentationMailbox? mailboxContain
+  ) {
+    return PopupMenuItem(
+      padding: EdgeInsets.zero,
+      child: popupItem(
+        mailboxContain?.isSpam == true ? _imagePaths.icNotSpam : _imagePaths.icSpam,
+        mailboxContain?.isSpam == true
+          ? AppLocalizations.of(context).remove_from_spam
+          : AppLocalizations.of(context).mark_as_spam,
+        colorIcon: AppColor.colorTextButton,
+        styleName: const TextStyle(
+          fontWeight: FontWeight.w500,
+          fontSize: 16,
+          color: Colors.black
+        ),
+        onCallbackAction: () => controller.pressEmailAction(
+          context,
+          mailboxContain?.isSpam == true ? EmailActionType.unSpam : EmailActionType.moveToSpam,
+          email,
+          mailboxContain: mailboxContain
+        )
+      )
+    );
+  }
+
+  PopupMenuEntry _buildOpenInNewTabPopupMenuItem(
+    BuildContext context,
+    PresentationEmail email,
+    PresentationMailbox? mailboxContain
+  ) {
+    return PopupMenuItem(
+      padding: EdgeInsets.zero,
+      child: popupItem(
+        _imagePaths.icOpenInNewTab,
+        AppLocalizations.of(context).openInNewTab,
+        colorIcon: AppColor.colorTextButton,
+        styleName: const TextStyle(
+          fontWeight: FontWeight.w500,
+          fontSize: 16,
+          color: Colors.black
+        ),
+        onCallbackAction: () {
+          popBack();
+          controller.openEmailInNewTabAction(context, email);
+        }
+      )
+    );
+  }
+
  Widget _buildMarkAsMailboxReadLoading(BuildContext context) {
    return Obx(() {
      final viewState = controller.mailboxDashBoardController.viewStateMarkAsReadMailbox.value;
@@ -1,5 +1,6 @@

 import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/extensions/tap_down_details_extension.dart';
 import 'package:core/presentation/views/button/icon_button_web.dart';
 import 'package:core/presentation/views/responsive/responsive_widget.dart';
 import 'package:flutter/material.dart';
@@ -392,90 +393,84 @@ class EmailTileBuilder with BaseEmailItemTile {
    });
  }

+  double _getIconSize() {
+    return responsiveUtils.isDesktop(_context) ? 18 : 16;
+  }
+
+  EdgeInsets _getPaddingIcon() {
+    return responsiveUtils.isDesktop(_context)
+      ? const EdgeInsets.all(8)
+      : const EdgeInsets.all(5);
+  }
+
  Widget _buildListActionButtonWhenHover() {
    return Row(children: [
+      buildSVGIconButton(
+        icon: imagePaths.icOpenInNewTab,
+        iconColor: AppColor.colorActionButtonHover,
+        iconSize: _getIconSize(),
+        padding: _getPaddingIcon(),
+        tooltip: AppLocalizations.of(_context).openInNewTab,
+        onTap: () => _emailActionClick?.call(
+          EmailActionType.openInNewTab,
+          _presentationEmail
+        )
+      ),
      if(!_presentationEmail.isDraft)
-        buildIconWeb(
-            minSize: 18,
-            iconSize: 18,
-            iconPadding: const EdgeInsets.all(5),
-            splashRadius: 10,
-            icon: SvgPicture.asset(
-                _presentationEmail.hasRead
-                    ? imagePaths.icRead
-                    : imagePaths.icUnread,
-                color: AppColor.colorActionButtonHover,
-                width: 16,
-                height: 16,
-                fit: BoxFit.fill),
-            tooltip: _presentationEmail.hasRead
-                ? AppLocalizations.of(_context).mark_as_unread
-                : AppLocalizations.of(_context).mark_as_read,
-            onTap: () => _emailActionClick?.call(
-                _presentationEmail.hasRead
-                    ? EmailActionType.markAsUnread
-                    : EmailActionType.markAsRead,
-                _presentationEmail)),
-      const SizedBox(width: 5),
+        buildSVGIconButton(
+          icon: _presentationEmail.hasRead ? imagePaths.icRead: imagePaths.icUnread,
+          iconColor: AppColor.colorActionButtonHover,
+          iconSize: _getIconSize(),
+          padding: _getPaddingIcon(),
+          tooltip: _presentationEmail.hasRead
+            ? AppLocalizations.of(_context).mark_as_unread
+            : AppLocalizations.of(_context).mark_as_read,
+          onTap: () => _emailActionClick?.call(
+            _presentationEmail.hasRead ? EmailActionType.markAsUnread : EmailActionType.markAsRead,
+            _presentationEmail
+          )
+        ),
      if (mailboxContain != null && mailboxContain?.isDrafts == false)
        ... [
-          buildIconWeb(
-              minSize: 18,
-              iconSize: 18,
-              iconPadding: const EdgeInsets.all(5),
-              splashRadius: 10,
-              icon: SvgPicture.asset(
-                  imagePaths.icMove,
-                  width: 16,
-                  height: 16,
-                  color: AppColor.colorActionButtonHover,
-                  fit: BoxFit.fill),
-              tooltip: AppLocalizations.of(_context).move,
-              onTap: () => _emailActionClick?.call(
-                  EmailActionType.moveToMailbox,
-                  _presentationEmail)),
-          const SizedBox(width: 5),
+          buildSVGIconButton(
+            icon: imagePaths.icMove,
+            iconColor: AppColor.colorActionButtonHover,
+            iconSize: _getIconSize(),
+            padding: _getPaddingIcon(),
+            tooltip: AppLocalizations.of(_context).move,
+            onTap: () => _emailActionClick?.call(
+              EmailActionType.moveToMailbox,
+              _presentationEmail
+            )
+          ),
        ],
-      buildIconWeb(
-          minSize: 18,
-          iconSize: 18,
-          iconPadding: const EdgeInsets.all(5),
-          splashRadius: 10,
-          icon: SvgPicture.asset(
-              canDeletePermanently ? imagePaths.icDeleteComposer : imagePaths.icDelete,
-              width: canDeletePermanently ? 14 : 16,
-              height: canDeletePermanently ? 14 : 16,
-              color: AppColor.colorActionButtonHover,
-              fit: BoxFit.fill),
-          tooltip: canDeletePermanently
-              ? AppLocalizations.of(_context).delete_permanently
-              : AppLocalizations.of(_context).move_to_trash,
-          onTap: () => _emailActionClick?.call(
-              canDeletePermanently
-                  ? EmailActionType.deletePermanently
-                  : EmailActionType.moveToTrash,
-              _presentationEmail)),
-      const SizedBox(width: 5),
-      if (mailboxContain?.isDrafts == false)
-        buildIconWebHasPosition(
-            _context,
-            icon: SvgPicture.asset(
-                imagePaths.icMore,
-                width: 16,
-                height: 16,
-                color: AppColor.colorActionButtonHover,
-                fit: BoxFit.fill),
-            tooltip: AppLocalizations.of(_context).more,
-            onTap: () {
-              if (responsiveUtils.isMobile(_context)) {
-                _onMoreActionClick?.call(_presentationEmail, null);
-              }
-            },
-            onTapDown: (position) {
-              if (!responsiveUtils.isMobile(_context)) {
-                _onMoreActionClick?.call(_presentationEmail, position);
-              }
-            }),
+      buildSVGIconButton(
+        icon: imagePaths.icDeleteComposer,
+        iconColor: AppColor.colorActionButtonHover,
+        iconSize: responsiveUtils.isDesktop(_context) ? 16 : 14,
+        padding: _getPaddingIcon(),
+        tooltip: canDeletePermanently
+          ? AppLocalizations.of(_context).delete_permanently
+          : AppLocalizations.of(_context).move_to_trash,
+        onTap: () => _emailActionClick?.call(
+          canDeletePermanently ? EmailActionType.deletePermanently : EmailActionType.moveToTrash,
+          _presentationEmail
+        )
+      ),
+      buildSVGIconButton(
+        icon: imagePaths.icMore,
+        iconColor: AppColor.colorActionButtonHover,
+        iconSize: _getIconSize(),
+        padding: _getPaddingIcon(),
+        tooltip: AppLocalizations.of(_context).more,
+        onTapDown: (tapDetails) {
+          if (responsiveUtils.isScreenWithShortestSide(_context)) {
+            _onMoreActionClick?.call(_presentationEmail, null);
+          } else {
+            _onMoreActionClick?.call(_presentationEmail, tapDetails.getPosition(_context));
+          }
+        }
+      ),
      if (responsiveUtils.isDesktop(_context)) const SizedBox(width: 16),
    ]);
  }
@@ -510,7 +505,6 @@ class EmailTileBuilder with BaseEmailItemTile {
          padding: const EdgeInsets.only(right: 4, left: 8),
          child: buildDateTime(_context, _presentationEmail)),
      buildIconChevron()
-
    ]);
  }