TF-985 Change TopBar widget of EmailView

core/lib/core.dart

@@ -22,6 +22,7 @@ export 'domain/exceptions/web_session_exception.dart';
 export 'presentation/utils/theme_utils.dart';
 export 'presentation/utils/responsive_utils.dart';
 export 'presentation/utils/keyboard_utils.dart';
+export 'presentation/utils/icon_utils.dart';
 export 'presentation/utils/style_utils.dart';
 export 'presentation/utils/app_toast.dart';
 export 'presentation/utils/html_transformer/html_template.dart';

core/lib/presentation/extensions/color_extension.dart

@@ -150,6 +150,8 @@ extension AppColor on Color {
   static const colorBackgroundKeyboard = Color(0xFFD2D5DC);
   static const colorShadowLayerBottom = Color(0x29000000);
   static const colorShadowLayerTop = Color(0x1F000000);
+  static const colorDividerHorizontal = Color(0x1F000000);
+  static const colorEmailAddressFull = Color(0xFF818C99);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

core/lib/presentation/utils/icon_utils.dart

@@ -0,0 +1,6 @@
+
+import 'package:core/utils/build_utils.dart';
+
+class IconUtils {
+  static final double defaultIconSize = BuildUtils.isWeb ? 20.0 : 24.0;
+}

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

@@ -90,31 +90,35 @@ class ButtonBuilder {
   }
 
   Widget build() {
-    return InkWell(
+    return Material(
-      onTap: () => _onPressActionClick != null ? _onPressActionClick?.call() : null,
+      color: Colors.transparent,
-      onTapDown: (detail) {
+      child: InkWell(
-        if (_onPressActionWithPositionClick != null && _context != null) {
+        onTap: () => _onPressActionClick != null ? _onPressActionClick?.call() : null,
-          final screenSize = MediaQuery.of(_context!).size;
+        onTapDown: (detail) {
-          final offset = detail.globalPosition;
+          if (_onPressActionWithPositionClick != null && _context != null) {
-          final position = RelativeRect.fromLTRB(
+            final screenSize = MediaQuery.of(_context!).size;
-            offset.dx,
+            final offset = detail.globalPosition;
-            offset.dy,
+            final position = RelativeRect.fromLTRB(
-            screenSize.width - offset.dx,
+              offset.dx,
-            screenSize.height - offset.dy,
+              offset.dy,
-          );
+              screenSize.width - offset.dx,
-          _onPressActionWithPositionClick?.call(position);
+              screenSize.height - offset.dy,
-        }
+            );
-      },
+            _onPressActionWithPositionClick?.call(position);
-      borderRadius: BorderRadius.all(Radius.circular(_radiusSplash ?? 20)),
+          }
-      child: Container(
+        },
-        key: _key,
+        customBorder: RoundedRectangleBorder(
-        alignment: Alignment.center,
+            borderRadius: BorderRadius.circular(_radiusSplash ?? 20)),
-        color: _decoration == null ? _colorButton : null,
+        child: Container(
-        decoration: _decoration,
+          key: _key,
-        width: _maxWidth,
+          alignment: Alignment.center,
-        padding: _padding ?? EdgeInsets.zero,
+          color: _decoration == null ? _colorButton : null,
-        child: _buildBody()
+          decoration: _decoration,
-      )
+          width: _maxWidth,
+          padding: _padding ?? EdgeInsets.zero,
+          child: _buildBody()
+        )
+      ),
     );
   }
 
@@ -144,7 +148,12 @@ class ButtonBuilder {
 
   Widget _buildIcon() => Padding(
     padding: _paddingIcon ?? EdgeInsets.all(10),
-    child: SvgPicture.asset(_icon ?? '', width: _size ?? 24, height: _size ?? 24, fit: BoxFit.fill, color: _iconColor));
+    child: SvgPicture.asset(
+        _icon ?? '',
+        width: _size ?? 24,
+        height: _size ?? 24,
+        fit: BoxFit.fill,
+        color: _iconColor));
 
   Widget _buildText() {
     return Text(
@@ -152,7 +161,9 @@ class ButtonBuilder {
       maxLines: 1,
       softWrap: CommonTextStyle.defaultSoftWrap,
       overflow: CommonTextStyle.defaultTextOverFlow,
-      style: _textStyle ?? TextStyle(fontSize: 12, color: AppColor.colorTextButton),
+      style: _textStyle ?? TextStyle(
+          fontSize: 12,
+          color: AppColor.colorTextButton),
     );
   }
 }

lib/features/email/presentation/widgets/app_bar_mail_widget_builder.dart

@@ -14,7 +14,7 @@ class AppBarMailWidgetBuilder extends StatelessWidget {
   final _imagePaths = Get.find<ImagePaths>();
   final _responsiveUtils = Get.find<ResponsiveUtils>();
 
-  final PresentationEmail? _presentationEmail;
+  final PresentationEmail _presentationEmail;
   final PresentationMailbox? currentMailbox;
   final bool isSearchIsRunning;
   final OnBackActionClick? onBackActionClick;
@@ -37,29 +37,29 @@ class AppBarMailWidgetBuilder extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       key: const Key('app_bar_messenger_widget'),
-      alignment: Alignment.center,
       color: Colors.transparent,
-      padding: const EdgeInsets.only(left: 8),
+      height: 52,
+      padding: const EdgeInsets.symmetric(horizontal: 16),
       child: Row(children: [
         if (_supportDisplayMailboxNameTitle(context))
           Material(
             color: Colors.transparent,
             child: InkWell(
               onTap: () => onBackActionClick?.call(),
-              borderRadius: BorderRadius.circular(15),
+              customBorder: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
               child: Tooltip(
                 message: isSearchIsRunning
                     ? AppLocalizations.of(context).backToSearchResults
                     : AppLocalizations.of(context).back,
                 child: Container(
                   color: Colors.transparent,
-                  height: 40,
+                  height: 32,
                   padding: const EdgeInsets.symmetric(horizontal: 8),
                   child: Row(mainAxisSize: MainAxisSize.min, children: [
                     SvgPicture.asset(
                         _imagePaths.icBack,
-                        width: 18,
+                        width: 14,
-                        height: 18,
+                        height: 14,
                         color: AppColor.colorTextButton,
                         fit: BoxFit.fill),
                     if (!isSearchIsRunning)
@@ -80,7 +80,7 @@ class AppBarMailWidgetBuilder extends StatelessWidget {
             ),
           ),
         const Spacer(),
-        if (_presentationEmail != null) _buildListOptionButton(context),
+        _buildListOptionButton(context),
       ])
     );
   }
@@ -103,32 +103,38 @@ class AppBarMailWidgetBuilder extends StatelessWidget {
     return Row(
       children: [
         buildIconWeb(
-            icon: SvgPicture.asset(_imagePaths.icMoveEmail, fit: BoxFit.fill),
+            icon: SvgPicture.asset(
+                _imagePaths.icMoveEmail,
+                width: IconUtils.defaultIconSize,
+                height: IconUtils.defaultIconSize,
+                fit: BoxFit.fill),
             tooltip: AppLocalizations.of(context).move_message,
             onTap: () => onEmailActionClick?.call(
-                _presentationEmail!,
+                _presentationEmail,
                 EmailActionType.moveToMailbox)),
         buildIconWeb(
           icon: SvgPicture.asset(
-              _presentationEmail!.hasStarred
+              _presentationEmail.hasStarred
                 ? _imagePaths.icStar
                 : _imagePaths.icUnStar,
+              width: IconUtils.defaultIconSize,
+              height: IconUtils.defaultIconSize,
               fit: BoxFit.fill),
-          tooltip: _presentationEmail!.hasStarred
+          tooltip: _presentationEmail.hasStarred
               ? AppLocalizations.of(context).not_starred
               : AppLocalizations.of(context).mark_as_starred,
-          onTap: () => onEmailActionClick?.call(_presentationEmail!,
+          onTap: () => onEmailActionClick?.call(_presentationEmail,
-              _presentationEmail!.hasStarred
+              _presentationEmail.hasStarred
                   ? EmailActionType.unMarkAsStarred
                   : EmailActionType.markAsStarred)),
         buildIconWeb(
             icon: SvgPicture.asset(
-                currentMailbox?.role == PresentationMailbox.roleTrash
+                _imagePaths.icDeleteComposer,
-                  ? _imagePaths.icDeleteComposer
+                color: currentMailbox?.role != PresentationMailbox.roleTrash
-                  : _imagePaths.icDelete,
+                  ? AppColor.colorTextButton
-                color: AppColor.colorDefaultButton,
+                  : AppColor.colorDeletePermanentlyButton,
-                width: 24,
+                width: BuildUtils.isWeb ? 18 : 20,
-                height: 24,
+                height: BuildUtils.isWeb ? 18 : 20,
                 fit: BoxFit.fill),
             tooltip: currentMailbox?.role != PresentationMailbox.roleTrash
                 ? AppLocalizations.of(context).move_to_trash
@@ -136,31 +142,34 @@ class AppBarMailWidgetBuilder extends StatelessWidget {
             onTap: () {
               if (currentMailbox?.role != PresentationMailbox.roleTrash) {
                 onEmailActionClick?.call(
-                    _presentationEmail!,
+                    _presentationEmail,
                     EmailActionType.moveToTrash);
               } else {
                 onEmailActionClick?.call(
-                    _presentationEmail!,
+                    _presentationEmail,
                     EmailActionType.deletePermanently);
               }
             }),
-        Padding(
+        buildIconWebHasPosition(
-          padding: const EdgeInsets.only(left: 10, right: 16),
+          context,
-          child: buildIconWebHasPosition(
+          tooltip: AppLocalizations.of(context).more,
-            context,
+          icon: SvgPicture.asset(
-            tooltip: AppLocalizations.of(context).more,
+              _imagePaths.icMore,
-            icon: SvgPicture.asset(_imagePaths.icMore, fit: BoxFit.fill),
+              width: IconUtils.defaultIconSize,
-            onTap: () {
+              height: IconUtils.defaultIconSize,
-              if (_presentationEmail != null && _responsiveUtils.isMobile(context)) {
+              fit: BoxFit.fill),
-                onMoreActionClick?.call(_presentationEmail!, null);
+          onTap: () {
-              }
+            if (_responsiveUtils.isPortraitMobile(context) ||
-            },
+                _responsiveUtils.isLandscapeMobile(context)) {
-            onTapDown: (position) {
+              onMoreActionClick?.call(_presentationEmail, null);
-              if (_presentationEmail != null && !_responsiveUtils.isMobile(context)) {
-                onMoreActionClick?.call(_presentationEmail!, position);
-              }
             }
-          )
+          },
+          onTapDown: (position) {
+            if (!_responsiveUtils.isPortraitMobile(context) &&
+                !_responsiveUtils.isLandscapeMobile(context)) {
+              onMoreActionClick?.call(_presentationEmail, position);
+            }
+          }
         ),
       ]
     );