From 3337a608bea1406571465d72c2ad3b41dfe82c9d Mon Sep 17 00:00:00 2001 From: dab246 Date: Thu, 17 Apr 2025 09:45:14 +0700 Subject: [PATCH] TF-3627 Remove right padding editor scroll bar in composer Signed-off-by: dab246 --- core/lib/presentation/utils/theme_utils.dart | 4 +- core/lib/utils/html/html_template.dart | 15 +- core/lib/utils/html/html_utils.dart | 19 ++ .../base/widget/scrollbar_list_view.dart | 1 + .../presentation/composer_view_web.dart | 178 +++++++++--------- .../presentation/styles/composer_style.dart | 4 +- .../view/web/web_editor_view.dart | 8 + .../widgets/web/web_editor_widget.dart | 7 +- pubspec.lock | 4 +- pubspec.yaml | 2 +- 10 files changed, 135 insertions(+), 107 deletions(-) diff --git a/core/lib/presentation/utils/theme_utils.dart b/core/lib/presentation/utils/theme_utils.dart index 14b5e0b00..35cedf10e 100644 --- a/core/lib/presentation/utils/theme_utils.dart +++ b/core/lib/presentation/utils/theme_utils.dart @@ -16,8 +16,8 @@ class ThemeUtils { dividerTheme: _dividerTheme, visualDensity: VisualDensity.adaptivePlatformDensity, scrollbarTheme: ScrollbarThemeData( - thickness: WidgetStateProperty.all(8.0), - radius: const Radius.circular(8.0), + thickness: WidgetStateProperty.all(6.0), + radius: const Radius.circular(10.0), thumbColor: WidgetStateProperty.all(AppColor.thumbScrollbarColor)), ); } diff --git a/core/lib/utils/html/html_template.dart b/core/lib/utils/html/html_template.dart index e0a5ad7e2..bbf05502b 100644 --- a/core/lib/utils/html/html_template.dart +++ b/core/lib/utils/html/html_template.dart @@ -221,29 +221,30 @@ class HtmlTemplate { static const String customInternalStyleCSS = ''' '''; } else if (PlatformInfo.isMobile) { diff --git a/lib/features/base/widget/scrollbar_list_view.dart b/lib/features/base/widget/scrollbar_list_view.dart index d27788fbb..df6f1a803 100644 --- a/lib/features/base/widget/scrollbar_list_view.dart +++ b/lib/features/base/widget/scrollbar_list_view.dart @@ -17,6 +17,7 @@ class ScrollbarListView extends StatelessWidget { @override Widget build(BuildContext context) { return RawScrollbar( + thickness: 6, thumbColor: AppColor.thumbScrollbarColor, radius: const Radius.circular(10.0), trackRadius: const Radius.circular(10.0), diff --git a/lib/features/composer/presentation/composer_view_web.dart b/lib/features/composer/presentation/composer_view_web.dart index 726292564..277f37da2 100644 --- a/lib/features/composer/presentation/composer_view_web.dart +++ b/lib/features/composer/presentation/composer_view_web.dart @@ -213,38 +213,36 @@ class ComposerView extends GetWidget { Column( children: [ Expanded( - child: Padding( - padding: ComposerStyle.mobileEditorPadding, - child: Obx(() => WebEditorView( - key: controller.responsiveContainerKey, - editorController: controller.richTextWebController!.editorController, - arguments: controller.composerArguments.value, - contentViewState: controller.emailContentsViewState.value, - currentWebContent: controller.textEditorWeb, - onInitial: controller.handleInitHtmlEditorWeb, - onChangeContent: controller.onChangeTextEditorWeb, - onFocus: controller.handleOnFocusHtmlEditorWeb, - onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, - onEditorSettings: controller.richTextWebController!.onEditorSettingsChange, - onEditorTextSizeChanged: controller.richTextWebController!.onEditorTextSizeChanged, - height: constraints.maxHeight, - onDragEnter: controller.handleOnDragEnterHtmlEditorWeb, - onDragOver: controller.handleOnDragOverHtmlEditorWeb, - onPasteImageSuccessAction: (listFileUpload) => controller.handleOnPasteImageSuccessAction( + child: Obx(() => WebEditorView( + key: controller.responsiveContainerKey, + editorController: controller.richTextWebController!.editorController, + arguments: controller.composerArguments.value, + contentViewState: controller.emailContentsViewState.value, + currentWebContent: controller.textEditorWeb, + onInitial: controller.handleInitHtmlEditorWeb, + onChangeContent: controller.onChangeTextEditorWeb, + onFocus: controller.handleOnFocusHtmlEditorWeb, + onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, + onEditorSettings: controller.richTextWebController!.onEditorSettingsChange, + onEditorTextSizeChanged: controller.richTextWebController!.onEditorTextSizeChanged, + height: constraints.maxHeight, + horizontalPadding: ComposerStyle.mobileEditorHorizontalPadding, + onDragEnter: controller.handleOnDragEnterHtmlEditorWeb, + onDragOver: controller.handleOnDragOverHtmlEditorWeb, + onPasteImageSuccessAction: (listFileUpload) => controller.handleOnPasteImageSuccessAction( + context: context, + maxWidth: constraintsEditor.maxWidth, + listFileUpload: listFileUpload + ), + onPasteImageFailureAction: (listFileUpload, base64, uploadError) => + controller.handleOnPasteImageFailureAction( context: context, - maxWidth: constraintsEditor.maxWidth, - listFileUpload: listFileUpload + listFileUpload: listFileUpload, + base64: base64, + uploadError: uploadError ), - onPasteImageFailureAction: (listFileUpload, base64, uploadError) => - controller.handleOnPasteImageFailureAction( - context: context, - listFileUpload: listFileUpload, - base64: base64, - uploadError: uploadError - ), - onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb, - )), - ), + onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb, + )), ), Obx(() { if (controller.uploadController.listUploadAttachments.isNotEmpty) { @@ -497,40 +495,38 @@ class ComposerView extends GetWidget { child: Column( children: [ Expanded( - child: Padding( - padding: ComposerStyle.desktopEditorPadding, - child: Obx(() { - return WebEditorView( - key: controller.responsiveContainerKey, - editorController: controller.richTextWebController!.editorController, - arguments: controller.composerArguments.value, - contentViewState: controller.emailContentsViewState.value, - currentWebContent: controller.textEditorWeb, - onInitial: controller.handleInitHtmlEditorWeb, - onChangeContent: controller.onChangeTextEditorWeb, - onFocus: controller.handleOnFocusHtmlEditorWeb, - onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, - onEditorSettings: controller.richTextWebController?.onEditorSettingsChange, - onEditorTextSizeChanged: controller.richTextWebController?.onEditorTextSizeChanged, - height: constraints.maxHeight, - onDragEnter: controller.handleOnDragEnterHtmlEditorWeb, - onDragOver: controller.handleOnDragOverHtmlEditorWeb, - onPasteImageSuccessAction: (listFileUpload) => controller.handleOnPasteImageSuccessAction( + child: Obx(() { + return WebEditorView( + key: controller.responsiveContainerKey, + editorController: controller.richTextWebController!.editorController, + arguments: controller.composerArguments.value, + contentViewState: controller.emailContentsViewState.value, + currentWebContent: controller.textEditorWeb, + onInitial: controller.handleInitHtmlEditorWeb, + onChangeContent: controller.onChangeTextEditorWeb, + onFocus: controller.handleOnFocusHtmlEditorWeb, + onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, + onEditorSettings: controller.richTextWebController?.onEditorSettingsChange, + onEditorTextSizeChanged: controller.richTextWebController?.onEditorTextSizeChanged, + height: constraints.maxHeight, + horizontalPadding: ComposerStyle.desktopEditorHorizontalPadding, + onDragEnter: controller.handleOnDragEnterHtmlEditorWeb, + onDragOver: controller.handleOnDragOverHtmlEditorWeb, + onPasteImageSuccessAction: (listFileUpload) => controller.handleOnPasteImageSuccessAction( + context: context, + maxWidth: constraintsEditor.maxWidth, + listFileUpload: listFileUpload + ), + onPasteImageFailureAction: (listFileUpload, base64, uploadError) => + controller.handleOnPasteImageFailureAction( context: context, - maxWidth: constraintsEditor.maxWidth, - listFileUpload: listFileUpload + listFileUpload: listFileUpload, + base64: base64, + uploadError: uploadError ), - onPasteImageFailureAction: (listFileUpload, base64, uploadError) => - controller.handleOnPasteImageFailureAction( - context: context, - listFileUpload: listFileUpload, - base64: base64, - uploadError: uploadError - ), - onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb, - ); - }), - ), + onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb, + ); + }), ), Obx(() { if (controller.uploadController.listUploadAttachments.isNotEmpty) { @@ -810,38 +806,36 @@ class ComposerView extends GetWidget { child: Column( children: [ Expanded( - child: Padding( - padding: ComposerStyle.tabletEditorPadding, - child: Obx(() => WebEditorView( - key: controller.responsiveContainerKey, - editorController: controller.richTextWebController!.editorController, - arguments: controller.composerArguments.value, - contentViewState: controller.emailContentsViewState.value, - currentWebContent: controller.textEditorWeb, - onInitial: controller.handleInitHtmlEditorWeb, - onChangeContent: controller.onChangeTextEditorWeb, - onFocus: controller.handleOnFocusHtmlEditorWeb, - onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, - onEditorSettings: controller.richTextWebController!.onEditorSettingsChange, - onEditorTextSizeChanged: controller.richTextWebController!.onEditorTextSizeChanged, - height: constraints.maxHeight, - onDragEnter: controller.handleOnDragEnterHtmlEditorWeb, - onDragOver: controller.handleOnDragOverHtmlEditorWeb, - onPasteImageSuccessAction: (listFileUpload) => controller.handleOnPasteImageSuccessAction( + child: Obx(() => WebEditorView( + key: controller.responsiveContainerKey, + editorController: controller.richTextWebController!.editorController, + arguments: controller.composerArguments.value, + contentViewState: controller.emailContentsViewState.value, + currentWebContent: controller.textEditorWeb, + onInitial: controller.handleInitHtmlEditorWeb, + onChangeContent: controller.onChangeTextEditorWeb, + onFocus: controller.handleOnFocusHtmlEditorWeb, + onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, + onEditorSettings: controller.richTextWebController!.onEditorSettingsChange, + onEditorTextSizeChanged: controller.richTextWebController!.onEditorTextSizeChanged, + height: constraints.maxHeight, + horizontalPadding: ComposerStyle.desktopEditorHorizontalPadding, + onDragEnter: controller.handleOnDragEnterHtmlEditorWeb, + onDragOver: controller.handleOnDragOverHtmlEditorWeb, + onPasteImageSuccessAction: (listFileUpload) => controller.handleOnPasteImageSuccessAction( + context: context, + maxWidth: constraintsBody.maxWidth, + listFileUpload: listFileUpload + ), + onPasteImageFailureAction: (listFileUpload, base64, uploadError) => + controller.handleOnPasteImageFailureAction( context: context, - maxWidth: constraintsBody.maxWidth, - listFileUpload: listFileUpload + listFileUpload: listFileUpload, + base64: base64, + uploadError: uploadError ), - onPasteImageFailureAction: (listFileUpload, base64, uploadError) => - controller.handleOnPasteImageFailureAction( - context: context, - listFileUpload: listFileUpload, - base64: base64, - uploadError: uploadError - ), - onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb, - )), - ), + onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb, + )), ), Obx(() { if (controller.uploadController.listUploadAttachments.isNotEmpty) { diff --git a/lib/features/composer/presentation/styles/composer_style.dart b/lib/features/composer/presentation/styles/composer_style.dart index 715e02a83..ec119fa5b 100644 --- a/lib/features/composer/presentation/styles/composer_style.dart +++ b/lib/features/composer/presentation/styles/composer_style.dart @@ -17,6 +17,8 @@ class ComposerStyle { static const double composerExpandMoreButtonMaxHeight = 52; static const double padding = 16; static const double space = 8; + static const double desktopEditorHorizontalPadding = 25; + static const double mobileEditorHorizontalPadding = 16; static const Color borderColor = AppColor.colorLineComposer; static const Color backgroundEditorColor = Colors.white; @@ -29,12 +31,10 @@ class ComposerStyle { static const EdgeInsetsGeometry desktopRecipientMargin = EdgeInsetsDirectional.only(start: 24); static const EdgeInsetsGeometry desktopSubjectMargin = EdgeInsetsDirectional.only(start: 24); static const EdgeInsetsGeometry desktopSubjectPadding = EdgeInsetsDirectional.only(end: 24); - static const EdgeInsetsGeometry desktopEditorPadding = EdgeInsetsDirectional.symmetric(horizontal: 20); static const EdgeInsetsGeometry tabletRecipientPadding = EdgeInsetsDirectional.only(end: 24); static const EdgeInsetsGeometry tabletRecipientMargin = EdgeInsetsDirectional.only(start: 24); static const EdgeInsetsGeometry tabletSubjectMargin = EdgeInsetsDirectional.only(start: 24); static const EdgeInsetsGeometry tabletSubjectPadding = EdgeInsetsDirectional.only(end: 24); - static const EdgeInsetsGeometry tabletEditorPadding = EdgeInsetsDirectional.symmetric(horizontal: 20); static const EdgeInsetsGeometry mobileRecipientPadding = EdgeInsetsDirectional.only(end: 16); static const EdgeInsetsGeometry mobileRecipientMargin = EdgeInsetsDirectional.only(start: 16); static const EdgeInsetsGeometry mobileSubjectMargin = EdgeInsetsDirectional.only(start: 16); diff --git a/lib/features/composer/presentation/view/web/web_editor_view.dart b/lib/features/composer/presentation/view/web/web_editor_view.dart index 68be4c95d..97ef69b95 100644 --- a/lib/features/composer/presentation/view/web/web_editor_view.dart +++ b/lib/features/composer/presentation/view/web/web_editor_view.dart @@ -28,6 +28,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin { final OnEditorSettingsChange? onEditorSettings; final OnEditorTextSizeChanged? onEditorTextSizeChanged; final double? height; + final double? horizontalPadding; final OnDragEnterListener? onDragEnter; final OnDragOverListener? onDragOver; final OnPasteImageSuccessAction? onPasteImageSuccessAction; @@ -48,6 +49,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin { this.onEditorSettings, this.onEditorTextSizeChanged, this.height, + this.horizontalPadding, this.onDragEnter, this.onDragOver, this.onPasteImageSuccessAction, @@ -77,6 +79,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin { onEditorSettings: onEditorSettings, onEditorTextSizeChanged: onEditorTextSizeChanged, height: height, + horizontalPadding: horizontalPadding, onDragEnter: onDragEnter, onDragOver: onDragOver, onPasteImageSuccessAction: onPasteImageSuccessAction, @@ -106,6 +109,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin { onEditorSettings: onEditorSettings, onEditorTextSizeChanged: onEditorTextSizeChanged, height: height, + horizontalPadding: horizontalPadding, onDragEnter: onDragEnter, onDragOver: onDragOver, onPasteImageSuccessAction: onPasteImageSuccessAction, @@ -137,6 +141,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin { onEditorSettings: onEditorSettings, onEditorTextSizeChanged: onEditorTextSizeChanged, height: height, + horizontalPadding: horizontalPadding, onDragEnter: onDragEnter, onDragOver: onDragOver, onPasteImageSuccessAction: onPasteImageSuccessAction, @@ -174,6 +179,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin { onEditorSettings: onEditorSettings, onEditorTextSizeChanged: onEditorTextSizeChanged, height: height, + horizontalPadding: horizontalPadding, onDragEnter: onDragEnter, onDragOver: onDragOver, onPasteImageSuccessAction: onPasteImageSuccessAction, @@ -206,6 +212,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin { onEditorSettings: onEditorSettings, onEditorTextSizeChanged: onEditorTextSizeChanged, height: height, + horizontalPadding: horizontalPadding, onDragEnter: onDragEnter, onDragOver: onDragOver, onPasteImageSuccessAction: onPasteImageSuccessAction, @@ -228,6 +235,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin { onEditorSettings: onEditorSettings, onEditorTextSizeChanged: onEditorTextSizeChanged, height: height, + horizontalPadding: horizontalPadding, onDragEnter: onDragEnter, onDragOver: onDragOver, onPasteImageSuccessAction: onPasteImageSuccessAction, diff --git a/lib/features/composer/presentation/widgets/web/web_editor_widget.dart b/lib/features/composer/presentation/widgets/web/web_editor_widget.dart index d0afd5c54..f85878d6a 100644 --- a/lib/features/composer/presentation/widgets/web/web_editor_widget.dart +++ b/lib/features/composer/presentation/widgets/web/web_editor_widget.dart @@ -35,6 +35,7 @@ class WebEditorWidget extends StatefulWidget { final OnEditorSettingsChange? onEditorSettings; final OnEditorTextSizeChanged? onEditorTextSizeChanged; final double? height; + final double? horizontalPadding; final OnDragEnterListener? onDragEnter; final OnDragOverListener? onDragOver; final OnPasteImageSuccessAction? onPasteImageSuccessAction; @@ -54,6 +55,7 @@ class WebEditorWidget extends StatefulWidget { this.onEditorSettings, this.onEditorTextSizeChanged, this.height, + this.horizontalPadding, this.onDragEnter, this.onDragOver, this.onPasteImageSuccessAction, @@ -118,7 +120,10 @@ class _WebEditorState extends State { hint: '', darkMode: false, initialText: widget.content, - customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(direction: widget.direction), + customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor( + direction: widget.direction, + horizontalPadding: widget.horizontalPadding, + ), customInternalCSS: HtmlTemplate.customInternalStyleCSS, spellCheck: true, disableDragAndDrop: true, diff --git a/pubspec.lock b/pubspec.lock index aea6630c4..320ee2f6d 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -1235,8 +1235,8 @@ packages: dependency: "direct main" description: path: "." - ref: custom-internal-css - resolved-ref: "7ba66dc9cee4e6c202be93ee6afa8a0f3a4c0415" + ref: main + resolved-ref: ff9af2b54e89ddc4e1047e271632aaf92e16b116 url: "https://github.com/linagora/html-editor-enhanced.git" source: git version: "3.1.6" diff --git a/pubspec.yaml b/pubspec.yaml index 47d028b57..dcbc42d69 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -60,7 +60,7 @@ dependencies: html_editor_enhanced: git: url: https://github.com/linagora/html-editor-enhanced.git - ref: custom-internal-css + ref: main jmap_dart_client: git: