From 3dc721ab71d3fdc7070bf441bfb7baa5a2ed8399 Mon Sep 17 00:00:00 2001 From: Gorash Date: Mon, 12 Oct 2020 08:52:07 +0000 Subject: [PATCH] [REF] mass_mailing: adapt to new jabberwock editor --- .../barcodes/static/src/js/barcode_events.js | 4 +- .../static/src/js/mass_mailing_snippets.js | 8 +- .../static/src/js/mass_mailing_widget.js | 619 ++++++++---------- .../static/src/scss/mass_mailing.ui.jw.scss | 50 ++ .../static/src/scss/mass_mailing.ui.scss | 210 ------ .../src/scss/mass_mailing.ui.shadow.scss | 13 + .../static/src/xml/mass_mailing.xml | 31 +- .../static/tests/mass_mailing_html_tests.js | 26 +- addons/mass_mailing/views/snippets_themes.xml | 3 - .../static/src/js/backend/convert_inline.js | 470 ------------- 10 files changed, 371 insertions(+), 1063 deletions(-) diff --git a/addons/barcodes/static/src/js/barcode_events.js b/addons/barcodes/static/src/js/barcode_events.js index 6f2f678506c..35a02bdabe4 100644 --- a/addons/barcodes/static/src/js/barcode_events.js +++ b/addons/barcodes/static/src/js/barcode_events.js @@ -178,7 +178,9 @@ var BarcodeEvents = core.Class.extend(mixins.PropertiesMixin, { // have no way of redispatching 'genuine' key events. Resent events // don't trigger native event handlers of elements. So this means that // our fake events will not appear in eg. an element. - if ((this.element_is_editable(e.target) && !$(e.target).data('enableBarcode')) && e.target.getAttribute("barcode_events") !== "true") + // Don't catch events targeting a shadow DOM because we must keep the + // behavior specific to the content. + if (((this.element_is_editable(e.target) || e.target.shadowRoot) && !$(e.target).data('enableBarcode')) && e.target.getAttribute("barcode_events") !== "true") return; // Catch and buffer the event diff --git a/addons/mass_mailing/static/src/js/mass_mailing_snippets.js b/addons/mass_mailing/static/src/js/mass_mailing_snippets.js index 407416f3547..c7f3ac59d3f 100644 --- a/addons/mass_mailing/static/src/js/mass_mailing_snippets.js +++ b/addons/mass_mailing/static/src/js/mass_mailing_snippets.js @@ -1,10 +1,10 @@ odoo.define('mass_mailing.snippets.options', function (require) { "use strict"; -var options = require('web_editor.snippets.options'); +var snippetOptions = require('web_editor.snippets.options'); // Snippet option for resizing image and column width inline like excel -options.registry.mass_mailing_sizing_x = options.Class.extend({ +snippetOptions.registry.mass_mailing_sizing_x = snippetOptions.SnippetOptionWidget.extend({ /** * @override */ @@ -79,7 +79,7 @@ options.registry.mass_mailing_sizing_x = options.Class.extend({ }, }); -options.registry.mass_mailing_table_item = options.Class.extend({ +snippetOptions.registry.mass_mailing_table_item = snippetOptions.SnippetOptionWidget.extend({ onClone: function (options) { this._super.apply(this, arguments); @@ -127,7 +127,7 @@ options.registry.mass_mailing_table_item = options.Class.extend({ // Adding compatibility for the outlook compliance of mailings. // Commit of such compatibility : a14f89c8663c9cafecb1cc26918055e023ecbe42 -options.registry.BackgroundImage = options.registry.BackgroundImage.extend({ +snippetOptions.registry.BackgroundImage = snippetOptions.registry.BackgroundImage.extend({ start: function () { this._super(); if (this.snippets && this.snippets.split('.')[0] === "mass_mailing") { diff --git a/addons/mass_mailing/static/src/js/mass_mailing_widget.js b/addons/mass_mailing/static/src/js/mass_mailing_widget.js index a5cba75e32f..c96fb991fe0 100644 --- a/addons/mass_mailing/static/src/js/mass_mailing_widget.js +++ b/addons/mass_mailing/static/src/js/mass_mailing_widget.js @@ -5,21 +5,28 @@ var config = require('web.config'); var core = require('web.core'); var FieldHtml = require('web_editor.field.html'); var fieldRegistry = require('web.field_registry'); -var convertInline = require('web_editor.convertInline'); +var QWeb = core.qweb; var _t = core._t; var MassMailingFieldHtml = FieldHtml.extend({ xmlDependencies: (FieldHtml.prototype.xmlDependencies || []).concat(["/mass_mailing/static/src/xml/mass_mailing.xml"]), - jsLibs: [ - '/mass_mailing/static/src/js/mass_mailing_snippets.js', - ], + assetLibs: ['web_editor.compiled_assets_wysiwyg'], + jsLibs: ['/mass_mailing/static/src/js/mass_mailing_snippets.js'], custom_events: _.extend({}, FieldHtml.prototype.custom_events, { snippets_loaded: '_onSnippetsLoaded', }), + events: { + 'click .o_we_show_themes_btn': '_onShowThemesClick', + 'click .o_mail_theme_selector a': '_onChangeThemeClick', + 'mouseenter .o_mail_theme_selector a': '_onChangeThemeMouseEnter', + 'mouseleave .o_mail_theme_selector a': '_onChangeThemeMouseLeave', + 'click .o_we_fullscreen_btn': '_onFullScreenClick', + }, + /** * @override */ @@ -41,103 +48,34 @@ var MassMailingFieldHtml = FieldHtml.extend({ * * @override */ - commitChanges: function () { + commitChanges: async function () { var self = this; - if (config.isDebug() && this.mode === 'edit') { - var layoutInfo = $.summernote.core.dom.makeLayoutInfo(this.wysiwyg.$editor); - $.summernote.pluginEvents.codeview(undefined, undefined, layoutInfo, false); - } - if (this.mode === 'readonly' || !this.isRendered) { - return this._super(); - } - var fieldName = this.nodeOptions['inline-field']; - - if (this.$content.find('.o_basic_theme').length) { - this.$content.find('*').css('font-family', ''); + await this._super(); + if (this.mode === 'readonly' || !this.wysiwyg) { + return; } - var $editable = this.wysiwyg.getEditable(); + const isDirty = this._isDirty; + const changes = {}; + changes[this.nodeOptions['inline-field']] = await this.wysiwyg.getValue('text/mail'); - return this.wysiwyg.saveModifiedImages(this.$content).then(function () { - return self.wysiwyg.save().then(function (result) { - self._isDirty = result.isDirty; - - convertInline.attachmentThumbnailToLinkImg($editable); - convertInline.fontToImg($editable); - convertInline.classToStyle($editable); - - self.trigger_up('field_changed', { - dataPointID: self.dataPointID, - changes: _.object([fieldName], [self._unWrap($editable.html())]) - }); - - if (self._isDirty && self.mode === 'edit') { - return self._doAction(); - } - }); + self.trigger_up('field_changed', { + dataPointID: self.dataPointID, + changes: changes, }); - }, - /** - * The html_frame widget is opened in an iFrame that has its URL encoded - * with all the key/values returned by this method. - * - * Some fields can get very long values and we want to omit them for the URL building. - * - * @override - */ - getDatarecord: function () { - return _.omit(this._super(), [ - 'mailing_domain', - 'contact_list_ids', - 'body_html', - 'attachment_ids' - ]); + + if (isDirty && self.mode === 'edit') { + return self._doAction(); + } }, //-------------------------------------------------------------------------- // Private //-------------------------------------------------------------------------- - /** - * Returns true if must force the user to choose a theme. - * - * @private - * @returns {Boolean} - */ - _checkIfMustForceThemeChoice: function () { - var firstChoice = this._editableAreaIsEmpty(); - this.$content.closest('body').toggleClass("o_force_mail_theme_choice", firstChoice); - return firstChoice; - }, - /** - * Returns true if the editable area is empty. - * - * @private - * @param {JQuery} [$layout] - * @returns {Boolean} - */ - _editableAreaIsEmpty: function ($layout) { - $layout = $layout || this.$content.find(".o_layout"); - var $mailWrapper = $layout.children(".o_mail_wrapper"); - var $mailWrapperContent = $mailWrapper.find('.o_mail_wrapper_td'); - if (!$mailWrapperContent.length) { // compatibility - $mailWrapperContent = $mailWrapper; - } - var value; - if ($mailWrapperContent.length > 0) { - value = $mailWrapperContent.html(); - } else if ($layout.length) { - value = $layout.html(); - } else { - value = this.wysiwyg.getValue(); - } - var blankEditable = "


"; - return value === "" || value === blankEditable; - }, /** * @override */ _renderEdit: function () { - this._isFromInline = !!this.value; if (!this.value) { this.value = this.recordData[this.nodeOptions['inline-field']]; } @@ -166,25 +104,6 @@ var MassMailingFieldHtml = FieldHtml.extend({ } return $(); }, - /** - * Returns the selected theme, if any. - * - * @private - * @param {Object} themesParams - * @returns {false|Object} - */ - _getSelectedTheme: function (themesParams) { - var $layout = this.$content.find(".o_layout"); - var selectedTheme = false; - if ($layout.length !== 0) { - _.each(themesParams, function (themeParams) { - if ($layout.hasClass(themeParams.className)) { - selectedTheme = themeParams; - } - }); - } - return selectedTheme; - }, /** * Swap the previous theme's default images with the new ones. * (Redefine the `src` attribute of all images in a $container, depending on the theme parameters.) @@ -221,81 +140,187 @@ var MassMailingFieldHtml = FieldHtml.extend({ $img.attr("src", src); }); }, + _getContent: async function () { + return $(this.$('jw-shadow')[0].shadowRoot).find(':not(style,link)'); + }, /** - * Switch themes or import first theme. + * Reload snippet when choose a template. + * + * @override + */ + _createWysiwygIntance: async function () { + await this._super(); + const onCommitCheckSnippets = (params) => { + if (params.commandNames.includes('applyTemplate')) { + setTimeout(() => { + // use setTimeout to reload snippets after the redraw + this.wysiwyg.snippetsMenu.trigger('reload_snippet_dropzones'); + }); + } + }; + this.wysiwyg.editor.dispatcher.registerCommandHook('@commit', onCommitCheckSnippets); + }, + /** + * Add templates & themes. + * + * @override + */ + _getWysiwygOptions: async function () { + this.needShadow = true; + const options = await this._super(); + const self = this; + + // Get the snippets to have the templates and themes container. + const $snippets = $(await this._rpc({ + model: 'ir.ui.view', + method: 'render_public_asset', + args: [options.snippets, {}], + kwargs: { + context: options.recordInfo.context, + }, + })); + + // Create templates and themes components. + const themes = [{ + id: 'default', + label: _t('Default'), + render(editor) { + return editor.plugins.get(self.wysiwyg.JWEditorLib.Parser).parse('text/html', + '
'); + }, + }]; + const components = []; + const templateConfigurations = {}; + $snippets.find("#email_designer_themes").children().each(function () { + const $template = $(this); + const data = $template.data(); + const templateId = 'template-' + data.name; + const themeId = 'theme-' + data.name; + const nowrap = !!$template.data('nowrap'); + components.push({ + id: templateId, + async render(editor) { + const valueAndTheme = self._getValueAndTheme($template.html()); + const html = '' + valueAndTheme.value + ''; + return editor.plugins.get(self.wysiwyg.JWEditorLib.Parser).parse('text/html', html); + }, + }); + templateConfigurations[templateId] = { + componentId: templateId, + zoneId: 'editable', + label: data.name, + thumbnail: data.img + '_large.png', + thumbnailZoneId: 'container', + }; + themes.push({ + id: themeId, + data: data, + label: data.name, + render(editor) { + const parserPlugin = editor.plugins.get(self.wysiwyg.JWEditorLib.Parser); + if (nowrap) { + return parserPlugin.parse('text/html', + '
'); + } else { + // This wrapper structure is the only way to have a responsive + // and centered fixed-width content column on all mail clients + return parserPlugin.parse('text/html', + '
' + + '' + + '' + + '' + + '' + + '' + + '' + + '
' + + '
'); + } + }, + }); + }); + + // Add the templates and themes as options. + options.templates = { + components: components, + templateConfigurations: templateConfigurations, + }; + options.themes = themes; + + // Get the current theme. + const valueAndTheme = this._getValueAndTheme(options.value); + if (valueAndTheme.themeId) { + options.value = '' + valueAndTheme.value + ''; + } else if (options.value.length) { + options.value = '' + valueAndTheme.value + ''; + } + + return options; + }, + /** + * Returns the selected theme, if any. * * @private - * @param {Boolean} firstChoice true if this is the first chosen theme (going from no theme to a theme) - * @param {Object} themeParams + * @param {string} value + * @returns {[string, string]} [value, themeId] */ - _switchThemes: function (firstChoice, themeParams) { - if (!themeParams || this.switchThemeLast === themeParams) { - return; - } - this.switchThemeLast = themeParams; - - this.$content.closest('body').removeClass(this._allClasses).addClass(themeParams.className); - - var $old_layout = this.$content.find('.o_layout'); - - var $new_wrapper; - var $newWrapperContent; - if (themeParams.nowrap) { - $new_wrapper = $('
', { - class: 'oe_structure' - }); - $newWrapperContent = $new_wrapper; - } else { - // This wrapper structure is the only way to have a responsive - // and centered fixed-width content column on all mail clients - $new_wrapper = $('', { - class: 'o_mail_wrapper' - }); - $newWrapperContent = $('').append( - $('
', { - class: 'o_mail_no_options o_mail_wrapper_td oe_structure' - }); - $new_wrapper.append($('
', { - class: 'o_mail_no_resize o_not_editable', - contenteditable: 'false' - }), - $newWrapperContent, - $('', { - class: 'o_mail_no_resize o_not_editable', - contenteditable: 'false' - }) - )); - } - var $newLayout = $('
', { - class: 'o_layout ' + themeParams.className - }).append($new_wrapper); - - var $contents; - if (firstChoice) { - $contents = themeParams.template; - } else if ($old_layout.length) { - $contents = ($old_layout.hasClass('oe_structure') ? $old_layout : $old_layout.find('.oe_structure').first()).contents(); - } else { - $contents = this.$content.find('.o_editable').contents(); - } - - $newWrapperContent.append($contents); - this._switchImages(themeParams, $newWrapperContent); - this.$content.find('.o_editable').empty().append($newLayout); - $old_layout.remove(); - - if (firstChoice) { - $newWrapperContent.find('*').addBack() - .contents() - .filter(function () { - return this.nodeType === 3 && this.textContent.match(/\S/); - }).parent().addClass('o_default_snippet_text'); - - if (themeParams.name == 'basic') { - this.$content.focusIn(); + _getValueAndTheme: function (value) { + const $value = $(value); + let $layout = $value.hasClass("o_layout") ? $value : $value.find(".o_layout"); + let themeId; + if ($layout.length) { + let $contents = $layout.contents(); + const classNameThemeId = [].find.call($layout[0].classList, className => className.includes('_theme')); + themeId = classNameThemeId && ('theme-' + classNameThemeId.slice(2, -6)); + const $td = $contents.find('.o_mail_wrapper_td'); + if ($td.length) { + $contents = $td.contents(); + } else if ($layout.length) { + $contents = $layout.contents(); } + value = $contents.get().map(node => node.outerHTML || node.textContent).join(''); } - this.wysiwyg.trigger('reload_snippet_dropzones'); + return {value: value, themeId: themeId}; + }, + /** + * @private + */ + _closeThemes: function () { + this.$el.find('#o_scroll, .o_snippet_search_filter').removeClass('d-none'); + this.$el.find('.o_mail_theme_selector').addClass('d-none'); + }, + /** + * @private + */ + _previewUpdateTheme: function (themeId) { + const theme = this.wysiwyg.options.themes.find(theme => theme.id === themeId); + const $layout = $(this.el.querySelector('jw-shadow::shadow /deep/ .o_layout')); + $layout.attr('class', 'o_layout o_' + theme.data.name + '_theme'); + + const themeName = theme.data.name; + const imagesInfo = theme.data.imagesInfo; + $layout.find('img').each(function () { + const $img = $(this); + let src = $img.attr('src'); + + const isLogo = src.includes('logo.'); + let moduleName = 'mass_mailing'; + let format = 'jpg'; + if (imagesInfo.logo && imagesInfo.logo.module && isLogo) { + moduleName = imagesInfo.logo.module; + } else if (imagesInfo.all && imagesInfo.all.module) { + moduleName = imagesInfo.all.module; + } + if (imagesInfo.logo && imagesInfo.logo.format && isLogo) { + format = imagesInfo.logo.format; + } else if (imagesInfo.all && imagesInfo.all.format) { + format = imagesInfo.all.format; + } + + src = src.replace( + /^\/[^\/]+\/(.+)\/theme_[^/]+\/(.*)\.\w+$/, + '/' + moduleName + '/$1/theme_' + themeName + '/$2.' + format); + $img.attr('src', src); + }); }, //-------------------------------------------------------------------------- @@ -303,191 +328,101 @@ var MassMailingFieldHtml = FieldHtml.extend({ //-------------------------------------------------------------------------- /** + * @private * @override */ - _onLoadWysiwyg: function () { - if (this._isFromInline) { - this._fromInline(); - } - if (this.snippetsLoaded) { - this._onSnippetsLoaded(this.snippetsLoaded); - } - this._super(); + _onSnippetsLoaded: function () { + this.$el.find("#email_designer_themes").remove(); + this.$el.find('#oe_snippets').append($(QWeb.render('mass_mailing.theme_selector', {themes: this.wysiwyg.options.themes}))); + this.$el.find('#snippets_menu').append($('')); + this.$el.find('#oe_snippets').before($('')); }, /** * @private - * @param {OdooEvent} ev */ - _onSnippetsLoaded: function (ev) { - var self = this; - if (!this.$content) { - this.snippetsLoaded = ev; - return; - } - var $snippetsSideBar = ev.data; - var $themes = $snippetsSideBar.find("#email_designer_themes").children(); - var $snippets = $snippetsSideBar.find(".oe_snippet"); - var $snippets_menu = $snippetsSideBar.find("#snippets_menu"); + _onChangeThemeClick: function (ev) { + ev.preventDefault(); + const themeId = $(ev.target.closest('a')).data('id'); + const theme = this.wysiwyg.options.themes.find(theme => theme.id === themeId); + const layoutPlugin = this.wysiwyg.editor.plugins.get(this.wysiwyg.JWEditorLib.Layout) + const domEngine = layoutPlugin.engines.dom; + const themeNode = domEngine.components.main[0].firstDescendant(node => node.themeName); + if (themeId !== themeNode.themeName) { + const changeTheme = () => { + themeNode.themeName = themeId; - if (config.device.isMobile) { - $snippetsSideBar.hide(); - this.$content.attr('style', 'padding-left: 0px !important'); - } + const themeName = theme.data.name; + const imagesInfo = theme.data.imagesInfo; + const imageNodes = themeNode.descendants(this.wysiwyg.JWEditorLib.ImageNode); - if ($themes.length === 0) { - return; - } + for (const imageNode of imageNodes) { + const attributes = imageNode.modifiers.get(this.wysiwyg.JWEditorLib.Attributes); + let src = attributes.get('src'); - /** - * Initialize theme parameters. - */ - this._allClasses = ""; - var themesParams = _.map($themes, function (theme) { - var $theme = $(theme); - var name = $theme.data("name"); - var classname = "o_" + name + "_theme"; - self._allClasses += " " + classname; - var imagesInfo = _.defaults($theme.data("imagesInfo") || {}, { - all: {} - }); - _.each(imagesInfo, function (info) { - info = _.defaults(info, imagesInfo.all, { - module: "mass_mailing", - format: "jpg" - }); - }); - return { - name: name, - className: classname || "", - img: $theme.data("img") || "", - template: $theme.html().trim(), - nowrap: !!$theme.data('nowrap'), - get_image_info: function (filename) { - if (imagesInfo[filename]) { - return imagesInfo[filename]; + const isLogo = src.includes('logo.'); + let moduleName = 'mass_mailing'; + let format = 'jpg'; + if (imagesInfo.logo && imagesInfo.logo.module && isLogo) { + moduleName = imagesInfo.logo.module; + } else if (imagesInfo.all && imagesInfo.all.module) { + moduleName = imagesInfo.all.module; } - return imagesInfo.all; + if (imagesInfo.logo && imagesInfo.logo.format && isLogo) { + format = imagesInfo.logo.format; + } else if (imagesInfo.all && imagesInfo.all.format) { + format = imagesInfo.all.format; + } + + src = src.replace( + /^\/[^\/]+\/(.+)\/theme_[^/]+\/(.*)\.\w+$/, + '/' + moduleName + '/$1/theme_' + themeName + '/$2.' + format); + attributes.set('src', src); } }; - }); - $themes.parent().remove(); - - /** - * Create theme selection screen and check if it must be forced opened. - * Reforce it opened if the last snippet is removed. - */ - var $dropdown = $(core.qweb.render("mass_mailing.theme_selector", { - themes: themesParams - })).dropdown(); - - var firstChoice = this._checkIfMustForceThemeChoice(); - - /** - * Add proposition to install enterprise themes if not installed. - */ - var $mail_themes_upgrade = $dropdown.find(".o_mass_mailing_themes_upgrade"); - $mail_themes_upgrade.on("click", function (e) { - e.stopImmediatePropagation(); - e.preventDefault(); - self.do_action("mass_mailing.action_mass_mailing_configuration"); - }); - - /** - * Switch theme when a theme button is hovered. Confirm change if the theme button - * is pressed. - */ - var selectedTheme = false; - $dropdown.on("mouseenter", ".dropdown-item", function (e) { - if (firstChoice) { - return; - } - e.preventDefault(); - var themeParams = themesParams[$(e.currentTarget).index()]; - self._switchThemes(firstChoice, themeParams); - }); - $dropdown.on("mouseleave", ".dropdown-item", function (e) { - self._switchThemes(false, selectedTheme); - }); - $dropdown.on("click", '[data-toggle="dropdown"]', function (e) { - var $menu = $dropdown.find('.dropdown-menu'); - var isVisible = $menu.hasClass('show'); - if (isVisible) { - e.preventDefault(); - e.stopImmediatePropagation(); - $menu.removeClass('show'); - } - }); - - $dropdown.on("click", ".dropdown-item", function (e) { - e.preventDefault(); - e.stopImmediatePropagation(); - var themeParams = themesParams[$(e.currentTarget).index()]; - if (firstChoice) { - self._switchThemes(firstChoice, themeParams); - self.$content.closest('body').removeClass("o_force_mail_theme_choice"); - firstChoice = false; - - if ($mail_themes_upgrade.length) { - $dropdown.remove(); - $snippets_menu.empty(); - } - } - - self._switchImages(themeParams, $snippets); - - selectedTheme = themeParams; - - // Notify form view - self.wysiwyg.getEditable().trigger('change'); - $dropdown.find('.dropdown-menu').removeClass('show'); - $dropdown.find('.dropdown-item.selected').removeClass('selected'); - $dropdown.find('.dropdown-item:eq(' + themesParams.indexOf(selectedTheme) + ')').addClass('selected'); - }); - - /** - * If the user opens the theme selection screen, indicates which one is active and - * saves the information... - * ... then when the user closes check if the user confirmed its choice and restore - * previous state if this is not the case. - */ - $dropdown.on("shown.bs.dropdown", function () { - selectedTheme = self._getSelectedTheme(themesParams); - $dropdown.find(".dropdown-item").removeClass("selected").filter(function () { - return ($(this).has(".o_thumb[style=\"" + "background-image: url(" + (selectedTheme && selectedTheme.img) + "_small.png)" + "\"]").length > 0); - }).addClass("selected"); - }); - $dropdown.on("hidden.bs.dropdown", function () { - self._switchThemes(firstChoice, selectedTheme); - }); - - /** - * On page load, check the selected theme and force switching to it (body needs the - * theme style for its edition toolbar). - */ - selectedTheme = this._getSelectedTheme(themesParams); - if (selectedTheme) { - this.$content.closest('body').addClass(selectedTheme.className); - $dropdown.find('.dropdown-item:eq(' + themesParams.indexOf(selectedTheme) + ')').addClass('selected'); - this._switchImages(selectedTheme, $snippets); - } else if (this.$content.find('.o_layout').length) { - themesParams.push({ - name: 'o_mass_mailing_no_theme', - className: 'o_mass_mailing_no_theme', - img: "", - template: this.$content.find('.o_layout').addClass('o_mass_mailing_no_theme').clone().find('oe_structure').empty().end().html().trim(), - nowrap: true, - get_image_info: function () {} - }); - selectedTheme = this._getSelectedTheme(themesParams); + this.wysiwyg.editor.execCommand(changeTheme); } - - $dropdown.insertAfter($snippets_menu); + this._closeThemes(); + }, + /** + * @private + */ + _onChangeThemeMouseEnter: function (ev) { + const themeId = $(ev.target.closest('a')).data('id'); + this._previewUpdateTheme(themeId); + }, + /** + * @private + */ + _onChangeThemeMouseLeave: function (ev) { + const layoutPlugin = this.wysiwyg.editor.plugins.get(this.wysiwyg.JWEditorLib.Layout) + const domEngine = layoutPlugin.engines.dom; + const themeNode = domEngine.components.main[0].firstDescendant(node => node.themeName); + this._previewUpdateTheme(themeNode.themeName); + }, + /** + * @private + */ + _onFullScreenClick: function (ev) { + if (this.el.classList.contains('jw-fullscreen')) { + document.body.classList.remove('jw-fullscreen'); + this.el.classList.remove('jw-fullscreen'); + } else { + document.body.classList.add('jw-fullscreen'); + this.el.classList.add('jw-fullscreen'); + } + }, + /** + * @private + */ + _onShowThemesClick: function () { + this.$el.find('#o_scroll, .o_snippet_search_filter, .o_mail_theme_selector').toggleClass('d-none'); + this.$el.one('click', '.o_we_add_snippet_btn, .o_we_customize_snippet_btn', () => this._closeThemes()); }, /** * @override * @param {MouseEvent} ev */ - _onTranslate: function (ev) { + _onTranslate: function () { this.trigger_up('translate', { fieldName: this.nodeOptions['inline-field'], id: this.dataPointID, diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.jw.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.jw.scss index e69de29bb2d..e1393b88e17 100644 --- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.jw.scss +++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.jw.scss @@ -0,0 +1,50 @@ +.o_field_widget.o_mail_body { + height: 55vh; + display: flex; + + .o_mail_theme_selector { + overflow: auto; + + > a { + .o_thumb { + display: none; + background-size: cover; + padding-top: 45%; + width: 90%; + margin: 10px auto; + + &.logo { + display: block; + } + } + + &:first-child { + display: none; + } + } + } + + .o_we_fullscreen_btn { + position: absolute; + top: 0; + right: 12px; + } +} + +.jw-fullscreen .jw-fullscreen { + z-index: 1; +} + +.oe_structure { + width: 100%; + @media (max-width: map-get($grid-breakpoints, 'lg')) { + width: auto; + } +} +.o_basic_theme .o_main_sidebar { + display: none; +} + +.oe_form_field_html .o_we_website_top_actions { + display: none; +} diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss index 97e296306cd..e69de29bb2d 100644 --- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss +++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss @@ -1,210 +0,0 @@ -.o_form_view .o_form_sheet .o_notebook .tab-content .tab-pane .o_mail_body { - // cancel padding of form_sheet - margin-top: -$o-sheet-cancel-tpadding; - margin-left: -$o-sheet-cancel-hpadding; - margin-right: -$o-sheet-cancel-hpadding; - margin-bottom: -$o-sheet-cancel-bpadding; -} - -.o_mail_theme_selector { - > a { - @include o-position-absolute(0, 0, auto, 0); - height: $o-we-toolbar-height; - line-height: $o-we-toolbar-height; - border-radius: 0; - background-color: $o-we-sidebar-bg; - color: #212629; - display: flex; - justify-content: center; - align-items: center; - box-shadow: none !important; - - &:hover, &:focus, &:active { - color: #4e525b; - } - - i { - margin-right: 10px; - } - } - - &.show > a { - color: white; - background-color: #212629; - } - - .dropdown-menu { - position: absolute; - bottom: -2px; - top: -3px !important; - left: -5px !important; - right: -2px !important; - margin: 0; - border-radius: 0; - overflow: auto; - background-color: $o-we-sidebar-bg; - z-index: 1050; - - &.show { - bottom: 31px !important; - top: -2px !important; - right: 3px !important; - } - - .dropdown-item { - padding: 10px 10px; - &:first-child { - display: none; - } - - .o_thumb { - display: none; - background-size: cover; - padding-top: 50%; - border: 1px solid $o-we-border-color; - - - &.logo { - display: block; - } - } - - - &:hover { - background-color: $o-we-sidebar-bg; - - .o_thumb { - border: 1px solid black; - } - } - - &.selected .o_thumb { - border: 2px solid $o-brand-odoo; - background-color: $o-we-sidebar-bg; - } - } - } -} - -body.o_force_mail_theme_choice { - #oe_snippets { - width: 100%; - - .o_mail_theme_selector { - .dropdown-toggle { - display: none; - } - - .dropdown-menu { - display: block; - - .dropdown-item { - margin: 0; - float: left; - clear: none; - width: 100%; - max-width: 25%; - transition: all 0.3s ease 0s; - - &:first-child { - display: block; - } - - .o_thumb { - display: none; - padding-top: 107%; - border: 1px solid #4e525b; - border-top: 1px solid $o-we-border-color; - box-shadow: 0 5px 10px rgba(black, 0.8); - will-change: transform; - backface-visibility: hidden; - transition: all 0.3s ease 0s; - - &.small { - display: block; - } - - @media screen and (min-width: 900px) { - &.small { - display: none; - } - &.large { - display: block; - } - } - } - - &:hover { - background-color: #212629; - - .o_thumb { - box-shadow: 0 5px 30px 1px rgba(black, 0.6); - } - } - - &.o_mass_mailing_themes_upgrade .o_thumb { - position: relative; - display: block; - border: 1px dashed white; - opacity: 0.2; - - > .fa { - @include o-position-absolute(0, 0, 0, 0); - text-align: center; - font-size: 50px; - color: white; - - &::before { - vertical-align: middle; - } - &::after { - content: ""; - display: inline-block; - height: 100%; - vertical-align: middle; - } - } - } - } - } - } - } - .note-editor { - display: none; - } -} - -body.editor_enable.o_basic_theme.o_in_iframe { - padding-right: 0px !important; - - #web_editor-top-edit .note-popover .popover { - right: 0 !important; - } - - #oe_snippets { - display: none; - } -} - -.note-editable .o_layout { - overflow: initial; -} - -#web_editor-toolbars .popover .note-color { - .note-back-color-preview .dropdown-toggle, - .note-fore-color-preview .dropdown-toggle { - height: $o-we-toolbar-height - 1; - } -} - -.oe_structure { - width: 100%; - @media (max-width: map-get($grid-breakpoints, 'lg')) { - width: auto; - margin-right: $o-we-sidebar-width; - } -} - -:root { - font-size: 14px; -} diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.shadow.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.shadow.scss index e69de29bb2d..f932d39288b 100644 --- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.shadow.scss +++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.shadow.scss @@ -0,0 +1,13 @@ +:root { + font-size: 14px; +} +.oe_structure { + width: 100%; + @media (max-width: map-get($grid-breakpoints, 'lg')) { + width: auto; + margin-left: $o-we-sidebar-width; + } +} +.note-editable { + min-height: 400px; +} diff --git a/addons/mass_mailing/static/src/xml/mass_mailing.xml b/addons/mass_mailing/static/src/xml/mass_mailing.xml index b4a3bfce26b..9329fa3e22d 100644 --- a/addons/mass_mailing/static/src/xml/mass_mailing.xml +++ b/addons/mass_mailing/static/src/xml/mass_mailing.xml @@ -1,22 +1,17 @@ -
- - Change Style - -