TF-4002 Apply new design for folder creation modal on web

2025-09-04 15:06:28 +07:00
parent c09a2c92b2
commit 36e58fc990
23 changed files with 689 additions and 498 deletions
@@ -0,0 +1,84 @@
+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:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
+
+class FolderItemWidget extends StatelessWidget {
+  final ImagePaths imagePaths;
+  final String folderName;
+  final bool isSelected;
+  final VoidCallback? onTapAction;
+
+  const FolderItemWidget({
+    super.key,
+    required this.imagePaths,
+    required this.folderName,
+    this.isSelected = false,
+    this.onTapAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Widget itemWidget = Container(
+      padding: const EdgeInsetsDirectional.symmetric(
+        horizontal: MailboxItemWidgetStyles.itemPadding,
+      ),
+      height: MailboxItemWidgetStyles.height,
+      child: Row(
+        children: [
+          SvgPicture.asset(
+            imagePaths.icFolderMailbox,
+            width: MailboxIconWidgetStyles.iconSize,
+            height: MailboxIconWidgetStyles.iconSize,
+            colorFilter: AppColor.primaryLinShare.asFilter(),
+            fit: BoxFit.fill,
+          ),
+          const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
+          Expanded(
+            child: Text(
+              folderName,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: isSelected
+                  ? ThemeUtils.textStyleInter700(
+                      color: Colors.black,
+                      fontSize: 14,
+                    )
+                  : ThemeUtils.textStyleBodyBody3(
+                      color: Colors.black,
+                    ),
+            ),
+          ),
+          const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
+          if (isSelected)
+            SvgPicture.asset(
+              imagePaths.icCheck,
+              width: MailboxIconWidgetStyles.iconSize,
+              height: MailboxIconWidgetStyles.iconSize,
+              colorFilter: AppColor.primaryLinShare.asFilter(),
+              fit: BoxFit.fill,
+            ),
+        ],
+      ),
+    );
+
+    if (onTapAction != null) {
+      return Material(
+        type: MaterialType.transparency,
+        child: InkWell(
+          borderRadius: const BorderRadius.all(
+            Radius.circular(MailboxItemWidgetStyles.borderRadius),
+          ),
+          hoverColor: AppColor.blue100,
+          onTap: onTapAction,
+          child: itemWidget,
+        ),
+      );
+    } else {
+      return itemWidget;
+    }
+  }
+}
@@ -24,6 +24,7 @@ class LabelMailboxItemWidget extends StatefulWidget {
  final bool showTrailing;
  final bool isItemHovered;
  final bool isSelected;
+  final bool isSelectedFolderInModal;
  final OnClickOpenMenuMailboxNodeAction? onMenuActionClick;
  final OnEmptyMailboxActionCallback? onEmptyMailboxActionCallback;
  final OnClickExpandMailboxNodeAction? onClickExpandMailboxNodeAction;
@@ -35,6 +36,7 @@ class LabelMailboxItemWidget extends StatefulWidget {
    this.showTrailing = true,
    this.isItemHovered = false,
    this.isSelected = false,
+    this.isSelectedFolderInModal = false,
    this.onMenuActionClick,
    this.onEmptyMailboxActionCallback,
    this.onClickExpandMailboxNodeAction,
@@ -219,6 +221,11 @@ class _LabelMailboxItemWidgetState extends State<LabelMailboxItemWidget> {
        color: _responsiveUtils.isDesktop(context) ? null : AppColor.iconFolder,
        fontSize: 14,
      );
+    } else if (widget.isSelectedFolderInModal) {
+      return ThemeUtils.textStyleInter700(
+        color: Colors.black,
+        fontSize: 14,
+      );
    } else {
      return _responsiveUtils.isWebDesktop(context)
        ? ThemeUtils.textStyleBodyBody3(color: Colors.black)
@@ -25,6 +25,7 @@ class MailboxItemWidget extends StatefulWidget {
  final PresentationMailbox? mailboxNodeSelected;
  final MailboxActions? mailboxActions;
  final MailboxId? mailboxIdAlreadySelected;
+  final Color? hoverColor;

  final OnClickExpandMailboxNodeAction? onExpandFolderActionClick;
  final OnClickOpenMailboxNodeAction? onOpenMailboxFolderClick;
@@ -41,6 +42,7 @@ class MailboxItemWidget extends StatefulWidget {
    this.mailboxNodeSelected,
    this.mailboxActions,
    this.mailboxIdAlreadySelected,
+    this.hoverColor,
    this.onExpandFolderActionClick,
    this.onOpenMailboxFolderClick,
    this.onSelectMailboxFolderClick,
@@ -229,11 +231,11 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
            child: Material(
              color: Colors.transparent,
              child: InkWell(
-                onTap: () => !_isSelectActionNoValid
-                  ? widget.onOpenMailboxFolderClick?.call(widget.mailboxNode)
+                onTap: !isSelectedFolderInModal
+                  ? () => widget.onOpenMailboxFolderClick?.call(widget.mailboxNode)
                  : null,
                customBorder: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
-                hoverColor: AppColor.colorMailboxHovered,
+                hoverColor: widget.hoverColor ?? AppColor.colorMailboxHovered,
                child: Container(
                  padding: const EdgeInsetsDirectional.symmetric(
                    horizontal: MailboxItemWidgetStyles.itemPadding,
@@ -255,14 +257,17 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                          showTrailing: false,
                          isSelected: _isSelected,
                          isItemHovered: _isItemHovered,
+                          isSelectedFolderInModal: isSelectedFolderInModal,
                          onMenuActionClick: widget.onMenuActionClick,
                          onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback,
                          onClickExpandMailboxNodeAction: widget.onExpandFolderActionClick,
                        )
                      ),
-                      if (_isSelectActionNoValid)
+                      if (isSelectedFolderInModal)
                        SvgPicture.asset(
-                          _imagePaths.icSelectedSB,
+                          isFolderModalActive
+                            ? _imagePaths.icCheck
+                            : _imagePaths.icSelectedSB,
                          width: MailboxItemWidgetStyles.selectionIconSize,
                          height: MailboxItemWidgetStyles.selectionIconSize,
                          fit: BoxFit.fill
@@ -282,24 +287,25 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
      widget.mailboxNodeSelected?.id == widget.mailboxNode.item.id;

  Color get backgroundColorItem {
-    if (widget.mailboxDisplayed == MailboxDisplayed.destinationPicker) {
-      return Colors.white;
-    } else {
-      if (_isSelected) {
-        return AppColor.blue100;
-      } else {
-        return Colors.transparent;
-      }
+    if (widget.mailboxDisplayed == MailboxDisplayed.mailbox) {
+      return _isSelected ? AppColor.blue100 : Colors.transparent;
    }
+    return Colors.white;
  }

-  bool get _isSelectActionNoValid => widget.mailboxNode.item.id == widget.mailboxIdAlreadySelected &&
-    widget.mailboxDisplayed == MailboxDisplayed.destinationPicker &&
-    (
-      widget.mailboxActions == MailboxActions.select ||
-      widget.mailboxActions == MailboxActions.create ||
-      widget.mailboxActions == MailboxActions.moveEmail
-    );
+  bool get isFolderModalActive =>
+      widget.mailboxDisplayed == MailboxDisplayed.modalFolder;
+
+  bool get isSelectedFolderInModal {
+    final isDestinationPickerActive =
+        widget.mailboxDisplayed == MailboxDisplayed.destinationPicker &&
+            (widget.mailboxActions == MailboxActions.select ||
+                widget.mailboxActions == MailboxActions.create ||
+                widget.mailboxActions == MailboxActions.moveEmail);
+
+    return widget.mailboxNode.item.id == widget.mailboxIdAlreadySelected &&
+        (isDestinationPickerActive || isFolderModalActive);
+  }

  bool get _isIconDisplayed =>
      widget.mailboxNode.item.isPersonal ||