TF-249 Change ui mailbox list

2022-02-09 20:00:59 +07:00
parent 2c8cd967c0
commit 6f9b9d27b4
22 changed files with 312 additions and 210 deletions
@@ -51,51 +51,46 @@ class MailBoxFolderTileBuilder {
        key: Key('mailbox_folder_tile'),
        alignment: Alignment.center,
        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular( mailboxDisplayed == MailboxDisplayed.mailbox ? 16 : 0),
+          borderRadius: BorderRadius.circular(mailboxDisplayed == MailboxDisplayed.mailbox ? 10 : 0),
          color: mailboxDisplayed == MailboxDisplayed.mailbox
            ? selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedBackgroundColor : AppColor.mailboxBackgroundColor
-            : AppColor.bgMailboxListMail
+            : Colors.white
        ),
        child: MediaQuery(
          data: MediaQueryData(padding: EdgeInsets.zero),
-          child: ListTile(
-            onTap: () {
-              if (_onSelectMailboxFolderClick != null) {
-                _onSelectMailboxFolderClick!(_mailboxNode);
-              }
-            },
-            contentPadding: EdgeInsets.zero,
-            leading: Padding(
-              padding: EdgeInsets.only(left: 26),
-              child: SvgPicture.asset(
-                _imagePaths.icMailboxFolder,
-                width: 24,
-                height: 24,
-                color: selectMode == SelectMode.ACTIVE
-                  ? AppColor.mailboxSelectedIconColor
-                  : AppColor.mailboxIconColor,
-                fit: BoxFit.fill)),
-            title: _buildTitleFolderItem(),
-            trailing: _mailboxNode.hasChildren()
-              ? Padding(
-                  padding: EdgeInsets.only(
-                    right: mailboxDisplayed == MailboxDisplayed.mailbox
-                      ? _responsiveUtils.isMobile(_context) ? 0 : 8
-                      : 0,
-                    left: 16),
-                  child: IconButton(
-                    color: AppColor.primaryColor,
-                    icon: SvgPicture.asset(
-                      _mailboxNode.expandMode == ExpandMode.EXPAND ? _imagePaths.icExpandFolder : _imagePaths.icFolderArrow,
-                      color: selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedIconColor : AppColor.mailboxIconColor,
-                      fit: BoxFit.fill),
-                    onPressed: () {
-                      if (_onExpandFolderActionClick != null) {
-                        _onExpandFolderActionClick!(_mailboxNode);
-                      }
-                    }))
-              : null
-          )
+          child: Column(children: [
+            ListTile(
+              onTap: () {
+                if (_onSelectMailboxFolderClick != null) {
+                  _onSelectMailboxFolderClick!(_mailboxNode);
+                }
+              },
+              contentPadding: EdgeInsets.zero,
+              leading: Padding(
+                  padding: EdgeInsets.only(left: 8),
+                  child: SvgPicture.asset(_imagePaths.icFolderMailbox, width: 28, height: 28, fit: BoxFit.fill)),
+              title: _buildTitleFolderItem(),
+              trailing: _mailboxNode.hasChildren()
+                  ? Padding(
+                      padding: EdgeInsets.only(right: mailboxDisplayed == MailboxDisplayed.mailbox ? _responsiveUtils.isMobile(_context) ? 0 : 8 : 0, left: 16),
+                      child: IconButton(
+                          color: AppColor.primaryColor,
+                          icon: SvgPicture.asset(
+                              _mailboxNode.expandMode == ExpandMode.EXPAND ? _imagePaths.icExpandFolder : _imagePaths.icFolderArrow,
+                              color: selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedIconColor : AppColor.colorArrowUserMailbox,
+                              fit: BoxFit.fill),
+                          onPressed: () {
+                            if (_onExpandFolderActionClick != null) {
+                              _onExpandFolderActionClick!(_mailboxNode);
+                            }
+                          }
+                      ))
+                  : null
+            ),
+            Padding(
+                padding: EdgeInsets.only(left: 45),
+                child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
+          ])
        )
      )
    );
@@ -104,16 +99,15 @@ class MailBoxFolderTileBuilder {
  Widget _buildTitleFolderItem() {
    return Row(
      children: [
-        Expanded(child: Padding(
-          padding: EdgeInsets.only(left: 8),
+        Expanded(child: Transform(
+          transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
          child: Text(
            '${_mailboxNode.item.name?.name ?? ''}',
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 15,
-              color: selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedTextColor : AppColor.mailboxTextColor,
-              fontWeight: mailboxDisplayed == MailboxDisplayed.mailbox ? FontWeight.bold : FontWeight.w500),
+              color: AppColor.colorNameEmail),
          ))),
        if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty && mailboxDisplayed == MailboxDisplayed.mailbox)
          !_mailboxNode.hasChildren()
@@ -136,10 +130,7 @@ class MailBoxFolderTileBuilder {
        '${_mailboxNode.item.getCountUnReadEmails()} ${AppLocalizations.of(_context).unread_email_notification}',
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
-        style: TextStyle(
-          fontSize: 10,
-          color: selectMode == SelectMode.ACTIVE ? AppColor.mailboxTextColor : AppColor.counterMailboxColor,
-          fontWeight: FontWeight.bold),
+        style: TextStyle(fontSize: 12, color: AppColor.colorNameEmail),
      ));
  }
 }
@@ -1,8 +1,5 @@
-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/model.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/extensions/presentation_mailbox_extension.dart';
@@ -41,10 +38,10 @@ class MailboxTileBuilder {
        key: Key('mailbox_list_tile'),
        alignment: Alignment.center,
        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(mailboxDisplayed == MailboxDisplayed.mailbox ? 16 : 0),
+          borderRadius: BorderRadius.circular(mailboxDisplayed == MailboxDisplayed.mailbox ? 10 : 0),
          color: mailboxDisplayed == MailboxDisplayed.mailbox
            ? selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedBackgroundColor : AppColor.mailboxBackgroundColor
-            : AppColor.bgMailboxListMail
+            : Colors.white
        ),
        child: MediaQuery(
          data: MediaQueryData(padding: EdgeInsets.zero),
@@ -56,41 +53,40 @@ class MailboxTileBuilder {
              }
            },
            leading: Padding(
-              padding: EdgeInsets.only(left: 24),
+              padding: EdgeInsets.only(left: 8),
              child: SvgPicture.asset(
                '${_presentationMailbox.getMailboxIcon(_imagePaths)}',
-                width: 24,
-                height: 24,
-                color: selectMode == SelectMode.ACTIVE
-                  ? AppColor.mailboxSelectedIconColor
-                  : AppColor.mailboxIconColor,
+                width: 28,
+                height: 28,
                fit: BoxFit.fill)),
-            title: Padding(
-              padding: EdgeInsets.only(left: 8),
-              child: Text(
-                '${_presentationMailbox.name?.name ?? ''}',
-                maxLines: 1,
-                overflow:TextOverflow.ellipsis,
-                style: TextStyle(
-                  fontSize: 15,
-                  color: selectMode == SelectMode.ACTIVE
-                    ? AppColor.mailboxSelectedTextColor
-                    : AppColor.mailboxTextColor,
-                  fontWeight: mailboxDisplayed == MailboxDisplayed.mailbox ? FontWeight.bold : FontWeight.w500),
-              )),
-            trailing: mailboxDisplayed == MailboxDisplayed.mailbox
-                ? Padding(
-                    padding: EdgeInsets.only(right: 24, left: 16),
-                    child: Text(
-                      '${_presentationMailbox.getCountUnReadEmails()}',
-                      maxLines: 1,
-                      style: TextStyle(
-                          fontSize: 15,
-                          color: selectMode == SelectMode.ACTIVE
-                              ? AppColor.mailboxSelectedTextNumberColor
-                              : AppColor.mailboxTextNumberColor,
-                          fontWeight: FontWeight.bold)))
-                : SizedBox.shrink()
+            title: Transform(
+              transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
+              child: Row(children: [
+                Expanded(child: Text(
+                  '${_presentationMailbox.name?.name ?? ''}',
+                  maxLines: 1,
+                  overflow:TextOverflow.ellipsis,
+                  style: TextStyle(fontSize: 15, color: AppColor.colorNameEmail),
+                )),
+                if (mailboxDisplayed == MailboxDisplayed.mailbox)
+                  Transform(
+                      transform: Matrix4.translationValues(40.0, 0.0, 0.0),
+                      child: Text(
+                          '${_presentationMailbox.getCountUnReadEmails()}',
+                          maxLines: 1,
+                          style: TextStyle(fontSize: 13, color: AppColor.colorNameEmail)))
+              ])),
+            trailing: Transform(
+                transform: Matrix4.translationValues(8.0, 0.0, 0.0),
+                child: IconButton(
+                    color: AppColor.primaryColor,
+                    icon: SvgPicture.asset(_imagePaths.icFolderArrow, color: AppColor.colorArrowUserMailbox, fit: BoxFit.fill),
+                    onPressed: () {
+                      if (_onOpenMailboxActionClick != null) {
+                        _onOpenMailboxActionClick!(_presentationMailbox);
+                      }
+                    }
+                ))
            ),
        )
      )
@@ -1,60 +1,83 @@
-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:flutter_svg/flutter_svg.dart';
 import 'package:model/model.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

-typedef OnOpenUserInformationActionClick = void Function();
+typedef OnLogoutActionClick = void Function();

 class UserInformationWidgetBuilder {
-  // final ImagePaths _imagePaths;
+  final ImagePaths _imagePaths;
  final UserProfile? _userProfile;
+  final BuildContext _context;

-  OnOpenUserInformationActionClick? _onOpenUserInformationActionClick;
+  OnLogoutActionClick? _onLogoutActionClick;

  UserInformationWidgetBuilder(
-    // this._imagePaths,
-    this._userProfile
+    this._imagePaths,
+    this._context,
+    this._userProfile,
  );

-  UserInformationWidgetBuilder onOpenUserInformationAction(
-      OnOpenUserInformationActionClick onOpenUserInformationActionClick) {
-    _onOpenUserInformationActionClick = onOpenUserInformationActionClick;
-    return this;
+  void addOnLogoutAction(OnLogoutActionClick onLogoutActionClick) {
+    _onLogoutActionClick = onLogoutActionClick;
  }

  Widget build() {
    return Container(
      key: Key('user_information_widget'),
-      alignment: Alignment.center,
-      decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(16),
-        color: AppColor.userInformationBackgroundColor),
+      color: Colors.transparent,
+      padding: EdgeInsets.zero,
+      margin: EdgeInsets.zero,
      child: ListTile(
-        onTap: () {
-          if (_onOpenUserInformationActionClick != null) {
-            _onOpenUserInformationActionClick!();
-          }
-        },
-        leading: (AvatarBuilder()
-            ..text(_userProfile != null ? _userProfile!.getAvatarText() : '')
-            ..size(40))
-          .build(),
-        title: Transform(
+        contentPadding: EdgeInsets.zero,
+        onTap: () {},
+        leading: Transform(
          transform: Matrix4.translationValues(0.0, 0.0, 0.0),
+          child: (AvatarBuilder()
+              ..text(_userProfile != null ? _userProfile!.getAvatarText() : '')
+              ..backgroundColor(Colors.white)
+              ..textColor(Colors.black)
+              ..addBoxShadows([BoxShadow(
+                color: AppColor.colorShadowBgContentEmail,
+                spreadRadius: 2,
+                blurRadius: 2,
+                offset: Offset(0, 1), // changes position of shadow
+              )])
+              ..size(56))
+            .build(),
+        ),
+        title: Transform(
+          transform: Matrix4.translationValues(8.0, 16.0, 0.0),
          child: Text(
            _userProfile != null ? _userProfile!.email : '',
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
-            style: TextStyle(fontSize: 16, color: AppColor.nameUserColor, fontWeight: FontWeight.w500),
-          ))),
-        // trailing: Transform(
-        //   transform: Matrix4.translationValues(0.0, 0.0, 0.0),
-        //   child: IconButton(
-        //     icon: SvgPicture.asset(_imagePaths.icNextArrow, width: 7, height: 12, fit: BoxFit.fill),
-        //     onPressed: () => {}))),
+            style: TextStyle(fontSize: 17, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600))
+        ),
+        subtitle: Transform(
+          transform: Matrix4.translationValues(0.0, 8.0, 0.0),
+          child: Material(
+            borderRadius: BorderRadius.circular(12),
+            color: Colors.transparent,
+            child: Align(
+              alignment: Alignment.centerLeft,
+              child: TextButton(
+                onPressed: () => _onLogoutActionClick?.call(),
+                child: Text(
+                  AppLocalizations.of(_context).logout,
+                  style: TextStyle(fontSize: 14, color: AppColor.colorTextButton),
+                ),
+              )
+            )
+          )
+        ),
+        trailing: Transform(
+          transform: Matrix4.translationValues(10.0, 0.0, 0.0),
+          child: IconButton(
+            icon: SvgPicture.asset(_imagePaths.icNextArrow, width: 7, height: 12, fit: BoxFit.fill, color: AppColor.colorArrowUserMailbox),
+            onPressed: () => {}))),
    );
  }
 }