[ADD] website: new blog demo snippets

(cherry picked from commit 6c6df546eb5a99d00d62fc6b497b4b861431423e)
(closes #2631)

addons/website/static/src/css/snippets.css

@@ -795,3 +795,20 @@ table.table_desc tr td:last-child{
 .oe_snippet.o_block_quotes_slider .oe_snippet_thumbnail_img {
   background-image: url("/website/static/src/img/blocks/block_quotes_slider.png");
 }
+
+/* Blog Demo Snippet */
+.oe_snippet.o_block_demo_blog .oe_snippet_thumbnail_img {
+  background-image: url("/website/static/src/img/blocks/block_demo_blog.jpg");
+}
+
+.oe_demo_blog .oe_blog_demo_content {
+  height: 200px;
+  width: 400px;
+  padding: 5px;
+  margin-bottom: 30px;
+  float: right;
+}
+.oe_demo_blog .oe_blog_demo_img {
+  width: 100%;
+  height: 180px;
+}

addons/website/static/src/css/snippets.sass

@@ -636,3 +636,18 @@ table.table_desc tr td
     &.o_block_quotes_slider .oe_snippet_thumbnail_img
         background-image: url('/website/static/src/img/blocks/block_quotes_slider.png')
 // }}}
+
+/* Blog Demo Snippet */
+.oe_snippet.o_block_demo_blog .oe_snippet_thumbnail_img
+    background-image: url("/website/static/src/img/blocks/block_demo_blog.jpg")
+
+.oe_demo_blog
+    .oe_blog_demo_content
+        height: 200px
+        width: 400px
+        padding: 5px
+        margin-bottom: 30px
+        float: right
+    .oe_blog_demo_img
+        width: 100%
+        height: 180px

addons/website/static/src/js/website.snippets.editor.js

@@ -1517,6 +1517,26 @@
         },
     });
 
+    website.snippet.options.demo_blog = website.snippet.Option.extend({
+        set_active: function () {
+            var classes = _.uniq((this.$target.find('.oe_blog_demo_content').attr("class") || '').split(/\s+/));
+            this.$el.find('[data-select_class]')
+                .add(this.$el)
+                .filter('[data-select_class]')
+                .removeClass("active")
+                .filter('[data-select_class="' + classes.join('"], [data-select_class="') + '"]')
+                .addClass("active");
+        },
+        select_class: function (type, value, $li) {
+            var $lis = this.$el.find('[data-select_class]').add(this.$el).filter('[data-select_class]');
+
+            var classes = $lis.map(function () {return $(this).data('select_class');}).get();
+            var $img = this.$target.find('.oe_blog_demo_content');
+            $img.removeClass(classes.join(" "));
+            if(value) $img.addClass(value);
+        },
+    });
+
     website.snippet.Editor = openerp.Class.extend({
         init: function (BuildingBlock, dom) {
             this.BuildingBlock = BuildingBlock;

addons/website/views/snippets.xml

@@ -328,6 +328,32 @@
             </div>
         </section>
     </div>
+    <div name="Blog" class="o_block_demo_blog">
+        <section class="oe_snippet_body oe_demo_blog readable">
+            <div class="oe_blog_demo_content">
+                <a href="https://demo.odoo.com/">
+                    <img class="oe_blog_demo_img" src="/website/static/src/img/odoo.jpg"/>
+                </a>
+                <h5 class="text-center">
+                    <small>We prepared a page dedicated to
+                    <a href="https://www.odoo.com/page/brand-assets">brand assets</a>
+                    , so you can have access to everything you need.</small></h5>
+            </div>
+            <p>
+                What a day it was yesterday - such a big day for us!
+                In case you still feel a bit puzzled about all
+                of our yesterday's announcements, here is a little
+                summary for you. We have decided to change the
+                name because "OpenERP" didn't reflect the offering
+                of the company anymore. With our newest apps, such
+                as Website Builder, PoS or eCommerce, we have
+                moved beyond the ERP territory. But don't worry,
+                Odoo is and always will be fully open source. You can
+                read more about the new name here.We have also
+                prepared a short FAQ to explain all these changes to all of you.
+            </p>
+        </section>
+    </div>
 </div>
 
 <div id="snippet_feature" class="tab-pane">
@@ -1025,6 +1051,17 @@
         <li data-clear_style=""><a>Reset Transformation</a></li>
     </div>
 
+    <div data-js="demo_blog"
+        data-selector=".oe_demo_blog"
+        data-drop-in="#blog_content">
+        <li class="dropdown-submenu">
+            <a tabindex="-1" href="#">Picture Position</a>
+            <ul class="dropdown-menu">
+                <li data-select_class="pull-right"><a>On the Right</a></li>
+                <li data-select_class="pull-left"><a>On the Left</a></li>
+            </ul>
+        </li>
+    </div>
 </template>