From c12f2cd5ccc72a680ab741b4ce16d3913dd3854e Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Tue, 24 May 2016 17:47:14 +0200 Subject: [PATCH] [REF] web_editor,website(_*): snippets Refactor snippet structure * new "cover" snippet * move the title out of col-md-12 * delete snippets (s_quote_slider) * rename snippets (FAQ Roller -> Accordion) * ... Refactor the way the background images are handled so that themes can customize the defaults ones easily without ugly xpath or ugly css. --- .../static/src/js/snippets.options.js | 68 ++-- addons/website/data/data.xml | 150 ++++++++ addons/website/data/demo.xml | 2 +- addons/website/static/src/img/aqua.jpg | Bin 378536 -> 0 bytes .../src/img/{banner => backgrounds}/aqua.jpg | Bin .../img/{banner => backgrounds}/baby_blue.jpg | Bin .../src/img/{banner => backgrounds}/black.jpg | Bin .../{banner => backgrounds}/business_guy.jpg | Bin .../{banner => backgrounds}/color_splash.jpg | Bin .../img/{banner => backgrounds}/flower.jpg | Bin .../{banner => backgrounds}/flower_field.jpg | Bin .../{banner => backgrounds}/greenfields.jpg | Bin .../img/{banner => backgrounds}/landscape.jpg | Bin .../src/img/{banner => backgrounds}/mango.jpg | Bin .../img/{banner => backgrounds}/mountains.jpg | Bin .../{banner => backgrounds}/orange_red.jpg | Bin .../parallax_flowers.jpg} | Bin .../parallax_girl.jpg} | Bin .../parallax_quote.png} | Bin .../img/{banner => backgrounds}/velour.jpg | Bin .../src/img/{banner => backgrounds}/wood.jpg | Bin .../{banner => backgrounds}/yellow_green.jpg | Bin .../website/static/src/img/content_here.png | Bin 459 -> 0 bytes .../{banner => library}/banner_picture.png | Bin .../static/src/js/website.snippets.editor.js | 3 + .../static/src/less/website.snippets.less | 11 + addons/website/views/snippets.xml | 319 +++++++----------- .../website_event/data/website_event_demo.xml | 12 +- .../views/templates.xml | 5 +- 29 files changed, 322 insertions(+), 248 deletions(-) delete mode 100644 addons/website/static/src/img/aqua.jpg rename addons/website/static/src/img/{banner => backgrounds}/aqua.jpg (100%) rename addons/website/static/src/img/{banner => backgrounds}/baby_blue.jpg (100%) rename addons/website/static/src/img/{banner => backgrounds}/black.jpg (100%) rename addons/website/static/src/img/{banner => backgrounds}/business_guy.jpg (100%) rename addons/website/static/src/img/{banner => backgrounds}/color_splash.jpg (100%) rename addons/website/static/src/img/{banner => backgrounds}/flower.jpg (100%) rename addons/website/static/src/img/{banner => backgrounds}/flower_field.jpg (100%) rename addons/website/static/src/img/{banner => backgrounds}/greenfields.jpg (100%) rename addons/website/static/src/img/{banner => backgrounds}/landscape.jpg (100%) rename addons/website/static/src/img/{banner => backgrounds}/mango.jpg (100%) rename addons/website/static/src/img/{banner => backgrounds}/mountains.jpg (100%) rename addons/website/static/src/img/{banner => backgrounds}/orange_red.jpg (100%) rename addons/website/static/src/img/{parallax/parallax_bg.jpg => backgrounds/parallax_flowers.jpg} (100%) rename addons/website/static/src/img/{parallax/parallax_photo1.jpg => backgrounds/parallax_girl.jpg} (100%) rename addons/website/static/src/img/{parallax/quote.png => backgrounds/parallax_quote.png} (100%) rename addons/website/static/src/img/{banner => backgrounds}/velour.jpg (100%) rename addons/website/static/src/img/{banner => backgrounds}/wood.jpg (100%) rename addons/website/static/src/img/{banner => backgrounds}/yellow_green.jpg (100%) delete mode 100644 addons/website/static/src/img/content_here.png rename addons/website/static/src/img/{banner => library}/banner_picture.png (100%) diff --git a/addons/web_editor/static/src/js/snippets.options.js b/addons/web_editor/static/src/js/snippets.options.js index 34e51b4509d..b607c1058bd 100644 --- a/addons/web_editor/static/src/js/snippets.options.js +++ b/addons/web_editor/static/src/js/snippets.options.js @@ -311,73 +311,56 @@ odoo.define('web_editor.snippets.options', function (require) { * The background option is designed to change the background image of a snippet. */ registry.background = SnippetOption.extend({ - start: function ($change_target) { - this.$target = $change_target || this.$target; - this._super.apply(this, arguments); - var src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, ""); - if (this.$target.hasClass('oe_custom_bg')) { - this.$el.find('li[data-choose_image]').data("background", src).attr("data-background", src); - } - }, background: function (type, value, $li) { if (value && value.length) { - this.$target.attr("style", 'background-image: url(' + value + '); ' + (this.$target.attr("style") || '').replace(/background-image:[^;]+/, '') ); + this.$target.css("background-image", "url(" + value + ")"); this.$target.addClass("oe_img_bg"); } else { this.$target.css("background-image", ""); this.$target.removeClass("oe_img_bg oe_custom_bg"); } }, - select_class : function (type, value, $li) { + select_class: function (type, value, $li) { this.background(type, '', $li); this._super.apply(this, arguments); }, choose_image: function (type, value, $li) { - if(type !== "click") return; + if(type !== "click") { + return; + } - var self = this; - var $image = $(''); - $image.attr("src", value); - $image.appendTo(self.$target); + // Put fake image in the DOM, edit it and use it as background-image + var $image = $("", {"class": "hidden", "src": value}).appendTo(this.$target); var _editor = new widget.MediaDialog(null, {}, null, $image[0]).open(); _editor.$('[href="#editor-media-video"], [href="#editor-media-icon"]').addClass('hidden'); - _editor.on('saved', self, function () { + _editor.on('saved', this, function () { var value = $image.attr("src"); - $image.remove(); - self.$el.find('li[data-choose_image]').data("background", value).attr("data-background", value); - self.background(type, value,$li); - self.$target.addClass('oe_custom_bg'); - self.$target.trigger("snippet-option-change", [self]); - self.set_active(); + this.background(type, value, $li); + this.$target.addClass("oe_custom_bg"); + this.set_active(); + this.$target.trigger("snippet-option-change", [this]); }); - _editor.on('cancel', self, function () { + _editor.on('closed', this, function () { $image.remove(); }); }, set_active: function () { - var src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, ""); this._super.apply(this, arguments); + var src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, ""); if (this.$target.hasClass('oe_custom_bg')) { this.$el.find('li[data-choose_image]').data("background", src).attr("data-background", src); } - this.$el.find('li[data-background]:not([data-background=""])') + this.$el.find('li[data-background]') .removeClass("active") - .each(function () { - var background = $(this).data("background") || $(this).attr("data-background"); - if ((src.length && background.length && src.indexOf(background) !== -1) || (!src.length && !background.length)) { - $(this).addClass("active"); - } - }); - - if (!this.$el.find('li[data-background].active').size()) { - this.$el.find('li[data-background=""]:not([data-choose_image])').addClass("active"); - } else { - this.$el.find('li[data-background=""]:not([data-choose_image])').removeClass("active"); - } + .filter(function () { + var bgOption = $(this).data("background"); + return (bgOption === "" && src === "" || bgOption !== "" && src.indexOf(bgOption) >= 0); + }) + .addClass("active"); } }); @@ -387,13 +370,16 @@ odoo.define('web_editor.snippets.options', function (require) { registry.background_position = SnippetOption.extend({ start: function () { this._super.apply(this, arguments); - + this.on_focus(); var self = this; - var $btn = this.$overlay.find('.oe_options'); - $btn.on('show.bs.dropdown', function () { - $btn.find('.background_position_li').toggleClass('hidden', self.$target.css('background-image') === 'none'); + this.$target.on("snippet-option-change", function () { + self.on_focus(); }); }, + on_focus: function () { + this._super.apply(this, arguments); + this.$el.toggleClass('hidden', this.$target.css('background-image') === 'none'); + }, background_position: function (type, value, $li) { if (type != 'click') { return; } var self = this; diff --git a/addons/website/data/data.xml b/addons/website/data/data.xml index dd9f3b5fc84..8f6fc1855cf 100644 --- a/addons/website/data/data.xml +++ b/addons/website/data/data.xml @@ -103,6 +103,7 @@ + business_conference business_conference.jpg ir.ui.view @@ -111,6 +112,7 @@ + business_stats business_stats.jpg ir.ui.view @@ -119,6 +121,7 @@ + gears gears.png ir.ui.view @@ -127,6 +130,7 @@ + helpdesk helpdesk.jpg ir.ui.view @@ -135,6 +139,7 @@ + imac imac.png ir.ui.view @@ -143,6 +148,7 @@ + lazagne lazagne.jpg ir.ui.view @@ -151,6 +157,7 @@ + manufacturing manufacturing.jpg ir.ui.view @@ -159,6 +166,7 @@ + ipad ipad.png ir.ui.view @@ -167,6 +175,7 @@ + world world.jpg ir.ui.view @@ -175,6 +184,7 @@ + vegetables vegetables.png ir.ui.view @@ -183,6 +193,7 @@ + ship_sea ship_sea.jpg ir.ui.view @@ -191,6 +202,7 @@ + flight flight.jpg ir.ui.view @@ -199,6 +211,7 @@ + engineer engineer.jpg ir.ui.view @@ -207,6 +220,7 @@ + school_kids school_kids.jpg ir.ui.view @@ -215,6 +229,7 @@ + business_hands business_hands.jpg ir.ui.view @@ -222,5 +237,140 @@ /website/static/src/img/library/business_hands.jpg + + + + Website Background Image 01 + s_background_image_01.jpg + url + /website/static/src/img/backgrounds/aqua.jpg + + + + Website Background Image 02 + s_background_image_02.jpg + url + /website/static/src/img/backgrounds/baby_blue.jpg + + + + Website Background Image 03 + s_background_image_03.jpg + url + /website/static/src/img/backgrounds/black.jpg + + + + Website Background Image 04 + s_background_image_04.jpg + url + /website/static/src/img/backgrounds/business_guy.jpg + + + + Website Background Image 05 + s_background_image_05.jpg + url + /website/static/src/img/backgrounds/color_splash.jpg + + + + Website Background Image 06 + s_background_image_06.jpg + url + /website/static/src/img/backgrounds/flower_field.jpg + + + + Website Background Image 07 + s_background_image_07.jpg + url + /website/static/src/img/backgrounds/flower.jpg + + + + Website Background Image 08 + s_background_image_08.jpg + url + /website/static/src/img/backgrounds/greenfields.jpg + + + + Website Background Image 09 + s_background_image_09.jpg + url + /website/static/src/img/backgrounds/landscape.jpg + + + + Website Background Image 10 + s_background_image_10.jpg + url + /website/static/src/img/backgrounds/mango.jpg + + + + Website Background Image 11 + s_background_image_11.jpg + url + /website/static/src/img/backgrounds/mountains.jpg + + + + Website Background Image 12 + s_background_image_12.jpg + url + /website/static/src/img/backgrounds/orange_red.jpg + + + + Website Background Image 13 + s_background_image_13.jpg + url + /website/static/src/img/backgrounds/parallax_flowers.jpg + + + + Website Background Image 14 + s_background_image_14.jpg + url + /website/static/src/img/backgrounds/parallax_girl.jpg + + + + Website Background Image 15 + s_background_image_15.jpg + url + /website/static/src/img/backgrounds/parallax_quote.png + + + + Website Background Image 16 + s_background_image_16.jpg + url + /website/static/src/img/backgrounds/velour.jpg + + + + Website Background Image 17 + s_background_image_17.jpg + url + /website/static/src/img/backgrounds/wood.jpg + + + + Website Background Image 18 + s_background_image_18.jpg + url + /website/static/src/img/backgrounds/yellow_green.jpg + + + + + Cover Snippet - Default Image + s_cover_default_image.jpg + url + /web/image/website.s_background_image_01 + diff --git a/addons/website/data/demo.xml b/addons/website/data/demo.xml index adf1735dcd9..fb536cb818c 100644 --- a/addons/website/data/demo.xml +++ b/addons/website/data/demo.xml @@ -157,7 +157,7 @@ response = request.render("website.template_partner_comment", values)