From e3635494ea4d8498a483e3c286eb1460b4493ea8 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Wed, 7 Sep 2016 15:35:37 +0200 Subject: [PATCH 1/7] [IMP] mass_mailing: add default layout for mail themes When there is no content in the mail, the user is now forced to choose a theme. Once the choice is made, the theme introduces default content (series of snippet to simplify user edition). The default images are also changed when the theme is switched. To do that, JS code was implemented so that on theme switch, all the images are changed to check for images in the static theme folder or use a theme related xml_id. + Refactore theme data management. --- .../static/src/js/mass_mailing_editor.js | 194 ++++++++++++++---- .../static/src/less/mass_mailing.ui.less | 24 ++- .../static/src/xml/mass_mailing.xml | 22 +- addons/mass_mailing/views/snippets_themes.xml | 19 +- .../views/snippets_themes_options.xml | 5 - 5 files changed, 204 insertions(+), 60 deletions(-) diff --git a/addons/mass_mailing/static/src/js/mass_mailing_editor.js b/addons/mass_mailing/static/src/js/mass_mailing_editor.js index 23e8a84f155..a02836ce4d8 100644 --- a/addons/mass_mailing/static/src/js/mass_mailing_editor.js +++ b/addons/mass_mailing/static/src/js/mass_mailing_editor.js @@ -8,8 +8,6 @@ var web_editor = require('web_editor.editor'); var options = require('web_editor.snippets.options'); var snippets_editor = require('web_editor.snippet.editor'); -var _t = core._t; - var $editable_area = $("#editable_area"); if ($editable_area.length === 0 || !$editable_area.is(".o_mail_area")) { return; @@ -145,54 +143,179 @@ snippets_editor.Class.include({ return url; }, compute_snippet_templates: function (html) { + var self = this; var ret = this._super.apply(this, arguments); - var $themes = this.$("#email_designer_themes").children().addClass("oe_snippet_body"); + var $themes = this.$("#email_designer_themes").children(); if ($themes.length === 0) return ret; + /** + * Initialize theme parameters. + */ var all_classes = ""; - var $dropdown = $(core.qweb.render("mass_mailing.theme_selector", { - themes: _.map($themes, function (theme) { - var $theme = $(theme); - var classname = $theme.data("class"); - all_classes += " " + classname; - return { - className: classname, - imgSource: $theme.data("img"), - }; - }), - })); + var themes_params = _.map($themes, function (theme) { + var $theme = $(theme); + var name = $theme.data("name"); + var classname = "o_" + name + "_theme"; + all_classes += " " + classname; + var images_info = _.defaults($theme.data("imagesInfo") || {}, {all: {}}); + _.each(images_info, function (info) { + info = _.defaults(info, {module: "mass_mailing", format: "jpg"}); + }); + return { + name: name, + className: classname || "", + img: $theme.data("img") || "", + template: $theme.html().trim(), + get_image_info: function (filename) { + if (images_info[filename]) { + return images_info[filename]; + } + return images_info.all; + } + }; + }); + $themes.parent().remove(); var $body = $(document.body); - $dropdown.on("mouseenter click", "li > a", function (e) { + var $snippets = this.$(".oe_snippet"); + + /** + * 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: themes_params + })); + var first_choice; + check_if_must_force_theme_choice(); + + /** + * Switch theme when a theme button is hovered. Confirm change if the theme button + * is pressed. + */ + var selected_theme = false; + $dropdown.on("mouseenter", "li > a", function (e) { + if (first_choice) return; e.preventDefault(); - var classname = $(e.currentTarget).data("class"); - $body.removeClass(all_classes).addClass(classname); + var theme_params = themes_params[$(e.currentTarget).parent().index()]; + switch_theme(theme_params); + }); + $dropdown.on("click", "li > a", function (e) { + e.preventDefault(); + var theme_params = themes_params[$(e.currentTarget).parent().index()]; + if (first_choice) { + switch_theme(theme_params); + $body.removeClass("o_force_mail_theme_choice"); + first_choice = false; + } else { + switch_images(theme_params, $snippets); + } + selected_theme = theme_params; + + // Notify form view + window.top.odoo[window.callback+"_downup"]($editable_area.addClass("o_dirty").html()); + }); + + /** + * 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 () { + check_selected_theme(); + $dropdown.find("li").removeClass("selected").filter(function () { + return ($(this).has("img[src=\"" + (selected_theme && selected_theme.img) + "\"]").length > 0); + }).addClass("selected"); + }); + $dropdown.on("hidden.bs.dropdown", function () { + switch_theme(selected_theme); + }); + + /** + * On page load, check the selected theme and force switching to it (body needs the + * theme style for its edition toolbar). + */ + check_selected_theme(); + $body.addClass(selected_theme.className); + + $dropdown.insertAfter(this.$el.find("#snippets_menu")); + + return ret; + + function check_if_must_force_theme_choice() { + first_choice = editable_area_is_empty(); + $body.toggleClass("o_force_mail_theme_choice", first_choice); + } + + function editable_area_is_empty($layout) { + $layout = $layout || $editable_area.find(".o_layout"); + return ($editable_area.html().trim() === "" || ($layout.length > 0 && $layout.html().trim() === "")); + } + + function check_selected_theme() { var $layout = $editable_area.find(".o_layout"); + if ($layout.length === 0) { + selected_theme = false; + } else { + _.each(themes_params, function (theme_params) { + if ($layout.hasClass(theme_params.className)) { + selected_theme = theme_params; + } + }); + } + } + + function switch_images(theme_params, $container) { + $container.find("img").each(function () { + var $img = $(this); + var src = $img.attr("src"); + + var m = src.match(/^\/web\/image\/\w+\.s_default_image_(?:theme_[a-z]+_)?(.+)$/); + if (!m) { + m = src.match(/^\/\w+\/static\/src\/img\/(?:theme_[a-z]+\/)?s_default_image_(.+)\.[a-z]+$/); + } + if (!m) return; + + var file = m[1]; + var img_info = theme_params.get_image_info(file); + + if (img_info.format) { + src = "/" + img_info.module + "/static/src/img/theme_" + theme_params.name + "/s_default_image_" + file + "." + img_info.format; + } else { + src = "/web/image/" + img_info.module + ".s_default_image_theme_" + theme_params.name + "_" + file; + } + + $img.attr("src", src); + }); + } + + function switch_theme(theme_params) { + if (!theme_params || switch_theme.last === theme_params) return; + switch_theme.last = theme_params; + + $body.removeClass(all_classes).addClass(theme_params.className); + switch_images(theme_params, $editable_area); + + var $old_layout = $editable_area.find(".o_layout"); + var $new_layout = $("
", {"class": "o_layout oe_structure " + theme_params.className}); + var $contents; - if ($layout.length) { - $contents = ($layout.hasClass("oe_structure") ? $layout : $layout.find(".oe_structure").first()).contents(); + if (first_choice) { + $contents = theme_params.template; + } else if ($old_layout.length) { + $contents = ($old_layout.hasClass("oe_structure") ? $old_layout : $old_layout.find(".oe_structure").first()).contents(); } else { $contents = $editable_area.contents(); } - var $div = $("
", {"class": "o_layout oe_structure " + classname}); - $editable_area.append($div); - $div.append($contents); - $layout.remove(); - }); - var $snippets_menu = this.$el.find("#snippets_menu"); - var old_title = $snippets_menu.text(); - $dropdown.on("shown.bs.dropdown", function () { - $snippets_menu.text(_t("Choose a Theme")); - }); - $dropdown.on("hidden.bs.dropdown", function () { - $snippets_menu.text(old_title); - }); + $editable_area.empty().append($new_layout); + $new_layout.append($contents); + $old_layout.remove(); - $dropdown.insertAfter($snippets_menu); - - return ret; + self.show_blocks(); + } }, }); @@ -217,7 +340,6 @@ window.top.odoo[window["callback"]+"_updown"] = function (value, fields_values, } if (value.indexOf('on_change_model_and_list') === -1) { - $editable.html(value); if (editor_enable) { diff --git a/addons/mass_mailing/static/src/less/mass_mailing.ui.less b/addons/mass_mailing/static/src/less/mass_mailing.ui.less index 9b72a72adc7..63336f77c99 100644 --- a/addons/mass_mailing/static/src/less/mass_mailing.ui.less +++ b/addons/mass_mailing/static/src/less/mass_mailing.ui.less @@ -10,8 +10,28 @@ overflow: auto; background-color: @o-we-color-dark; - > li:hover > a { - background-color: @o-we-color-darker; + > li { + &:hover > a { + background-color: @o-we-color-darker; + } + &.selected { + border: 2px solid @odoo-brand-primary; + } } } } + +body.o_force_mail_theme_choice { + .o_mail_theme_selector { + .dropdown-toggle { + display: none; + } + .dropdown-menu { + display: block; + } + } + #editable_area::after { + content: ""; + .o-position-absolute(0, 0, 0, 0); + } +} diff --git a/addons/mass_mailing/static/src/xml/mass_mailing.xml b/addons/mass_mailing/static/src/xml/mass_mailing.xml index e82f4dbf88e..f780527d999 100644 --- a/addons/mass_mailing/static/src/xml/mass_mailing.xml +++ b/addons/mass_mailing/static/src/xml/mass_mailing.xml @@ -1,17 +1,13 @@ - -
- - - -
-
  • - - - -
    • -
    +
    + + + +
    +
  • + +
    • - +
    diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml index 44c477a92bb..71650285903 100644 --- a/addons/mass_mailing/views/snippets_themes.xml +++ b/addons/mass_mailing/views/snippets_themes.xml @@ -2,13 +2,24 @@