TF-467 Apply new UI for threadView

2022-04-08 22:28:38 +07:00
parent 09be1eb833
commit 8248ad2f48
12 changed files with 233 additions and 138 deletions
@@ -1,5 +1,6 @@

 import 'package:core/core.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -9,14 +10,16 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 typedef OnFilterEmailAction = void Function(FilterMessageOption, RelativeRect? position);
 typedef OnEditThreadAction = void Function();
-typedef OnOpenListMailboxActionClick = void Function();
+typedef OnOpenMailboxMenuActionClick = void Function();
 typedef OnCancelEditThread = void Function();
+typedef OnEmailSelectionAction = void Function(EmailActionType actionType, List<PresentationEmail>);

 class AppBarThreadWidgetBuilder {
  OnFilterEmailAction? _onFilterEmailAction;
-  OnOpenListMailboxActionClick? _onOpenListMailboxActionClick;
+  OnOpenMailboxMenuActionClick? _onOpenMailboxMenuActionClick;
  OnEditThreadAction? _onEditThreadAction;
  OnCancelEditThread? _onCancelEditThread;
+  OnEmailSelectionAction? _onEmailSelectionAction;

  final BuildContext _context;
  final ImagePaths _imagePaths;
@@ -40,8 +43,8 @@ class AppBarThreadWidgetBuilder {
    _onFilterEmailAction = onFilterEmailAction;
  }

-  void addOpenListMailboxActionClick(OnOpenListMailboxActionClick onOpenListMailboxActionClick) {
-    _onOpenListMailboxActionClick = onOpenListMailboxActionClick;
+  void addOpenMailboxMenuActionClick(OnOpenMailboxMenuActionClick actionClick) {
+    _onOpenMailboxMenuActionClick = actionClick;
  }

  void addOnEditThreadAction(OnEditThreadAction onEditThreadAction) {
@@ -52,6 +55,10 @@ class AppBarThreadWidgetBuilder {
    _onCancelEditThread = onCancelEditThread;
  }

+  void addOnEmailSelectionAction(OnEmailSelectionAction onEmailSelectionAction) {
+    _onEmailSelectionAction = onEmailSelectionAction;
+  }
+
  Widget build() {
    return Container(
      key: Key('app_bar_thread_widget'),
@@ -61,36 +68,113 @@ class AppBarThreadWidgetBuilder {
      padding: EdgeInsets.only(left: 8, top: 16, bottom: 8, right: 8),
      child: MediaQuery(
        data: MediaQueryData(padding: EdgeInsets.zero),
-        child: Row(children: [
-          Expanded(child: Stack(
-            alignment: Alignment.center,
-            children: [
-              if (_selectMode != SelectMode.ACTIVE)
-                Positioned(left: 0,child: _buildEditButton()),
-              if (_selectMode == SelectMode.ACTIVE)
-                Positioned(left: 0, child: _buildBackButton()),
-              if (_selectMode == SelectMode.ACTIVE)
-                Positioned(left: 40, child: _buildCountItemSelected()),
-              Positioned(right: 0, child: _buildFilterButton()),
-              _filterMessageOption.getTitle(_context).isNotEmpty
+        child: kIsWeb
+            ? _selectMode == SelectMode.INACTIVE ? _buildBodyAppBarForWeb() : _buildBodyAppBarForWebSelection()
+            : _selectMode == SelectMode.INACTIVE ? _buildBodyAppBarForMobile() : _buildBodyAppBarForMobileSelection()
+      )
+    );
+  }
+
+  Widget _buildBodyAppBarForWeb() {
+    return Row(children: [
+      if (!_responsiveUtils.isTabletLarge(_context)) _buildMenuButton(),
+      if (_responsiveUtils.isTabletLarge(_context)) SizedBox(width: 16),
+      Expanded(child: Text(
+          '${_presentationMailbox?.name?.name.capitalizeFirstEach ?? ''}',
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: TextStyle(fontSize: 21, color: Colors.black, fontWeight: FontWeight.bold))),
+      _buildFilterButton(),
+    ]);
+  }
+
+  Widget _buildBodyAppBarForWebSelection() {
+    return Row(children: [
+      buildIconWeb(
+          icon: SvgPicture.asset(_imagePaths.icCloseComposer, color: AppColor.colorTextButton, fit: BoxFit.fill),
+          tooltip: AppLocalizations.of(_context).cancel,
+          onTap: () => _onCancelEditThread?.call()),
+      Expanded(child: Text(
+        AppLocalizations.of(_context).count_email_selected(_listSelectionEmail.length),
+        style: TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: AppColor.colorTextButton))),
+      buildIconWeb(
+          icon: SvgPicture.asset(_listSelectionEmail.isAllEmailRead ? _imagePaths.icUnread : _imagePaths.icRead, fit: BoxFit.fill),
+          tooltip: _listSelectionEmail.isAllEmailRead ? AppLocalizations.of(_context).unread : AppLocalizations.of(_context).read,
+          onTap: () => _onEmailSelectionAction?.call(
+              _listSelectionEmail.isAllEmailRead ? EmailActionType.markAsUnread : EmailActionType.markAsRead,
+              _listSelectionEmail)),
+      buildIconWeb(
+          icon: SvgPicture.asset(_listSelectionEmail.isAllEmailStarred ? _imagePaths.icUnStar : _imagePaths.icStar, fit: BoxFit.fill),
+          tooltip: _listSelectionEmail.isAllEmailStarred ? AppLocalizations.of(_context).not_starred : AppLocalizations.of(_context).starred,
+          onTap: () => _onEmailSelectionAction?.call(
+              _listSelectionEmail.isAllEmailStarred ? EmailActionType.markAsUnStar : EmailActionType.markAsStar,
+              _listSelectionEmail)),
+      buildIconWeb(
+          icon: SvgPicture.asset(_imagePaths.icMove, fit: BoxFit.fill),
+          tooltip: AppLocalizations.of(_context).move,
+          onTap: () => _onEmailSelectionAction?.call(EmailActionType.move, _listSelectionEmail)),
+      buildIconWeb(
+          icon: SvgPicture.asset(_imagePaths.icDelete, fit: BoxFit.fill),
+          tooltip: _presentationMailbox?.role != PresentationMailbox.roleTrash
+              ? AppLocalizations.of(_context).move_to_trash
+              : AppLocalizations.of(_context).delete_permanently,
+          onTap: () => _presentationMailbox?.role != PresentationMailbox.roleTrash
+              ? _onEmailSelectionAction?.call(EmailActionType.moveToTrash, _listSelectionEmail)
+              : _onEmailSelectionAction?.call(EmailActionType.deletePermanently, _listSelectionEmail)),
+    ]);
+  }
+
+  Widget _buildBodyAppBarForMobile() {
+    return Row(children: [
+      Expanded(child: Stack(
+          alignment: Alignment.center,
+          children: [
+            Positioned(left: 0,child: _buildEditButton()),
+            Positioned(right: 0, child: _buildFilterButton()),
+            _filterMessageOption.getTitle(_context).isNotEmpty
                ? Column(mainAxisAlignment: MainAxisAlignment.center, children: [
                    Padding(
-                      padding: EdgeInsets.only(left: 40, right: 40),
-                      child: _buildContentCenterAppBar()),
+                        padding: EdgeInsets.only(left: 40, right: 40),
+                        child: _buildContentCenterAppBar()),
                    Transform(
-                      transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0),
-                      child: Text(
-                          _filterMessageOption.getTitle(_context),
-                          style: TextStyle(fontSize: 11, color: AppColor.colorContentEmail)))
+                        transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0),
+                        child: Text(
+                            _filterMessageOption.getTitle(_context),
+                            style: TextStyle(fontSize: 11, color: AppColor.colorContentEmail)))
                  ])
                : Padding(
                    padding: EdgeInsets.only(left: 60, right: 40),
                    child: _buildContentCenterAppBar()),
-            ]
-          ))
-        ])
-      )
-    );
+          ]
+      ))
+    ]);
+  }
+
+  Widget _buildBodyAppBarForMobileSelection() {
+    return Row(children: [
+      Expanded(child: Stack(
+          alignment: Alignment.center,
+          children: [
+            Positioned(left: 0, child: _buildBackButton()),
+            Positioned(left: 40, child: _buildCountItemSelected()),
+            Positioned(right: 0, child: _buildFilterButton()),
+            _filterMessageOption.getTitle(_context).isNotEmpty
+                ? Column(mainAxisAlignment: MainAxisAlignment.center, children: [
+                    Padding(
+                        padding: EdgeInsets.only(left: 40, right: 40),
+                        child: _buildContentCenterAppBar()),
+                    Transform(
+                        transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0),
+                        child: Text(
+                            _filterMessageOption.getTitle(_context),
+                            style: TextStyle(fontSize: 11, color: AppColor.colorContentEmail)))
+                  ])
+                : Padding(
+                    padding: EdgeInsets.only(left: 60, right: 40),
+                    child: _buildContentCenterAppBar()),
+          ]
+      ))
+    ]);
  }

  Widget _buildEditButton() {
@@ -145,21 +229,16 @@ class AppBarThreadWidgetBuilder {
    );
  }

+  Widget _buildMenuButton() {
+    return buildIconWeb(
+        icon: SvgPicture.asset(_imagePaths.icMenuDrawer, fit: BoxFit.fill),
+        onTap:() => _onOpenMailboxMenuActionClick?.call());
+  }
+
  Widget _buildBackButton() {
-    return Material(
-        borderRadius: BorderRadius.circular(12),
-        color: Colors.transparent,
-        child: IconButton(
-            color: AppColor.baseTextColor,
-            icon: SvgPicture.asset(
-                _imagePaths.icBack,
-                width: 20,
-                height: 20,
-                color: AppColor.colorTextButton,
-                fit: BoxFit.fill),
-            onPressed: () => _onCancelEditThread?.call()
-        )
-    );
+    return buildIconWeb(
+        icon: SvgPicture.asset(_imagePaths.icBack, width: 20, height: 20, color: AppColor.colorTextButton, fit: BoxFit.fill),
+        onTap:() => _onCancelEditThread?.call());
  }

  Widget _buildCountItemSelected() {
@@ -177,8 +256,8 @@ class AppBarThreadWidgetBuilder {
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
-        GestureDetector(
-          onTap: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenListMailboxActionClick?.call() : null,
+        InkWell(
+          onTap: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenMailboxMenuActionClick?.call() : null,
          child: Padding(
            padding: !_responsiveUtils.isTabletLarge(_context) ? EdgeInsets.zero : EdgeInsets.only(bottom: 8, top: 8),
            child: Container(
@@ -198,7 +277,7 @@ class AppBarThreadWidgetBuilder {
              padding: EdgeInsets.zero,
              color: AppColor.baseTextColor,
              icon: SvgPicture.asset(_imagePaths.icChevronDown, width: 20, height: 16, fit: BoxFit.fill),
-              onPressed: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenListMailboxActionClick?.call() : null))
+              onPressed: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenMailboxMenuActionClick?.call() : null))
      ]
    );
  }
@@ -59,7 +59,7 @@ class EmailTileBuilder {
        mobile: _buildListTile(),
        desktop: Container(
          margin: _selectModeAll == SelectMode.ACTIVE ? EdgeInsets.only(top: 3, left: 8, right: 8) : EdgeInsets.zero,
-          padding: _selectModeAll == SelectMode.ACTIVE ? EdgeInsets.symmetric(vertical: 10) : EdgeInsets.zero,
+          padding: _selectModeAll == SelectMode.ACTIVE ? EdgeInsets.symmetric(vertical: 8) : EdgeInsets.zero,
          decoration: _selectModeAll == SelectMode.ACTIVE && _presentationEmail.selectMode == SelectMode.ACTIVE
            ? BoxDecoration(
                borderRadius: BorderRadius.circular(14),
@@ -73,8 +73,15 @@ class EmailTileBuilder {

  Widget _buildListTile() {
    return Container(
-        color: Colors.white,
-        padding: EdgeInsets.only(bottom: 10, left: 20, right: 6),
+        margin: kIsWeb && _selectModeAll == SelectMode.ACTIVE
+            ? EdgeInsets.only(top: 3, left: 16, right: 16)
+            : EdgeInsets.zero,
+        padding: kIsWeb && _selectModeAll == SelectMode.ACTIVE
+            ? EdgeInsets.only(top: 8, bottom: 16, right: 8)
+            : EdgeInsets.only(bottom: 10, left: 16, right: 16),
+        decoration: kIsWeb && _selectModeAll == SelectMode.ACTIVE && _presentationEmail.selectMode == SelectMode.ACTIVE
+            ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: AppColor.colorItemEmailSelectedDesktop)
+            : BoxDecoration(borderRadius: BorderRadius.circular(0), color: Colors.white),
        alignment: Alignment.center,
        child: Column(children: [
          ListTile(
@@ -194,14 +201,19 @@ class EmailTileBuilder {
                                  overflow:TextOverflow.ellipsis,
                                  style: TextStyle(fontSize: 13, color: AppColor.colorContentEmail))
                          ),
-                        ]))
+                        ])),
+                    if (kIsWeb && _selectModeAll == SelectMode.INACTIVE)
+                      Padding(
+                          padding: EdgeInsets.only(top: 12),
+                          child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
                  ],
                )
            ),
          ),
-          Padding(
-              padding: EdgeInsets.only(top: 12, right: 12),
-              child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
+          if (!kIsWeb)
+            Padding(
+                padding: EdgeInsets.only(top: 12, right: 12),
+                child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
        ]),
    );
  }
@@ -112,26 +112,19 @@ class SearchAppBarWidget {
  }

 Widget _buildBackButton() {
-   return Material(
-     shape: CircleBorder(),
-     color: Colors.transparent,
-     child: Padding(
-       padding: EdgeInsets.only(left: _responsiveUtils.isDesktop(_context) ? 0 : 8),
-       child: IconButton(
-         splashRadius: 20,
-         icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton, fit: BoxFit.fill),
-         onPressed: () {
-           _searchInputController?.clear();
-           if (_onCancelSearchPressed != null) {
-             _onCancelSearchPressed!();
-           }
+   return buildIconWeb(
+       icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton, fit: BoxFit.fill),
+       onTap: () {
+         _searchInputController?.clear();
+         if (_onCancelSearchPressed != null) {
+           _onCancelSearchPressed!();
         }
-       )));
+       });
 }

 Widget _buildClearTextSearchButton() {
    return buildIconWeb(
-        icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, width: 12, height: 12, fit: BoxFit.fill),
+        icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, width: 18, height: 18, fit: BoxFit.fill),
        onTap: () {
          _searchInputController?.clear();
          _onClearTextSearchAction?.call();