TF-248 Update UI for web

2022-02-10 18:07:48 +07:00
parent 5c0c1de5f3
commit c22bc94052
15 changed files with 205 additions and 189 deletions
@@ -26,7 +26,7 @@ class MailboxView extends GetWidget<MailboxController> {
      child: ClipRRect(
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(responsiveUtils.isMobile(context) ? 14 : 0),
-          topLeft: Radius.circular(14)),
+          topLeft: Radius.circular(responsiveUtils.isMobile(context) ? 14 : 0)),
        child: Drawer(
          child: Scaffold(
            backgroundColor: Colors.white,
@@ -162,7 +162,7 @@ class MailboxView extends GetWidget<MailboxController> {

  Widget _buildDefaultMailbox(BuildContext context, List<PresentationMailbox> defaultMailbox) {
    return ListView.builder(
-      padding: EdgeInsets.only(top: 8, left: 8, right: 8),
+      padding: EdgeInsets.all(8),
      key: PageStorageKey('default_mailbox_list'),
      itemCount: defaultMailbox.length,
      shrinkWrap: true,
@@ -173,7 +173,8 @@ class MailboxView extends GetWidget<MailboxController> {
              defaultMailbox[index],
              selectMode: controller.getSelectMode(
                  defaultMailbox[index],
-                  controller.mailboxDashBoardController.selectedMailbox.value))
+                  controller.mailboxDashBoardController.selectedMailbox.value),
+              isLastElement: index == defaultMailbox.length - 1)
          ..onOpenMailboxAction((mailbox) => controller.selectMailbox(context, mailbox)))
        .build()));
  }
@@ -183,7 +184,7 @@ class MailboxView extends GetWidget<MailboxController> {
        ? Transform(
            transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
            child: Padding(
-              padding: EdgeInsets.only(right: 12, top: 10),
+              padding: EdgeInsets.only(top: 10, bottom: 10),
              child: TreeView(
                startExpanded: false,
                key: Key('folder_mailbox_list'),
@@ -205,7 +206,6 @@ class MailboxView extends GetWidget<MailboxController> {
                  parent: Obx(() => (MailBoxFolderTileBuilder(
                          context,
                          imagePaths,
-                          responsiveUtils,
                          mailboxNode,
                          selectMode: controller.getSelectMode(
                              mailboxNode.item,
@@ -220,7 +220,6 @@ class MailboxView extends GetWidget<MailboxController> {
              child: Obx(() => (MailBoxFolderTileBuilder(
                      context,
                      imagePaths,
-                      responsiveUtils,
                      mailboxNode,
                      selectMode: controller.getSelectMode(
                          mailboxNode.item,
@@ -14,7 +14,6 @@ class MailBoxFolderTileBuilder {
  final MailboxNode _mailboxNode;
  final BuildContext _context;
  final ImagePaths _imagePaths;
-  final ResponsiveUtils _responsiveUtils;
  final SelectMode selectMode;
  final MailboxDisplayed mailboxDisplayed;

@@ -24,7 +23,6 @@ class MailBoxFolderTileBuilder {
  MailBoxFolderTileBuilder(
    this._context,
    this._imagePaths,
-    this._responsiveUtils,
    this._mailboxNode,
    {
      this.selectMode = SelectMode.INACTIVE,
@@ -49,10 +47,8 @@ class MailBoxFolderTileBuilder {
        key: Key('mailbox_folder_tile'),
        alignment: Alignment.center,
        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(mailboxDisplayed == MailboxDisplayed.mailbox ? 10 : 0),
-          color: mailboxDisplayed == MailboxDisplayed.mailbox
-            ? selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedBackgroundColor : AppColor.mailboxBackgroundColor
-            : Colors.white
+          borderRadius: BorderRadius.circular(0),
+          color: Colors.white
        ),
        child: MediaQuery(
          data: MediaQueryData(padding: EdgeInsets.zero),
@@ -70,8 +66,9 @@ class MailBoxFolderTileBuilder {
              title: _buildTitleFolderItem(),
              trailing: _mailboxNode.hasChildren()
                  ? Padding(
-                      padding: EdgeInsets.only(right: mailboxDisplayed == MailboxDisplayed.mailbox ? _responsiveUtils.isMobile(_context) ? 0 : 8 : 0, left: 16),
+                      padding: EdgeInsets.only(right: 0, left: 16),
                      child: IconButton(
+                          padding: EdgeInsets.zero,
                          color: AppColor.primaryColor,
                          icon: SvgPicture.asset(
                              _mailboxNode.expandMode == ExpandMode.EXPAND ? _imagePaths.icExpandFolder : _imagePaths.icFolderArrow,
@@ -13,6 +13,7 @@ class MailboxTileBuilder {
  final SelectMode selectMode;
  final ImagePaths _imagePaths;
  final MailboxDisplayed mailboxDisplayed;
+  final bool isLastElement;

  OnOpenMailboxActionClick? _onOpenMailboxActionClick;

@@ -21,7 +22,8 @@ class MailboxTileBuilder {
    this._presentationMailbox,
    {
      this.selectMode = SelectMode.INACTIVE,
-      this.mailboxDisplayed = MailboxDisplayed.mailbox
+      this.mailboxDisplayed = MailboxDisplayed.mailbox,
+      this.isLastElement = false,
    }
  );

@@ -38,56 +40,60 @@ class MailboxTileBuilder {
        key: Key('mailbox_list_tile'),
        alignment: Alignment.center,
        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(mailboxDisplayed == MailboxDisplayed.mailbox ? 10 : 0),
-          color: mailboxDisplayed == MailboxDisplayed.mailbox
-            ? selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedBackgroundColor : AppColor.mailboxBackgroundColor
-            : Colors.white
+          borderRadius: BorderRadius.circular(0),
+          color: Colors.white
        ),
        child: MediaQuery(
          data: MediaQueryData(padding: EdgeInsets.zero),
-          child: ListTile(
-            contentPadding: EdgeInsets.zero,
-            onTap: () => {
-              if (_onOpenMailboxActionClick != null) {
-                _onOpenMailboxActionClick!(_presentationMailbox)
-              }
-            },
-            leading: Padding(
-              padding: EdgeInsets.only(left: 8),
-              child: SvgPicture.asset(
-                '${_presentationMailbox.getMailboxIcon(_imagePaths)}',
-                width: 28,
-                height: 28,
-                fit: BoxFit.fill)),
-            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);
-                      }
-                    }
-                ))
+          child: Column(children: [
+            ListTile(
+                contentPadding: EdgeInsets.zero,
+                onTap: () => {
+                  if (_onOpenMailboxActionClick != null) {
+                    _onOpenMailboxActionClick!(_presentationMailbox)
+                  }
+                },
+                leading: Padding(
+                    padding: EdgeInsets.only(left: 8),
+                    child: SvgPicture.asset(
+                        '${_presentationMailbox.getMailboxIcon(_imagePaths)}',
+                        width: 28,
+                        height: 28,
+                        fit: BoxFit.fill)),
+                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);
+                          }
+                        }
+                    ))
            ),
+            if (!isLastElement)
+              Padding(
+                padding: EdgeInsets.only(left: 45),
+                child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
+          ]),
        )
      )
    );
@@ -2,6 +2,7 @@
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get_utils/src/platform/platform.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

@@ -30,54 +31,55 @@ class UserInformationWidgetBuilder {
      color: Colors.transparent,
      padding: EdgeInsets.zero,
      margin: EdgeInsets.zero,
-      child: ListTile(
-        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(
+      child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+        (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: 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(),
+                offset: Offset(0, 1))])
+            ..size(GetPlatform.isWeb ? 48 : 56))
+          .build(),
+        Expanded(child: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Padding(
+                padding: EdgeInsets.only(left: 16, top: 10),
                child: Text(
-                  AppLocalizations.of(_context).logout,
-                  style: TextStyle(fontSize: 14, color: AppColor.colorTextButton),
-                ),
+                    _userProfile != null ? '${_userProfile?.email}' : '',
+                    maxLines: 1,
+                    overflow: GetPlatform.isWeb ? TextOverflow.clip : TextOverflow.ellipsis,
+                    style: TextStyle(fontSize: 17, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600)
+                )
+            ),
+            Padding(
+              padding: EdgeInsets.only(left: 10),
+              child: Material(
+                  borderRadius: BorderRadius.circular(20),
+                  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),
+        ])),
+        Transform(
+          transform: Matrix4.translationValues(14.0, 0.0, 0.0),
          child: IconButton(
            icon: SvgPicture.asset(_imagePaths.icNextArrow, width: 7, height: 12, fit: BoxFit.fill, color: AppColor.colorArrowUserMailbox),
-            onPressed: () => {}))),
+            onPressed: () => {}))
+      ]),
    );
  }
 }