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

TF-2118 Set width/height for drop zone view

Browse Source 
(cherry picked from commit f4d844b636750f413f0b65fab78d5f00e6a8d424)
This commit is contained in:
dab246
2023-09-28 16:05:39 +07:00
committed by Dat H. Pham
parent 8b20e9e1d4
commit 89e8a4aaa4
3 changed files with 223 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/composer/presentation/composer_view_web.dart
+184 -168
View File
@@ -1,6 +1,7 @@
import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart'; import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/views/responsive/responsive_widget.dart'; import 'package:core/presentation/views/responsive/responsive_widget.dart';
import 'package:core/utils/app_logger.dart';
import 'package:file_picker/file_picker.dart'; import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
@@ -145,44 +146,49 @@ class ComposerView extends GetWidget<ComposerController> {
padding: ComposerStyle.mobileSubjectPadding, padding: ComposerStyle.mobileSubjectPadding,
margin: ComposerStyle.mobileSubjectMargin, margin: ComposerStyle.mobileSubjectMargin,
), ),
Obx(() => Expanded( Expanded(
child: Stack( child: LayoutBuilder(builder: (context, constraints) {
children: [ log('ComposerView::build:mobile:constraints: $constraints');
Padding( return Stack(
padding: ComposerStyle.mobileEditorPadding, children: [
child: WebEditorView( Padding(
editorController: controller.richTextWebController.editorController, padding: ComposerStyle.mobileEditorPadding,
arguments: controller.composerArguments.value, child: Obx(() => WebEditorView(
contentViewState: controller.emailContentsViewState.value, editorController: controller.richTextWebController.editorController,
currentWebContent: controller.textEditorWeb, arguments: controller.composerArguments.value,
onInitial: controller.handleInitHtmlEditorWeb, contentViewState: controller.emailContentsViewState.value,
onChangeContent: controller.onChangeTextEditorWeb, currentWebContent: controller.textEditorWeb,
onFocus: controller.handleOnFocusHtmlEditorWeb, onInitial: controller.handleInitHtmlEditorWeb,
onUnFocus: controller.handleOnUnFocusHtmlEditorWeb, onChangeContent: controller.onChangeTextEditorWeb,
onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, onFocus: controller.handleOnFocusHtmlEditorWeb,
onEditorSettings: controller.richTextWebController.onEditorSettingsChange, onUnFocus: controller.handleOnUnFocusHtmlEditorWeb,
onImageUploadSuccessAction: (fileUpload) => controller.handleImageUploadSuccess(context, fileUpload), onMouseDown: controller.handleOnMouseDownHtmlEditorWeb,
onImageUploadFailureAction: (fileUpload, base64Str, uploadError) { onEditorSettings: controller.richTextWebController.onEditorSettingsChange,
return controller.handleImageUploadFailure( onImageUploadSuccessAction: (fileUpload) => controller.handleImageUploadSuccess(context, fileUpload),
context: context, onImageUploadFailureAction: (fileUpload, base64Str, uploadError) {
uploadError: uploadError, return controller.handleImageUploadFailure(
fileUpload: fileUpload, context: context,
base64Str: base64Str, uploadError: uploadError,
); fileUpload: fileUpload,
} base64Str: base64Str,
);
},
width: constraints.maxWidth,
height: constraints.maxHeight,
)),
), ),
), Align(
Obx(() => Align( alignment: AlignmentDirectional.topCenter,
alignment: AlignmentDirectional.topCenter, child: Obx(() => InsertImageLoadingBarWidget(
child: InsertImageLoadingBarWidget( uploadInlineViewState: controller.uploadController.uploadInlineViewState.value,
uploadInlineViewState: controller.uploadController.uploadInlineViewState.value, viewState: controller.viewState.value,
viewState: controller.viewState.value, padding: ComposerStyle.insertImageLoadingBarPadding,
padding: ComposerStyle.insertImageLoadingBarPadding, )),
), ),
)), ],
], );
), }),
)), ),
Obx(() { Obx(() {
if (controller.uploadController.listUploadAttachments.isNotEmpty) { if (controller.uploadController.listUploadAttachments.isNotEmpty) {
return AttachmentComposerWidget( return AttachmentComposerWidget(
@@ -321,75 +327,80 @@ class ComposerView extends GetWidget<ComposerController> {
), ),
color: ComposerStyle.backgroundEditorColor color: ComposerStyle.backgroundEditorColor
), ),
child: Stack( child: LayoutBuilder(builder: (context, constraints) {
children: [ log('ComposerView::build:desktop:constraints: $constraints');
Column( return Stack(
children: [ children: [
Obx(() => Expanded( Column(
child: Padding( children: [
padding: ComposerStyle.desktopEditorPadding, Expanded(
child: WebEditorView( child: Padding(
editorController: controller.richTextWebController.editorController, padding: ComposerStyle.desktopEditorPadding,
arguments: controller.composerArguments.value, child: Obx(() => WebEditorView(
contentViewState: controller.emailContentsViewState.value, editorController: controller.richTextWebController.editorController,
currentWebContent: controller.textEditorWeb, arguments: controller.composerArguments.value,
onInitial: controller.handleInitHtmlEditorWeb, contentViewState: controller.emailContentsViewState.value,
onChangeContent: controller.onChangeTextEditorWeb, currentWebContent: controller.textEditorWeb,
onFocus: controller.handleOnFocusHtmlEditorWeb, onInitial: controller.handleInitHtmlEditorWeb,
onUnFocus: controller.handleOnUnFocusHtmlEditorWeb, onChangeContent: controller.onChangeTextEditorWeb,
onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, onFocus: controller.handleOnFocusHtmlEditorWeb,
onEditorSettings: controller.richTextWebController.onEditorSettingsChange, onUnFocus: controller.handleOnUnFocusHtmlEditorWeb,
onImageUploadSuccessAction: (fileUpload) => controller.handleImageUploadSuccess(context, fileUpload), onMouseDown: controller.handleOnMouseDownHtmlEditorWeb,
onImageUploadFailureAction: (fileUpload, base64Str, uploadError) { onEditorSettings: controller.richTextWebController.onEditorSettingsChange,
return controller.handleImageUploadFailure( onImageUploadSuccessAction: (fileUpload) => controller.handleImageUploadSuccess(context, fileUpload),
context: context, onImageUploadFailureAction: (fileUpload, base64Str, uploadError) {
uploadError: uploadError, return controller.handleImageUploadFailure(
fileUpload: fileUpload, context: context,
base64Str: base64Str, uploadError: uploadError,
); fileUpload: fileUpload,
} base64Str: base64Str,
);
},
width: constraints.maxWidth,
height: constraints.maxHeight,
)),
), ),
), ),
)), Obx(() {
Obx(() { if (controller.uploadController.listUploadAttachments.isNotEmpty) {
if (controller.uploadController.listUploadAttachments.isNotEmpty) { return AttachmentComposerWidget(
return AttachmentComposerWidget( listFileUploaded: controller.uploadController.listUploadAttachments,
listFileUploaded: controller.uploadController.listUploadAttachments, isCollapsed: controller.isAttachmentCollapsed,
isCollapsed: controller.isAttachmentCollapsed, onDeleteAttachmentAction: (fileState) => controller.deleteAttachmentUploaded(fileState.uploadTaskId),
onDeleteAttachmentAction: (fileState) => controller.deleteAttachmentUploaded(fileState.uploadTaskId), onToggleExpandAttachmentAction: (isCollapsed) => controller.isAttachmentCollapsed = isCollapsed,
onToggleExpandAttachmentAction: (isCollapsed) => controller.isAttachmentCollapsed = isCollapsed, );
); } else {
} else { return const SizedBox.shrink();
return const SizedBox.shrink(); }
} }),
}), Obx(() {
Obx(() { if (controller.richTextWebController.isFormattingOptionsEnabled) {
if (controller.richTextWebController.isFormattingOptionsEnabled) { return ToolbarRichTextWebBuilder(
return ToolbarRichTextWebBuilder( richTextWebController: controller.richTextWebController,
richTextWebController: controller.richTextWebController, padding: ComposerStyle.richToolbarPadding,
padding: ComposerStyle.richToolbarPadding, decoration: const BoxDecoration(
decoration: const BoxDecoration( color: ComposerStyle.richToolbarColor,
color: ComposerStyle.richToolbarColor, boxShadow: ComposerStyle.richToolbarShadow
boxShadow: ComposerStyle.richToolbarShadow ),
), );
); } else {
} else { return const SizedBox.shrink();
return const SizedBox.shrink(); }
} })
}) ],
],
),
Obx(() => Align(
alignment: AlignmentDirectional.topCenter,
child: InsertImageLoadingBarWidget(
uploadInlineViewState: controller.uploadController.uploadInlineViewState.value,
viewState: controller.viewState.value,
padding: ComposerStyle.insertImageLoadingBarPadding,
), ),
)), Align(
], alignment: AlignmentDirectional.topCenter,
), child: Obx(() => InsertImageLoadingBarWidget(
) uploadInlineViewState: controller.uploadController.uploadInlineViewState.value,
viewState: controller.viewState.value,
padding: ComposerStyle.insertImageLoadingBarPadding,
)),
),
],
);
}),
),
), ),
Obx(() => BottomBarComposerWidget( Obx(() => BottomBarComposerWidget(
isCodeViewEnabled: controller.richTextWebController.codeViewEnabled, isCodeViewEnabled: controller.richTextWebController.codeViewEnabled,
@@ -523,75 +534,80 @@ class ComposerView extends GetWidget<ComposerController> {
), ),
color: ComposerStyle.backgroundEditorColor color: ComposerStyle.backgroundEditorColor
), ),
child: Stack( child: LayoutBuilder(builder: (context, constraints) {
children: [ log('ComposerView::build:tablet:constraints: $constraints');
Column( return Stack(
children: [ children: [
Obx(() => Expanded( Column(
child: Padding( children: [
padding: ComposerStyle.tabletEditorPadding, Expanded(
child: WebEditorView( child: Padding(
editorController: controller.richTextWebController.editorController, padding: ComposerStyle.tabletEditorPadding,
arguments: controller.composerArguments.value, child: Obx(() => WebEditorView(
contentViewState: controller.emailContentsViewState.value, editorController: controller.richTextWebController.editorController,
currentWebContent: controller.textEditorWeb, arguments: controller.composerArguments.value,
onInitial: controller.handleInitHtmlEditorWeb, contentViewState: controller.emailContentsViewState.value,
onChangeContent: controller.onChangeTextEditorWeb, currentWebContent: controller.textEditorWeb,
onFocus: controller.handleOnFocusHtmlEditorWeb, onInitial: controller.handleInitHtmlEditorWeb,
onUnFocus: controller.handleOnUnFocusHtmlEditorWeb, onChangeContent: controller.onChangeTextEditorWeb,
onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, onFocus: controller.handleOnFocusHtmlEditorWeb,
onEditorSettings: controller.richTextWebController.onEditorSettingsChange, onUnFocus: controller.handleOnUnFocusHtmlEditorWeb,
onImageUploadSuccessAction: (fileUpload) => controller.handleImageUploadSuccess(context, fileUpload), onMouseDown: controller.handleOnMouseDownHtmlEditorWeb,
onImageUploadFailureAction: (fileUpload, base64Str, uploadError) { onEditorSettings: controller.richTextWebController.onEditorSettingsChange,
return controller.handleImageUploadFailure( onImageUploadSuccessAction: (fileUpload) => controller.handleImageUploadSuccess(context, fileUpload),
context: context, onImageUploadFailureAction: (fileUpload, base64Str, uploadError) {
uploadError: uploadError, return controller.handleImageUploadFailure(
fileUpload: fileUpload, context: context,
base64Str: base64Str, uploadError: uploadError,
); fileUpload: fileUpload,
} base64Str: base64Str,
);
},
width: constraints.maxWidth,
height: constraints.maxHeight,
)),
), ),
), ),
)), Obx(() {
Obx(() { if (controller.uploadController.listUploadAttachments.isNotEmpty) {
if (controller.uploadController.listUploadAttachments.isNotEmpty) { return AttachmentComposerWidget(
return AttachmentComposerWidget( listFileUploaded: controller.uploadController.listUploadAttachments,
listFileUploaded: controller.uploadController.listUploadAttachments, isCollapsed: controller.isAttachmentCollapsed,
isCollapsed: controller.isAttachmentCollapsed, onDeleteAttachmentAction: (fileState) => controller.deleteAttachmentUploaded(fileState.uploadTaskId),
onDeleteAttachmentAction: (fileState) => controller.deleteAttachmentUploaded(fileState.uploadTaskId), onToggleExpandAttachmentAction: (isCollapsed) => controller.isAttachmentCollapsed = isCollapsed,
onToggleExpandAttachmentAction: (isCollapsed) => controller.isAttachmentCollapsed = isCollapsed, );
); } else {
} else { return const SizedBox.shrink();
return const SizedBox.shrink(); }
} }),
}), Obx(() {
Obx(() { if (controller.richTextWebController.isFormattingOptionsEnabled) {
if (controller.richTextWebController.isFormattingOptionsEnabled) { return ToolbarRichTextWebBuilder(
return ToolbarRichTextWebBuilder( richTextWebController: controller.richTextWebController,
richTextWebController: controller.richTextWebController, padding: ComposerStyle.richToolbarPadding,
padding: ComposerStyle.richToolbarPadding, decoration: const BoxDecoration(
decoration: const BoxDecoration( color: ComposerStyle.richToolbarColor,
color: ComposerStyle.richToolbarColor, boxShadow: ComposerStyle.richToolbarShadow
boxShadow: ComposerStyle.richToolbarShadow ),
), );
); } else {
} else { return const SizedBox.shrink();
return const SizedBox.shrink(); }
} })
}) ],
],
),
Obx(() => Align(
alignment: AlignmentDirectional.topCenter,
child: InsertImageLoadingBarWidget(
uploadInlineViewState: controller.uploadController.uploadInlineViewState.value,
viewState: controller.viewState.value,
padding: ComposerStyle.insertImageLoadingBarPadding,
), ),
)), Align(
], alignment: AlignmentDirectional.topCenter,
), child: Obx(() => InsertImageLoadingBarWidget(
) uploadInlineViewState: controller.uploadController.uploadInlineViewState.value,
viewState: controller.viewState.value,
padding: ComposerStyle.insertImageLoadingBarPadding,
)),
),
],
);
}),
),
), ),
Obx(() => BottomBarComposerWidget( Obx(() => BottomBarComposerWidget(
isCodeViewEnabled: controller.richTextWebController.codeViewEnabled, isCodeViewEnabled: controller.richTextWebController.codeViewEnabled,
lib/features/composer/presentation/view/web/web_editor_view.dart
+16
View File
@@ -28,6 +28,8 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
final OnEditorSettingsChange? onEditorSettings; final OnEditorSettingsChange? onEditorSettings;
final OnImageUploadSuccessAction? onImageUploadSuccessAction; final OnImageUploadSuccessAction? onImageUploadSuccessAction;
final OnImageUploadFailureAction? onImageUploadFailureAction; final OnImageUploadFailureAction? onImageUploadFailureAction;
final double? width;
final double? height;
const WebEditorView({ const WebEditorView({
super.key, super.key,
@@ -43,6 +45,8 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
this.onEditorSettings, this.onEditorSettings,
this.onImageUploadSuccessAction, this.onImageUploadSuccessAction,
this.onImageUploadFailureAction, this.onImageUploadFailureAction,
this.width,
this.height,
}); });
@override @override
@@ -67,6 +71,8 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
onEditorSettings: onEditorSettings, onEditorSettings: onEditorSettings,
onImageUploadSuccessAction: onImageUploadSuccessAction, onImageUploadSuccessAction: onImageUploadSuccessAction,
onImageUploadFailureAction: onImageUploadFailureAction, onImageUploadFailureAction: onImageUploadFailureAction,
width: width,
height: height,
); );
case EmailActionType.editDraft: case EmailActionType.editDraft:
case EmailActionType.editSendingEmail: case EmailActionType.editSendingEmail:
@@ -88,6 +94,8 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
onEditorSettings: onEditorSettings, onEditorSettings: onEditorSettings,
onImageUploadSuccessAction: onImageUploadSuccessAction, onImageUploadSuccessAction: onImageUploadSuccessAction,
onImageUploadFailureAction: onImageUploadFailureAction, onImageUploadFailureAction: onImageUploadFailureAction,
width: width,
height: height,
), ),
(success) { (success) {
if (success is GetEmailContentLoading) { if (success is GetEmailContentLoading) {
@@ -111,6 +119,8 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
onEditorSettings: onEditorSettings, onEditorSettings: onEditorSettings,
onImageUploadSuccessAction: onImageUploadSuccessAction, onImageUploadSuccessAction: onImageUploadSuccessAction,
onImageUploadFailureAction: onImageUploadFailureAction, onImageUploadFailureAction: onImageUploadFailureAction,
width: width,
height: height,
); );
} }
} }
@@ -141,6 +151,8 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
onEditorSettings: onEditorSettings, onEditorSettings: onEditorSettings,
onImageUploadSuccessAction: onImageUploadSuccessAction, onImageUploadSuccessAction: onImageUploadSuccessAction,
onImageUploadFailureAction: onImageUploadFailureAction, onImageUploadFailureAction: onImageUploadFailureAction,
width: width,
height: height,
); );
}, },
(success) { (success) {
@@ -167,6 +179,8 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
onEditorSettings: onEditorSettings, onEditorSettings: onEditorSettings,
onImageUploadSuccessAction: onImageUploadSuccessAction, onImageUploadSuccessAction: onImageUploadSuccessAction,
onImageUploadFailureAction: onImageUploadFailureAction, onImageUploadFailureAction: onImageUploadFailureAction,
width: width,
height: height,
); );
} }
} }
@@ -184,6 +198,8 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
onEditorSettings: onEditorSettings, onEditorSettings: onEditorSettings,
onImageUploadSuccessAction: onImageUploadSuccessAction, onImageUploadSuccessAction: onImageUploadSuccessAction,
onImageUploadFailureAction: onImageUploadFailureAction, onImageUploadFailureAction: onImageUploadFailureAction,
width: width,
height: height,
); );
} }
} }
lib/features/composer/presentation/widgets/web/web_editor_widget.dart
+23 -3
View File
@@ -24,6 +24,8 @@ class WebEditorWidget extends StatefulWidget {
final OnEditorSettingsChange? onEditorSettings; final OnEditorSettingsChange? onEditorSettings;
final OnImageUploadSuccessAction? onImageUploadSuccessAction; final OnImageUploadSuccessAction? onImageUploadSuccessAction;
final OnImageUploadFailureAction? onImageUploadFailureAction; final OnImageUploadFailureAction? onImageUploadFailureAction;
final double? width;
final double? height;
const WebEditorWidget({ const WebEditorWidget({
super.key, super.key,
@@ -38,6 +40,8 @@ class WebEditorWidget extends StatefulWidget {
this.onEditorSettings, this.onEditorSettings,
this.onImageUploadSuccessAction, this.onImageUploadSuccessAction,
this.onImageUploadFailureAction, this.onImageUploadFailureAction,
this.width,
this.height,
}); });
@override @override
@@ -46,12 +50,24 @@ class WebEditorWidget extends StatefulWidget {
class _WebEditorState extends State<WebEditorWidget> { class _WebEditorState extends State<WebEditorWidget> {
static const double _offsetHeight = 50;
static const double _offsetWidth = 90;
late HtmlEditorController _editorController; late HtmlEditorController _editorController;
double? dropZoneWidth;
double? dropZoneHeight;
@override @override
void initState() { void initState() {
_editorController = widget.editorController;
super.initState(); super.initState();
_editorController = widget.editorController;
if (widget.height != null) {
dropZoneHeight = widget.height! - _offsetHeight;
}
if (widget.width != null) {
dropZoneWidth = widget.width! - _offsetWidth;
}
log('_WebEditorState::initState:dropZoneWidth: $dropZoneWidth | dropZoneHeight: $dropZoneHeight');
} }
@override @override
@@ -77,9 +93,13 @@ class _WebEditorState extends State<WebEditorWidget> {
), ),
htmlToolbarOptions: const HtmlToolbarOptions( htmlToolbarOptions: const HtmlToolbarOptions(
toolbarType: ToolbarType.hide, toolbarType: ToolbarType.hide,
defaultToolbarButtons: [] defaultToolbarButtons: [],
),
otherOptions: OtherOptions(
height: 550,
dropZoneWidth: dropZoneWidth,
dropZoneHeight: dropZoneHeight,
), ),
otherOptions: const OtherOptions(height: 550),
callbacks: Callbacks( callbacks: Callbacks(
onBeforeCommand: widget.onChangeContent, onBeforeCommand: widget.onChangeContent,
onChangeContent: widget.onChangeContent, onChangeContent: widget.onChangeContent,