[MOV] website: add s_blockquote snippet from themes repo

Part of https://github.com/odoo/odoo/pull/42937 task-2088157
2020-01-24 13:02:02 +00:00
parent fb9aab745b
commit bc6e2e4983
7 changed files with 138 additions and 1 deletions
@@ -65,6 +65,7 @@
        'views/snippets/s_process_steps.xml',
        'views/snippets/s_text_highlight.xml',
        'views/snippets/s_progress_bar.xml',
+        'views/snippets/s_blockquote.xml',
        'views/snippets/s_mega_menu_multi_menus.xml',
        'views/snippets/s_mega_menu_menu_image_menu.xml',
        'views/website_views.xml',
@@ -0,0 +1,41 @@
+.s_blockquote {
+    .s_blockquote_icon {
+        float: left;
+    }
+    .s_blockquote_content {
+        overflow: hidden;
+        padding: $grid-gutter-width/2;
+        text-align: left;
+        footer {
+            background-color: initial;
+        }
+    }
+    .blockquote-footer {
+        img {
+            max-height: 40px;
+        }
+    }
+    // Don't use `&:.s_blockquote_classic`, same but not retro-compatible
+    &:not(.s_blockquote_cover):not(.s_blockquote_minimalist) {
+        .blockquote-footer {
+            &:before {
+                display: none;
+            }
+        }
+    }
+    &.s_blockquote_minimalist {
+        border-radius: 5px;
+        .s_blockquote_content {
+            padding: $grid-gutter-width/2.5;
+            p {
+                margin: 0;
+                &:before {
+                    content: '\00AB\00a0';
+                }
+                &:after {
+                    content: '\00a0\00BB';
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,52 @@
+odoo.define('website.s_blockquote_options', function (require) {
+'use strict';
+
+const options = require('web_editor.snippets.options');
+
+options.registry.Blockquote = options.Class.extend({
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Changes the position of the progressbar text.
+     *
+     * @see this.selectClass for parameters
+     */
+    display: function (previewMode, widgetValue, params) {
+        this.$target.find('.s_blockquote_icon')
+            .toggleClass('d-none', widgetValue !== 'classic');
+
+        const $content = this.$target.find('.s_blockquote_content');
+        $content.find('.quote_char').remove();
+        if (widgetValue === 'cover') {
+            this.$target.find('.s_blockquote_content > p').before(
+                $('<fa/>').addClass('quote_char fa fa-quote-left font-italic')
+            );
+        }
+
+        // Text style
+        $content.toggleClass('text-center', widgetValue === 'cover');
+        $content.toggleClass('font-italic', widgetValue !== 'classic');
+
+        // Bg Img
+        if (widgetValue === 'cover') {
+            this.$target.css({'background-image': "url('/web/image/website.s_parallax_default_image')"});
+            this.$target.css({'background-position': "50%"});
+            $content.css({'background-color': "rgba(0, 0, 0, 0.5)"});
+        } else {
+            this.$target.css({'background-image': "unset"});
+            $content.css({'background-color': "unset"});
+        }
+
+        // Blockquote Footer
+        const $footer = this.$target.find('footer');
+        $footer.toggleClass('text-white', widgetValue === 'cover');
+        this.$target.toggleClass('text-white', widgetValue === 'cover');
+        $footer.toggleClass('d-none', widgetValue === 'minimalist');
+        this.$target.find('.s_blockquote_avatar')
+            .toggleClass('d-none', widgetValue !== 'classic');
+    },
+});
+});
@@ -117,6 +117,7 @@
    <script type="text/javascript" src="/website/static/src/snippets/s_rating/options.js"/>
    <script type="text/javascript" src="/website/static/src/snippets/s_tabs/options.js"/>
    <script type="text/javascript" src="/website/static/src/snippets/s_progress_bar/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_blockquote/options.js"/>

    <script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone.js"/>
    <script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone_translate.js"/>
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Blockquote" id="s_blockquote">
+    <blockquote class="s_blockquote s_blockquote_classic blockquote o_animable" style="background-color: rgba(239,239,239);">
+        <i class="fa fa-quote-left fa-1x bg-beta rounded-0 s_blockquote_icon"/>
+        <div class="s_blockquote_content">
+            <p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
+            <footer class="blockquote-footer">
+                <img class="s_blockquote_avatar img rounded-circle mr-2" src="/web/image/theme_common.image_content_10" alt=""/>
+                John DOE • CEO of MyCompany
+            </footer>
+        </div>
+    </blockquote>
+</template>
+
+<template id="s_blockquote_options" inherit_id="website.snippet_options">
+    <xpath expr="//div[@id='so_main_colorpicker']" position="attributes">
+        <attribute name="data-selector" separator="," add=".s_blockquote"/>
+    </xpath>
+    <xpath expr="//div[@data-js='background']" position="attributes">
+        <attribute name="data-selector" separator="," add=".s_blockquote"/>
+        <attribute name="data-dependencies" separator="," add="blockquote_cover_opt"/>
+    </xpath>
+    <xpath expr="//div[@data-js='background']" position="before">
+        <div data-js="Blockquote" data-selector=".s_blockquote">
+            <we-select string="Display" class="o_we_inline">
+                <we-button data-select-class="s_blockquote_classic" data-display="classic">Classic</we-button>
+                <we-button data-select-class="s_blockquote_cover" data-display="cover" data-name="blockquote_cover_opt">Cover</we-button>
+                <we-button data-select-class="s_blockquote_minimalist" data-display="minimalist">Minimalist</we-button>
+            </we-select>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_blockquote_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_blockquote/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
@@ -98,7 +98,7 @@
                    <t t-snippet="website.s_chart" t-thumbnail="/website/static/src/img/snippets_thumbs/s_chart.png"/>
                    <t t-snippet="website.s_progress_bar" t-thumbnail="/website/static/src/img/snippets_thumbs/s_progress_bar.png"/>
                    <!-- Tags -->
-                    <!-- Quote -->
+                    <t t-snippet="website.s_blockquote" t-thumbnail="/website/static/src/img/snippets_thumbs/s_blockquote.png"/>
                    <t id="event_speaker_bio_hook"/>
                </div>
            </div>