TF-3410 Update icon color & icon size of composer view

Signed-off-by: dab246 <tdvu@linagora.com>
2025-01-08 21:57:09 +07:00
parent eb3b59542a
commit 352681b60e
18 changed files with 84 additions and 77 deletions
@@ -245,6 +245,9 @@ extension AppColor on Color {
  static const blue700 = Color(0xFF208BFF);
  static const blue100 = Color(0xFFDFEEFF);
  static const blue400 = Color(0xFF80BDFF);
+  static const m3Tertiary = Color(0xFF8C9CAF);
+  static const m3Neutral70 = Color(0xFFAEAAAE);
+  static const colorF3F6F9 = Color(0xFFF3F6F9);

  static const mapGradientColor = [
    [Color(0xFF21D4FD), Color(0xFFB721FF)],
@@ -38,10 +38,22 @@ class HtmlUtils {
      editor.parentNode.replaceChild(newEditor, editor);''',
    name: 'unregisterDropListener');

-  static String customCssStyleHtmlEditor({TextDirection direction = TextDirection.ltr}) {
+  static String customCssStyleHtmlEditor({
+    TextDirection direction = TextDirection.ltr,
+    bool useDefaultFont = false,
+  }) {
    if (PlatformInfo.isWeb) {
      return '''
        <style>
+          ${useDefaultFont ? '''
+            body {
+              font-family: Arial, 'Inter', sans-serif;
+              font-weight: 500;
+              font-size: 16px;
+              line-height: 24px;
+            }
+          ''' : ''}
+        
          .note-editable {
            direction: ${direction.name};
          }
@@ -53,6 +65,15 @@ class HtmlUtils {
      ''';
    } else if (PlatformInfo.isMobile) {
      return '''
+        ${useDefaultFont ? '''
+          body {
+            font-family: Arial, 'Inter', sans-serif;
+            font-weight: 500;
+            font-size: 16px;
+            line-height: 24px;
+          }
+        ''' : ''}
+        
        #editor {
          direction: ${direction.name};
        }
@@ -104,12 +125,14 @@ class HtmlUtils {
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+      ${useDefaultFont ? '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">' : ''}
      <style>
        ${useDefaultFont ? '''
          body {
-            font-family: Arial, 'Inter', sans-serif; /* Fall back to sans-serif if fonts aren't available */
-            font-size: 16pt;
-            line-height: 24pt;
+            font-family: 'Inter', sans-serif;
+            font-weight: 500;
+            font-size: 16px;
+            line-height: 24px;
          }
        ''' : ''}
        .tmail-content {
@@ -331,11 +331,11 @@ class ComposerView extends GetWidget<ComposerController> {
            onTap: () => controller.clearFocus(context),
            child: Column(children: [
              Obx(() => DesktopAppBarComposerWidget(
+                imagePaths: controller.imagePaths,
                emailSubject: controller.subjectEmail.value ?? '',
                displayMode: controller.screenDisplayMode.value,
                onCloseViewAction: () => controller.handleClickCloseComposer(context),
                onChangeDisplayModeAction: controller.displayScreenTypeComposerAction,
-                constraints: constraints,
              )),
              ConstrainedBox(
                constraints: BoxConstraints(
@@ -645,9 +645,9 @@ class ComposerView extends GetWidget<ComposerController> {
            onTap: () => controller.clearFocus(context),
            child: Column(children: [
              Obx(() => DesktopAppBarComposerWidget(
+                imagePaths: controller.imagePaths,
                emailSubject: controller.subjectEmail.value ?? '',
                onCloseViewAction: () => controller.handleClickCloseComposer(context),
-                constraints: constraints,
              )),
              ConstrainedBox(
                constraints: BoxConstraints(
@@ -7,7 +7,7 @@ class AppBarComposerWidgetStyle {
  static const double iconSize = 20;
  static const double space = 8;

-  static const Color backgroundColor = AppColor.colorComposerAppBar;
+  static const Color backgroundColor = AppColor.colorBgDesktop;
  static const Color iconColor = Colors.black;

  static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(horizontal: 24);
@@ -33,13 +33,8 @@ class RecipientComposerWidgetStyle {
    fontSize: 15,
    fontWeight: FontWeight.normal,
    decoration: TextDecoration.underline,
-    decorationColor: AppColor.colorPrefixButtonComposer,
-    color: AppColor.colorPrefixButtonComposer,
-  );
-  static const TextStyle labelTextStyle = TextStyle(
-    fontSize: 14,
-    fontWeight: FontWeight.w400,
-    color: AppColor.colorLabelComposer
+    decorationColor: AppColor.m3Neutral70,
+    color: AppColor.m3Neutral70,
  );
  static const TextStyle inputTextStyle = TextStyle(
    fontSize: 16,
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';

 class RecipientTagItemWidgetStyle {
  static const double radius = 10;
-  static const double avatarIconSize = 24;
+  static const double avatarIconSize = 20;
  static const double avatarLabelFontSize = 12;

  static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(start: 4);
@@ -8,11 +8,6 @@ class SubjectComposerWidgetStyle {
  static const Color cursorColor = AppColor.primaryColor;
  static const Color borderColor = AppColor.colorLineComposer;

-  static const TextStyle labelTextStyle = TextStyle(
-    fontSize: 14,
-    fontWeight: FontWeight.w400,
-    color: AppColor.colorLabelComposer
-  );
  static const TextStyle inputTextStyle = TextStyle(
    color: Colors.black,
    fontSize: 16,
@@ -6,17 +6,17 @@ class BottomBarComposerWidgetStyle {
  static const double iconRadius = 8;
  static const double space = 10;
  static const double sendButtonSpace = 12;
-  static const double iconSize = 20;
-  static const double richTextIconSize = 24;
+  static const double iconSize = 24;
  static const double sendButtonRadius = 8;
  static const double sendButtonIconSpace = 5;
-  static const double height = 60;
+  static const double height = 70;

  static const Color backgroundColor = Colors.white;
  static const Color iconColor = AppColor.steelGrayA540;
  static const Color sendButtonBackgroundColor = AppColor.blue700;
  static const Color selectedIconColor = AppColor.blue700;
  static const Color disabledIconColor = AppColor.colorRichButtonComposer;
+  static const Color selectedBackgroundColor = AppColor.colorSelected;

  static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(horizontal: 32);
  static const EdgeInsetsGeometry iconPadding = EdgeInsetsDirectional.all(5);
@@ -60,12 +60,6 @@ class FromComposerDropDownWidgetStyle {
    height: 72,
    overlayColor: WidgetStateProperty.resolveWith<Color>((Set<WidgetState> states) => Colors.white)
  );
-
-  static const TextStyle prefixTextStyle = TextStyle(
-    fontSize: 14,
-    fontWeight: FontWeight.w400,
-    color: AppColor.colorLabelComposer,
-  );
  static const TextStyle avatarTextStyle = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w600,
@@ -28,7 +28,10 @@ class MobileEditorWidget extends StatelessWidget {
      minHeight: 550,
      addDefaultSelectionMenuItems: false,
      initialContent: content,
-      customStyleCss: HtmlUtils.customCssStyleHtmlEditor(direction: direction),
+      customStyleCss: HtmlUtils.customCssStyleHtmlEditor(
+        direction: direction,
+        useDefaultFont: true,
+      ),
      onCreated: (editorApi) => onCreatedEditorAction.call(context, editorApi, content),
      onCompleted: onLoadCompletedEditorAction,
    );
@@ -147,7 +147,11 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
            child: Text(
              '${widget.prefix.asName(context)}:',
              key: Key('prefix_${widget.prefix.name}_recipient_composer_widget'),
-              style: RecipientComposerWidgetStyle.labelTextStyle
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                fontSize: 16,
+                fontWeight: FontWeight.w500,
+                color: AppColor.m3Tertiary,
+              ),
            ),
          ),
          const SizedBox(width: RecipientComposerWidgetStyle.space),
@@ -147,7 +147,7 @@ class RecipientTagItemWidget extends StatelessWidget {
    if (isLatestTagFocused && isLatestEmail) {
      return AppColor.colorItemRecipientSelected;
    } else if (EmailUtils.isEmailAddressValid(currentEmailAddress.emailAddress)) {
-      return AppColor.colorEmailAddressTag;
+      return AppColor.colorF3F6F9;
    } else {
      return Colors.white;
    }
@@ -1,3 +1,4 @@
+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/views/text/text_field_builder.dart';
 import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
@@ -38,7 +39,11 @@ class SubjectComposerWidget extends StatelessWidget {
        children: [
          Text(
            '${AppLocalizations.of(context).subject_email}:',
-            style: SubjectComposerWidgetStyle.labelTextStyle
+            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+              fontSize: 16,
+              fontWeight: FontWeight.w500,
+              color: AppColor.m3Tertiary,
+            ),
          ),
          const SizedBox(width:SubjectComposerWidgetStyle.space),
          Expanded(
@@ -20,7 +20,6 @@ class TitleComposerWidget extends StatelessWidget {
        ? emailSubject
        : AppLocalizations.of(context).new_message.capitalizeFirstEach,
      maxLines: 1,
-      textAlign: TextAlign.center,
      overflow: CommonTextStyle.defaultTextOverFlow,
      softWrap: CommonTextStyle.defaultSoftWrap,
      style: TitleComposerWidgetStyle.textStyle,
@@ -61,9 +61,9 @@ class BottomBarComposerWidget extends StatelessWidget {
          TMailButtonWidget.fromIcon(
            icon: imagePaths.icRichToolbar,
            borderRadius: BottomBarComposerWidgetStyle.iconRadius,
-            padding: BottomBarComposerWidgetStyle.richTextIconPadding,
+            padding: BottomBarComposerWidgetStyle.iconPadding,
            backgroundColor: Colors.transparent,
-            iconSize: BottomBarComposerWidgetStyle.richTextIconSize,
+            iconSize: BottomBarComposerWidgetStyle.iconSize,
            iconColor: isFormattingOptionsEnabled
              ? BottomBarComposerWidgetStyle.selectedIconColor
              : BottomBarComposerWidgetStyle.iconColor,
@@ -1,7 +1,6 @@
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
-import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/screen_display_mode.dart';
 import 'package:tmail_ui_user/features/composer/presentation/styles/app_bar_composer_widget_style.dart';
 import 'package:tmail_ui_user/features/composer/presentation/widgets/web/minimize_composer_widget.dart';
@@ -10,21 +9,19 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class DesktopAppBarComposerWidget extends StatelessWidget {

+  final ImagePaths imagePaths;
  final String emailSubject;
  final VoidCallback onCloseViewAction;
  final ScreenDisplayMode? displayMode;
  final OnChangeDisplayModeAction? onChangeDisplayModeAction;
-  final BoxConstraints? constraints;

-  final _imagePaths = Get.find<ImagePaths>();
-
-  DesktopAppBarComposerWidget({
+  const DesktopAppBarComposerWidget({
    super.key,
+    required this.imagePaths,
    required this.emailSubject,
    required this.onCloseViewAction,
    this.displayMode,
    this.onChangeDisplayModeAction,
-    this.constraints,
  });

  @override
@@ -33,36 +30,25 @@ class DesktopAppBarComposerWidget extends StatelessWidget {
      height: AppBarComposerWidgetStyle.height,
      padding: AppBarComposerWidgetStyle.padding,
      color: AppBarComposerWidgetStyle.backgroundColor,
-      child: Stack(
+      child: Row(
        children: [
-          Center(
-            child: Container(
-              constraints: constraints != null
-                ? BoxConstraints(maxWidth: constraints!.maxWidth / 2)
-                : null,
-              child: TitleComposerWidget(emailSubject: emailSubject),
-            ),
-          ),
+          Expanded(child: TitleComposerWidget(emailSubject: emailSubject)),
          if (onChangeDisplayModeAction != null)
-            Align(
-              alignment: AlignmentDirectional.centerEnd,
-              child: Row(
-                mainAxisSize: MainAxisSize.min,
-                children: [
+            ... [
                  TMailButtonWidget.fromIcon(
-                    icon: _imagePaths.icMinimize,
+                    icon: imagePaths.icMinimize,
                    backgroundColor: Colors.transparent,
                    tooltipMessage: AppLocalizations.of(context).minimize,
                    iconSize: AppBarComposerWidgetStyle.iconSize,
                    iconColor: AppBarComposerWidgetStyle.iconColor,
                    padding: AppBarComposerWidgetStyle.iconPadding,
-                    onTapActionCallback: () => onChangeDisplayModeAction!(ScreenDisplayMode.minimize)
+                    onTapActionCallback: () => onChangeDisplayModeAction!(ScreenDisplayMode.minimize),
                  ),
                  const SizedBox(width: AppBarComposerWidgetStyle.space),
                  TMailButtonWidget.fromIcon(
                    icon: displayMode == ScreenDisplayMode.fullScreen
-                      ? _imagePaths.icFullScreenExit
-                      : _imagePaths.icFullScreen,
+                      ? imagePaths.icFullScreenExit
+                      : imagePaths.icFullScreen,
                    backgroundColor: Colors.transparent,
                    tooltipMessage: AppLocalizations.of(context).fullscreen,
                    iconSize: AppBarComposerWidgetStyle.iconSize,
@@ -72,33 +58,28 @@ class DesktopAppBarComposerWidget extends StatelessWidget {
                      displayMode == ScreenDisplayMode.fullScreen
                        ? ScreenDisplayMode.normal
                        : ScreenDisplayMode.fullScreen
-                    )
+                    ),
                  ),
                  const SizedBox(width: AppBarComposerWidgetStyle.space),
                  TMailButtonWidget.fromIcon(
-                    icon: _imagePaths.icCancel,
+                    icon: imagePaths.icCancel,
                    backgroundColor: Colors.transparent,
                    tooltipMessage: AppLocalizations.of(context).saveAndClose,
                    iconSize: AppBarComposerWidgetStyle.iconSize,
                    iconColor: AppBarComposerWidgetStyle.iconColor,
                    padding: AppBarComposerWidgetStyle.iconPadding,
-                    onTapActionCallback: onCloseViewAction
+                    onTapActionCallback: onCloseViewAction,
                  ),
                ]
-              ),
-            )
          else
-            Align(
-              alignment: AlignmentDirectional.centerEnd,
-              child: TMailButtonWidget.fromIcon(
-                icon: _imagePaths.icCancel,
-                backgroundColor: Colors.transparent,
-                tooltipMessage: AppLocalizations.of(context).saveAndClose,
-                iconSize: AppBarComposerWidgetStyle.iconSize,
-                iconColor: AppBarComposerWidgetStyle.iconColor,
-                padding: AppBarComposerWidgetStyle.iconPadding,
-                onTapActionCallback: onCloseViewAction
-              ),
+            TMailButtonWidget.fromIcon(
+              icon: imagePaths.icCancel,
+              backgroundColor: Colors.transparent,
+              tooltipMessage: AppLocalizations.of(context).saveAndClose,
+              iconSize: AppBarComposerWidgetStyle.iconSize,
+              iconColor: AppBarComposerWidgetStyle.iconColor,
+              padding: AppBarComposerWidgetStyle.iconPadding,
+              onTapActionCallback: onCloseViewAction,
            )
        ],
      ),
@@ -55,7 +55,11 @@ class FromComposerDropDownWidget extends StatelessWidget {
            padding: FromComposerDropDownWidgetStyle.prefixPadding,
            child: Text(
              '${PrefixEmailAddress.from.asName(context)}:',
-              style: FromComposerDropDownWidgetStyle.prefixTextStyle,
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                fontSize: 16,
+                fontWeight: FontWeight.w500,
+                color: AppColor.m3Tertiary,
+              ),
            ),
          ),
          const SizedBox(width: FromComposerDropDownWidgetStyle.space),
@@ -33,6 +33,7 @@
  <link rel="manifest" href="manifest.json">
  <link rel="stylesheet" type="text/css" href="splash/style.css">
  <link rel="stylesheet" type="text/css" href="worker_service/style.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

  <script type="application/javascript" src="assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer></script>