TF-602 Persist size item email when selection on tablet

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

@@ -34,7 +34,10 @@ Widget buildIconWebHasPosition(BuildContext context, {
   IconWebHasPositionCallback? onTapDown,
   IconWebCallback? onTap,
 }) {
-  return InkWell(
+  return Material(
+    color: Colors.transparent,
+    shape: CircleBorder(),
+    child: InkWell(
         onTapDown: (detail) {
           final screenSize = MediaQuery.of(context).size;
           final offset = detail.globalPosition;
@@ -47,11 +50,12 @@ Widget buildIconWebHasPosition(BuildContext context, {
           onTapDown?.call(position);
         },
         onTap: () => onTap?.call(),
-      borderRadius: BorderRadius.all(Radius.circular(35)),
+        borderRadius: BorderRadius.all(Radius.circular(12)),
         child: Tooltip(
           message: tooltip ?? '',
           child: icon,
         )
+    ),
   );
 }
 

lib/features/thread/presentation/thread_view.dart

@@ -61,7 +61,7 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
                                   color: Colors.white,
                                   padding: EdgeInsets.symmetric(
                                       horizontal: 16,
-                                      vertical: BuildUtils.isWeb && _responsiveUtils.isTabletLarge(context) ? 8 : 0),
+                                      vertical: BuildUtils.isWeb && !_responsiveUtils.isDesktop(context) ? 8 : 0),
                                   margin: const EdgeInsets.only(
                                       bottom: !BuildUtils.isWeb ? 16 : 0),
                                   child: _buildSearchFormInActive(context))
@@ -70,7 +70,7 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
                                   color: Colors.white,
                                   padding: EdgeInsets.symmetric(
                                       horizontal: 8,
-                                      vertical: BuildUtils.isWeb && _responsiveUtils.isTabletLarge(context) ? 8 : 0),
+                                      vertical: BuildUtils.isWeb && !_responsiveUtils.isDesktop(context) ? 8 : 0),
                                   margin: const EdgeInsets.only(
                                       bottom: !BuildUtils.isWeb ? 16 : 0),
                                   child: _buildSearchFormActive(context))

lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart

@@ -64,13 +64,9 @@ class AppBarThreadWidgetBuilder {
       alignment: Alignment.topCenter,
       color: Colors.white,
       margin: EdgeInsets.zero,
-      padding: EdgeInsets.only(
+      padding: EdgeInsets.symmetric(
-          left: 8,
+          vertical: _selectMode == SelectMode.INACTIVE ? 16 : 11,
-          bottom: !BuildUtils.isWeb ? 8 : 16,
+          horizontal: 8),
-          right: 8,
-          top: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(_context)
-              ? 0
-              : 16),
       child: MediaQuery(
         data: const MediaQueryData(padding: EdgeInsets.zero),
         child: _buildAppBar()
@@ -109,46 +105,101 @@ class AppBarThreadWidgetBuilder {
           icon: SvgPicture.asset(_imagePaths.icCloseComposer,
               color: AppColor.colorTextButton,
               fit: BoxFit.fill),
+          minSize: 25,
+          iconSize: 25,
+          iconPadding: const EdgeInsets.all(5),
+          splashRadius: 15,
           tooltip: AppLocalizations.of(_context).cancel,
           onTap: () => _onCancelEditThread?.call()),
       Expanded(child: Text(
         AppLocalizations.of(_context).count_email_selected(_listSelectionEmail.length),
-        style: const TextStyle(fontSize: 17,
+        style: const TextStyle(
-            fontWeight: FontWeight.w500, color: AppColor.colorTextButton))),
+            fontSize: 17,
+            fontWeight: FontWeight.w500,
+            color: AppColor.colorTextButton))),
       buildIconWeb(
-          icon: SvgPicture.asset(_listSelectionEmail.isAllEmailRead ? _imagePaths.icRead : _imagePaths.icUnread, fit: BoxFit.fill),
+          minSize: 25,
-          tooltip: _listSelectionEmail.isAllEmailRead ? AppLocalizations.of(_context).unread : AppLocalizations.of(_context).read,
+          iconSize: 25,
+          iconPadding: const EdgeInsets.all(5),
+          splashRadius: 15,
+          icon: SvgPicture.asset(
+              _listSelectionEmail.isAllEmailRead
+                  ? _imagePaths.icRead
+                  : _imagePaths.icUnread,
+              fit: BoxFit.fill),
+          tooltip: _listSelectionEmail.isAllEmailRead
+              ? AppLocalizations.of(_context).unread
+              : AppLocalizations.of(_context).read,
           onTap: () => _onEmailSelectionAction?.call(
-              _listSelectionEmail.isAllEmailRead ? EmailActionType.markAsUnread : EmailActionType.markAsRead,
+              _listSelectionEmail.isAllEmailRead
+                  ? EmailActionType.markAsUnread
+                  : EmailActionType.markAsRead,
               _listSelectionEmail)),
+      const SizedBox(width: 5),
       buildIconWeb(
-          icon: SvgPicture.asset(_listSelectionEmail.isAllEmailStarred ? _imagePaths.icUnStar : _imagePaths.icStar, fit: BoxFit.fill),
+          minSize: 25,
-          tooltip: _listSelectionEmail.isAllEmailStarred ? AppLocalizations.of(_context).not_starred : AppLocalizations.of(_context).starred,
+          iconSize: 25,
+          iconPadding: const EdgeInsets.all(5),
+          splashRadius: 15,
+          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.unMarkAsStarred : EmailActionType.markAsStarred,
+              _listSelectionEmail.isAllEmailStarred
+                  ? EmailActionType.unMarkAsStarred
+                  : EmailActionType.markAsStarred,
               _listSelectionEmail)),
+      const SizedBox(width: 5),
       if (_currentMailbox?.isDrafts == false)
+        ... [
           buildIconWeb(
+              minSize: 25,
+              iconSize: 25,
+              iconPadding: const EdgeInsets.all(5),
+              splashRadius: 15,
               icon: SvgPicture.asset(_imagePaths.icMove, fit: BoxFit.fill),
               tooltip: AppLocalizations.of(_context).move,
               onTap: () => _onEmailSelectionAction?.call(EmailActionType.moveToMailbox, _listSelectionEmail)),
-      if (_currentMailbox?.isDrafts == false)
+          const SizedBox(width: 5),
           buildIconWeb(
+              minSize: 25,
+              iconSize: 25,
+              iconPadding: const EdgeInsets.all(5),
+              splashRadius: 15,
               icon: SvgPicture.asset(_currentMailbox?.isSpam == true
                   ? _imagePaths.icNotSpam : _imagePaths.icSpam,
                   fit: BoxFit.fill),
-            tooltip: _currentMailbox?.isSpam == true ? AppLocalizations.of(_context).un_spam : AppLocalizations.of(_context).mark_as_spam,
+              tooltip: _currentMailbox?.isSpam == true
+                  ? AppLocalizations.of(_context).un_spam
+                  : AppLocalizations.of(_context).mark_as_spam,
               onTap: () => _currentMailbox?.isSpam == true
                   ? _onEmailSelectionAction?.call(EmailActionType.unSpam, _listSelectionEmail)
                   : _onEmailSelectionAction?.call(EmailActionType.moveToSpam, _listSelectionEmail)),
+          const SizedBox(width: 5),
+        ],
       buildIconWeb(
-          icon: SvgPicture.asset(_imagePaths.icDelete, fit: BoxFit.fill),
+          minSize: 25,
+          iconSize: 25,
+          iconPadding: const EdgeInsets.all(5),
+          splashRadius: 15,
+          icon: SvgPicture.asset(
+              _imagePaths.icDeleteComposer,
+              width: 18,
+              height: 18,
+              color: AppColor.textFieldErrorBorderColor,
+              fit: BoxFit.fill),
           tooltip: _currentMailbox?.role != PresentationMailbox.roleTrash
               ? AppLocalizations.of(_context).move_to_trash
               : AppLocalizations.of(_context).delete_permanently,
           onTap: () => _currentMailbox?.isTrash == true
               ? _onEmailSelectionAction?.call(EmailActionType.deletePermanently, _listSelectionEmail)
               : _onEmailSelectionAction?.call(EmailActionType.moveToTrash, _listSelectionEmail)),
+      const SizedBox(width: 10),
     ]);
   }
 
@@ -241,7 +292,7 @@ class AppBarThreadWidgetBuilder {
       child: Padding(
         padding: const EdgeInsets.only(left: 16, right: 16),
         child: InkWell(
-            borderRadius: const BorderRadius.all(Radius.circular(10)),
+            borderRadius: const BorderRadius.all(Radius.circular(12)),
             onTap: () {
               if (_onFilterEmailAction != null
                   && _responsiveUtils.isScreenWithShortestSide(_context)) {
@@ -274,6 +325,10 @@ class AppBarThreadWidgetBuilder {
 
   Widget _buildMenuButton() {
     return buildIconWeb(
+        minSize: 20,
+        iconSize: 20,
+        iconPadding: const EdgeInsets.all(3),
+        splashRadius: 15,
         icon: SvgPicture.asset(_imagePaths.icMenuDrawer, fit: BoxFit.fill),
         onTap:() => _onOpenMailboxMenuActionClick?.call());
   }

lib/features/thread/presentation/widgets/email_tile_web_builder.dart

@@ -94,14 +94,19 @@ class EmailTileBuilder {
             : null,
         child: tile,
       );
+    } else if (_responsiveUtils.isTabletLarge(_context) || _responsiveUtils.isTablet(_context)) {
+      return Container(
+          margin: const EdgeInsets.only(top: 3, left: 16, right: 16),
+          padding: const EdgeInsets.only(bottom: 8, right: 8, top: 8),
+          decoration: _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: tile);
     }else {
       return Container(
-          margin: _selectModeAll == SelectMode.ACTIVE
+          margin: const EdgeInsets.only(top: 3, left: 16, right: 16),
-              ? const EdgeInsets.only(top: 3, left: 16, right: 16)
+          padding: const EdgeInsets.only(bottom: 8, right: 8, top: 8),
-              : EdgeInsets.zero,
-          padding: _selectModeAll == SelectMode.ACTIVE
-              ? const EdgeInsets.only(top: 8, bottom: 16, right: 8)
-              : const EdgeInsets.only(bottom: 10, left: 16, right: 16),
           decoration: _selectModeAll == SelectMode.ACTIVE && _presentationEmail.selectMode == SelectMode.ACTIVE
               ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: AppColor.colorItemEmailSelectedDesktop)
               : BoxDecoration(borderRadius: BorderRadius.circular(0), color: Colors.white),
@@ -240,7 +245,9 @@ class EmailTileBuilder {
       return InkWell(
         onTap: () => _emailActionClick?.call(EmailActionType.preview, _presentationEmail),
         onHover: (value) => _onHoverItemChanged(value, setState),
-        child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
+        child: Stack(
+          children: [
+            Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
               InkWell(
                 onTap: () {
                   if (isHoverIcon) {
@@ -251,16 +258,21 @@ class EmailTileBuilder {
                 child: Padding(
                   padding: const EdgeInsets.only(top: 8, right: 12),
                   child: _buildAvatarIcon())),
-          Expanded(child: Column(children: [
+              Expanded(child: Stack(alignment: Alignment.bottomCenter,
-            Transform(
+                children: [
-                transform: Matrix4.translationValues(0.0, isHoverItem ? -10.0 : 0.0, 0.0),
+                  Column(children: [
-                child: Row(children: [
+                    Row(children: [
                       if (!_presentationEmail.hasRead)
                         Padding(
                             padding: const EdgeInsets.only(right: 5),
-                        child: SvgPicture.asset(_imagePaths.icUnreadStatus, width: 9, height: 9, fit: BoxFit.fill)),
+                            child: SvgPicture.asset(
-                  Expanded(
+                                _imagePaths.icUnreadStatus,
-                      child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
+                                width: 9,
+                                height: 9,
+                                fit: BoxFit.fill)),
+                      Expanded(child: _searchStatus == SearchStatus.ACTIVE &&
+                        _searchQuery != null &&
+                        _searchQuery!.value.isNotEmpty
                             ? RichTextBuilder(
                                 _getInformationSender(),
                                 _searchQuery!.value,
@@ -283,18 +295,12 @@ class EmailTileBuilder {
                                     fontWeight: _buildFontForReadEmail()))
                       ),
                       if (isHoverItem)
-                    _buildListActionButtonWhenHover()
+                        const SizedBox(width: 120)
                       else
                         _buildDateTimeForMobileTabletScreen()
-                ])),
+                    ]),
-            Transform(
-              transform: Matrix4.translationValues(0.0, isHoverItem ? -10.0 : 0.0, 0.0),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                mainAxisSize: MainAxisSize.min,
-                children: [
                     Padding(
-                      padding: EdgeInsets.only(top: isHoverItem ? 0 : 8),
+                        padding: const EdgeInsets.only(top: 8),
                         child: Row(
                           mainAxisSize: MainAxisSize.min,
                           children: [
@@ -352,15 +358,30 @@ class EmailTileBuilder {
                                   style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail))
                           ),
                         ])),
-                  if (_selectModeAll == SelectMode.INACTIVE)
-                    const Padding(
-                        padding: EdgeInsets.only(top: 12),
-                        child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
-                ],
-              )
-            ),
-          ]))
                   ]),
+                  if (_selectModeAll == SelectMode.INACTIVE)
+                    Transform(
+                      transform: Matrix4.translationValues(0.0, 10.0, 0.0),
+                      child: const Divider(
+                          color: AppColor.lineItemListColor,
+                          height: 1,
+                          thickness: 0.2),
+                    ),
+                ],
+              ))
+            ]),
+            if (isHoverItem)
+              Positioned(
+                top: 0,
+                right: 0,
+                child: Transform(
+                    transform: Matrix4.translationValues(
+                        0.0,
+                        _selectModeAll == SelectMode.INACTIVE ? -5.0 : 0.0,
+                        0.0),
+                    child: _buildListActionButtonWhenHover()))
+          ],
+        ),
       );
     });
   }
@@ -436,6 +457,10 @@ class EmailTileBuilder {
   Widget _buildListActionButtonWhenHover() {
     return Row(children: [
       buildIconWeb(
+          minSize: 18,
+          iconSize: 18,
+          iconPadding: const EdgeInsets.all(5),
+          splashRadius: 10,
           icon: SvgPicture.asset(
               _presentationEmail.hasRead ? _imagePaths.icRead : _imagePaths.icUnread,
               color: AppColor.colorActionButtonHover,
@@ -446,8 +471,14 @@ class EmailTileBuilder {
           onTap: () => _emailActionClick?.call(
               _presentationEmail.hasRead ? EmailActionType.markAsUnread : EmailActionType.markAsRead,
               _presentationEmail)),
+      const SizedBox(width: 5),
       if (_mailboxRole != PresentationMailbox.roleDrafts)
+        ... [
           buildIconWeb(
+              minSize: 18,
+              iconSize: 18,
+              iconPadding: const EdgeInsets.all(5),
+              splashRadius: 10,
               icon: SvgPicture.asset(
                   _imagePaths.icMove,
                   width: 16,
@@ -456,7 +487,13 @@ class EmailTileBuilder {
                   fit: BoxFit.fill),
               tooltip: AppLocalizations.of(_context).move,
               onTap: () => _emailActionClick?.call(EmailActionType.moveToMailbox, _presentationEmail)),
+          const SizedBox(width: 5),
+        ],
       buildIconWeb(
+          minSize: 18,
+          iconSize: 18,
+          iconPadding: const EdgeInsets.all(5),
+          splashRadius: 10,
           icon: SvgPicture.asset(
               _imagePaths.icDelete,
               width: 16,
@@ -469,6 +506,7 @@ class EmailTileBuilder {
           onTap: () => _emailActionClick?.call(
               _mailboxRole != PresentationMailbox.roleTrash ? EmailActionType.moveToTrash : EmailActionType.deletePermanently,
               _presentationEmail)),
+      const SizedBox(width: 5),
       if (_mailboxRole != PresentationMailbox.roleDrafts)
         buildIconWebHasPosition(
             _context,
@@ -571,7 +609,8 @@ class EmailTileBuilder {
   }) {
     if (isHoverIcon || _presentationEmail.selectMode == SelectMode.ACTIVE
         || (_responsiveUtils.isMobile(_context) && _selectModeAll == SelectMode.ACTIVE)) {
-        return Padding(
+        return Container(
+          color: Colors.transparent,
           padding: _responsiveUtils.isDesktop(_context)
               ? const EdgeInsets.symmetric(horizontal: 4)
               : const EdgeInsets.all(12),
@@ -579,7 +618,8 @@ class EmailTileBuilder {
               _presentationEmail.selectMode == SelectMode.ACTIVE
                   ? _imagePaths.icSelected
                   : _imagePaths.icUnSelected,
-                fit: BoxFit.fill));
+              fit: BoxFit.fill),
+        );
     } else {
       return Container(
           width: iconSize ?? 48,