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
+47 -31
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,12 +146,14 @@ 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) {
log('ComposerView::build:mobile:constraints: $constraints');
return Stack(
children: [ children: [
Padding( Padding(
padding: ComposerStyle.mobileEditorPadding, padding: ComposerStyle.mobileEditorPadding,
child: WebEditorView( child: Obx(() => WebEditorView(
editorController: controller.richTextWebController.editorController, editorController: controller.richTextWebController.editorController,
arguments: controller.composerArguments.value, arguments: controller.composerArguments.value,
contentViewState: controller.emailContentsViewState.value, contentViewState: controller.emailContentsViewState.value,
@@ -169,20 +172,23 @@ class ComposerView extends GetWidget<ComposerController> {
fileUpload: fileUpload, fileUpload: fileUpload,
base64Str: base64Str, base64Str: base64Str,
); );
} },
width: constraints.maxWidth,
height: constraints.maxHeight,
)),
), ),
), Align(
Obx(() => Align(
alignment: AlignmentDirectional.topCenter, alignment: AlignmentDirectional.topCenter,
child: InsertImageLoadingBarWidget( child: Obx(() => 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,14 +327,16 @@ class ComposerView extends GetWidget<ComposerController> {
), ),
color: ComposerStyle.backgroundEditorColor color: ComposerStyle.backgroundEditorColor
), ),
child: Stack( child: LayoutBuilder(builder: (context, constraints) {
log('ComposerView::build:desktop:constraints: $constraints');
return Stack(
children: [ children: [
Column( Column(
children: [ children: [
Obx(() => Expanded( Expanded(
child: Padding( child: Padding(
padding: ComposerStyle.desktopEditorPadding, padding: ComposerStyle.desktopEditorPadding,
child: WebEditorView( child: Obx(() => WebEditorView(
editorController: controller.richTextWebController.editorController, editorController: controller.richTextWebController.editorController,
arguments: controller.composerArguments.value, arguments: controller.composerArguments.value,
contentViewState: controller.emailContentsViewState.value, contentViewState: controller.emailContentsViewState.value,
@@ -347,10 +355,12 @@ class ComposerView extends GetWidget<ComposerController> {
fileUpload: fileUpload, fileUpload: fileUpload,
base64Str: base64Str, base64Str: base64Str,
); );
} },
), width: constraints.maxWidth,
), height: constraints.maxHeight,
)), )),
),
),
Obx(() { Obx(() {
if (controller.uploadController.listUploadAttachments.isNotEmpty) { if (controller.uploadController.listUploadAttachments.isNotEmpty) {
return AttachmentComposerWidget( return AttachmentComposerWidget(
@@ -379,17 +389,18 @@ class ComposerView extends GetWidget<ComposerController> {
}) })
], ],
), ),
Obx(() => Align( Align(
alignment: AlignmentDirectional.topCenter, alignment: AlignmentDirectional.topCenter,
child: InsertImageLoadingBarWidget( child: Obx(() => 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(() => BottomBarComposerWidget( Obx(() => BottomBarComposerWidget(
isCodeViewEnabled: controller.richTextWebController.codeViewEnabled, isCodeViewEnabled: controller.richTextWebController.codeViewEnabled,
@@ -523,14 +534,16 @@ class ComposerView extends GetWidget<ComposerController> {
), ),
color: ComposerStyle.backgroundEditorColor color: ComposerStyle.backgroundEditorColor
), ),
child: Stack( child: LayoutBuilder(builder: (context, constraints) {
log('ComposerView::build:tablet:constraints: $constraints');
return Stack(
children: [ children: [
Column( Column(
children: [ children: [
Obx(() => Expanded( Expanded(
child: Padding( child: Padding(
padding: ComposerStyle.tabletEditorPadding, padding: ComposerStyle.tabletEditorPadding,
child: WebEditorView( child: Obx(() => WebEditorView(
editorController: controller.richTextWebController.editorController, editorController: controller.richTextWebController.editorController,
arguments: controller.composerArguments.value, arguments: controller.composerArguments.value,
contentViewState: controller.emailContentsViewState.value, contentViewState: controller.emailContentsViewState.value,
@@ -549,10 +562,12 @@ class ComposerView extends GetWidget<ComposerController> {
fileUpload: fileUpload, fileUpload: fileUpload,
base64Str: base64Str, base64Str: base64Str,
); );
} },
), width: constraints.maxWidth,
), height: constraints.maxHeight,
)), )),
),
),
Obx(() { Obx(() {
if (controller.uploadController.listUploadAttachments.isNotEmpty) { if (controller.uploadController.listUploadAttachments.isNotEmpty) {
return AttachmentComposerWidget( return AttachmentComposerWidget(
@@ -581,17 +596,18 @@ class ComposerView extends GetWidget<ComposerController> {
}) })
], ],
), ),
Obx(() => Align( Align(
alignment: AlignmentDirectional.topCenter, alignment: AlignmentDirectional.topCenter,
child: InsertImageLoadingBarWidget( child: Obx(() => 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(() => 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,