TF-3950 Apply new style for Folder Visibility on web

Signed-off-by: dab246 <tdvu@linagora.com>

lib/features/manage_account/presentation/mailbox_visibility/widgets/label_mailbox_visibility_item_widget.dart

@@ -0,0 +1,91 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/text/text_overflow_builder.dart';
+import 'package:flutter/material.dart';
+import 'package:model/extensions/presentation_mailbox_extension.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/label_mailbox_item_widget_styles.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_expand_button.dart';
+
+class LabelMailboxVisibilityItemWidget extends StatelessWidget {
+  final GlobalKey itemKey;
+  final ImagePaths imagePaths;
+  final MailboxNode mailboxNode;
+  final OnClickExpandMailboxNodeAction onClickExpandMailboxNodeAction;
+
+  const LabelMailboxVisibilityItemWidget({
+    super.key,
+    required this.itemKey,
+    required this.imagePaths,
+    required this.mailboxNode,
+    required this.onClickExpandMailboxNodeAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final displayNameWidget = TextOverflowBuilder(
+      mailboxNode.item.getDisplayName(context),
+      style: _displayNameTextStyle,
+    );
+
+    final nameWithExpandIcon = Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (mailboxNode.hasChildren())
+          Flexible(child: displayNameWidget)
+        else
+          Flexible(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(vertical: 3),
+              child: displayNameWidget,
+            ),
+          ),
+        if (mailboxNode.hasChildren())
+          MailboxExpandButton(
+            itemKey: itemKey,
+            mailboxNode: mailboxNode,
+            imagePaths: imagePaths,
+            color: mailboxNode.item.isSubscribedMailbox ||
+                    mailboxNode.item.isDefault
+                ? AppColor.m3SurfaceBackground
+                : AppColor.steelGray400,
+            onExpandFolderActionClick: onClickExpandMailboxNodeAction,
+          ),
+      ],
+    );
+
+    if (mailboxNode.item.isTeamMailboxes) {
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          nameWithExpandIcon,
+          TextOverflowBuilder(
+            mailboxNode.item.emailTeamMailBoxes,
+            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                  fontSize: LabelMailboxItemWidgetStyles.labelFolderTextSize,
+                  color: LabelMailboxItemWidgetStyles.teamMailboxEmailTextColor,
+                  fontWeight:
+                      LabelMailboxItemWidgetStyles.labelFolderTextFontWeight,
+                ),
+          ),
+        ],
+      );
+    } else {
+      return nameWithExpandIcon;
+    }
+  }
+
+  bool get _isSubscribedMailbox => mailboxNode.item.isSubscribedMailbox;
+
+  TextStyle get _displayNameTextStyle {
+    return ThemeUtils.textStyleBodyBody3(
+      color: _isSubscribedMailbox || mailboxNode.item.isDefault
+          ? Colors.black
+          : AppColor.steelGray400,
+    );
+  }
+}

lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_subscribe_button.dart

@@ -0,0 +1,48 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:model/extensions/presentation_mailbox_extension.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class MailboxSubscribeButton extends StatelessWidget {
+  final ImagePaths imagePaths;
+  final MailboxNode mailboxNode;
+  final OnClickSubscribeMailboxAction onClickSubscribeMailboxAction;
+
+  const MailboxSubscribeButton({
+    super.key,
+    required this.imagePaths,
+    required this.mailboxNode,
+    required this.onClickSubscribeMailboxAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final isSubscribedMailbox = mailboxNode.item.isSubscribedMailbox;
+    final appLocalizations = AppLocalizations.of(context);
+
+    return TMailButtonWidget(
+      text: isSubscribedMailbox ? appLocalizations.hide : appLocalizations.show,
+      textStyle: ThemeUtils.textStyleInter400.copyWith(
+        fontSize: 12,
+        height: 18 / 12,
+        letterSpacing: 0.0,
+        color: AppColor.primaryLinShare,
+      ),
+      icon: mailboxNode.item.isSubscribedMailbox
+          ? imagePaths.icHideMailbox
+          : imagePaths.icShowMailbox,
+      iconAlignment: TextDirection.rtl,
+      iconSize: 20,
+      iconSpace: 8,
+      iconColor: AppColor.primaryLinShare,
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
+      backgroundColor: Colors.transparent,
+      onTapActionCallback: () => onClickSubscribeMailboxAction(mailboxNode),
+    );
+  }
+}

lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart

@@ -1,168 +1,98 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/utils/style_utils.dart';
-import 'package:core/presentation/utils/theme_utils.dart';
-import 'package:core/presentation/views/button/tmail_button_widget.dart';
-import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_icon_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/label_mailbox_visibility_item_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_subscribe_button.dart';
 
 class MailBoxVisibilityFolderTileBuilder extends StatefulWidget {
-
-  final MailboxNode _mailboxNode;
-  final OnClickExpandMailboxNodeAction? onClickExpandMailboxNodeAction;
-  final OnClickSubscribeMailboxAction? onClickSubscribeMailboxAction;
+  final MailboxNode mailboxNode;
+  final OnClickExpandMailboxNodeAction onClickExpandMailboxNodeAction;
+  final OnClickSubscribeMailboxAction onClickSubscribeMailboxAction;
 
   const MailBoxVisibilityFolderTileBuilder(
-    this._mailboxNode, {
-    Key? key,
-    this.onClickExpandMailboxNodeAction,
-    this.onClickSubscribeMailboxAction
-  }) : super(key: key);
+      {Key? key,
+      required this.mailboxNode,
+      required this.onClickExpandMailboxNodeAction,
+      required this.onClickSubscribeMailboxAction})
+      : super(key: key);
 
   @override
-  State<MailBoxVisibilityFolderTileBuilder> createState() => _MailBoxVisibilityFolderTileBuilderState();
+  State<MailBoxVisibilityFolderTileBuilder> createState() =>
+      _MailBoxVisibilityFolderTileBuilderState();
 }
 
-class _MailBoxVisibilityFolderTileBuilderState extends State<MailBoxVisibilityFolderTileBuilder> {
-
+class _MailBoxVisibilityFolderTileBuilderState
+    extends State<MailBoxVisibilityFolderTileBuilder> {
   final _imagePaths = Get.find<ImagePaths>();
 
   final GlobalKey _key = GlobalKey();
 
   @override
   Widget build(BuildContext context) {
-    return Material(
+    final bodyWidget = Material(
       key: _key,
-      color: Colors.transparent,
+      type: MaterialType.transparency,
       child: InkWell(
         onTap: () {},
-        borderRadius: const BorderRadius.all(Radius.circular(8)),
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-          child: Row(
-            children: [
-              _buildLeadingMailboxItem(context),
-              Expanded(child: _buildTitleFolderItem(context)),
-              if (!widget._mailboxNode.item.isDefault)
-                _buildSubscribeButton(context),
-              const SizedBox(width: 32),
-            ]
-          ),
+        borderRadius: const BorderRadius.all(
+          Radius.circular(MailboxItemWidgetStyles.borderRadius),
+        ),
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 12),
+          width: 315,
+          height: 40,
+          child: Row(children: [
+            if (_isIconDisplayed)
+              MailboxIconWidget(
+                icon: _iconMailbox,
+                padding: const EdgeInsetsDirectional.only(end: 8),
+                color: _iconMailboxColor,
+              ),
+            Expanded(
+              child: LabelMailboxVisibilityItemWidget(
+                itemKey: _key,
+                mailboxNode: widget.mailboxNode,
+                imagePaths: _imagePaths,
+                onClickExpandMailboxNodeAction:
+                    widget.onClickExpandMailboxNodeAction,
+              ),
+            ),
+            if (!_mailbox.isDefault)
+              MailboxSubscribeButton(
+                imagePaths: _imagePaths,
+                mailboxNode: widget.mailboxNode,
+                onClickSubscribeMailboxAction:
+                    widget.onClickSubscribeMailboxAction,
+              ),
+          ]),
         ),
       ),
     );
-  }
 
-  Widget _buildLeadingMailboxItem(BuildContext context) {
     return Row(
-      mainAxisSize: MainAxisSize.min,
       children: [
-        Visibility.maintain(
-          visible: widget._mailboxNode.hasChildren() && widget._mailboxNode.item.isPersonal,
-          child: TMailButtonWidget.fromIcon(
-            icon: widget._mailboxNode.expandMode.getIcon(
-              _imagePaths,
-              DirectionUtils.isDirectionRTLByLanguage(context),
-            ),
-            iconColor: widget._mailboxNode.item.allowedToDisplay
-              ? Colors.black
-              : AppColor.colorIconUnSubscribedMailbox,
-            padding: const EdgeInsets.all(5),
-            iconSize: 20,
-            backgroundColor: Colors.transparent,
-            tooltipMessage: widget._mailboxNode.expandMode.getTooltipMessage(AppLocalizations.of(context)),
-            onTapActionCallback: () =>
-                widget.onClickExpandMailboxNodeAction?.call(
-                    widget._mailboxNode,
-                    _key,
-                )
-          ),
-        ),
-        if (!widget._mailboxNode.item.isTeamMailboxes)
-          _buildMailboxIcon(context),
-      ]
-    );
-  }
-
-  Widget _buildTitleFolderItem(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Text(
-          widget._mailboxNode.item.getDisplayName(context),
-          maxLines: 1,
-          softWrap: CommonTextStyle.defaultSoftWrap,
-          overflow: CommonTextStyle.defaultTextOverFlow,
-          style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-            fontSize: widget._mailboxNode.item.isTeamMailboxes ? 16 : 14,
-            color: widget._mailboxNode.item.allowedToDisplay
-              ? Colors.black
-              : AppColor.colorTitleAUnSubscribedMailbox,
-            fontWeight: widget._mailboxNode.item.isTeamMailboxes
-              ? FontWeight.w500
-              : FontWeight.normal),
-        ),
-        if (widget._mailboxNode.item.isTeamMailboxes)
-          Text(
-            widget._mailboxNode.item.emailTeamMailBoxes,
-            maxLines: 1,
-            softWrap: CommonTextStyle.defaultSoftWrap,
-            overflow: CommonTextStyle.defaultTextOverFlow,
-            style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-              fontSize: 13,
-              color: AppColor.colorEmailAddressFull,
-              fontWeight: FontWeight.normal),
-          ),
+        Flexible(child: bodyWidget),
+        const Spacer(),
       ],
     );
   }
 
-  Widget _buildMailboxIcon(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsetsDirectional.only(end: 8),
-      child: SvgPicture.asset(
-        widget._mailboxNode.item.getMailboxIcon(_imagePaths),
-        width: 20,
-        height: 20,
-        colorFilter: widget._mailboxNode.item.allowedToDisplay
-          ? AppColor.primaryColor.asFilter()
-          : AppColor.colorIconUnSubscribedMailbox.asFilter(),
-        fit: BoxFit.fill
-      ),
-    );
-  }
+  PresentationMailbox get _mailbox => widget.mailboxNode.item;
 
-  Widget _buildSubscribeButton(BuildContext context) {
-    return Material(
-      color: Colors.transparent,
-      child: InkWell(
-        onTap: () => widget.onClickSubscribeMailboxAction?.call(widget._mailboxNode),
-        borderRadius: const BorderRadius.all(Radius.circular(5)),
-        child: Padding(
-          padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
-          child: Text(
-            widget._mailboxNode.item.isSubscribedMailbox
-              ? AppLocalizations.of(context).hide
-              : AppLocalizations.of(context).show,
-            maxLines: 1,
-            softWrap: CommonTextStyle.defaultSoftWrap,
-            overflow: CommonTextStyle.defaultTextOverFlow,
-            style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-              fontSize: 15,
-              color: AppColor.primaryColor,
-              fontWeight: FontWeight.normal
-            )
-          ),
-        ),
-      ),
-    );
-  }
+  bool get _isIconDisplayed => _mailbox.isPersonal || _mailbox.hasParentId();
+
+  String get _iconMailbox => _mailbox.getMailboxIcon(_imagePaths);
+
+  Color get _iconMailboxColor =>
+      _mailbox.isSubscribedMailbox || _mailbox.isDefault
+          ? AppColor.steelGrayA540
+          : AppColor.steelGray200;
 }

lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folders_bar_widget.dart

@@ -0,0 +1,55 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:core/utils/direction_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:model/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class MailboxVisibilityFoldersBarWidget extends StatelessWidget {
+  final ImagePaths imagePaths;
+  final ExpandMode expandMode;
+  final VoidCallback onToggleExpandFolder;
+
+  const MailboxVisibilityFoldersBarWidget({
+    super.key,
+    required this.imagePaths,
+    required this.expandMode,
+    required this.onToggleExpandFolder,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final appLocalizations = AppLocalizations.of(context);
+    return Container(
+      padding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
+      height: 40,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Flexible(
+            child: Text(
+              appLocalizations.folders,
+              style: ThemeUtils.textStyleBodyBody3(),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+          TMailButtonWidget.fromIcon(
+            icon: expandMode.getIcon(
+              imagePaths,
+              DirectionUtils.isDirectionRTLByLanguage(context),
+            ),
+            iconColor: Colors.black,
+            iconSize: 17,
+            backgroundColor: Colors.transparent,
+            padding: const EdgeInsets.all(3),
+            tooltipMessage: expandMode.getTooltipMessage(appLocalizations),
+            onTapActionCallback: onToggleExpandFolder,
+          )
+        ],
+      ),
+    );
+  }
+}