TF-599 Apply new icon for mailbox on mobile/tablet

2022-05-31 16:28:02 +07:00
parent 08b327737b
commit 2f99af4004
3 changed files with 145 additions and 95 deletions
@@ -317,7 +317,7 @@ class MailboxView extends GetWidget<MailboxController> {
        margin: EdgeInsets.only(
            left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
            right: 16),
-        padding: const EdgeInsets.only(left: 12, right: 8),
+        padding: const EdgeInsets.only(left: 12),
        child: TreeView(
            key: Key('${categories.keyValue}_mailbox_list'),
            children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode)));
@@ -34,15 +34,20 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
          body: Column(
              children: [
                if (!_responsiveUtils.isDesktop(context)) _buildLogoApp(context),
-                if (!_responsiveUtils.isDesktop(context)) const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
+                if (!_responsiveUtils.isDesktop(context))
+                  const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
                Expanded(child: Container(
-                  padding: const EdgeInsets.only(left: 16),
+                  padding: EdgeInsets.only(left: _responsiveUtils.isDesktop(context) ? 16 : 0),
                  color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
                  child: Column(children: [
                    if (_responsiveUtils.isDesktop(context)) _buildComposerButton(context),
-                    Obx(() => controller.isSearchActive() ? _buildInputSearchFormWidget(context) : const SizedBox.shrink()),
+                    Obx(() => controller.isSearchActive()
+                        ? _buildInputSearchFormWidget(context)
+                        : const SizedBox.shrink()),
                    Expanded(child: Obx(() => Container(
-                      color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
+                      color: _responsiveUtils.isDesktop(context)
+                          ? AppColor.colorBgDesktop
+                          : Colors.white,
                      padding: EdgeInsets.zero,
                      margin: EdgeInsets.only(top: _responsiveUtils.isDesktop(context) ? 16 : 0),
                      child: RefreshIndicator(
@@ -147,7 +152,7 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
        key: const PageStorageKey('mailbox_list'),
        primary: false,
        shrinkWrap: true,
-        padding: const EdgeInsets.only(right: 16),
+        padding: EdgeInsets.only(right: _responsiveUtils.isDesktop(context) ? 16 : 0),
        children: [
          Obx(() {
            if (controller.isSelectionEnabled() || _responsiveUtils.isDesktop(context)) {
@@ -200,7 +205,9 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu

  Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
    return Padding(
-        padding: const EdgeInsets.symmetric(vertical: 10),
+        padding: EdgeInsets.only(top: 10, bottom: 10,
+            left: _responsiveUtils.isDesktop(context) ? 0 : 16,
+            right: _responsiveUtils.isDesktop(context) ? 0 : 16),
        child: Row(children: [
          buildIconWeb(
              splashRadius: 5,
@@ -231,7 +238,7 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
    return Container(
        padding: EdgeInsets.only(
            right: _responsiveUtils.isDesktop(context) ? 0 : 16,
-            left: _responsiveUtils.isDesktop(context) ? 0 : 12),
+            left: _responsiveUtils.isDesktop(context) ? 0 : 16),
        child: TreeView(
            key: Key('${categories.keyValue}_mailbox_list'),
            children: _buildListChildTileWidget(
@@ -286,7 +293,7 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu

  Widget _buildInputSearchFormWidget(BuildContext context) {
    return Padding(
-        padding: const EdgeInsets.only(left: 8, top: 16),
+        padding: const EdgeInsets.only(top: 16),
        child: Row(
            children: [
              buildIconWeb(
@@ -62,56 +62,75 @@ class MailBoxFolderTileBuilder {

  Widget build() {
    if (BuildUtils.isWeb) {
-      return StatefulBuilder(
-          builder: (BuildContext context, StateSetter setState) {
-            return InkWell(
-              onTap: () => allSelectMode == SelectMode.ACTIVE
-                  ? _onSelectMailboxFolderClick?.call(_mailboxNode)
-                  : _onOpenMailboxFolderClick?.call(_mailboxNode),
-              onHover: (value) => setState(() => isHoverItem = value),
-              child: Container(
-                  decoration: BoxDecoration(
-                      borderRadius: BorderRadius.circular(BuildUtils.isWeb ? 10 : 0),
-                      color: backgroundColorItem),
-                  padding: BuildUtils.isWeb
-                      ? const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8)
-                      : EdgeInsets.zero,
-                  margin: const EdgeInsets.only(bottom: 4),
-                  child: Column(mainAxisSize: MainAxisSize.min, children: [
-                    Row(children: [
+      if (mailboxDisplayed == MailboxDisplayed.mailbox) {
+        return StatefulBuilder(
+            builder: (BuildContext context, StateSetter setState) {
+              return InkWell(
+                onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
+                onHover: (value) => setState(() => isHoverItem = value),
+                child: Container(
+                    decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(10),
+                        color: backgroundColorItem),
+                    padding: const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8),
+                    margin: const EdgeInsets.only(bottom: 4),
+                    child: Row(children: [
                      _buildLeadingMailboxItem(),
-                      const SizedBox(width: BuildUtils.isWeb ? 4 : 8),
+                      const SizedBox(width: 4),
                      Expanded(child: _buildTitleFolderItem()),
                      const SizedBox(width: 8),
                      _buildTrailingMailboxItem()
-                    ]),
-                    _buildDivider(),
-                  ])
-              ),
-            );
-          });
+                    ])
+                ),
+              );
+            });
+      } else {
+        return InkWell(
+          onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
+          child: Container(
+              decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(10),
+                  color: backgroundColorItem),
+              padding: const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8),
+              margin: const EdgeInsets.only(bottom: 4),
+              child: Row(children: [
+                _buildLeadingMailboxItem(),
+                const SizedBox(width: 4),
+                Expanded(child: _buildTitleFolderItem()),
+                const SizedBox(width: 8),
+                _buildTrailingMailboxItem()
+              ])
+          ),
+        );
+      }
    } else {
      return InkWell(
        onTap: () => allSelectMode == SelectMode.ACTIVE
            ? _onSelectMailboxFolderClick?.call(_mailboxNode)
            : _onOpenMailboxFolderClick?.call(_mailboxNode),
-        child: Container(
-            decoration: BoxDecoration(
-                borderRadius: BorderRadius.circular(BuildUtils.isWeb ? 10 : 0),
-                color: backgroundColorItem),
-            padding: BuildUtils.isWeb
-                ? const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8)
-                : EdgeInsets.zero,
-            child: Column(mainAxisSize: MainAxisSize.min, children: [
-              Row(children: [
-                _buildLeadingMailboxItem(),
-                const SizedBox(width: BuildUtils.isWeb ? 4 : 8),
-                Expanded(child: _buildTitleFolderItem()),
-                const SizedBox(width: 8),
-                _buildTrailingMailboxItem()
-              ]),
-              _buildDivider(),
-            ])
+        child: ClipRRect(
+            borderRadius: const BorderRadius.all(Radius.circular(14)),
+            child: Container(
+                color: Colors.white,
+                child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Padding(
+                        padding: EdgeInsets.symmetric(
+                            vertical: _mailboxNode.hasChildren() ? 8 : 15),
+                        child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+                          _buildLeadingMailboxItem(),
+                          const SizedBox(width: 8),
+                          Expanded(child: _buildTitleFolderItem()),
+                          const SizedBox(width: 8),
+                          _buildTrailingMailboxItem()
+                        ]),
+                      ),
+                      _buildDivider(),
+                    ]
+                )
+            )
        ),
      );
    }
@@ -143,39 +162,63 @@ class MailBoxFolderTileBuilder {
            transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
            child: _buildLeadingIcon())
      ]);
+    } else {
+      return _buildLeadingIcon();
    }
-    return _buildLeadingIcon();
  }

  Widget _buildTrailingMailboxItem() {
-    if (_mailboxNode.hasChildren() && !BuildUtils.isWeb) {
-      return buildIconWeb(
-          icon: SvgPicture.asset(
-              _mailboxNode.expandMode == ExpandMode.EXPAND
-                  ? _imagePaths.icExpandFolder
-                  : _imagePaths.icCollapseFolder,
-              color: _mailboxNode.expandMode == ExpandMode.EXPAND
-                  ? AppColor.colorExpandMailbox
-                  : AppColor.colorCollapseMailbox,
-              fit: BoxFit.fill),
-          splashRadius: 10,
-          tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
-              ? AppLocalizations.of(_context).collapse
-              : AppLocalizations.of(_context).expand,
-          onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)
-      );
+    if (BuildUtils.isWeb) {
+      if (isHoverItem) {
+        return _buildMenuIcon();
+      } else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
+          && mailboxDisplayed == MailboxDisplayed.mailbox) {
+        return Padding(
+          padding: const EdgeInsets.only(right: 10),
+          child: _buildCounter(),
+        );
+      } else {
+        return const SizedBox(width: 20);
+      }
+    } else {
+      if (_mailboxNode.hasChildren()) {
+        return Padding(
+          padding: const EdgeInsets.only(right: 4),
+          child: Row(
+            children: [
+              if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
+                  && mailboxDisplayed == MailboxDisplayed.mailbox)
+                _buildCounter(),
+              buildIconWeb(
+                  icon: SvgPicture.asset(
+                      _mailboxNode.expandMode == ExpandMode.EXPAND
+                          ? _imagePaths.icExpandFolder
+                          : _imagePaths.icCollapseFolder,
+                      color: _mailboxNode.expandMode == ExpandMode.EXPAND
+                          ? AppColor.colorExpandMailbox
+                          : AppColor.colorCollapseMailbox,
+                      fit: BoxFit.fill),
+                  splashRadius: 20,
+                  iconPadding: EdgeInsets.zero,
+                  minSize: 40,
+                  tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
+                      ? AppLocalizations.of(_context).collapse
+                      : AppLocalizations.of(_context).expand,
+                  onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)
+              ),
+            ],
+          ),
+        );
+      } else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
+          && mailboxDisplayed == MailboxDisplayed.mailbox) {
+        return Padding(
+          padding: const EdgeInsets.only(right: 20),
+          child: _buildCounter(),
+        );
+      } else {
+        return const SizedBox(width: 20);
+      }
    }
-
-    if (BuildUtils.isWeb && isHoverItem) {
-      return _buildMenuIcon();
-    }
-
-    if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
-        && mailboxDisplayed == MailboxDisplayed.mailbox) {
-      return _buildCounter();
-    }
-
-    return const SizedBox(width: 20);
  }

  Widget _buildLeadingIcon() {
@@ -201,22 +244,23 @@ class MailBoxFolderTileBuilder {
  }

  Widget _buildCounter() {
-    return Padding(
-      padding: const EdgeInsets.only(right: 10),
-      child: Text(
-        _mailboxNode.item.getCountUnReadEmails(),
-        maxLines: 1,
-        overflow: CommonTextStyle.defaultTextOverFlow,
-        style: const TextStyle(
-            fontSize: 13,
-            color: Colors.black,
-            fontWeight: FontWeight.normal),
-      ),
+    return Text(
+      _mailboxNode.item.getCountUnReadEmails(),
+      maxLines: 1,
+      overflow: CommonTextStyle.defaultTextOverFlow,
+      style: const TextStyle(
+          fontSize: 13,
+          color: Colors.black,
+          fontWeight: FontWeight.normal),
    );
  }

  Widget _buildMailboxIcon() {
-    return SvgPicture.asset(_mailboxNode.item.getMailboxIcon(_imagePaths));
+    return SvgPicture.asset(
+        _mailboxNode.item.getMailboxIcon(_imagePaths),
+        width: BuildUtils.isWeb ? 20 : 24,
+        height: BuildUtils.isWeb ? 20 : 24,
+        fit: BoxFit.fill);
  }

  Widget _buildMenuIcon() {
@@ -273,11 +317,10 @@ class MailBoxFolderTileBuilder {
  }

  Widget _buildDivider() {
-    if (lastNode?.item.id != _mailboxNode.item.id && !BuildUtils.isWeb) {
-      return Padding(
-          padding: EdgeInsets.only(
-              left: allSelectMode == SelectMode.ACTIVE ? 50 : 35),
-          child: const Divider(
+    if (lastNode?.item.id != _mailboxNode.item.id) {
+      return const Padding(
+          padding: EdgeInsets.only(left: 30),
+          child: Divider(
              color: AppColor.lineItemListColor,
              height: 0.5,
              thickness: 0.2