diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index faf02a57fc0..d0a02ce7b0b 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -358,6 +358,56 @@ ul.oe_menu_editor .disclose { -o-border-radius: 0.4em; border-radius: 0.4em; } +.oe_seo_configuration li.oe_seo_preview_g { + line-height: 1.2; + list-style: none; + list-style-image: none; + list-style-position: outside; + list-style-type: none; + font-size: small; + font-family: arial, sans-serif; +} +.oe_seo_configuration li.oe_seo_preview_g h3 { + font-size: medium; +} +.oe_seo_configuration li.oe_seo_preview_g .r { + margin: 0; + font-size: 16px; + font-style: normal; + font-weight: normal; + overflow: hidden; + text-overflow: ellipsis; + -webkit-text-overflow: ellipsis; + white-space: nowrap; +} +.oe_seo_configuration li.oe_seo_preview_g .r a { + color: #1e0fbe; + text-decoration: underline; + text-transform: none; +} +.oe_seo_configuration li.oe_seo_preview_g .r a em { + font-style: normal !important; +} +.oe_seo_configuration li.oe_seo_preview_g .s { + color: #444444; + max-width: 42em; +} +.oe_seo_configuration li.oe_seo_preview_g .kv, .oe_seo_configuration li.oe_seo_preview_g .slp { + display: block; + margin-bottom: 1px; +} +.oe_seo_configuration li.oe_seo_preview_g .f { + color: #666666; + margin-bottom: 1px; +} +.oe_seo_configuration li.oe_seo_preview_g .f cite { + color: #006621; + font-style: normal; + font-size: 14px; +} +.oe_seo_configuration li.oe_seo_preview_g .st { + line-height: 1.24; +} /* ---- ACE EDITOR ---- {{{ */ .oe_ace_view_editor { diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 27cee9a2eae..ce9e43ec1a2 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -313,6 +313,47 @@ $highlighted_text_color: #ffffff .oe_seo_keyword padding: .2em .4em .2em .5em +border-radius(.4em) + li.oe_seo_preview_g + line-height: 1.2 + list-style: none + list-style-image: none + list-style-position: outside + list-style-type: none + font-size: small + font-family: arial,sans-serif + h3 + font-size: medium + .r + margin: 0 + font-size: 16px + font-style: normal + font-weight: normal + overflow: hidden + text-overflow: ellipsis + -webkit-text-overflow: ellipsis + white-space: nowrap + a + color: rgb(30, 15, 190) + text-decoration: underline + text-transform: none + em + font-style: normal !important + .s + color: #444 + max-width: 42em + .kv,.slp + display: block + margin-bottom: 1px + .f + color: #666 + margin-bottom: 1px + cite + color: #006621 + font-style: normal + font-size: 14px + .st + line-height: 1.24 + // }}} diff --git a/addons/website/static/src/js/website.seo.js b/addons/website/static/src/js/website.seo.js index 563f850486e..9f1745fc1df 100644 --- a/addons/website/static/src/js/website.seo.js +++ b/addons/website/static/src/js/website.seo.js @@ -234,6 +234,16 @@ }, }); + website.seo.Preview = openerp.Widget.extend({ + template: 'website.seo_preview', + init: function (parent, options) { + this.title = options.title; + this.url = options.url; + this.description = options.description || "[ The description will be generated by google unless you specify one ]"; + this._super(parent); + }, + }); + website.seo.HtmlPage = openerp.Class.extend(openerp.PropertiesMixin, { url: function () { var url = window.location.href; @@ -327,7 +337,7 @@ canEditDescription: false, canEditKeywords: false, maxTitleSize: 65, - maxDescriptionSize: 155, + maxDescriptionSize: 160, start: function () { var self = this; var $modal = self.$el; @@ -361,6 +371,7 @@ }); self.keywordList.appendTo($modal.find('.js_seo_keywords_list')); self.disableUnsavableFields(); + self.renderPreview(); $modal.modal(); }, disableUnsavableFields: function () { @@ -484,6 +495,7 @@ setTimeout(function () { var title = self.$('input[name=seo_page_title]').val(); self.htmlPage.changeTitle(title); + self.renderPreview(); }, 0); }, descriptionChanged: function () { @@ -491,7 +503,18 @@ setTimeout(function () { var description = self.$('textarea[name=seo_page_description]').attr('value'); self.htmlPage.changeDescription(description); - }, 1); + self.renderPreview(); + }, 0); + }, + renderPreview: function () { + var preview = new website.seo.Preview(this, { + title: this.htmlPage.title(), + description: this.htmlPage.description(), + url: this.htmlPage.url(), + }); + var $preview = this.$('.js_seo_preview'); + $preview.empty(); + preview.appendTo($preview); }, destroy: function () { this.htmlPage.changeKeywords(this.keywordList.keywords()); diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml index be9414ca37f..0c055487dd8 100644 --- a/addons/website/static/src/xml/website.seo.xml +++ b/addons/website/static/src/xml/website.seo.xml @@ -43,19 +43,24 @@
-