eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-2116 Create AppBar/BottomBarComposer widget and style

Browse Source 
(cherry picked from commit 8ff3f7ede7b61b9485e793b8c00af54d9bd0e273)
This commit is contained in:
dab246
2023-09-06 11:51:09 +07:00
committed by Dat H. Pham
parent 291c2a6bd2
commit 9b1ac0c104
6 changed files with 419 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/composer/presentation/styles/app_bar_composer_widget_style.dart
+15
View File
@@ -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);
}
lib/features/composer/presentation/styles/bottom_bar_composer_widget_style.dart
+28
View File
@@ -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,
);
}
lib/features/composer/presentation/styles/mobile_app_bar_composer_widget_style.dart
+21
View File
@@ -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);
}
lib/features/composer/presentation/widgets/app_bar_composer_widget.dart
+107
View File
@@ -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<ImagePaths>();
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
),
)
],
),
);
}
}
lib/features/composer/presentation/widgets/bottom_bar_composer_widget.dart
+130
View File
@@ -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<ImagePaths>();
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,
)
]
),
);
}
}
lib/features/composer/presentation/widgets/mobile_app_bar_composer_widget.dart
+118
View File
@@ -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<ImagePaths>();
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,
),
],
),
);
}
}