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

TF-2116 Apply new design composer mobile

Browse Source 
(cherry picked from commit fe4ec144d1a18a94de782f87fff56bbf1cd3a00a)
This commit is contained in:
dab246
2023-09-07 09:53:34 +07:00
committed by Dat H. Pham
parent cbba97279a
commit 3809a05a35
33 changed files with 803 additions and 1002 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/composer/presentation/widgets/mobile/app_bar_composer_widget.dart
+68
View File
@@ -0,0 +1,68 @@
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 AppBarComposerWidget extends StatelessWidget {
final bool isSendButtonEnabled;
final VoidCallback onCloseViewAction;
final VoidCallback sendMessageAction;
final VoidCallback openContextMenuAction;
final _imagePaths = Get.find<ImagePaths>();
AppBarComposerWidget({
super.key,
required this.isSendButtonEnabled,
required this.onCloseViewAction,
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: 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,
),
],
),
);
}
}
lib/features/composer/presentation/widgets/mobile/landscape_app_bar_composer_widget.dart
+72
View File
@@ -0,0 +1,72 @@
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 LandscapeAppBarComposerWidget extends StatelessWidget {
final bool isSendButtonEnabled;
final VoidCallback onCloseViewAction;
final VoidCallback sendMessageAction;
final VoidCallback openContextMenuAction;
final _imagePaths = Get.find<ImagePaths>();
LandscapeAppBarComposerWidget({
super.key,
required this.isSendButtonEnabled,
required this.onCloseViewAction,
required this.sendMessageAction,
required this.openContextMenuAction,
});
@override
Widget build(BuildContext context) {
return Container(
height: MobileAppBarComposerWidgetStyle.height,
color: MobileAppBarComposerWidgetStyle.backgroundColor,
padding: MobileAppBarComposerWidgetStyle.padding,
child: SafeArea(
top: false,
bottom: false,
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: 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,
),
],
),
),
);
}
}
lib/features/composer/presentation/widgets/mobile/mobile_attachment_composer_widget.dart
+86
View File
@@ -0,0 +1,86 @@
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:flutter/material.dart';
import 'package:tmail_ui_user/features/composer/presentation/styles/mobile/mobile_attachment_composer_widget_style.dart';
import 'package:tmail_ui_user/features/composer/presentation/widgets/attachment_item_composer_widget.dart';
import 'package:tmail_ui_user/features/upload/presentation/model/upload_file_state.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
typedef OnShowMoreAttachmentAction = void Function(bool isShowMore);
class MobileAttachmentComposerWidget extends StatefulWidget {
final List<UploadFileState> listFileUploaded;
final bool isShowMore;
final OnDeleteAttachmentAction onDeleteAttachmentAction;
final OnShowMoreAttachmentAction onShowMoreAttachmentAction;
const MobileAttachmentComposerWidget({
super.key,
required this.listFileUploaded,
required this.isShowMore,
required this.onDeleteAttachmentAction,
required this.onShowMoreAttachmentAction,
});
@override
State<MobileAttachmentComposerWidget> createState() => _MobileAttachmentComposerWidgetState();
}
class _MobileAttachmentComposerWidgetState extends State<MobileAttachmentComposerWidget> {
static const int _maxDisplayedItem = 6;
bool _isShowMore = false;
int _currentCountDisplayed = _maxDisplayedItem;
@override
void initState() {
super.initState();
_isShowMore = widget.isShowMore;
if (_isShowMore) {
_currentCountDisplayed = widget.listFileUploaded.length;
} else {
_currentCountDisplayed = widget.listFileUploaded.length > 6
? 6
: widget.listFileUploaded.length;
}
}
@override
Widget build(BuildContext context) {
final displayedFiles = widget.listFileUploaded.sublist(0, _currentCountDisplayed);
return Container(
color: MobileAttachmentComposerWidgetStyle.backgroundColor,
width: double.infinity,
padding: MobileAttachmentComposerWidgetStyle.padding,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(
spacing: MobileAttachmentComposerWidgetStyle.listItemSpace,
runSpacing: MobileAttachmentComposerWidgetStyle.listItemSpace,
children: displayedFiles
.map((file) => AttachmentItemComposerWidget(
fileState: file,
onDeleteAttachmentAction: widget.onDeleteAttachmentAction
))
.toList(),
),
if (!_isShowMore)
TMailButtonWidget.fromText(
text: AppLocalizations.of(context).showMoreAttachment(widget.listFileUploaded.length),
textStyle: MobileAttachmentComposerWidgetStyle.showMoreButtonTextStyle,
margin: MobileAttachmentComposerWidgetStyle.showMoreMargin,
backgroundColor: Colors.transparent,
onTapActionCallback: () {
setState(() => _isShowMore = true);
widget.onShowMoreAttachmentAction(_isShowMore);
},
)
]
),
);
}
}
lib/features/composer/presentation/widgets/mobile/tablet_bottom_bar_composer_widget.dart
+65
View File
@@ -0,0 +1,65 @@
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/tablet_bottom_bar_composer_widget_style.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class TabletBottomBarComposerWidget extends StatelessWidget {
final VoidCallback deleteComposerAction;
final VoidCallback saveToDraftAction;
final VoidCallback sendMessageAction;
final _imagePaths = Get.find<ImagePaths>();
TabletBottomBarComposerWidget({
super.key,
required this.deleteComposerAction,
required this.saveToDraftAction,
required this.sendMessageAction,
});
@override
Widget build(BuildContext context) {
return Container(
padding: TabletBottomBarComposerWidgetStyle.padding,
color: TabletBottomBarComposerWidgetStyle.backgroundColor,
child: Row(
children: [
const Spacer(),
TMailButtonWidget.fromIcon(
icon: _imagePaths.icDeleteMailbox,
borderRadius: TabletBottomBarComposerWidgetStyle.iconRadius,
padding: TabletBottomBarComposerWidgetStyle.iconPadding,
iconSize: TabletBottomBarComposerWidgetStyle.iconSize,
tooltipMessage: AppLocalizations.of(context).delete,
onTapActionCallback: deleteComposerAction,
),
const SizedBox(width: TabletBottomBarComposerWidgetStyle.space),
TMailButtonWidget.fromIcon(
icon: _imagePaths.icSaveToDraft,
borderRadius: TabletBottomBarComposerWidgetStyle.iconRadius,
padding: TabletBottomBarComposerWidgetStyle.iconPadding,
iconSize: TabletBottomBarComposerWidgetStyle.iconSize,
tooltipMessage: AppLocalizations.of(context).save_to_drafts,
onTapActionCallback: saveToDraftAction,
),
const SizedBox(width: TabletBottomBarComposerWidgetStyle.sendButtonSpace),
TMailButtonWidget(
text: AppLocalizations.of(context).send,
icon: _imagePaths.icSend,
iconAlignment: TextDirection.rtl,
padding: TabletBottomBarComposerWidgetStyle.sendButtonPadding,
iconSize: TabletBottomBarComposerWidgetStyle.iconSize,
iconSpace: TabletBottomBarComposerWidgetStyle.sendButtonIconSpace,
textStyle: TabletBottomBarComposerWidgetStyle.sendButtonTextStyle,
backgroundColor: TabletBottomBarComposerWidgetStyle.sendButtonBackgroundColor,
borderRadius: TabletBottomBarComposerWidgetStyle.sendButtonRadius,
onTapActionCallback: sendMessageAction,
)
]
),
);
}
}
lib/features/composer/presentation/widgets/recipient_tag_item_widget.dart
+3 -1
View File
@@ -92,7 +92,9 @@ class RecipientTagItemWidget extends StatelessWidget {
onTapActionCallback: () => onShowFullAction?.call(prefix),
borderRadius: RecipientTagItemWidgetStyle.radius,
textStyle: RecipientTagItemWidgetStyle.labelTextStyle,
padding: RecipientTagItemWidgetStyle.counterPadding,
padding: PlatformInfo.isWeb
? RecipientTagItemWidgetStyle.counterPadding
: RecipientTagItemWidgetStyle.mobileCounterPadding,
backgroundColor: AppColor.colorEmailAddressTag,
)
]
lib/features/composer/presentation/widgets/attachment_composer_widget.dart → lib/features/composer/presentation/widgets/web/attachment_composer_widget.dart
+1 -1
View File
@@ -1,6 +1,6 @@
import 'package:flutter/material.dart';
import 'package:tmail_ui_user/features/composer/presentation/styles/attachment_composer_widget_style.dart';
import 'package:tmail_ui_user/features/composer/presentation/styles/web/attachment_composer_widget_style.dart';
import 'package:tmail_ui_user/features/composer/presentation/widgets/attachment_item_composer_widget.dart';
import 'package:tmail_ui_user/features/composer/presentation/widgets/attachment_header_composer_widget.dart';
import 'package:tmail_ui_user/features/upload/presentation/model/upload_file_state.dart';
lib/features/composer/presentation/widgets/bottom_bar_composer_widget.dart → lib/features/composer/presentation/widgets/web/bottom_bar_composer_widget.dart
+1 -1
View File
@@ -2,7 +2,7 @@ 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/features/composer/presentation/styles/web/bottom_bar_composer_widget_style.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class BottomBarComposerWidget extends StatelessWidget {
lib/features/composer/presentation/widgets/app_bar_composer_widget.dart → lib/features/composer/presentation/widgets/web/desktop_app_bar_composer_widget.dart
+3 -3
View File
@@ -4,11 +4,11 @@ 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/web/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 {
class DesktopAppBarComposerWidget extends StatelessWidget {
final String emailSubject;
final VoidCallback onCloseViewAction;
@@ -18,7 +18,7 @@ class AppBarComposerWidget extends StatelessWidget {
final _imagePaths = Get.find<ImagePaths>();
AppBarComposerWidget({
DesktopAppBarComposerWidget({
super.key,
required this.emailSubject,
required this.onCloseViewAction,
lib/features/composer/presentation/widgets/minimize_composer_widget.dart → lib/features/composer/presentation/widgets/web/minimize_composer_widget.dart
View File
lib/features/composer/presentation/widgets/mobile_app_bar_composer_widget.dart → lib/features/composer/presentation/widgets/web/mobile_responsive_app_bar_composer_widget.dart
+2 -2
View File
@@ -5,7 +5,7 @@ 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 {
class MobileResponsiveAppBarComposerWidget extends StatelessWidget {
final bool isCodeViewEnabled;
final bool isSendButtonEnabled;
@@ -19,7 +19,7 @@ class MobileAppBarComposerWidget extends StatelessWidget {
final _imagePaths = Get.find<ImagePaths>();
MobileAppBarComposerWidget({
MobileResponsiveAppBarComposerWidget({
super.key,
required this.isCodeViewEnabled,
required this.isFormattingOptionsEnabled,
lib/features/composer/presentation/widgets/toolbar_rich_text_builder.dart → lib/features/composer/presentation/widgets/web/toolbar_rich_text_builder.dart
View File
lib/features/composer/presentation/widgets/web_editor_widget.dart → lib/features/composer/presentation/widgets/web/web_editor_widget.dart
+1 -1
View File
@@ -60,7 +60,7 @@ class _WebEditorState extends State<WebEditorWidget> {
@override
Widget build(BuildContext context) {
return HtmlEditor(
key: const Key('composer_editor_web'),
key: const Key('web_editor'),
controller: _editorController,
htmlEditorOptions: HtmlEditorOptions(
shouldEnsureVisible: true,