TF-248 Update AppBar of ThreadView

2022-02-08 18:00:56 +07:00
parent 74131407f2
commit 4a49ce8150
9 changed files with 67 additions and 94 deletions
@@ -1,9 +1,7 @@
 import 'package:core/core.dart';
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
-import 'package:model/email/presentation_email.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/thread/domain/state/search_email_state.dart';
 import 'package:tmail_ui_user/features/thread/domain/state/search_more_email_state.dart';
@@ -44,7 +42,7 @@ class ThreadView extends GetWidget<ThreadController> {
                    Container(
                      alignment: Alignment.center,
                      padding: EdgeInsets.zero,
-                      color: responsiveUtils.isMobile(context) ? AppColor.bgMailboxListMail : AppColor.primaryLightColor,
+                      color: Colors.white,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
@@ -107,11 +105,8 @@ class ThreadView extends GetWidget<ThreadController> {
              context,
              imagePaths,
              responsiveUtils,
-              controller.mailboxDashBoardController.selectedMailbox.value,
-              controller.mailboxDashBoardController.userProfile.value)
-          ..onOpenUserInformationAction(() => {})
-          ..onOpenSearchMailActionClick(() => controller.enableSearch(context))
-          ..onOpenListMailboxActionClick(() => controller.openMailboxLeftMenu()))
+              controller.mailboxDashBoardController.selectedMailbox.value)
+          ..addOpenListMailboxActionClick(() => controller.openMailboxLeftMenu()))
        .build();
  }

@@ -271,7 +266,7 @@ class ThreadView extends GetWidget<ThreadController> {
      height: double.infinity,
      alignment: Alignment.center,
      padding: EdgeInsets.zero,
-      color: responsiveUtils.isMobile(context) ? AppColor.bgMailboxListMail : Colors.white,
+      color: Colors.white,
      child: Obx(() {
        if (controller.isSearchActive()) {
          if (controller.mailboxDashBoardController.suggestionSearch.isNotEmpty) {
@@ -332,9 +327,7 @@ class ThreadView extends GetWidget<ThreadController> {
        itemBuilder: (context, index) => Obx(() => (EmailTileBuilder(
                context,
                imagePaths,
-                controller.getSelectMode(listPresentationEmail[index], controller.mailboxDashBoardController.selectedEmail.value),
                listPresentationEmail[index],
-                responsiveUtils,
                controller.mailboxDashBoardController.selectedMailbox.value?.role,
                controller.currentSelectMode.value,
                controller.mailboxDashBoardController.searchState.value.searchStatus,
@@ -1,46 +1,35 @@
-import 'dart:ui';

 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

-typedef OnOpenSearchMailActionClick = void Function();
+typedef OnFilterEmailAction = void Function();
 typedef OnOpenListMailboxActionClick = void Function();
-typedef OnOpenUserInformationActionClick = void Function();

 class AppBarThreadWidgetBuilder {
-  OnOpenSearchMailActionClick? _onOpenSearchMailActionClick;
+  OnFilterEmailAction? _onFilterEmailAction;
  OnOpenListMailboxActionClick? _onOpenListMailboxActionClick;
-  OnOpenUserInformationActionClick? _onOpenUserInformationActionClick;

  final BuildContext _context;
  final ImagePaths _imagePaths;
  final ResponsiveUtils _responsiveUtils;
  final PresentationMailbox? _presentationMailbox;
-  final UserProfile? _userProfile;

  AppBarThreadWidgetBuilder(
    this._context,
    this._imagePaths,
    this._responsiveUtils,
    this._presentationMailbox,
-    this._userProfile,
  );

-  void onOpenUserInformationAction(
-      OnOpenUserInformationActionClick onOpenUserInformationActionClick) {
-    _onOpenUserInformationActionClick = onOpenUserInformationActionClick;
+  void addOnFilterEmailAction(OnFilterEmailAction onFilterEmailAction) {
+    _onFilterEmailAction = onFilterEmailAction;
  }

-  void onOpenSearchMailActionClick(OnOpenSearchMailActionClick onOpenSearchMailActionClick) {
-    _onOpenSearchMailActionClick = onOpenSearchMailActionClick;
-  }
-
-  void onOpenListMailboxActionClick(OnOpenListMailboxActionClick onOpenListMailboxActionClick) {
+  void addOpenListMailboxActionClick(OnOpenListMailboxActionClick onOpenListMailboxActionClick) {
    _onOpenListMailboxActionClick = onOpenListMailboxActionClick;
  }

@@ -50,37 +39,38 @@ class AppBarThreadWidgetBuilder {
      alignment: Alignment.topCenter,
      color: Colors.white,
      margin: EdgeInsets.zero,
-      padding: EdgeInsets.only(left: 16, top: 16, bottom: 8, right: 16),
+      padding: EdgeInsets.only(left: 8, top: 16, bottom: 8, right: 8),
      child: MediaQuery(
        data: MediaQueryData(padding: EdgeInsets.zero),
        child: Row(
-          crossAxisAlignment: CrossAxisAlignment.center,
-          mainAxisAlignment: MainAxisAlignment.start,
          children: [
-            if (_responsiveUtils.isMobile(_context)) _buildIconUser(),
+            _buildEditButton(),
            Expanded(child: _buildContentCenterAppBar()),
-            _buildIconSearch(),
+            _buildFilterButton(),
          ]
        )
      )
    );
  }

-  Widget _buildIconUser() {
-    return GestureDetector(
-      onTap: () => {
-        if (_onOpenUserInformationActionClick != null) {
-          _onOpenUserInformationActionClick!()
-        }},
-      child: Padding(
-        padding: EdgeInsets.zero,
-        child: (AvatarBuilder()
-            ..text(_userProfile != null ? _userProfile!.getAvatarText() : '')
-            ..size(36))
-          .build()));
+  Widget _buildEditButton() {
+    return Material(
+        borderRadius: BorderRadius.circular(12),
+        color: Colors.transparent,
+        child: Padding(
+            padding: EdgeInsets.only(right: 16),
+            child: TextButton(
+              onPressed: () {},
+              child: Text(
+                AppLocalizations.of(_context).edit,
+                style: TextStyle(fontSize: 17, color: AppColor.colorTextButton),
+              ),
+            )
+        )
+    );
  }

-  Widget _buildIconSearch() {
+  Widget _buildFilterButton() {
    return Material(
      borderRadius: BorderRadius.circular(12),
      color: Colors.transparent,
@@ -88,12 +78,8 @@ class AppBarThreadWidgetBuilder {
        padding: EdgeInsets.only(left: 16),
        child: IconButton(
          color: AppColor.baseTextColor,
-          icon: SvgPicture.asset(_imagePaths.icSearch, color: AppColor.baseTextColor, fit: BoxFit.fill),
-          onPressed: () => {
-            if (_onOpenSearchMailActionClick != null) {
-              _onOpenSearchMailActionClick!()
-            }
-          }
+          icon: SvgPicture.asset(_imagePaths.icFilter, color: AppColor.baseTextColor, fit: BoxFit.fill),
+          onPressed: () => _onFilterEmailAction?.call()
        )
      )
    );
@@ -101,56 +87,46 @@ class AppBarThreadWidgetBuilder {

  Widget _buildContentCenterAppBar() {
    return Row(
+      mainAxisSize: MainAxisSize.min,
+      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        GestureDetector(
-          onTap: () => {
-            if (_onOpenListMailboxActionClick != null) {
-              _onOpenListMailboxActionClick!()
-            }},
+          onTap: () => _onOpenListMailboxActionClick?.call(),
          child: Padding(
-            padding: EdgeInsets.only(left: 16, right: 8),
+            padding: EdgeInsets.zero,
            child: Container(
              padding: EdgeInsets.zero,
              margin: EdgeInsets.zero,
              constraints: BoxConstraints(maxWidth: _getMaxWidthAppBarTitle()),
              child: Text(
-                '${ _presentationMailbox?.name?.name ?? ''}',
+                '${_presentationMailbox?.name?.name.capitalizeFirstEach ?? ''}',
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
-                style: TextStyle(fontSize: 22, color: AppColor.titleAppBarMailboxListMail, fontWeight: FontWeight.w500))
+                style: TextStyle(fontSize: 21, color: AppColor.colorNameEmail, fontWeight: FontWeight.w700))
            ))),
-        if(_presentationMailbox?.getCountUnReadEmails().isNotEmpty == true)
-          Container(
-            margin: EdgeInsets.zero,
-            padding: EdgeInsets.only(left: 8, right: 8, top: 2.5, bottom: 2.5),
-            decoration:BoxDecoration(
-              borderRadius: BorderRadius.circular(8),
-              color: AppColor.backgroundCounterMailboxColor),
-            child: Text(
-              '${_presentationMailbox?.getCountUnReadEmails() ?? ''} ${AppLocalizations.of(_context).unread_email_notification}',
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-              style: TextStyle(fontSize: 10, color: AppColor.counterMailboxColor, fontWeight: FontWeight.w500),
-            )),
+        Transform(
+          transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
+          child: Material(
+                borderRadius: BorderRadius.circular(12),
+                color: Colors.transparent,
+                child: IconButton(
+                    padding: EdgeInsets.zero,
+                    color: AppColor.baseTextColor,
+                    icon: SvgPicture.asset(_imagePaths.icChevronDown, width: 20, height: 16, fit: BoxFit.fill),
+                    onPressed: () => _onOpenListMailboxActionClick?.call())))
      ]
    );
  }

  double _getMaxWidthAppBarTitle() {
    var width = MediaQuery.of(_context).size.width;
-    var widthSiblingsWidget = _presentationMailbox?.getCountUnReadEmails().isNotEmpty == true
-      ? 150
-      : 100;
+    var widthSiblingsWidget = 220;
    if (_responsiveUtils.isTablet(_context)) {
      width = width * 0.7;
-      widthSiblingsWidget = _presentationMailbox?.getCountUnReadEmails().isNotEmpty == true
-        ? 70
-        : 0;
+      widthSiblingsWidget = 300;
    } else if (_responsiveUtils.isDesktop(_context)) {
      width = width * 0.2;
-      widthSiblingsWidget = _presentationMailbox?.getCountUnReadEmails().isNotEmpty == true
-        ? 50
-        : 0;
+      widthSiblingsWidget = 300;
    }
    final maxWidth = width - widthSiblingsWidget;
    return maxWidth;
@@ -1,9 +1,7 @@
 import 'dart:math';
-import 'dart:ui';

 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
 import 'package:model/model.dart';
@@ -16,11 +14,9 @@ typedef OnMarkAsStarEmailActionClick = void Function(PresentationEmail selectedE

 class EmailTileBuilder {

-  final SelectMode _selectMode;
  final ImagePaths _imagePaths;
  final PresentationEmail _presentationEmail;
  final BuildContext _context;
-  final ResponsiveUtils _responsiveUtils;
  final SelectMode _selectModeAll;
  final Role? _mailboxRole;
  final SearchStatus _searchStatus;
@@ -33,9 +29,7 @@ class EmailTileBuilder {
  EmailTileBuilder(
    this._context,
    this._imagePaths,
-    this._selectMode,
    this._presentationEmail,
-    this._responsiveUtils,
    this._mailboxRole,
    this._selectModeAll,
    this._searchStatus,
@@ -66,7 +60,7 @@ class EmailTileBuilder {
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(0),
-          color: _getBackgroundColorItem()),
+          color: Colors.white),
        child: MediaQuery(
          data: MediaQueryData(padding: EdgeInsets.zero),
          child: Column(children: [
@@ -206,7 +200,7 @@ class EmailTileBuilder {
    if (_selectModeAll == SelectMode.ACTIVE) {
      return AnimatedSwitcher(
        duration: Duration(milliseconds: 600),
-        transitionBuilder: __transitionBuilder,
+        transitionBuilder: _transitionBuilder,
        child: _presentationEmail.selectMode == SelectMode.ACTIVE
          ? (IconBuilder(_imagePaths.icSelected)
                ..addOnTapActionClick(() {
@@ -237,7 +231,7 @@ class EmailTileBuilder {
    }
  }

-  Widget __transitionBuilder(Widget widget, Animation<double> animation) {
+  Widget _transitionBuilder(Widget widget, Animation<double> animation) {
    final rotateAnim = Tween(begin: pi, end: 0.0).animate(animation);
    return AnimatedBuilder(
      animation: rotateAnim,
@@ -254,10 +248,6 @@ class EmailTileBuilder {
    );
  }

-  Color _getBackgroundColorItem() {
-    return _responsiveUtils.isMobile(_context) ? AppColor.bgMailboxListMail : Colors.white;
-  }
-
  String _getInformationSender() {
    if (_mailboxRole == PresentationMailbox.roleSent
        || _mailboxRole == PresentationMailbox.roleDrafts