TF-3627 Remove right padding editor scroll bar in composer

Signed-off-by: dab246 <tdvu@linagora.com>
This commit is contained in:
dab246
2025-04-17 09:45:14 +07:00
committed by Dat H. Pham
parent b8b4557fd7
commit 3337a608be
10 changed files with 135 additions and 107 deletions
+2 -2
View File
@@ -16,8 +16,8 @@ class ThemeUtils {
dividerTheme: _dividerTheme, dividerTheme: _dividerTheme,
visualDensity: VisualDensity.adaptivePlatformDensity, visualDensity: VisualDensity.adaptivePlatformDensity,
scrollbarTheme: ScrollbarThemeData( scrollbarTheme: ScrollbarThemeData(
thickness: WidgetStateProperty.all(8.0), thickness: WidgetStateProperty.all(6.0),
radius: const Radius.circular(8.0), radius: const Radius.circular(10.0),
thumbColor: WidgetStateProperty.all(AppColor.thumbScrollbarColor)), thumbColor: WidgetStateProperty.all(AppColor.thumbScrollbarColor)),
); );
} }
+8 -7
View File
@@ -221,29 +221,30 @@ class HtmlTemplate {
static const String customInternalStyleCSS = ''' static const String customInternalStyleCSS = '''
<style> <style>
* { html, .note-editable, .note-codable {
overflow: auto; overflow: auto;
} }
*::-webkit-scrollbar { html::-webkit-scrollbar, .note-editable::-webkit-scrollbar, .note-codable::-webkit-scrollbar {
width: 8px; width: 6px;
height: 8px; height: 6px;
} }
*::-webkit-scrollbar-thumb { html::-webkit-scrollbar-thumb, .note-editable::-webkit-scrollbar-thumb, .note-codable::-webkit-scrollbar-thumb {
background-color: #c1c1c1; background-color: #c1c1c1;
border-radius: 10px; border-radius: 10px;
min-height: 70px; min-height: 70px;
} }
*::-webkit-scrollbar-track { html::-webkit-scrollbar-track, .note-editable::-webkit-scrollbar-track, .note-codable::-webkit-scrollbar-track {
background: transparent; background: transparent;
border-radius: 10px; border-radius: 10px;
} }
/* Browsers without `::-webkit-scrollbar-*` support */ /* Browsers without `::-webkit-scrollbar-*` support */
@supports not selector(::-webkit-scrollbar) { @supports not selector(::-webkit-scrollbar) {
* { html, .note-editable, .note-codable {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 transparent; scrollbar-color: #c1c1c1 transparent;
} }
} }
+19
View File
@@ -41,6 +41,7 @@ class HtmlUtils {
static String customCssStyleHtmlEditor({ static String customCssStyleHtmlEditor({
TextDirection direction = TextDirection.ltr, TextDirection direction = TextDirection.ltr,
bool useDefaultFont = false, bool useDefaultFont = false,
double? horizontalPadding,
}) { }) {
if (PlatformInfo.isWeb) { if (PlatformInfo.isWeb) {
return ''' return '''
@@ -61,6 +62,24 @@ class HtmlUtils {
.note-editable .tmail-signature { .note-editable .tmail-signature {
text-align: ${direction == TextDirection.rtl ? 'right' : 'left'}; text-align: ${direction == TextDirection.rtl ? 'right' : 'left'};
} }
${horizontalPadding != null
? '''
.note-codable {
padding: 10px ${horizontalPadding}px 0px ${horizontalPadding > 3 ? horizontalPadding - 3 : horizontalPadding}px;
margin-right: 3px;
}
.note-editable {
padding: 10px ${horizontalPadding}px 0px ${horizontalPadding > 3 ? horizontalPadding - 3 : horizontalPadding}px;
margin-right: 3px;
}
'''
: '''
.note-editable {
padding: 10px 10px 0px 10px;
}
'''}
</style> </style>
'''; ''';
} else if (PlatformInfo.isMobile) { } else if (PlatformInfo.isMobile) {
@@ -17,6 +17,7 @@ class ScrollbarListView extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return RawScrollbar( return RawScrollbar(
thickness: 6,
thumbColor: AppColor.thumbScrollbarColor, thumbColor: AppColor.thumbScrollbarColor,
radius: const Radius.circular(10.0), radius: const Radius.circular(10.0),
trackRadius: const Radius.circular(10.0), trackRadius: const Radius.circular(10.0),
@@ -213,38 +213,36 @@ class ComposerView extends GetWidget<ComposerController> {
Column( Column(
children: [ children: [
Expanded( Expanded(
child: Padding( child: Obx(() => WebEditorView(
padding: ComposerStyle.mobileEditorPadding, key: controller.responsiveContainerKey,
child: Obx(() => WebEditorView( editorController: controller.richTextWebController!.editorController,
key: controller.responsiveContainerKey, arguments: controller.composerArguments.value,
editorController: controller.richTextWebController!.editorController, contentViewState: controller.emailContentsViewState.value,
arguments: controller.composerArguments.value, currentWebContent: controller.textEditorWeb,
contentViewState: controller.emailContentsViewState.value, onInitial: controller.handleInitHtmlEditorWeb,
currentWebContent: controller.textEditorWeb, onChangeContent: controller.onChangeTextEditorWeb,
onInitial: controller.handleInitHtmlEditorWeb, onFocus: controller.handleOnFocusHtmlEditorWeb,
onChangeContent: controller.onChangeTextEditorWeb, onMouseDown: controller.handleOnMouseDownHtmlEditorWeb,
onFocus: controller.handleOnFocusHtmlEditorWeb, onEditorSettings: controller.richTextWebController!.onEditorSettingsChange,
onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, onEditorTextSizeChanged: controller.richTextWebController!.onEditorTextSizeChanged,
onEditorSettings: controller.richTextWebController!.onEditorSettingsChange, height: constraints.maxHeight,
onEditorTextSizeChanged: controller.richTextWebController!.onEditorTextSizeChanged, horizontalPadding: ComposerStyle.mobileEditorHorizontalPadding,
height: constraints.maxHeight, onDragEnter: controller.handleOnDragEnterHtmlEditorWeb,
onDragEnter: controller.handleOnDragEnterHtmlEditorWeb, onDragOver: controller.handleOnDragOverHtmlEditorWeb,
onDragOver: controller.handleOnDragOverHtmlEditorWeb, onPasteImageSuccessAction: (listFileUpload) => controller.handleOnPasteImageSuccessAction(
onPasteImageSuccessAction: (listFileUpload) => controller.handleOnPasteImageSuccessAction( context: context,
maxWidth: constraintsEditor.maxWidth,
listFileUpload: listFileUpload
),
onPasteImageFailureAction: (listFileUpload, base64, uploadError) =>
controller.handleOnPasteImageFailureAction(
context: context, context: context,
maxWidth: constraintsEditor.maxWidth, listFileUpload: listFileUpload,
listFileUpload: listFileUpload base64: base64,
uploadError: uploadError
), ),
onPasteImageFailureAction: (listFileUpload, base64, uploadError) => onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb,
controller.handleOnPasteImageFailureAction( )),
context: context,
listFileUpload: listFileUpload,
base64: base64,
uploadError: uploadError
),
onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb,
)),
),
), ),
Obx(() { Obx(() {
if (controller.uploadController.listUploadAttachments.isNotEmpty) { if (controller.uploadController.listUploadAttachments.isNotEmpty) {
@@ -497,40 +495,38 @@ class ComposerView extends GetWidget<ComposerController> {
child: Column( child: Column(
children: [ children: [
Expanded( Expanded(
child: Padding( child: Obx(() {
padding: ComposerStyle.desktopEditorPadding, return WebEditorView(
child: Obx(() { key: controller.responsiveContainerKey,
return WebEditorView( editorController: controller.richTextWebController!.editorController,
key: controller.responsiveContainerKey, arguments: controller.composerArguments.value,
editorController: controller.richTextWebController!.editorController, contentViewState: controller.emailContentsViewState.value,
arguments: controller.composerArguments.value, currentWebContent: controller.textEditorWeb,
contentViewState: controller.emailContentsViewState.value, onInitial: controller.handleInitHtmlEditorWeb,
currentWebContent: controller.textEditorWeb, onChangeContent: controller.onChangeTextEditorWeb,
onInitial: controller.handleInitHtmlEditorWeb, onFocus: controller.handleOnFocusHtmlEditorWeb,
onChangeContent: controller.onChangeTextEditorWeb, onMouseDown: controller.handleOnMouseDownHtmlEditorWeb,
onFocus: controller.handleOnFocusHtmlEditorWeb, onEditorSettings: controller.richTextWebController?.onEditorSettingsChange,
onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, onEditorTextSizeChanged: controller.richTextWebController?.onEditorTextSizeChanged,
onEditorSettings: controller.richTextWebController?.onEditorSettingsChange, height: constraints.maxHeight,
onEditorTextSizeChanged: controller.richTextWebController?.onEditorTextSizeChanged, horizontalPadding: ComposerStyle.desktopEditorHorizontalPadding,
height: constraints.maxHeight, onDragEnter: controller.handleOnDragEnterHtmlEditorWeb,
onDragEnter: controller.handleOnDragEnterHtmlEditorWeb, onDragOver: controller.handleOnDragOverHtmlEditorWeb,
onDragOver: controller.handleOnDragOverHtmlEditorWeb, onPasteImageSuccessAction: (listFileUpload) => controller.handleOnPasteImageSuccessAction(
onPasteImageSuccessAction: (listFileUpload) => controller.handleOnPasteImageSuccessAction( context: context,
maxWidth: constraintsEditor.maxWidth,
listFileUpload: listFileUpload
),
onPasteImageFailureAction: (listFileUpload, base64, uploadError) =>
controller.handleOnPasteImageFailureAction(
context: context, context: context,
maxWidth: constraintsEditor.maxWidth, listFileUpload: listFileUpload,
listFileUpload: listFileUpload base64: base64,
uploadError: uploadError
), ),
onPasteImageFailureAction: (listFileUpload, base64, uploadError) => onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb,
controller.handleOnPasteImageFailureAction( );
context: context, }),
listFileUpload: listFileUpload,
base64: base64,
uploadError: uploadError
),
onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb,
);
}),
),
), ),
Obx(() { Obx(() {
if (controller.uploadController.listUploadAttachments.isNotEmpty) { if (controller.uploadController.listUploadAttachments.isNotEmpty) {
@@ -810,38 +806,36 @@ class ComposerView extends GetWidget<ComposerController> {
child: Column( child: Column(
children: [ children: [
Expanded( Expanded(
child: Padding( child: Obx(() => WebEditorView(
padding: ComposerStyle.tabletEditorPadding, key: controller.responsiveContainerKey,
child: Obx(() => WebEditorView( editorController: controller.richTextWebController!.editorController,
key: controller.responsiveContainerKey, arguments: controller.composerArguments.value,
editorController: controller.richTextWebController!.editorController, contentViewState: controller.emailContentsViewState.value,
arguments: controller.composerArguments.value, currentWebContent: controller.textEditorWeb,
contentViewState: controller.emailContentsViewState.value, onInitial: controller.handleInitHtmlEditorWeb,
currentWebContent: controller.textEditorWeb, onChangeContent: controller.onChangeTextEditorWeb,
onInitial: controller.handleInitHtmlEditorWeb, onFocus: controller.handleOnFocusHtmlEditorWeb,
onChangeContent: controller.onChangeTextEditorWeb, onMouseDown: controller.handleOnMouseDownHtmlEditorWeb,
onFocus: controller.handleOnFocusHtmlEditorWeb, onEditorSettings: controller.richTextWebController!.onEditorSettingsChange,
onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, onEditorTextSizeChanged: controller.richTextWebController!.onEditorTextSizeChanged,
onEditorSettings: controller.richTextWebController!.onEditorSettingsChange, height: constraints.maxHeight,
onEditorTextSizeChanged: controller.richTextWebController!.onEditorTextSizeChanged, horizontalPadding: ComposerStyle.desktopEditorHorizontalPadding,
height: constraints.maxHeight, onDragEnter: controller.handleOnDragEnterHtmlEditorWeb,
onDragEnter: controller.handleOnDragEnterHtmlEditorWeb, onDragOver: controller.handleOnDragOverHtmlEditorWeb,
onDragOver: controller.handleOnDragOverHtmlEditorWeb, onPasteImageSuccessAction: (listFileUpload) => controller.handleOnPasteImageSuccessAction(
onPasteImageSuccessAction: (listFileUpload) => controller.handleOnPasteImageSuccessAction( context: context,
maxWidth: constraintsBody.maxWidth,
listFileUpload: listFileUpload
),
onPasteImageFailureAction: (listFileUpload, base64, uploadError) =>
controller.handleOnPasteImageFailureAction(
context: context, context: context,
maxWidth: constraintsBody.maxWidth, listFileUpload: listFileUpload,
listFileUpload: listFileUpload base64: base64,
uploadError: uploadError
), ),
onPasteImageFailureAction: (listFileUpload, base64, uploadError) => onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb,
controller.handleOnPasteImageFailureAction( )),
context: context,
listFileUpload: listFileUpload,
base64: base64,
uploadError: uploadError
),
onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb,
)),
),
), ),
Obx(() { Obx(() {
if (controller.uploadController.listUploadAttachments.isNotEmpty) { if (controller.uploadController.listUploadAttachments.isNotEmpty) {
@@ -17,6 +17,8 @@ class ComposerStyle {
static const double composerExpandMoreButtonMaxHeight = 52; static const double composerExpandMoreButtonMaxHeight = 52;
static const double padding = 16; static const double padding = 16;
static const double space = 8; static const double space = 8;
static const double desktopEditorHorizontalPadding = 25;
static const double mobileEditorHorizontalPadding = 16;
static const Color borderColor = AppColor.colorLineComposer; static const Color borderColor = AppColor.colorLineComposer;
static const Color backgroundEditorColor = Colors.white; static const Color backgroundEditorColor = Colors.white;
@@ -29,12 +31,10 @@ class ComposerStyle {
static const EdgeInsetsGeometry desktopRecipientMargin = EdgeInsetsDirectional.only(start: 24); static const EdgeInsetsGeometry desktopRecipientMargin = EdgeInsetsDirectional.only(start: 24);
static const EdgeInsetsGeometry desktopSubjectMargin = EdgeInsetsDirectional.only(start: 24); static const EdgeInsetsGeometry desktopSubjectMargin = EdgeInsetsDirectional.only(start: 24);
static const EdgeInsetsGeometry desktopSubjectPadding = EdgeInsetsDirectional.only(end: 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 tabletRecipientPadding = EdgeInsetsDirectional.only(end: 24);
static const EdgeInsetsGeometry tabletRecipientMargin = EdgeInsetsDirectional.only(start: 24); static const EdgeInsetsGeometry tabletRecipientMargin = EdgeInsetsDirectional.only(start: 24);
static const EdgeInsetsGeometry tabletSubjectMargin = EdgeInsetsDirectional.only(start: 24); static const EdgeInsetsGeometry tabletSubjectMargin = EdgeInsetsDirectional.only(start: 24);
static const EdgeInsetsGeometry tabletSubjectPadding = EdgeInsetsDirectional.only(end: 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 mobileRecipientPadding = EdgeInsetsDirectional.only(end: 16);
static const EdgeInsetsGeometry mobileRecipientMargin = EdgeInsetsDirectional.only(start: 16); static const EdgeInsetsGeometry mobileRecipientMargin = EdgeInsetsDirectional.only(start: 16);
static const EdgeInsetsGeometry mobileSubjectMargin = EdgeInsetsDirectional.only(start: 16); static const EdgeInsetsGeometry mobileSubjectMargin = EdgeInsetsDirectional.only(start: 16);
@@ -28,6 +28,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
final OnEditorSettingsChange? onEditorSettings; final OnEditorSettingsChange? onEditorSettings;
final OnEditorTextSizeChanged? onEditorTextSizeChanged; final OnEditorTextSizeChanged? onEditorTextSizeChanged;
final double? height; final double? height;
final double? horizontalPadding;
final OnDragEnterListener? onDragEnter; final OnDragEnterListener? onDragEnter;
final OnDragOverListener? onDragOver; final OnDragOverListener? onDragOver;
final OnPasteImageSuccessAction? onPasteImageSuccessAction; final OnPasteImageSuccessAction? onPasteImageSuccessAction;
@@ -48,6 +49,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
this.onEditorSettings, this.onEditorSettings,
this.onEditorTextSizeChanged, this.onEditorTextSizeChanged,
this.height, this.height,
this.horizontalPadding,
this.onDragEnter, this.onDragEnter,
this.onDragOver, this.onDragOver,
this.onPasteImageSuccessAction, this.onPasteImageSuccessAction,
@@ -77,6 +79,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
onEditorSettings: onEditorSettings, onEditorSettings: onEditorSettings,
onEditorTextSizeChanged: onEditorTextSizeChanged, onEditorTextSizeChanged: onEditorTextSizeChanged,
height: height, height: height,
horizontalPadding: horizontalPadding,
onDragEnter: onDragEnter, onDragEnter: onDragEnter,
onDragOver: onDragOver, onDragOver: onDragOver,
onPasteImageSuccessAction: onPasteImageSuccessAction, onPasteImageSuccessAction: onPasteImageSuccessAction,
@@ -106,6 +109,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
onEditorSettings: onEditorSettings, onEditorSettings: onEditorSettings,
onEditorTextSizeChanged: onEditorTextSizeChanged, onEditorTextSizeChanged: onEditorTextSizeChanged,
height: height, height: height,
horizontalPadding: horizontalPadding,
onDragEnter: onDragEnter, onDragEnter: onDragEnter,
onDragOver: onDragOver, onDragOver: onDragOver,
onPasteImageSuccessAction: onPasteImageSuccessAction, onPasteImageSuccessAction: onPasteImageSuccessAction,
@@ -137,6 +141,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
onEditorSettings: onEditorSettings, onEditorSettings: onEditorSettings,
onEditorTextSizeChanged: onEditorTextSizeChanged, onEditorTextSizeChanged: onEditorTextSizeChanged,
height: height, height: height,
horizontalPadding: horizontalPadding,
onDragEnter: onDragEnter, onDragEnter: onDragEnter,
onDragOver: onDragOver, onDragOver: onDragOver,
onPasteImageSuccessAction: onPasteImageSuccessAction, onPasteImageSuccessAction: onPasteImageSuccessAction,
@@ -174,6 +179,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
onEditorSettings: onEditorSettings, onEditorSettings: onEditorSettings,
onEditorTextSizeChanged: onEditorTextSizeChanged, onEditorTextSizeChanged: onEditorTextSizeChanged,
height: height, height: height,
horizontalPadding: horizontalPadding,
onDragEnter: onDragEnter, onDragEnter: onDragEnter,
onDragOver: onDragOver, onDragOver: onDragOver,
onPasteImageSuccessAction: onPasteImageSuccessAction, onPasteImageSuccessAction: onPasteImageSuccessAction,
@@ -206,6 +212,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
onEditorSettings: onEditorSettings, onEditorSettings: onEditorSettings,
onEditorTextSizeChanged: onEditorTextSizeChanged, onEditorTextSizeChanged: onEditorTextSizeChanged,
height: height, height: height,
horizontalPadding: horizontalPadding,
onDragEnter: onDragEnter, onDragEnter: onDragEnter,
onDragOver: onDragOver, onDragOver: onDragOver,
onPasteImageSuccessAction: onPasteImageSuccessAction, onPasteImageSuccessAction: onPasteImageSuccessAction,
@@ -228,6 +235,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
onEditorSettings: onEditorSettings, onEditorSettings: onEditorSettings,
onEditorTextSizeChanged: onEditorTextSizeChanged, onEditorTextSizeChanged: onEditorTextSizeChanged,
height: height, height: height,
horizontalPadding: horizontalPadding,
onDragEnter: onDragEnter, onDragEnter: onDragEnter,
onDragOver: onDragOver, onDragOver: onDragOver,
onPasteImageSuccessAction: onPasteImageSuccessAction, onPasteImageSuccessAction: onPasteImageSuccessAction,
@@ -35,6 +35,7 @@ class WebEditorWidget extends StatefulWidget {
final OnEditorSettingsChange? onEditorSettings; final OnEditorSettingsChange? onEditorSettings;
final OnEditorTextSizeChanged? onEditorTextSizeChanged; final OnEditorTextSizeChanged? onEditorTextSizeChanged;
final double? height; final double? height;
final double? horizontalPadding;
final OnDragEnterListener? onDragEnter; final OnDragEnterListener? onDragEnter;
final OnDragOverListener? onDragOver; final OnDragOverListener? onDragOver;
final OnPasteImageSuccessAction? onPasteImageSuccessAction; final OnPasteImageSuccessAction? onPasteImageSuccessAction;
@@ -54,6 +55,7 @@ class WebEditorWidget extends StatefulWidget {
this.onEditorSettings, this.onEditorSettings,
this.onEditorTextSizeChanged, this.onEditorTextSizeChanged,
this.height, this.height,
this.horizontalPadding,
this.onDragEnter, this.onDragEnter,
this.onDragOver, this.onDragOver,
this.onPasteImageSuccessAction, this.onPasteImageSuccessAction,
@@ -118,7 +120,10 @@ class _WebEditorState extends State<WebEditorWidget> {
hint: '', hint: '',
darkMode: false, darkMode: false,
initialText: widget.content, initialText: widget.content,
customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(direction: widget.direction), customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(
direction: widget.direction,
horizontalPadding: widget.horizontalPadding,
),
customInternalCSS: HtmlTemplate.customInternalStyleCSS, customInternalCSS: HtmlTemplate.customInternalStyleCSS,
spellCheck: true, spellCheck: true,
disableDragAndDrop: true, disableDragAndDrop: true,
+2 -2
View File
@@ -1235,8 +1235,8 @@ packages:
dependency: "direct main" dependency: "direct main"
description: description:
path: "." path: "."
ref: custom-internal-css ref: main
resolved-ref: "7ba66dc9cee4e6c202be93ee6afa8a0f3a4c0415" resolved-ref: ff9af2b54e89ddc4e1047e271632aaf92e16b116
url: "https://github.com/linagora/html-editor-enhanced.git" url: "https://github.com/linagora/html-editor-enhanced.git"
source: git source: git
version: "3.1.6" version: "3.1.6"
+1 -1
View File
@@ -60,7 +60,7 @@ dependencies:
html_editor_enhanced: html_editor_enhanced:
git: git:
url: https://github.com/linagora/html-editor-enhanced.git url: https://github.com/linagora/html-editor-enhanced.git
ref: custom-internal-css ref: main
jmap_dart_client: jmap_dart_client:
git: git: