TF-381 Apply new UI EmailView for browser

2022-03-22 13:34:03 +07:00
parent dc35d5e5a0
commit c2f6434686
22 changed files with 300 additions and 256 deletions
@@ -17,10 +17,11 @@ import 'package:tmail_ui_user/features/email/presentation/widgets/bottom_bar_mai
 import 'package:tmail_ui_user/features/email/presentation/widgets/email_action_cupertino_action_sheet_action_builder.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/email_content_item_builder.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/email_content_place_holder_loading_widget.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/user_setting_popup_menu_mixin.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:filesize/filesize.dart';

-class EmailView extends GetView {
+class EmailView extends GetView with UserSettingPopupMenuMixin {

  final emailController = Get.find<EmailController>();
  final responsiveUtils = Get.find<ResponsiveUtils>();
@@ -31,11 +32,11 @@ class EmailView extends GetView {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
-      backgroundColor: Colors.white,
+      backgroundColor: responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
      body: Container(
        padding: EdgeInsets.zero,
        margin: EdgeInsets.zero,
-        decoration: !(responsiveUtils.isMobile(context) && responsiveUtils.isMobileDevice(context))
+        decoration: responsiveUtils.isTabletLarge(context)
          ? BoxDecoration(border: Border(left: BorderSide(color: AppColor.colorLineLeftEmailView, width: 1.0)))
          : null,
        child: SafeArea(
@@ -44,15 +45,12 @@ class EmailView extends GetView {
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
-                  _buildAppBar(context),
-                  Obx(() => emailController.currentEmail != null
-                      ? _buildDivider()
-                      : SizedBox.shrink()),
-                  Expanded(child: _buildEmailBody(context)),
-                  Obx(() => emailController.currentEmail != null
-                      ? Divider(color: AppColor.colorDividerEmailView, height: 1)
-                      : SizedBox.shrink()),
-                  _buildBottomBar(context),
+                  if (responsiveUtils.isDesktop(context))
+                    Container(
+                      color: Colors.white,
+                      padding: EdgeInsets.only(right: 10, top: 16, bottom: 10),
+                      child: _buildHeader(context)),
+                  Expanded(child: _buildBody(context)),
                ]
            )
        ),
@@ -60,6 +58,52 @@ class EmailView extends GetView {
    );
  }

+  Widget _buildHeader(BuildContext context) {
+    return Row(children: [
+      Spacer(),
+      Padding(
+        padding: EdgeInsets.only(right: 16),
+        child: (AvatarBuilder()
+            ..text(emailController.mailboxDashBoardController.userProfile.value?.getAvatarText() ?? '')
+            ..backgroundColor(Colors.white)
+            ..textColor(Colors.black)
+            ..context(context)
+            ..addOnTapAvatarActionWithPositionClick((position) => openUserSettingAction(
+                context,
+                position,
+                popupMenuUserSettingActionTile(context, () => emailController.mailboxDashBoardController.logoutAction())))
+            ..addBoxShadows([BoxShadow(
+                color: AppColor.colorShadowBgContentEmail,
+                spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5))])
+            ..size(48))
+          .build()),
+    ]);
+  }
+
+  Widget _buildBody(BuildContext context) {
+    return Container(
+        decoration: responsiveUtils.isDesktop(context)
+          ? BoxDecoration(
+              borderRadius: BorderRadius.circular(20),
+              border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
+              color: Colors.white)
+          : null,
+        margin: responsiveUtils.isDesktop(context) ? EdgeInsets.all(16) : EdgeInsets.zero,
+        padding: responsiveUtils.isDesktop(context) ? EdgeInsets.only(top: 5, bottom: 5, left: 5, right: 3) : EdgeInsets.zero,
+        child: Column(children: [
+          _buildAppBar(context),
+          if (responsiveUtils.isDesktop(context)) SizedBox(height: 5),
+          Obx(() => emailController.currentEmail != null && !responsiveUtils.isDesktop(context)
+              ? _buildDivider() : SizedBox.shrink()),
+          Expanded(child: _buildEmailBody(context)),
+          Obx(() => emailController.currentEmail != null
+              ? Divider(color: AppColor.colorDividerEmailView, height: 1)
+              : SizedBox.shrink()),
+          _buildBottomBar(context),
+        ])
+    );
+  }
+
  Widget _buildDivider({EdgeInsets? edgeInsets}){
    return Padding(
      padding: edgeInsets ?? EdgeInsets.symmetric(horizontal: 16),
@@ -129,12 +173,15 @@ class EmailView extends GetView {
      style: TextStyle(fontSize: 25, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold));
  }

-  Widget _buildEmailSubject() {
+  Widget _buildEmailSubject(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(right: 16),
      child: Text(
          '${emailController.mailboxDashBoardController.selectedEmail.value?.getEmailTitle()}',
-          style: TextStyle(fontSize: 20, color: AppColor.colorNameEmail)
+          style: TextStyle(
+              fontSize: 20,
+              color: AppColor.colorNameEmail,
+              fontWeight: responsiveUtils.isDesktop(context) ? FontWeight.w500 : FontWeight.normal)
      ));
  }

@@ -153,18 +200,19 @@ class EmailView extends GetView {
              Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
-                    Expanded(child: _buildEmailSubject()),
+                    Expanded(child: _buildEmailSubject(context)),
                    _buildEmailTime(context),
                  ]),
-              _buildDivider(edgeInsets: EdgeInsets.only(top: 16)),
+              if (responsiveUtils.isDesktop(context)) SizedBox(height: 20),
+              if (!responsiveUtils.isDesktop(context)) _buildDivider(edgeInsets: EdgeInsets.only(top: 16)),
              Obx(() => emailController.currentEmail != null
                  ? _buildEmailAddress(
-                  context,
-                  emailController.currentEmail!,
-                  emailController.emailAddressExpandMode.value,
-                  emailController.isDisplayFullEmailAddress.value)
+                      context,
+                      emailController.currentEmail!,
+                      emailController.emailAddressExpandMode.value,
+                      emailController.isDisplayFullEmailAddress.value)
                  : SizedBox.shrink()),
-              _buildDivider(edgeInsets: EdgeInsets.only(top: 4)),
+              _buildDivider(edgeInsets: EdgeInsets.only(top: 8)),
              _buildAttachments(context),
              _buildListEmailContent(context, constraints),
            ],
@@ -193,15 +241,15 @@ class EmailView extends GetView {
        if (email.from.numberEmailAddress() > 0)
          _buildEmailAddressByPrefix(context, email, PrefixEmailAddress.from, isDisplayFull),
        if (email.to.numberEmailAddress() > 0 && expandMode == ExpandMode.EXPAND)
-          _buildDivider(edgeInsets: EdgeInsets.only(top: 4)),
+          _buildDivider(edgeInsets: EdgeInsets.only(top: 8, bottom: 4)),
        if (email.to.numberEmailAddress() > 0 && expandMode == ExpandMode.EXPAND)
          _buildEmailAddressByPrefix(context, email, PrefixEmailAddress.to, isDisplayFull),
        if (email.cc.numberEmailAddress() > 0 && expandMode == ExpandMode.EXPAND && isDisplayFull)
-          _buildDivider(edgeInsets: EdgeInsets.only(top: 4)),
+          _buildDivider(edgeInsets: EdgeInsets.only(top: 8, bottom: 4)),
        if (email.cc.numberEmailAddress() > 0 && expandMode == ExpandMode.EXPAND && isDisplayFull)
          _buildEmailAddressByPrefix(context, email, PrefixEmailAddress.cc, isDisplayFull),
        if (email.bcc.numberEmailAddress() > 0 && expandMode == ExpandMode.EXPAND && isDisplayFull)
-          _buildDivider(edgeInsets: EdgeInsets.only(top: 4)),
+          _buildDivider(edgeInsets: EdgeInsets.only(top: 8, bottom: 4)),
        if (email.bcc.numberEmailAddress() > 0 && expandMode == ExpandMode.EXPAND && isDisplayFull)
          _buildEmailAddressByPrefix(context, email, PrefixEmailAddress.bcc, isDisplayFull),
      ],
@@ -5,6 +5,7 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/setting/presentation/model/app_setting.dart';
 import 'package:tmail_ui_user/features/setting/presentation/model/reading_pane.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 typedef OnBackActionClick = void Function();
 typedef OnEmailActionClick = void Function(PresentationEmail, EmailActionType);
@@ -50,7 +51,6 @@ class AppBarMailWidgetBuilder {
      child: MediaQuery(
        data: MediaQueryData(padding: EdgeInsets.zero),
        child: Row(
-          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            if (_conditionShow(_context))
@@ -74,9 +74,10 @@ class AppBarMailWidgetBuilder {
  }

  Widget _buildBackButton() {
-    return IconButton(
-      icon: SvgPicture.asset(_imagePaths.icBack, width: 20, height: 20, color: AppColor.colorTextButton, fit: BoxFit.fill),
-      onPressed: () => _onBackActionClick?.call()
+    return buildIconWeb(
+        icon: SvgPicture.asset(_imagePaths.icBack, width: 18, height: 18, color: AppColor.colorTextButton, fit: BoxFit.fill),
+        tooltip: AppLocalizations.of(_context).back,
+        onTap: () => _onBackActionClick?.call()
    );
  }

@@ -93,71 +94,42 @@ class AppBarMailWidgetBuilder {

  Widget _buildListOptionButton() {
    return Row(
-      mainAxisAlignment: MainAxisAlignment.start,
-      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
-        IconButton(
-            key: Key('button_move_to_mailbox_email'),
-            icon: SvgPicture.asset(_imagePaths.icMoveEmail, color: AppColor.colorButton, fit: BoxFit.fill),
-            onPressed: () {
+        buildIconWeb(
+            icon: SvgPicture.asset(_imagePaths.icMoveEmail, fit: BoxFit.fill),
+            tooltip: AppLocalizations.of(_context).move_to_mailbox,
+            onTap: () {
              if (_presentationEmail != null) {
                _onEmailActionClick?.call(_presentationEmail!, EmailActionType.move);
              }
            }),
-        IconButton(
-          key: Key('button_mark_as_star_email'),
-          icon: SvgPicture.asset(
-              (_presentationEmail != null && _presentationEmail!.isFlaggedEmail())
-                  ? _imagePaths.icStar
-                  : _imagePaths.icUnStar,
-              fit: BoxFit.fill),
-          onPressed: ()  {
+        buildIconWeb(
+          icon: SvgPicture.asset((_presentationEmail != null && _presentationEmail!.isFlaggedEmail()) ? _imagePaths.icStar : _imagePaths.icUnStar, fit: BoxFit.fill),
+          tooltip: (_presentationEmail != null && _presentationEmail!.isFlaggedEmail())
+            ? AppLocalizations.of(_context).mark_as_unstar
+            : AppLocalizations.of(_context).mark_as_star,
+          onTap: () {
            if (_presentationEmail != null) {
-              _onEmailActionClick?.call(_presentationEmail!,
-                  _presentationEmail!.isFlaggedEmail() ? EmailActionType.markAsUnStar : EmailActionType.markAsStar);
+              _onEmailActionClick?.call(_presentationEmail!, _presentationEmail!.isFlaggedEmail() ? EmailActionType.markAsUnStar : EmailActionType.markAsStar);
            }
          }),
-        IconButton(
-          key: Key('button_delete_email'),
-          icon: SvgPicture.asset(_imagePaths.icDeleteEmail, color: AppColor.colorButton, fit: BoxFit.fill),
-          onPressed: () {
-            if (_presentationEmail != null) {
-              _onEmailActionClick?.call(_presentationEmail!, EmailActionType.delete);
-            }
-          }),
-        _buildMoreButton(),
+        Padding(
+          padding: EdgeInsets.only(left: 10, right: 16),
+          child: buildIconWebHasPosition(
+              _context,
+              tooltip: AppLocalizations.of(_context).more,
+              icon: SvgPicture.asset(_imagePaths.icMore, fit: BoxFit.fill),
+              onTap: () {
+                if (_presentationEmail != null && _responsiveUtils.isMobile(_context)) {
+                  _onMoreActionClick?.call(_presentationEmail!, null);
+                }
+              },
+              onTapDown: (position) {
+                if (_presentationEmail != null && !_responsiveUtils.isMobile(_context)) {
+                  _onMoreActionClick?.call(_presentationEmail!, position);
+                }
+              })),
      ]
    );
  }
-
-  Widget _buildMoreButton() {
-    return Material(
-        key: Key('button_more_email'),
-        borderRadius: BorderRadius.circular(12),
-        color: Colors.transparent,
-        child: Padding(
-            padding: EdgeInsets.only(left: 10, right: 16),
-            child: GestureDetector(
-                onTap: () {
-                  if (_presentationEmail != null && _responsiveUtils.isMobileDevice(_context)) {
-                    _onMoreActionClick?.call(_presentationEmail!, null);
-                  }
-                },
-                child: SvgPicture.asset(_imagePaths.icMore, color: AppColor.colorButton, fit: BoxFit.fill),
-                onTapDown: (detail) {
-                  if (_presentationEmail != null && !_responsiveUtils.isMobileDevice(_context)) {
-                    final screenSize = MediaQuery.of(_context).size;
-                    final offset = detail.globalPosition;
-                    final position = RelativeRect.fromLTRB(
-                      offset.dx,
-                      offset.dy,
-                      screenSize.width - offset.dx,
-                      screenSize.height - offset.dy,
-                    );
-                    _onMoreActionClick?.call(_presentationEmail!, position);
-                  }
-                })
-        )
-    );
-  }
 }
@@ -91,22 +91,23 @@ class BottomBarMailWidgetBuilder {
              }})
            ..text(AppLocalizations.of(_context).forward, isVertical: _responsiveUtils.isMobile(_context)))
          .build(),
-        (ButtonBuilder(_imagePaths.icNewMessage)
-            ..key(Key('button_new_message'))
-            ..size(20)
-            ..paddingIcon(EdgeInsets.only(
-                top: _responsiveUtils.isMobileDevice(_context) ? 10 : 16,
-                bottom: _responsiveUtils.isMobileDevice(_context) ? 8 : 16,
-                right: 5))
-            ..textStyle(TextStyle(
-                fontSize: _responsiveUtils.isMobileDevice(_context) ? 12 : 16,
-                color: AppColor.colorTextButton))
-            ..onPressActionClick(() {
-              if (_onPressEmailActionClick != null) {
-                _onPressEmailActionClick!(EmailActionType.compose);
-              }})
-            ..text(AppLocalizations.of(_context).new_message, isVertical: _responsiveUtils.isMobile(_context)))
-          .build()
+        if (!_responsiveUtils.isDesktop(_context))
+          (ButtonBuilder(_imagePaths.icNewMessage)
+              ..key(Key('button_new_message'))
+              ..size(20)
+              ..paddingIcon(EdgeInsets.only(
+                  top: _responsiveUtils.isMobileDevice(_context) ? 10 : 16,
+                  bottom: _responsiveUtils.isMobileDevice(_context) ? 8 : 16,
+                  right: 5))
+              ..textStyle(TextStyle(
+                  fontSize: _responsiveUtils.isMobileDevice(_context) ? 12 : 16,
+                  color: AppColor.colorTextButton))
+              ..onPressActionClick(() {
+                if (_onPressEmailActionClick != null) {
+                  _onPressEmailActionClick!(EmailActionType.compose);
+                }})
+              ..text(AppLocalizations.of(_context).new_message, isVertical: _responsiveUtils.isMobile(_context)))
+            .build()
      ]
    );
  }
@@ -54,10 +54,10 @@ class EmailContentItemBuilder {
        }
      case EmailContentType.textPlain:
        return Padding(
-          padding: EdgeInsets.zero,
+          padding: EdgeInsets.only(top: 20),
          child: Text(
            _emailContent.content,
-            style: TextStyle(fontSize: 14, color: AppColor.colorNameEmail)));
+            style: TextStyle(fontSize: 14, color: AppColor.colorNameEmail, fontWeight: FontWeight.normal)));
      case EmailContentType.other:
        return SizedBox.shrink();
    }