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

TF-3627 Remove right padding editor scroll bar in composer

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/utils/theme_utils.dart
+2 -2
View File
@@ -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)),
);
}
core/lib/utils/html/html_template.dart
+8 -7
View File
@@ -221,29 +221,30 @@ class HtmlTemplate {
static const String customInternalStyleCSS = '''
<style>
* {
html, .note-editable, .note-codable {
overflow: auto;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
html::-webkit-scrollbar, .note-editable::-webkit-scrollbar, .note-codable::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-thumb {
html::-webkit-scrollbar-thumb, .note-editable::-webkit-scrollbar-thumb, .note-codable::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
border-radius: 10px;
min-height: 70px;
}
*::-webkit-scrollbar-track {
html::-webkit-scrollbar-track, .note-editable::-webkit-scrollbar-track, .note-codable::-webkit-scrollbar-track {
background: transparent;
border-radius: 10px;
}
/* Browsers without `::-webkit-scrollbar-*` support */
@supports not selector(::-webkit-scrollbar) {
* {
html, .note-editable, .note-codable {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 transparent;
}
}
core/lib/utils/html/html_utils.dart
+19
View File
@@ -41,6 +41,7 @@ class HtmlUtils {
static String customCssStyleHtmlEditor({
TextDirection direction = TextDirection.ltr,
bool useDefaultFont = false,
double? horizontalPadding,
}) {
if (PlatformInfo.isWeb) {
return '''
@@ -61,6 +62,24 @@ class HtmlUtils {
.note-editable .tmail-signature {
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>
''';
} else if (PlatformInfo.isMobile) {
lib/features/base/widget/scrollbar_list_view.dart
+1
View File
@@ -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),
lib/features/composer/presentation/composer_view_web.dart
+86 -92
View File
@@ -213,38 +213,36 @@ class ComposerView extends GetWidget<ComposerController> {
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<ComposerController> {
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<ComposerController> {
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) {
lib/features/composer/presentation/styles/composer_style.dart
+2 -2
View File
@@ -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);
lib/features/composer/presentation/view/web/web_editor_view.dart
+8
View File
@@ -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,
lib/features/composer/presentation/widgets/web/web_editor_widget.dart
+6 -1
View File
@@ -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<WebEditorWidget> {
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,
pubspec.lock
+2 -2
View File
@@ -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"
pubspec.yaml
+1 -1
View File
@@ -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: