[IMP] web_editor, website, *: move text tools in snippets panel
*: website_event, test_website This commit is a series of hacks. The goal is to move the summernote text tools to the editor panel for the website editor. All the code to use the text tools in a top bar is kept (mass mailing, etc) and the text tools are placed at the right place for website in an ugly way. This is obviously temporary, until we can implement those text tools more generically and in a better way thanks to the new editor. Part of https://github.com/odoo/odoo/pull/57975 task-2344227 closes odoo/odoo#58199 X-original-commit: ff81fa4798e232a03daf0eeff7d85ad35a52b25c Related: odoo/design-themes#365 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
@@ -31,7 +31,7 @@ tour.register('test_reset_page_view_complete_flow_part1', {
|
||||
{
|
||||
content: "save the page",
|
||||
extra_trigger: '#oe_structure_test_website_page.o_dirty',
|
||||
trigger: "#web_editor-top-edit button[data-action=save]",
|
||||
trigger: "button[data-action=save]",
|
||||
},
|
||||
// 2. Edit that COW'd view in the HTML editor to break it.
|
||||
{
|
||||
|
||||
@@ -888,6 +888,7 @@ var SnippetsMenu = Widget.extend({
|
||||
|
||||
this._notActivableElementsSelector = [
|
||||
'#web_editor-top-edit',
|
||||
'.o_we_website_top_actions',
|
||||
'#oe_snippets',
|
||||
'#oe_manipulators',
|
||||
'.o_technical_modal',
|
||||
@@ -926,6 +927,9 @@ var SnippetsMenu = Widget.extend({
|
||||
this.customizePanel = document.createElement('div');
|
||||
this.customizePanel.classList.add('o_we_customize_panel', 'd-none');
|
||||
|
||||
this.textEditorPanelEl = document.createElement('div');
|
||||
this.textEditorPanelEl.classList.add('o_we_snippet_text_tools');
|
||||
|
||||
this.invisibleDOMPanelEl = document.createElement('div');
|
||||
this.invisibleDOMPanelEl.classList.add('o_we_invisible_el_panel');
|
||||
this.invisibleDOMPanelEl.appendChild(
|
||||
@@ -1651,6 +1655,7 @@ var SnippetsMenu = Widget.extend({
|
||||
// Add the computed template and make elements draggable
|
||||
this.$el.html($html);
|
||||
this.$el.append(this.customizePanel);
|
||||
this.$el.append(this.textEditorPanelEl);
|
||||
this.$el.append(this.invisibleDOMPanelEl);
|
||||
this._makeSnippetDraggable(this.$snippets);
|
||||
this._disableUndroppableSnippets();
|
||||
|
||||
@@ -984,12 +984,12 @@ renderer.tplButtonInfo.color = function (lang, options) {
|
||||
value: '{"backColor":"#B35E9B"}'
|
||||
});
|
||||
var foreColorButton = renderer.getTemplate().button(foreColorButtonLabel, {
|
||||
className: 'note-fore-color-preview mx-1',
|
||||
className: 'note-fore-color-preview',
|
||||
title: lang.color.foreground,
|
||||
dropdown: renderer.getTemplate().dropdown('<li><div data-event-name="foreColor" class="colorPalette"/></li>'),
|
||||
});
|
||||
var backColorButton = renderer.getTemplate().button(backColorButtonLabel, {
|
||||
className: 'note-back-color-preview mx-1',
|
||||
className: 'note-back-color-preview',
|
||||
title: lang.color.background,
|
||||
dropdown: renderer.getTemplate().dropdown('<li><div data-event-name="backColor" class="colorPalette"/></li>'),
|
||||
});
|
||||
|
||||
@@ -36,11 +36,17 @@ Wysiwyg.include({
|
||||
* @private
|
||||
*/
|
||||
_relocateEditorBar: function () {
|
||||
if (!this.options.toolbarHandler.length) {
|
||||
this.options.toolbarHandler = $('.o_we_snippet_text_tools');
|
||||
}
|
||||
this.options.toolbarHandler.append(this.editor.$el);
|
||||
|
||||
// TODO the next four lines are a huge hack: since the editor.$el
|
||||
// is repositioned, the snippetsMenu elements are not at the
|
||||
// correct position anymore... the whole logic has to be refactored.
|
||||
if (this.editor.snippetsMenu) {
|
||||
// correct position anymore if it was repositioned outside of it...
|
||||
// the whole logic has to be refactored... hopefully not needed anymore
|
||||
// with editor team changes
|
||||
if (this.editor.snippetsMenu && !this.editor.snippetsMenu.$el.has(this.options.toolbarHandler).length) {
|
||||
this.editor.snippetsMenu.$el.insertAfter(this.options.toolbarHandler);
|
||||
this.editor.snippetsMenu.$snippetEditorArea.insertAfter(this.editor.snippetsMenu.$el);
|
||||
}
|
||||
|
||||
@@ -18,17 +18,6 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
|
||||
}
|
||||
}
|
||||
|
||||
.editor_enable {
|
||||
padding-top: var(--o-we-toolbar-height) !important;
|
||||
|
||||
.note-popover .popover .popover-body {
|
||||
height: var(--o-we-toolbar-height);
|
||||
}
|
||||
.note-popover .popover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
#web_editor-top-edit {
|
||||
@include o-position-absolute(0, 0, auto, 0);
|
||||
position: fixed;
|
||||
@@ -42,6 +31,10 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
|
||||
right: 0 !important;
|
||||
border: none !important;
|
||||
max-width: none;
|
||||
transform: none;
|
||||
}
|
||||
.note-popover .popover .popover-body {
|
||||
height: var(--o-we-toolbar-height);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -48,6 +48,50 @@ body.editor_enable.editor_has_snippets {
|
||||
}
|
||||
}
|
||||
|
||||
// Ugly hack to force ugly rules... while waiting for new editor
|
||||
#oe_snippets#oe_snippets .o_we_snippet_text_tools {
|
||||
padding: $o-we-sidebar-content-field-spacing $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
|
||||
box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5);
|
||||
z-index: $o-we-zindex;
|
||||
|
||||
.popover {
|
||||
position: static !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
transform: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
.popover-body {
|
||||
padding: 0 !important;
|
||||
|
||||
> * {
|
||||
margin-bottom: $o-we-sidebar-content-field-spacing;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
@extend %we-generic-button;
|
||||
}
|
||||
.btn-group {
|
||||
> .d-none + * {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
.note-color {
|
||||
.btn-group {
|
||||
position: static;
|
||||
}
|
||||
.dropdown-menu { // Drop up
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: $dropdown-spacer;
|
||||
}
|
||||
}
|
||||
}
|
||||
#o_scroll:not(.d-none) ~ .o_we_snippet_text_tools {
|
||||
padding-right: $o-we-sidebar-blocks-content-spacing;
|
||||
padding-left: $o-we-sidebar-blocks-content-spacing;
|
||||
}
|
||||
|
||||
.oe_snippet {
|
||||
// No root because can be drag and drop (and the helper is in the body)
|
||||
@@ -264,8 +308,7 @@ body.editor_enable.editor_has_snippets {
|
||||
}
|
||||
|
||||
> #o_scroll, > .o_we_customize_panel {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -1166,6 +1209,7 @@ body.editor_enable.editor_has_snippets {
|
||||
flex: 0 0 auto;
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
margin-top: auto;
|
||||
padding: $o-we-sidebar-blocks-content-spacing;
|
||||
background-color: $o-we-sidebar-blocks-content-bg;
|
||||
box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
|
||||
@@ -1185,12 +1229,18 @@ body.editor_enable.editor_has_snippets {
|
||||
}
|
||||
|
||||
&.o_we_backdrop {
|
||||
> .o_we_customize_panel::after {
|
||||
content: "";
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
background: $o-we-sidebar-content-backdrop-bg;
|
||||
> .o_we_customize_panel {
|
||||
// Ensure the panel takes full height so that an opened dropdown
|
||||
// does not make a scrollbar appear for no reason
|
||||
flex: 1 1 auto;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
background: $o-we-sidebar-content-backdrop-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.o_we_widget_opened {
|
||||
|
||||
@@ -154,21 +154,26 @@ table.editorbar-panel {
|
||||
}
|
||||
}
|
||||
|
||||
// s_popup in edit mode
|
||||
body.editor_enable.editor_has_snippets {
|
||||
padding-top: 0 !important;
|
||||
|
||||
.s_popup .modal {
|
||||
// s_popup in edit mode
|
||||
top: var(--o-we-toolbar-height);
|
||||
background-color: transparent;
|
||||
&.fade .modal-dialog {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
#oe_main_menu_navbar + #wrapwrap .o_header_affixed {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.editor_has_snippets {
|
||||
.o_header_affixed {
|
||||
right: $o-we-sidebar-width !important;
|
||||
top: var(--o-we-toolbar-height) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
}
|
||||
|
||||
// EDITOR TOP BAR AND POPOVER
|
||||
#web_editor-top-edit .o_we_website_top_actions {
|
||||
.o_we_website_top_actions {
|
||||
@include o-position-absolute($top: 0, $right: 0);
|
||||
z-index: $zindex-popover + 5;
|
||||
display: flex;
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
|
||||
<!-- Editor top bar which contains the summernote tools and save/discard buttons -->
|
||||
<t t-name="website.editorbar">
|
||||
<div id="web_editor-top-edit">
|
||||
<form class="o_we_website_top_actions">
|
||||
<div class="o_we_website_top_actions">
|
||||
<form>
|
||||
<button type="button" class="btn btn-primary" data-action="save" accesskey="s">Save</button>
|
||||
<button type="button" class="btn btn-secondary" data-action="cancel" accesskey="j">Discard</button>
|
||||
</form>
|
||||
|
||||
@@ -22,7 +22,7 @@ tour.register('html_editor_multiple_templates', {
|
||||
{
|
||||
content: "save the page",
|
||||
extra_trigger: '#oe_structure_test_ui.o_dirty',
|
||||
trigger: "#web_editor-top-edit button[data-action=save]",
|
||||
trigger: "button[data-action=save]",
|
||||
},
|
||||
// 2. Edit generic view
|
||||
{
|
||||
|
||||
@@ -29,7 +29,7 @@ EventAdditionalTourSteps.include({
|
||||
position: 'bottom',
|
||||
run: 'drag_and_drop #o_wevent_event_main_col',
|
||||
}, {
|
||||
trigger: '#web_editor-top-edit button[data-action="save"]',
|
||||
trigger: 'button[data-action="save"]',
|
||||
content: _t("Don't forget to click <b>save</b> when you're done."),
|
||||
position: 'bottom',
|
||||
}, {
|
||||
|
||||
Reference in New Issue
Block a user