diff --git a/lib/features/composer/presentation/styles/app_bar_composer_widget_style.dart b/lib/features/composer/presentation/styles/app_bar_composer_widget_style.dart new file mode 100644 index 000000000..6569eb606 --- /dev/null +++ b/lib/features/composer/presentation/styles/app_bar_composer_widget_style.dart @@ -0,0 +1,15 @@ + +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:flutter/material.dart'; + +class AppBarComposerWidgetStyle { + static const double height = 52; + static const double iconSize = 20; + static const double space = 8; + + static const Color backgroundColor = AppColor.colorComposerAppBar; + static const Color iconColor = Colors.black; + + static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(horizontal: 24); + static const EdgeInsetsGeometry iconPadding = EdgeInsetsDirectional.all(3); +} \ No newline at end of file diff --git a/lib/features/composer/presentation/styles/bottom_bar_composer_widget_style.dart b/lib/features/composer/presentation/styles/bottom_bar_composer_widget_style.dart new file mode 100644 index 000000000..bb3401beb --- /dev/null +++ b/lib/features/composer/presentation/styles/bottom_bar_composer_widget_style.dart @@ -0,0 +1,28 @@ + +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:flutter/material.dart'; + +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 sendButtonRadius = 8; + static const double sendButtonIconSpace = 5; + + static const Color iconColor = AppColor.colorRichButtonComposer; + static const Color sendButtonBackgroundColor = AppColor.primaryColor; + static const Color selectedBackgroundColor = AppColor.colorSelected; + static const Color selectedIconColor = AppColor.primaryColor; + + static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(horizontal: 32, vertical: 12); + static const EdgeInsetsGeometry iconPadding = EdgeInsetsDirectional.all(5); + static const EdgeInsetsGeometry sendButtonPadding = EdgeInsetsDirectional.symmetric(vertical: 8, horizontal: 24); + static const EdgeInsetsGeometry richTextIconPadding = EdgeInsetsDirectional.all(2); + static const TextStyle sendButtonTextStyle = TextStyle( + fontWeight: FontWeight.w500, + fontSize: 15, + color: Colors.white, + ); +} \ No newline at end of file diff --git a/lib/features/composer/presentation/styles/mobile_app_bar_composer_widget_style.dart b/lib/features/composer/presentation/styles/mobile_app_bar_composer_widget_style.dart new file mode 100644 index 000000000..949625050 --- /dev/null +++ b/lib/features/composer/presentation/styles/mobile_app_bar_composer_widget_style.dart @@ -0,0 +1,21 @@ + +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:flutter/material.dart'; + +class MobileAppBarComposerWidgetStyle { + static const double height = 56; + static const double iconSize = 24; + static const double space = 12; + static const double iconRadius = 8; + static const double sendButtonIconSize = 28; + static const double richTextIconSize = 28; + + static const Color backgroundColor = AppColor.colorComposerAppBar; + static const Color iconColor = AppColor.colorMobileRichButtonComposer; + static const Color selectedBackgroundColor = AppColor.colorSelected; + static const Color selectedIconColor = AppColor.primaryColor; + + static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(horizontal: 12); + static const EdgeInsetsGeometry iconPadding = EdgeInsetsDirectional.all(3); + static const EdgeInsetsGeometry richTextIconPadding = EdgeInsetsDirectional.all(2); +} \ No newline at end of file diff --git a/lib/features/composer/presentation/widgets/app_bar_composer_widget.dart b/lib/features/composer/presentation/widgets/app_bar_composer_widget.dart new file mode 100644 index 000000000..c71bcf978 --- /dev/null +++ b/lib/features/composer/presentation/widgets/app_bar_composer_widget.dart @@ -0,0 +1,107 @@ +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/minimize_composer_widget.dart'; +import 'package:tmail_ui_user/features/composer/presentation/widgets/title_composer_widget.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class AppBarComposerWidget extends StatelessWidget { + + final String emailSubject; + final VoidCallback onCloseViewAction; + final ScreenDisplayMode? displayMode; + final OnChangeDisplayModeAction? onChangeDisplayModeAction; + final BoxConstraints? constraints; + + final _imagePaths = Get.find(); + + AppBarComposerWidget({ + super.key, + required this.emailSubject, + required this.onCloseViewAction, + this.displayMode, + this.onChangeDisplayModeAction, + this.constraints, + }); + + @override + Widget build(BuildContext context) { + return Container( + height: AppBarComposerWidgetStyle.height, + padding: AppBarComposerWidgetStyle.padding, + color: AppBarComposerWidgetStyle.backgroundColor, + child: Stack( + children: [ + Center( + child: Container( + constraints: constraints != null + ? BoxConstraints(maxWidth: constraints!.maxWidth / 2) + : null, + child: TitleComposerWidget(emailSubject: emailSubject), + ), + ), + if (onChangeDisplayModeAction != null) + Align( + alignment: AlignmentDirectional.centerEnd, + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + TMailButtonWidget.fromIcon( + icon: _imagePaths.icMinimize, + backgroundColor: Colors.transparent, + tooltipMessage: AppLocalizations.of(context).minimize, + iconSize: AppBarComposerWidgetStyle.iconSize, + iconColor: AppBarComposerWidgetStyle.iconColor, + padding: AppBarComposerWidgetStyle.iconPadding, + onTapActionCallback: () => onChangeDisplayModeAction!(ScreenDisplayMode.minimize) + ), + const SizedBox(width: AppBarComposerWidgetStyle.space), + TMailButtonWidget.fromIcon( + icon: displayMode == ScreenDisplayMode.fullScreen + ? _imagePaths.icFullScreenExit + : _imagePaths.icFullScreen, + backgroundColor: Colors.transparent, + tooltipMessage: AppLocalizations.of(context).fullscreen, + iconSize: AppBarComposerWidgetStyle.iconSize, + iconColor: AppBarComposerWidgetStyle.iconColor, + padding: AppBarComposerWidgetStyle.iconPadding, + onTapActionCallback: () => onChangeDisplayModeAction!( + displayMode == ScreenDisplayMode.fullScreen + ? ScreenDisplayMode.normal + : ScreenDisplayMode.fullScreen + ) + ), + const SizedBox(width: AppBarComposerWidgetStyle.space), + TMailButtonWidget.fromIcon( + icon: _imagePaths.icCancel, + backgroundColor: Colors.transparent, + tooltipMessage: AppLocalizations.of(context).saveAndClose, + iconSize: AppBarComposerWidgetStyle.iconSize, + iconColor: AppBarComposerWidgetStyle.iconColor, + padding: AppBarComposerWidgetStyle.iconPadding, + 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 + ), + ) + ], + ), + ); + } +} \ No newline at end of file diff --git a/lib/features/composer/presentation/widgets/bottom_bar_composer_widget.dart b/lib/features/composer/presentation/widgets/bottom_bar_composer_widget.dart new file mode 100644 index 000000000..61c2a3306 --- /dev/null +++ b/lib/features/composer/presentation/widgets/bottom_bar_composer_widget.dart @@ -0,0 +1,130 @@ +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/styles/bottom_bar_composer_widget_style.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class BottomBarComposerWidget extends StatelessWidget { + + final bool isCodeViewEnabled; + final bool isFormattingOptionsEnabled; + final VoidCallback openRichToolbarAction; + final VoidCallback attachFileAction; + final VoidCallback insertImageAction; + final VoidCallback showCodeViewAction; + final VoidCallback deleteComposerAction; + final VoidCallback saveToDraftAction; + final VoidCallback sendMessageAction; + + final _imagePaths = Get.find(); + + BottomBarComposerWidget({ + super.key, + required this.isCodeViewEnabled, + required this.isFormattingOptionsEnabled, + required this.openRichToolbarAction, + required this.attachFileAction, + required this.insertImageAction, + required this.showCodeViewAction, + required this.deleteComposerAction, + required this.saveToDraftAction, + required this.sendMessageAction, + }); + + @override + Widget build(BuildContext context) { + return Container( + padding: BottomBarComposerWidgetStyle.padding, + child: Row( + children: [ + TMailButtonWidget.fromIcon( + icon: _imagePaths.icRichToolbar, + borderRadius: BottomBarComposerWidgetStyle.iconRadius, + padding: BottomBarComposerWidgetStyle.richTextIconPadding, + backgroundColor: isFormattingOptionsEnabled + ? BottomBarComposerWidgetStyle.selectedBackgroundColor + : Colors.transparent, + iconSize: BottomBarComposerWidgetStyle.richTextIconSize, + iconColor: isFormattingOptionsEnabled + ? BottomBarComposerWidgetStyle.selectedIconColor + : BottomBarComposerWidgetStyle.iconColor, + tooltipMessage: AppLocalizations.of(context).formattingOptions, + onTapActionCallback: openRichToolbarAction, + ), + const SizedBox(width: BottomBarComposerWidgetStyle.space), + TMailButtonWidget.fromIcon( + icon: _imagePaths.icAttachFile, + iconColor: BottomBarComposerWidgetStyle.iconColor, + borderRadius: BottomBarComposerWidgetStyle.iconRadius, + backgroundColor: Colors.transparent, + padding: BottomBarComposerWidgetStyle.iconPadding, + iconSize: BottomBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).attach_file, + onTapActionCallback: attachFileAction, + ), + const SizedBox(width: BottomBarComposerWidgetStyle.space), + AbsorbPointer( + absorbing: isCodeViewEnabled, + child: TMailButtonWidget.fromIcon( + icon: _imagePaths.icInsertImage, + iconColor: BottomBarComposerWidgetStyle.iconColor, + borderRadius: BottomBarComposerWidgetStyle.iconRadius, + backgroundColor: Colors.transparent, + padding: BottomBarComposerWidgetStyle.iconPadding, + iconSize: BottomBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).insertImage, + onTapActionCallback: insertImageAction, + ), + ), + const SizedBox(width: BottomBarComposerWidgetStyle.space), + TMailButtonWidget.fromIcon( + icon: _imagePaths.icStyleCodeView, + iconColor: isCodeViewEnabled + ? BottomBarComposerWidgetStyle.selectedIconColor + : BottomBarComposerWidgetStyle.iconColor, + borderRadius: BottomBarComposerWidgetStyle.iconRadius, + backgroundColor: isCodeViewEnabled + ? BottomBarComposerWidgetStyle.selectedBackgroundColor + : Colors.transparent, + padding: BottomBarComposerWidgetStyle.iconPadding, + iconSize: BottomBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).embedCode, + onTapActionCallback: showCodeViewAction, + ), + const Spacer(), + TMailButtonWidget.fromIcon( + icon: _imagePaths.icDeleteMailbox, + borderRadius: BottomBarComposerWidgetStyle.iconRadius, + padding: BottomBarComposerWidgetStyle.iconPadding, + iconSize: BottomBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).delete, + onTapActionCallback: deleteComposerAction, + ), + const SizedBox(width: BottomBarComposerWidgetStyle.space), + TMailButtonWidget.fromIcon( + icon: _imagePaths.icSaveToDraft, + borderRadius: BottomBarComposerWidgetStyle.iconRadius, + padding: BottomBarComposerWidgetStyle.iconPadding, + iconSize: BottomBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).save_to_drafts, + onTapActionCallback: saveToDraftAction, + ), + const SizedBox(width: BottomBarComposerWidgetStyle.sendButtonSpace), + TMailButtonWidget( + text: AppLocalizations.of(context).send, + icon: _imagePaths.icSend, + iconAlignment: TextDirection.rtl, + padding: BottomBarComposerWidgetStyle.sendButtonPadding, + iconSize: BottomBarComposerWidgetStyle.iconSize, + iconSpace: BottomBarComposerWidgetStyle.sendButtonIconSpace, + textStyle: BottomBarComposerWidgetStyle.sendButtonTextStyle, + backgroundColor: BottomBarComposerWidgetStyle.sendButtonBackgroundColor, + borderRadius: BottomBarComposerWidgetStyle.sendButtonRadius, + onTapActionCallback: sendMessageAction, + ) + ] + ), + ); + } +} \ No newline at end of file diff --git a/lib/features/composer/presentation/widgets/mobile_app_bar_composer_widget.dart b/lib/features/composer/presentation/widgets/mobile_app_bar_composer_widget.dart new file mode 100644 index 000000000..af2054b16 --- /dev/null +++ b/lib/features/composer/presentation/widgets/mobile_app_bar_composer_widget.dart @@ -0,0 +1,118 @@ +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/styles/mobile_app_bar_composer_widget_style.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class MobileAppBarComposerWidget extends StatelessWidget { + + final bool isCodeViewEnabled; + final bool isSendButtonEnabled; + final bool isFormattingOptionsEnabled; + final VoidCallback onCloseViewAction; + final VoidCallback attachFileAction; + final VoidCallback insertImageAction; + final VoidCallback sendMessageAction; + final VoidCallback openContextMenuAction; + final VoidCallback openRichToolbarAction; + + final _imagePaths = Get.find(); + + MobileAppBarComposerWidget({ + super.key, + required this.isCodeViewEnabled, + required this.isFormattingOptionsEnabled, + required this.isSendButtonEnabled, + required this.openRichToolbarAction, + required this.onCloseViewAction, + required this.attachFileAction, + required this.insertImageAction, + required this.sendMessageAction, + required this.openContextMenuAction, + }); + + @override + Widget build(BuildContext context) { + return Container( + height: MobileAppBarComposerWidgetStyle.height, + color: MobileAppBarComposerWidgetStyle.backgroundColor, + padding: MobileAppBarComposerWidgetStyle.padding, + child: Row( + children: [ + TMailButtonWidget.fromIcon( + icon: _imagePaths.icCancel, + backgroundColor: Colors.transparent, + tooltipMessage: AppLocalizations.of(context).saveAndClose, + iconSize: MobileAppBarComposerWidgetStyle.iconSize, + iconColor: MobileAppBarComposerWidgetStyle.iconColor, + padding: MobileAppBarComposerWidgetStyle.iconPadding, + onTapActionCallback: onCloseViewAction + ), + const Spacer(), + TMailButtonWidget.fromIcon( + icon: _imagePaths.icRichToolbar, + borderRadius: MobileAppBarComposerWidgetStyle.iconRadius, + padding: MobileAppBarComposerWidgetStyle.richTextIconPadding, + backgroundColor: isFormattingOptionsEnabled + ? MobileAppBarComposerWidgetStyle.selectedBackgroundColor + : Colors.transparent, + iconSize: MobileAppBarComposerWidgetStyle.richTextIconSize, + iconColor: isFormattingOptionsEnabled + ? MobileAppBarComposerWidgetStyle.selectedIconColor + : MobileAppBarComposerWidgetStyle.iconColor, + tooltipMessage: AppLocalizations.of(context).formattingOptions, + onTapActionCallback: openRichToolbarAction, + ), + const SizedBox(width: MobileAppBarComposerWidgetStyle.space), + TMailButtonWidget.fromIcon( + icon: _imagePaths.icAttachFile, + iconColor: MobileAppBarComposerWidgetStyle.iconColor, + borderRadius: MobileAppBarComposerWidgetStyle.iconRadius, + backgroundColor: Colors.transparent, + padding: MobileAppBarComposerWidgetStyle.iconPadding, + iconSize: MobileAppBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).attach_file, + onTapActionCallback: attachFileAction, + ), + const SizedBox(width: MobileAppBarComposerWidgetStyle.space), + AbsorbPointer( + absorbing: isCodeViewEnabled, + child: TMailButtonWidget.fromIcon( + icon: _imagePaths.icInsertImage, + iconColor: MobileAppBarComposerWidgetStyle.iconColor, + borderRadius: MobileAppBarComposerWidgetStyle.iconRadius, + backgroundColor: Colors.transparent, + padding: MobileAppBarComposerWidgetStyle.iconPadding, + iconSize: MobileAppBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).insertImage, + onTapActionCallback: insertImageAction, + ), + ), + const SizedBox(width: MobileAppBarComposerWidgetStyle.space), + TMailButtonWidget.fromIcon( + icon: isSendButtonEnabled + ? _imagePaths.icSendMobile + : _imagePaths.icSendDisable, + backgroundColor: Colors.transparent, + padding: MobileAppBarComposerWidgetStyle.iconPadding, + iconSize: MobileAppBarComposerWidgetStyle.sendButtonIconSize, + tooltipMessage: AppLocalizations.of(context).send, + onTapActionCallback: sendMessageAction, + ), + const SizedBox(width: MobileAppBarComposerWidgetStyle.space), + TMailButtonWidget.fromIcon( + icon: _imagePaths.icMore, + iconColor: MobileAppBarComposerWidgetStyle.iconColor, + borderRadius: MobileAppBarComposerWidgetStyle.iconRadius, + backgroundColor: Colors.transparent, + padding: MobileAppBarComposerWidgetStyle.iconPadding, + iconSize: MobileAppBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).more, + onTapActionCallback: openContextMenuAction, + ), + ], + ), + ); + } +} \ No newline at end of file