TF-2040 Add CalendarEventInformationWidget in email view

linagora · Jul 26, 2023 · 7c295d7 · 7c295d7
1 parent ecbc296
commit 7c295d7
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 0 deletions.
diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart
@@ -191,6 +191,9 @@ extension AppColor on Color {
   static const colorUpdatedEventActionText = Color(0xFF4BB34B);
   static const colorCanceledEventActionText = Color(0xFFFF3347);
   static const colorSubTitleEventActionText = Color(0xFF939393);
+  static const colorCalendarEventInformationBackground = Color(0x0A000000);
+  static const colorCalendarEventInformationStroke = Color(0x1F000000);
+  static const colorShadowCalendarDateIcon = Color(0x26000000);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

diff --git a/lib/features/email/presentation/email_view.dart b/lib/features/email/presentation/email_view.dart
@@ -29,6 +29,7 @@ import 'package:tmail_ui_user/features/email/presentation/widgets/app_bar_mail_w
 import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_file_tile_builder.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/bottom_bar_mail_widget_builder.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_event_action_banner_widget.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_event_information_widget.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/email_action_cupertino_action_sheet_action_builder.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/information_sender_and_receiver_builder.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/vacation_response_extension.dart';
@@ -282,6 +283,15 @@ class EmailView extends GetWidget<SingleEmailController> with AppLoaderMixin {
             ),
             _buildLoadingContentView(),
             _buildAttachments(context),
+            Obx(() {
+              if (controller.calendarEvent.value != null) {
+                return CalendarEventInformationWidget(
+                  calendarEvent: controller.calendarEvent.value!
+                );
+              } else {
+                return const SizedBox.shrink();
+              }
+            }),
             Obx(() {
               if (controller.calendarEvent.value != null) {
                 return CalendarEventActionBannerWidget(

diff --git a/lib/features/email/presentation/styles/calendar_event_information_widget_styles.dart b/lib/features/email/presentation/styles/calendar_event_information_widget_styles.dart
@@ -0,0 +1,8 @@
+
+class CalendarEventInformationWidgetStyles {
+  static const double borderRadius = 16;
+  static const double contentPadding = 16;
+  static const double verticalMargin = 12;
+  static const double horizontalMargin = 16;
+  static const double calendarDateIconMargin = 16;
+}
diff --git a/lib/features/email/presentation/widgets/calendar_event_information_widget.dart b/lib/features/email/presentation/widgets/calendar_event_information_widget.dart
@@ -0,0 +1,63 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:jmap_dart_client/jmap/mail/calendar/calendar_event.dart';
+import 'package:tmail_ui_user/features/email/presentation/styles/calendar_event_information_widget_styles.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_date_icon_widget.dart';
+
+class CalendarEventInformationWidget extends StatelessWidget {
+
+  final CalendarEvent calendarEvent;
+
+  const CalendarEventInformationWidget({
+    super.key,
+    required this.calendarEvent
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final responsiveUtils = Get.find<ResponsiveUtils>();
+    return Container(
+      clipBehavior: Clip.antiAlias,
+      decoration: const ShapeDecoration(
+        color: Colors.white,
+        shape: RoundedRectangleBorder(
+          side: BorderSide(
+            width: 0.5,
+            color: AppColor.colorCalendarEventInformationStroke,
+          ),
+          borderRadius: BorderRadius.all(Radius.circular(CalendarEventInformationWidgetStyles.borderRadius)),
+        ),
+      ),
+      margin: const EdgeInsetsDirectional.symmetric(
+        vertical: CalendarEventInformationWidgetStyles.verticalMargin,
+        horizontal: CalendarEventInformationWidgetStyles.horizontalMargin),
+      child: responsiveUtils.isPortraitMobile(context)
+        ? Column(
+            children: [
+              Container(
+                padding: const EdgeInsets.all(CalendarEventInformationWidgetStyles.calendarDateIconMargin),
+                color: Colors.black.withOpacity(0.04),
+                child: CalendarDateIconWidget(
+                  calendarEvent: calendarEvent,
+                  width: double.infinity,
+                ),
+              )
+            ],
+          )
+        : Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Container(
+                padding: const EdgeInsets.all(CalendarEventInformationWidgetStyles.calendarDateIconMargin),
+                color: Colors.black.withOpacity(0.04),
+                child: CalendarDateIconWidget(calendarEvent: calendarEvent),
+              ),
+              Expanded(child: Container(color: Colors.white))
+            ],
+          ),
+    );
+  }
+}