TF-2532 Add attachment/inlineImage button at app bar composer on mobile/tablet

This commit is contained in:
dab246
2024-02-02 16:21:00 +07:00
committed by Dat H. Pham
parent 885a386068
commit 800241cef0
4 changed files with 164 additions and 2 deletions
@@ -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<ComposerController> {
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<ComposerController> {
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<ComposerController> {
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(
@@ -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<ImagePaths>();
@@ -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
@@ -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<ImagePaths>();
@@ -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
@@ -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<ImagePaths>();
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
),
],
),
)
],
),
);
}
}