From 800241cef0ba9b58834c5b62f9bb1ffbbd7274c0 Mon Sep 17 00:00:00 2001 From: dab246 Date: Fri, 2 Feb 2024 16:21:00 +0700 Subject: [PATCH] TF-2532 Add `attachment/inlineImage` button at app bar composer on mobile/tablet --- .../composer/presentation/composer_view.dart | 22 ++++- .../mobile/app_bar_composer_widget.dart | 27 ++++++ .../landscape_app_bar_composer_widget.dart | 27 ++++++ .../tablet_app_bar_composer_widget.dart | 90 +++++++++++++++++++ 4 files changed, 164 insertions(+), 2 deletions(-) create mode 100644 lib/features/composer/presentation/widgets/mobile/tablet_app_bar_composer_widget.dart diff --git a/lib/features/composer/presentation/composer_view.dart b/lib/features/composer/presentation/composer_view.dart index 18743df6e..fd7318e3c 100644 --- a/lib/features/composer/presentation/composer_view.dart +++ b/lib/features/composer/presentation/composer_view.dart @@ -19,10 +19,10 @@ import 'package:tmail_ui_user/features/composer/presentation/widgets/mobile/app_ import 'package:tmail_ui_user/features/composer/presentation/widgets/mobile/from_composer_mobile_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/mobile/landscape_app_bar_composer_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/mobile/mobile_attachment_composer_widget.dart'; +import 'package:tmail_ui_user/features/composer/presentation/widgets/mobile/tablet_app_bar_composer_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/mobile/tablet_bottom_bar_composer_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/recipient_composer_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/subject_composer_widget.dart'; -import 'package:tmail_ui_user/features/composer/presentation/widgets/web/desktop_app_bar_composer_widget.dart'; import 'package:tmail_ui_user/features/composer/presentation/widgets/web/from_composer_drop_down_widget.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; import 'package:tmail_ui_user/main/routes/route_navigation.dart'; @@ -69,6 +69,12 @@ class ComposerView extends GetWidget { radius: ComposerStyle.popupMenuRadius ); }, + isNetworkConnectionAvailable: controller.isNetworkConnectionAvailable, + attachFileAction: () => controller.openPickAttachmentMenu( + context, + _pickAttachmentsActionTiles(context) + ), + insertImageAction: () => controller.insertImage(context, constraints.maxWidth), )) else Obx(() => AppBarComposerWidget( @@ -83,6 +89,12 @@ class ComposerView extends GetWidget { radius: ComposerStyle.popupMenuRadius ); }, + isNetworkConnectionAvailable: controller.isNetworkConnectionAvailable, + attachFileAction: () => controller.openPickAttachmentMenu( + context, + _pickAttachmentsActionTiles(context) + ), + insertImageAction: () => controller.insertImage(context, constraints.maxWidth), )), Expanded( child: SafeArea( @@ -244,10 +256,16 @@ class ComposerView extends GetWidget { color: ComposerStyle.mobileBackgroundColor, child: Column( children: [ - Obx(() => DesktopAppBarComposerWidget( + Obx(() => TabletAppBarComposerWidget( emailSubject: controller.subjectEmail.value ?? '', onCloseViewAction: () => controller.handleClickCloseComposer(context), constraints: constraints, + isNetworkConnectionAvailable: controller.isNetworkConnectionAvailable, + attachFileAction: () => controller.openPickAttachmentMenu( + context, + _pickAttachmentsActionTiles(context) + ), + insertImageAction: () => controller.insertImage(context, constraints.maxWidth), )), Expanded( child: SingleChildScrollView( 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 index 2d174c4a0..86e2c3903 100644 --- a/lib/features/composer/presentation/widgets/mobile/app_bar_composer_widget.dart +++ b/lib/features/composer/presentation/widgets/mobile/app_bar_composer_widget.dart @@ -9,8 +9,11 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; class AppBarComposerWidget extends StatelessWidget { final bool isSendButtonEnabled; + final bool isNetworkConnectionAvailable; final VoidCallback onCloseViewAction; final VoidCallback sendMessageAction; + final VoidCallback attachFileAction; + final VoidCallback insertImageAction; final OnOpenContextMenuAction openContextMenuAction; final _imagePaths = Get.find(); @@ -21,6 +24,9 @@ class AppBarComposerWidget extends StatelessWidget { required this.onCloseViewAction, required this.sendMessageAction, required this.openContextMenuAction, + required this.attachFileAction, + required this.insertImageAction, + this.isNetworkConnectionAvailable = false, }); @override @@ -41,6 +47,27 @@ class AppBarComposerWidget extends StatelessWidget { onTapActionCallback: onCloseViewAction ), const Spacer(), + if (isNetworkConnectionAvailable) + ...[ + TMailButtonWidget.fromIcon( + icon: _imagePaths.icAttachFile, + iconColor: MobileAppBarComposerWidgetStyle.iconColor, + backgroundColor: Colors.transparent, + iconSize: MobileAppBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).attach_file, + onTapActionCallback: attachFileAction, + ), + const SizedBox(width: 8), + TMailButtonWidget.fromIcon( + icon: _imagePaths.icInsertImage, + iconColor: MobileAppBarComposerWidgetStyle.iconColor, + backgroundColor: Colors.transparent, + iconSize: MobileAppBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).insertImage, + onTapActionCallback: insertImageAction, + ), + const SizedBox(width: 8), + ], TMailButtonWidget.fromIcon( icon: isSendButtonEnabled ? _imagePaths.icSendMobile diff --git a/lib/features/composer/presentation/widgets/mobile/landscape_app_bar_composer_widget.dart b/lib/features/composer/presentation/widgets/mobile/landscape_app_bar_composer_widget.dart index 67e266f39..07603d9b1 100644 --- a/lib/features/composer/presentation/widgets/mobile/landscape_app_bar_composer_widget.dart +++ b/lib/features/composer/presentation/widgets/mobile/landscape_app_bar_composer_widget.dart @@ -9,8 +9,11 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; class LandscapeAppBarComposerWidget extends StatelessWidget { final bool isSendButtonEnabled; + final bool isNetworkConnectionAvailable; final VoidCallback onCloseViewAction; final VoidCallback sendMessageAction; + final VoidCallback attachFileAction; + final VoidCallback insertImageAction; final OnOpenContextMenuAction openContextMenuAction; final _imagePaths = Get.find(); @@ -21,6 +24,9 @@ class LandscapeAppBarComposerWidget extends StatelessWidget { required this.onCloseViewAction, required this.sendMessageAction, required this.openContextMenuAction, + required this.attachFileAction, + required this.insertImageAction, + this.isNetworkConnectionAvailable = false, }); @override @@ -44,6 +50,27 @@ class LandscapeAppBarComposerWidget extends StatelessWidget { onTapActionCallback: onCloseViewAction ), const Spacer(), + if (isNetworkConnectionAvailable) + ...[ + TMailButtonWidget.fromIcon( + icon: _imagePaths.icAttachFile, + iconColor: MobileAppBarComposerWidgetStyle.iconColor, + backgroundColor: Colors.transparent, + iconSize: MobileAppBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).attach_file, + onTapActionCallback: attachFileAction, + ), + const SizedBox(width: 8), + TMailButtonWidget.fromIcon( + icon: _imagePaths.icInsertImage, + iconColor: MobileAppBarComposerWidgetStyle.iconColor, + backgroundColor: Colors.transparent, + iconSize: MobileAppBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).insertImage, + onTapActionCallback: insertImageAction, + ), + const SizedBox(width: 8), + ], TMailButtonWidget.fromIcon( icon: isSendButtonEnabled ? _imagePaths.icSendMobile diff --git a/lib/features/composer/presentation/widgets/mobile/tablet_app_bar_composer_widget.dart b/lib/features/composer/presentation/widgets/mobile/tablet_app_bar_composer_widget.dart new file mode 100644 index 000000000..09686971c --- /dev/null +++ b/lib/features/composer/presentation/widgets/mobile/tablet_app_bar_composer_widget.dart @@ -0,0 +1,90 @@ +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/title_composer_widget.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +class TabletAppBarComposerWidget extends StatelessWidget { + + final String emailSubject; + final VoidCallback onCloseViewAction; + final ScreenDisplayMode? displayMode; + final BoxConstraints? constraints; + final VoidCallback attachFileAction; + final VoidCallback insertImageAction; + final bool isNetworkConnectionAvailable; + + final _imagePaths = Get.find(); + + TabletAppBarComposerWidget({ + super.key, + required this.emailSubject, + required this.onCloseViewAction, + required this.attachFileAction, + required this.insertImageAction, + this.displayMode, + this.constraints, + this.isNetworkConnectionAvailable = false, + }); + + @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), + ), + ), + Align( + alignment: AlignmentDirectional.centerEnd, + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + if (isNetworkConnectionAvailable) + ...[ + TMailButtonWidget.fromIcon( + icon: _imagePaths.icAttachFile, + iconColor: AppBarComposerWidgetStyle.iconColor, + backgroundColor: Colors.transparent, + iconSize: AppBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).attach_file, + onTapActionCallback: attachFileAction, + ), + const SizedBox(width: AppBarComposerWidgetStyle.space), + TMailButtonWidget.fromIcon( + icon: _imagePaths.icInsertImage, + iconColor: AppBarComposerWidgetStyle.iconColor, + backgroundColor: Colors.transparent, + iconSize: AppBarComposerWidgetStyle.iconSize, + tooltipMessage: AppLocalizations.of(context).insertImage, + onTapActionCallback: insertImageAction, + ), + const SizedBox(width: AppBarComposerWidgetStyle.space), + ], + TMailButtonWidget.fromIcon( + icon: _imagePaths.icCancel, + backgroundColor: Colors.transparent, + tooltipMessage: AppLocalizations.of(context).saveAndClose, + iconSize: AppBarComposerWidgetStyle.iconSize, + iconColor: AppBarComposerWidgetStyle.iconColor, + onTapActionCallback: onCloseViewAction + ), + ], + ), + ) + ], + ), + ); + } +} \ No newline at end of file