pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor, project: better field html sizing

Browse Source 
Allow wysiwyg field html to blend better in odoo view,
Remove the default resizer and make the field html's size
automatically fit its content

task-2637488

# Conflicts:
#	addons/project/static/src/js/project_form.js

Part-of: odoo/odoo#83792
This commit is contained in:
Sébastien Geelen (sge)
2022-02-02 09:03:44 +00:00
parent 14f4bd526a
commit 26bbac2b61
6 changed files with 38 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/project/static/src/js/widgets/html_with_action_widget.js
+2 -3
View File
@@ -15,9 +15,8 @@ export const FieldHtmlWithAction = FieldHtml.extend({
bus.on("DOM_updated", this, () => {
const $editable = this.$el.find('.note-editable');
if ($editable.length) {
const resizerHeight = this.$el.find('.o_wysiwyg_resizer').outerHeight();
const newHeight = window.innerHeight - $editable.offset().top - resizerHeight - 1;
$editable.outerHeight(newHeight);
const minHeight = window.innerHeight - $editable.offset().top - 30;
$editable.css('min-height', minHeight + 'px');
}
});
}
addons/project/static/src/scss/project_form.scss
+1 -1
View File
@@ -5,7 +5,7 @@
.o_form_project_project, .o_form_project_tasks {
.note-editable {
border: 0;
padding: $o-horizontal-padding $o-horizontal-padding;
padding: 0;
}
}
addons/web/static/src/legacy/scss/form_view.scss
+12 -1
View File
@@ -654,6 +654,17 @@ $o-form-label-margin-right: 0px;
.tab-content > .tab-pane {
padding: $o-horizontal-padding 0;
>.oe_form_field {
>.note-editable {
border-width: 0;
padding: 0;
min-height: 180px;
}
&.oe-bordered-editor>.note-editable {
border-width: 1px;
padding: 4px;
}
}
}
}
@@ -672,7 +683,7 @@ $o-form-label-margin-right: 0px;
}
.o_field_widget, .btn {
.o_field_widget {
margin-bottom: 0px;
margin-bottom: 0;
}
}
.o_td_label .o_form_label:not(.o_status), .o_checkbox_optional_field > .o_form_label {
addons/web_editor/static/src/js/backend/field_html.js
+4 -3
View File
@@ -205,10 +205,11 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
noVideos: 'noVideos' in this.nodeOptions ? this.nodeOptions.noVideos : true,
},
linkForceNewWindow: true,
tabsize: 0,
height: this.nodeOptions.height || 110,
resizable: 'resizable' in this.nodeOptions ? this.nodeOptions.resizable : true,
height: this.nodeOptions.height,
minHeight: this.nodeOptions.minHeight,
maxHeight: this.nodeOptions.maxHeight,
resizable: 'resizable' in this.nodeOptions ? this.nodeOptions.resizable : false,
editorPlugins: [QWebPlugin],
});
},
addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+9 -1
View File
@@ -557,7 +557,15 @@ const Wysiwyg = Widget.extend({
renderElement: function () {
this.$editable = this.options.editable || $('<div class="note-editable">');
this.$root = this.$editable;
if (this.options.height) {
this.$editable.height(this.options.height);
}
if (this.options.minHeight) {
this.$editable.css('min-height', this.options.minHeight);
}
if (this.options.maxHeight && this.options.maxHeight > 10) {
this.$editable.css('max-height', this.options.maxHeight);
}
if (this.options.resizable && !device.isMobile) {
const $wrapper = $('<div class="o_wysiwyg_wrapper odoo-editor">');
this.$root = $wrapper;
addons/web_editor/static/src/scss/wysiwyg.scss
+10 -2
View File
@@ -708,7 +708,15 @@ img::selection {
background: white;
color: black;
height: 100%;
padding: 5px 10px;
padding: 4px;
min-height: 10px;
border-radius: 3px;
}
.oe-bordered-editor>.note-editable {
border-width: 1px;
padding: 4px;
min-height: 180px;
}
.o_we_no_pointer_events {
@@ -809,4 +817,4 @@ img::selection {
-webkit-line-clamp: unset;
}
}
}
}