TF-2057 Add color/size to styles

(cherry picked from commit 68b621471197105b2a846a2827afdaa23ec03edc)

lib/features/base/styles/cupertino_loading_widget_styles.dart

@@ -0,0 +1,7 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class CupertinoLoadingWidgetStyles {
+  static const Color progressColor = AppColor.colorLoading;
+  static const double size = 24;
+}

lib/features/base/styles/hyper_link_widget_styles.dart

@@ -0,0 +1,7 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class HyperLinkWidgetStyles {
+  static const Color textColor = AppColor.primaryColor;
+  static const double textSize = 16;
+}

lib/features/base/widget/cupertino_loading_widget.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/cupertino.dart';
+import 'package:tmail_ui_user/features/base/styles/cupertino_loading_widget_styles.dart';
+
+class CupertinoLoadingWidget extends StatelessWidget {
+  const CupertinoLoadingWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(
+      child: SizedBox(
+        width: CupertinoLoadingWidgetStyles.size,
+        height: CupertinoLoadingWidgetStyles.size,
+        child: CupertinoActivityIndicator(color: CupertinoLoadingWidgetStyles.progressColor)
+      )
+    );
+  }
+}

lib/features/base/widget/hyper_link_widget.dart

@@ -1,6 +1,6 @@
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/widgets.dart';
+import 'package:tmail_ui_user/features/base/styles/hyper_link_widget_styles.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
 class HyperLinkWidget extends StatelessWidget {
@@ -15,8 +15,8 @@ class HyperLinkWidget extends StatelessWidget {
       text: TextSpan(
         text: urlString,
         style: const TextStyle(
-          color: AppColor.primaryColor,
+          color: HyperLinkWidgetStyles.textColor,
-          fontSize: 16,
+          fontSize: HyperLinkWidgetStyles.textSize,
           decoration: TextDecoration.underline
         ),
         recognizer: TapGestureRecognizer()..onTap = () async {

lib/features/email/presentation/email_view.dart

@@ -22,8 +22,6 @@ import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
 import 'package:tmail_ui_user/features/base/widget/custom_scroll_behavior.dart';
 import 'package:tmail_ui_user/features/base/widget/popup_item_widget.dart';
-import 'package:tmail_ui_user/features/email/domain/state/get_email_content_state.dart';
-import 'package:tmail_ui_user/features/email/domain/state/parse_calendar_event_state.dart';
 import 'package:tmail_ui_user/features/email/presentation/controller/single_email_controller.dart';
 import 'package:tmail_ui_user/features/email/presentation/styles/email_view_styles.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/app_bar_mail_widget_builder.dart';
@@ -33,6 +31,7 @@ import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_event
 import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_event/calendar_event_detail_widget.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_event/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/email_view_loading_bar_widget.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';
 import 'package:tmail_ui_user/features/manage_account/presentation/vacation/widgets/vacation_notification_message_widget.dart';
@@ -284,7 +283,10 @@ class EmailView extends GetWidget<SingleEmailController> with AppLoaderMixin {
               responsiveUtils: responsiveUtils,
             ),
             _buildAttachments(context),
-            _buildLoadingContentView(email),
+            Obx(() => EmailViewLoadingBarWidget(
+              viewState: controller.viewState.value,
+              selectedEmail: email
+            )),
             if (email.hasCalendarEvent)
               Obx(() {
                 if (controller.calendarEvent.value != null) {
@@ -315,28 +317,6 @@ class EmailView extends GetWidget<SingleEmailController> with AppLoaderMixin {
       });
   }
 
-  Widget _buildLoadingContentView(PresentationEmail selectedEmail) {
-    return Obx(() {
-      return controller.viewState.value.fold(
-        (failure) => const SizedBox.shrink(),
-        (success) {
-          if (selectedEmail.hasCalendarEvent) {
-            if ((success is GetEmailContentLoading || success is ParseCalendarEventLoading)) {
-              return loadingWidget;
-            } else {
-              return const SizedBox.shrink();
-            }
-          } else {
-            if (success is GetEmailContentLoading) {
-              return loadingWidget;
-            } else {
-              return const SizedBox.shrink();
-            }
-          }
-        });
-    });
-  }
-
   Widget _buildAttachments(BuildContext context) {
    return Obx(() {
      final attachments = controller.attachments.listAttachmentsDisplayedOutSide;

lib/features/email/presentation/styles/attendee_widget_styles.dart

@@ -1,5 +1,10 @@
 
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
 class AttendeeWidgetStyles {
   static const double maxWidth = 100;
   static const double textSize = 16;
+  static const Color textColor = Colors.black;
+  static const Color mailtoColor = AppColor.colorMailto;
 }

lib/features/email/presentation/styles/calendar_event_detail_widget_styles.dart

@@ -1,4 +1,7 @@
 
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
 class CalendarEventDetailWidgetStyles {
   static const double textSize = 24;
   static const double borderRadius = 16;
@@ -6,4 +9,6 @@ class CalendarEventDetailWidgetStyles {
   static const double horizontalMargin = 16;
   static const double contentPadding = 16;
   static const double fieldTopPadding = 16;
+  static const Color borderStrokeColor = AppColor.colorCalendarEventInformationStroke;
+  static const double borderStrokeWidth = 0.5;
 }

lib/features/email/presentation/styles/event_attendee_detail_widget_styles.dart

@@ -1,6 +1,11 @@
 
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
 class EventAttendeeDetailWidgetStyles {
   static const double maxWidth = 100;
   static const double textSize = 16;
   static const double fieldTopPadding = 8;
+  static const Color labelColor = AppColor.colorSubTitleEventActionText;
+  static const Color valueColor = Colors.black;
 }

lib/features/email/presentation/styles/event_description_detail_widget_styles.dart

@@ -1,7 +1,9 @@
 
+import 'package:flutter/material.dart';
+
 class EventDescriptionDetailWidgetStyles {
   static const double textSize = 16;
   static const double borderRadius = 16;
   static const double contentPadding = 16;
-  static const double fieldTopPadding = 16;
+  static const Color valueColor = Colors.black;
 }

lib/features/email/presentation/styles/event_link_detail_widget_styles.dart

@@ -0,0 +1,10 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class EventLinkDetailWidgetStyles {
+  static const double maxWidth = 100;
+  static const double textSize = 16;
+  static const Color labelColor = AppColor.colorSubTitleEventActionText;
+  static const Color valueColor = Colors.black;
+}

lib/features/email/presentation/styles/event_location_detail_widget_styles.dart

@@ -1,5 +1,10 @@
 
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
 class EventLocationDetailWidgetStyles {
   static const double maxWidth = 100;
   static const double textSize = 16;
+  static const Color labelColor = AppColor.colorSubTitleEventActionText;
+  static const Color valueColor = Colors.black;
 }

lib/features/email/presentation/styles/event_time_detail_widget_styles.dart

@@ -1,5 +1,10 @@
 
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
 class EventTimeDetailWidgetStyles {
   static const double maxWidth = 100;
   static const double textSize = 16;
+  static const Color labelColor = AppColor.colorSubTitleEventActionText;
+  static const Color valueColor = Colors.black;
 }

lib/features/email/presentation/styles/event_title_widget_styles.dart

@@ -1,4 +1,7 @@
 
+import 'package:flutter/material.dart';
+
 class EventTitleWidgetStyles {
   static const double textSize = 24;
+  static const Color textColor = Colors.black;
 }

lib/features/email/presentation/styles/organizer_widget_styles.dart

@@ -0,0 +1,10 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class OrganizerWidgetStyles {
+  static const double maxWidth = 100;
+  static const double textSize = 16;
+  static const Color textColor = Colors.black;
+  static const Color mailtoColor = AppColor.colorMailto;
+}

lib/features/email/presentation/styles/see_all_attendees_button_widget_styles.dart

@@ -1,8 +1,12 @@
 
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
 class SeeAllAttendeesButtonWidgetStyles {
   static const double textSize = 16;
   static const double horizontalPadding = 8;
   static const double verticalPadding = 4;
   static const double borderRadius = 20;
   static const double horizontalMargin = -8;
+  static const Color textColor = AppColor.primaryColor;
 }

lib/features/email/presentation/widgets/calendar_event/attendee_widget.dart

@@ -1,5 +1,4 @@
 
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:jmap_dart_client/jmap/mail/calendar/properties/attendee/calendar_attendee.dart';
 import 'package:tmail_ui_user/features/email/presentation/styles/attendee_widget_styles.dart';
@@ -20,7 +19,7 @@ class AttendeeWidget extends StatelessWidget {
         style: const TextStyle(
           fontSize: AttendeeWidgetStyles.textSize,
           fontWeight: FontWeight.w500,
-          color: Colors.black
+          color: AttendeeWidgetStyles.textColor
         ),
         children: [
           if (attendee.name?.name.isNotEmpty == true)
@@ -29,7 +28,7 @@ class AttendeeWidget extends StatelessWidget {
             TextSpan(
               text: ' <${attendee.mailto!.mailAddress.value}> ',
               style: const TextStyle(
-                color: AppColor.colorMailto,
+                color: AttendeeWidgetStyles.mailtoColor,
                 fontSize: AttendeeWidgetStyles.textSize,
                 fontWeight: FontWeight.w500
               ),

lib/features/email/presentation/widgets/calendar_event/calendar_event_detail_widget.dart

@@ -1,5 +1,4 @@
 
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:jmap_dart_client/jmap/mail/calendar/calendar_event.dart';
 import 'package:tmail_ui_user/features/email/presentation/extensions/calendar_event_extension.dart';
@@ -28,8 +27,8 @@ class CalendarEventDetailWidget extends StatelessWidget {
         color: Colors.white,
         shape: RoundedRectangleBorder(
           side: BorderSide(
-            width: 0.5,
+            width: CalendarEventDetailWidgetStyles.borderStrokeWidth,
-            color: AppColor.colorCalendarEventInformationStroke,
+            color: CalendarEventDetailWidgetStyles.borderStrokeColor,
           ),
           borderRadius: BorderRadius.all(Radius.circular(CalendarEventDetailWidgetStyles.borderRadius)),
         ),

lib/features/email/presentation/widgets/calendar_event/event_attendee_detail_widget.dart

@@ -1,5 +1,4 @@
 
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/utils/app_logger.dart';
 import 'package:flutter/material.dart';
 import 'package:jmap_dart_client/jmap/mail/calendar/properties/attendee/calendar_attendee.dart';
@@ -53,7 +52,7 @@ class _EventAttendeeDetailWidgetState extends State<EventAttendeeDetailWidget> {
             style: const TextStyle(
               fontSize: EventAttendeeDetailWidgetStyles.textSize,
               fontWeight: FontWeight.w500,
-              color: AppColor.colorSubTitleEventActionText
+              color: EventAttendeeDetailWidgetStyles.labelColor
             ),
           ),
         ),

lib/features/email/presentation/widgets/calendar_event/event_attendee_information_widget.dart

@@ -1,6 +1,5 @@
 
 import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/presentation/utils/style_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/calendar/properties/attendee/calendar_attendee.dart';
@@ -58,8 +57,8 @@ class EventAttendeeInformationWidget extends StatelessWidget {
             ]
           ),
           overflow: responsiveUtils.isPortraitMobile(context)
-            ? TextOverflow.ellipsis
+            ? TextOverflow.clip
-            : CommonTextStyle.defaultTextOverFlow,
+            : TextOverflow.ellipsis,
           maxLines: responsiveUtils.isPortraitMobile(context) ? null : 2,
         ))
       ],

lib/features/email/presentation/widgets/calendar_event/event_description_detail_widget.dart

@@ -33,7 +33,7 @@ class EventDescriptionDetailWidget extends StatelessWidget {
             style: const TextStyle(
               fontWeight: FontWeight.w500,
               fontSize: EventDescriptionDetailWidgetStyles.textSize,
-              color: Colors.black
+              color: EventDescriptionDetailWidgetStyles.valueColor
             )
           ),
           PositionedDirectional(

lib/features/email/presentation/widgets/calendar_event/event_link_detail_widget.dart

@@ -1,8 +1,7 @@
 
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:tmail_ui_user/features/base/widget/hyper_link_widget.dart';
-import 'package:tmail_ui_user/features/email/presentation/styles/event_location_detail_widget_styles.dart';
+import 'package:tmail_ui_user/features/email/presentation/styles/event_link_detail_widget_styles.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class EventLinkDetailWidget extends StatelessWidget {
@@ -20,13 +19,13 @@ class EventLinkDetailWidget extends StatelessWidget {
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         SizedBox(
-          width: EventLocationDetailWidgetStyles.maxWidth,
+          width: EventLinkDetailWidgetStyles.maxWidth,
           child: Text(
             AppLocalizations.of(context).link,
             style: const TextStyle(
-              fontSize: EventLocationDetailWidgetStyles.textSize,
+              fontSize: EventLinkDetailWidgetStyles.textSize,
               fontWeight: FontWeight.w500,
-              color: AppColor.colorSubTitleEventActionText
+              color: EventLinkDetailWidgetStyles.labelColor
             ),
           ),
         ),

lib/features/email/presentation/widgets/calendar_event/event_location_detail_widget.dart

@@ -1,5 +1,4 @@
 
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:tmail_ui_user/features/email/presentation/styles/event_location_detail_widget_styles.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -25,7 +24,7 @@ class EventLocationDetailWidget extends StatelessWidget {
             style: const TextStyle(
               fontSize: EventLocationDetailWidgetStyles.textSize,
               fontWeight: FontWeight.w500,
-              color: AppColor.colorSubTitleEventActionText
+              color: EventLocationDetailWidgetStyles.labelColor
             ),
           ),
         ),
@@ -34,7 +33,7 @@ class EventLocationDetailWidget extends StatelessWidget {
           style: const TextStyle(
             fontSize: EventLocationDetailWidgetStyles.textSize,
             fontWeight: FontWeight.w500,
-            color: Colors.black
+            color: EventLocationDetailWidgetStyles.valueColor
           ),
         ))
       ],

lib/features/email/presentation/widgets/calendar_event/event_time_detail_widget.dart

@@ -1,5 +1,4 @@
 
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:tmail_ui_user/features/email/presentation/styles/event_time_detail_widget_styles.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -25,7 +24,7 @@ class EventTimeWidgetWidget extends StatelessWidget {
             style: const TextStyle(
               fontSize: EventTimeDetailWidgetStyles.textSize,
               fontWeight: FontWeight.w500,
-              color: AppColor.colorSubTitleEventActionText
+              color: EventTimeDetailWidgetStyles.labelColor
             ),
           ),
         ),
@@ -34,7 +33,7 @@ class EventTimeWidgetWidget extends StatelessWidget {
           style: const TextStyle(
             fontSize: EventTimeDetailWidgetStyles.textSize,
             fontWeight: FontWeight.w500,
-            color: Colors.black
+            color: EventTimeDetailWidgetStyles.valueColor
           ),
         ))
       ],

lib/features/email/presentation/widgets/calendar_event/event_title_widget.dart

@@ -15,7 +15,7 @@ class EventTitleWidget extends StatelessWidget {
       style: const TextStyle(
         fontWeight: FontWeight.w500,
         fontSize: EventTitleWidgetStyles.textSize,
-        color: Colors.black
+        color: EventTitleWidgetStyles.textColor
       )
     );
   }

lib/features/email/presentation/widgets/calendar_event/organizer_widget.dart

@@ -1,8 +1,7 @@
 
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:jmap_dart_client/jmap/mail/calendar/properties/calendar_organizer.dart';
-import 'package:tmail_ui_user/features/email/presentation/styles/attendee_widget_styles.dart';
+import 'package:tmail_ui_user/features/email/presentation/styles/organizer_widget_styles.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class OrganizerWidget extends StatelessWidget {
@@ -19,9 +18,9 @@ class OrganizerWidget extends StatelessWidget {
     return RichText(
       text: TextSpan(
         style: const TextStyle(
-          fontSize: AttendeeWidgetStyles.textSize,
+          fontSize: OrganizerWidgetStyles.textSize,
           fontWeight: FontWeight.w500,
-          color: Colors.black
+          color: OrganizerWidgetStyles.textColor
         ),
         children: [
           if (organizer.name?.isNotEmpty == true)
@@ -30,8 +29,8 @@ class OrganizerWidget extends StatelessWidget {
             TextSpan(
               text: ' <${organizer.mailto!.value}> ',
               style: const TextStyle(
-                color: AppColor.colorMailto,
+                color: OrganizerWidgetStyles.mailtoColor,
-                fontSize: AttendeeWidgetStyles.textSize,
+                fontSize: OrganizerWidgetStyles.textSize,
                 fontWeight: FontWeight.w500
               ),
             ),

lib/features/email/presentation/widgets/calendar_event/see_all_attendees_button_widget.dart

@@ -1,5 +1,4 @@
 
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:tmail_ui_user/features/base/widget/material_text_button.dart';
 import 'package:tmail_ui_user/features/email/presentation/styles/see_all_attendees_button_widget_styles.dart';
@@ -28,7 +27,7 @@ class SeeAllAttendeesButtonWidget extends StatelessWidget {
         ),
         customStyle: const TextStyle(
           fontSize: SeeAllAttendeesButtonWidgetStyles.textSize,
-          color: AppColor.colorTextButton
+          color: SeeAllAttendeesButtonWidgetStyles.textColor
         ),
       ),
     );

lib/features/email/presentation/widgets/email_view_loading_bar_widget.dart

@@ -0,0 +1,34 @@
+import 'package:core/presentation/state/failure.dart';
+import 'package:core/presentation/state/success.dart';
+import 'package:dartz/dartz.dart';
+import 'package:flutter/material.dart';
+import 'package:model/email/presentation_email.dart';
+import 'package:tmail_ui_user/features/base/widget/cupertino_loading_widget.dart';
+import 'package:tmail_ui_user/features/email/domain/state/get_email_content_state.dart';
+import 'package:tmail_ui_user/features/email/domain/state/parse_calendar_event_state.dart';
+
+class EmailViewLoadingBarWidget extends StatelessWidget {
+
+  final PresentationEmail selectedEmail;
+  final Either<Failure, Success> viewState;
+
+  const EmailViewLoadingBarWidget({
+    super.key,
+    required this.viewState,
+    required this.selectedEmail
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return viewState.fold(
+      (failure) => const SizedBox.shrink(),
+      (success) {
+        if (success is GetEmailContentLoading || (success is ParseCalendarEventLoading && selectedEmail.hasCalendarEvent)) {
+          return const CupertinoLoadingWidget();
+        } else {
+          return const SizedBox.shrink();
+        }
+      }
+    );
+  }
+}