TF-4195 Implement add a Label to an email on mobile

2025-12-12 10:34:27 +07:00
parent 78de7de3a6
commit 0076a7af57
29 changed files with 319 additions and 139 deletions
@@ -0,0 +1,156 @@
+import 'dart:math' as math;
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/views/button/default_close_button_widget.dart';
+import 'package:core/utils/platform_info.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:jmap_dart_client/jmap/mail/email/email.dart';
+import 'package:labels/labels.dart';
+import 'package:tmail_ui_user/features/labels/presentation/widgets/label_item_context_menu.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+
+typedef OnAddLabelToEmailCallback = Function(
+  EmailId emailId,
+  Label label,
+  bool isSelected,
+);
+
+class AddLabelToEmailModal extends StatefulWidget {
+  final List<Label> labels;
+  final List<Label> emailLabels;
+  final EmailId emailId;
+  final OnAddLabelToEmailCallback onAddLabelToEmailCallback;
+
+  const AddLabelToEmailModal({
+    super.key,
+    required this.labels,
+    required this.emailLabels,
+    required this.emailId,
+    required this.onAddLabelToEmailCallback,
+  });
+
+  @override
+  State<AddLabelToEmailModal> createState() => _AddLabelToEmailModalState();
+}
+
+class _AddLabelToEmailModalState extends State<AddLabelToEmailModal> {
+  final ImagePaths _imagePaths = Get.find<ImagePaths>();
+
+  @override
+  Widget build(BuildContext context) {
+    final appLocalizations = AppLocalizations.of(context);
+    final theme = Theme.of(context);
+
+    return LayoutBuilder(builder: (_, constraints) {
+      final currentScreenWidth = constraints.maxWidth;
+      final currentScreenHeight = constraints.maxHeight;
+      final maxHeight = math.min(currentScreenHeight, 450).toDouble();
+
+      Widget bodyWidget = Container(
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: const BorderRadius.all(Radius.circular(16)),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.black.withValues(alpha: 0.08),
+              blurRadius: 24,
+              offset: const Offset(0, 2),
+            ),
+            BoxShadow(
+              color: Colors.black.withValues(alpha: 0.08),
+              blurRadius: 2,
+            ),
+          ],
+        ),
+        width: math.min(
+          currentScreenWidth - 32,
+          554,
+        ),
+        constraints: BoxConstraints(maxHeight: maxHeight),
+        clipBehavior: Clip.antiAlias,
+        child: Stack(
+          children: [
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Container(
+                  height: 64,
+                  alignment: Alignment.center,
+                  padding: const EdgeInsetsDirectional.only(
+                    start: 32,
+                    end: 32,
+                    top: 16,
+                    bottom: 16,
+                  ),
+                  child: Text(
+                    appLocalizations.addLabel,
+                    style: theme.textTheme.headlineSmall?.copyWith(
+                      color: AppColor.m3SurfaceBackground,
+                    ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                ),
+                Flexible(
+                  child: Container(
+                    padding: const EdgeInsetsDirectional.only(
+                      start: 22,
+                      end: 22,
+                      bottom: 16,
+                    ),
+                    child: ListView.builder(
+                      shrinkWrap: true,
+                      padding: EdgeInsets.zero,
+                      itemCount: widget.labels.length,
+                      itemBuilder: (context, index) {
+                        final label = widget.labels[index];
+                        final isSelected = widget.emailLabels.contains(label);
+                        return LabelItemContextMenu(
+                          label: label,
+                          imagePaths: _imagePaths,
+                          isSelected: isSelected,
+                          onSelectLabelAction: _onSelectLabel,
+                        );
+                      },
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            DefaultCloseButtonWidget(
+              iconClose: _imagePaths.icCloseDialog,
+              onTapActionCallback: _onCloseModal,
+            ),
+          ],
+        ),
+      );
+
+      bodyWidget = Center(child: bodyWidget);
+
+      if (PlatformInfo.isMobile) {
+        bodyWidget = GestureDetector(
+          onTap: _onCloseModal,
+          child: Scaffold(
+            backgroundColor: AppColor.blackAlpha20,
+            body: bodyWidget,
+          ),
+        );
+      }
+
+      return bodyWidget;
+    });
+  }
+
+  void _onSelectLabel(Label label, bool isSelected) {
+    widget.onAddLabelToEmailCallback(widget.emailId, label, isSelected);
+    popBack();
+  }
+
+  void _onCloseModal() {
+    popBack();
+  }
+}