[IMP] website, *: review snippets and colors

* web, web_editor, website_hr_recruitment, website_mail_channel,
  website_mass_mailing

- Review all snippets and add new ones
- Add lots of new options
- Use odoo colors as default theme colors

task-38878

addons/web/static/src/scss/primary_variables.scss

@@ -11,6 +11,7 @@ $o-line-height-base: 1.5; // This is BS default
 // Colors
 $o-community-color: #7C7BAD;
 $o-enterprise-color: #875A7B;
+$o-enterprise-primary-color: #00A09D;
 
 $o-brand-odoo: $o-community-color;
 $o-brand-primary: $o-community-color;

addons/web_editor/static/src/js/editor/rte.summernote.js

@@ -286,6 +286,7 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
 
             $container.find('button[data-event="imageShape"][data-value="fa-spin"]').toggleClass("active", $(oStyle.image).hasClass("fa-spin"));
             $container.find('button[data-event="imageShape"][data-value="shadow"]').toggleClass("active", $(oStyle.image).hasClass("shadow"));
+            $container.find('.btn-group:has(button[data-event="imageShape"])').removeClass("d-none");
 
         } else {
             $container.find('.d-none:not(.only_fa, .note-recent-color)').removeClass('d-none');
@@ -1034,6 +1035,7 @@ $.summernote.lang.odoo = {
       normal: _t('Normal'),
       blockquote: _t('Quote'),
       pre: _t('Code'),
+      small: _t('Small'),
       h1: _t('Header 1'),
       h2: _t('Header 2'),
       h3: _t('Header 3'),

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

@@ -288,7 +288,6 @@ var SnippetEditor = Widget.extend({
             option.__order = i++;
             return option.attachTo($el);
         });
-        $ul.append($('<div/>', {class: 'dropdown-divider'}));
 
         var $parents = this.$target.parents();
         _.each($parents, function (parent) {

addons/web_editor/static/src/js/editor/summernote.js

@@ -1033,7 +1033,7 @@ options.keyMap.mac['ESCAPE'] = 'cancel';
 options.keyMap.mac['UP'] = 'up';
 options.keyMap.mac['DOWN'] = 'down';
 
-options.styleTags = ['p', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote'];
+options.styleTags = ['p', 'pre', 'small', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote'];
 
 $.summernote.pluginEvents.insertTable = function (event, editor, layoutInfo, sDim) {
   var $editable = layoutInfo.editable();

addons/web_editor/static/src/js/tours/rte.js

@@ -314,7 +314,7 @@ tour.register('rte_inline', {
     trigger: '#wrapwrap img:first[width][height][style*="-radius"][style*="1px"][style*="padding"]',
 }, {
     content: "check the font image src",
-    trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(0,123,255)/32"]',
+    trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(0,160,157)/32"]',
 }, {
     content: "check the font class to css",
     trigger: '#wrapwrap img:eq(1)[height]:not([class*="fa"])',

addons/web_editor/static/src/js/widgets/widgets.js

@@ -1525,10 +1525,15 @@ var LinkDialog = Dialog.extend({
         }
 
         var style = this.$('input[name="link_style_color"]:checked').val() || '';
+        var shape = this.$('select[name="link_style_shape"]').val() || '';
         var size = this.$('select[name="link_style_size"]').val() || '';
+        var shapes = shape.split(',');
+        var outline = shapes[0] === 'outline';
+        shape = shapes.slice(outline ? 1 : 0).join(' ');
         var classes = (this.data.className || '')
-            + ((style && style.length) ? (' btn btn-' + style) : '')
-            + ((size && size.length) ? (' btn-' + size) : '');
+            + (style ? (' btn btn-' + (outline ? 'outline-' : '') + style) : '')
+            + (shape ? (' ' + shape) : '')
+            + (size ? (' btn-' + size) : '');
         var isNewWindow = this.$('input[name="is_new_window"]').prop('checked');
 
         if (url.indexOf('@') >= 0 && url.indexOf('mailto:') < 0 && !url.match(/^http[s]?/i)) {

addons/web_editor/static/src/scss/web_editor.variables.scss

@@ -222,7 +222,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 // Colors
 $o-color-palettes: (
     (
-        
+
     ),
 ) !default;
 $o-color-palette-number: 1;
@@ -230,11 +230,11 @@ $o-color-palette-number: 1;
 // Theme colors
 $o-theme-color-palettes: (
     (
-        primary: #007bff, // BS default here but needed for compatibility (see bootstrap_overridden)
-        secondary: #6c757d, // BS default here but needed for compatibility (see bootstrap_overridden)
-        gamma: #BA3C3D,
-        delta: #0D6759,
-        epsilon: #0B2E59,
+        primary: $o-enterprise-primary-color,
+        secondary: $o-enterprise-color,
+        gamma: #5C5B80,
+        delta: #5B899E,
+        epsilon: #E46F78,
     ),
 ) !default;
 $o-theme-color-palette-number: 1;

addons/web_editor/static/src/xml/editor.xml

@@ -257,6 +257,18 @@
                         </select>
                     </div>
                 </div>
+                <div class="form-group row">
+                    <label class="col-form-label col-md-3">Style</label>
+                    <div class="col-md-9">
+                        <select name="link_style_shape" class="form-control col-md-3 link-shape">
+                            <option value="" selected="selected">Default</option>
+                            <option value="outline">Outline</option>
+                            <option value="rounded-circle">Rounded</option>
+                            <option value="outline,rounded-circle">Outline-Rounded</option>
+                            <option value="flat">Flat</option>
+                        </select>
+                    </div>
+                </div>
                 <div class="form-group row">
                     <label class="col-form-label col-md-3">Color</label>
                     <div class="col-md-9">
@@ -266,7 +278,7 @@
                                 <input class="d-none link-style" name="link_style_color" type="radio" value=""/>
                                 <i class="fa"/>
                             </label>
-                            <t t-foreach="['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'alpha', 'beta', 'gamma', 'delta', 'epsilon']" t-as="color">
+                            <t t-foreach="['primary', 'secondary', 'gamma', 'delta', 'epsilon', 'success', 'info', 'warning', 'danger']" t-as="color">
                                 <label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-#{color}" t-attf-aria-label="Color for #{color}" t-attf-title="Color for #{color}">
                                     <input type="radio" name="link_style_color" class="d-none link-style" t-att-value="color"/>
                                     <i class="fa"/>

addons/web_editor/views/editor.xml

@@ -154,8 +154,8 @@
 <template id="web_editor.colorpicker" name="Color-Picker">
     <colorpicker>
         <div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask">
-            <button data-color="alpha"></button>
-            <button data-color="beta"></button>
+            <button data-color="primary"></button>
+            <button data-color="secondary"></button>
             <button data-color="gamma"></button>
             <button data-color="delta"></button>
             <button data-color="epsilon"></button>

addons/website/data/website_data.xml

@@ -422,49 +422,98 @@
             <field name="name">Cover Snippet - Default Image</field>
             <field name="datas_fname">s_cover_default_image.jpg</field>
             <field name="type">url</field>
-            <field name="url">/web/image/website.s_background_image_03</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_cover.jpg</field>
         </record>
-        <record id="website.s_parallax_slider_default_image" model="ir.attachment">
+        <record id="website.s_quotes_carousel_demo_image_1" model="ir.attachment">
             <field name="public" eval="True"/>
-            <field name="name">Parallax Slider Snippet - Default Image</field>
-            <field name="datas_fname">s_parallax_slider_default_image.png</field>
+            <field name="name">Quotes Carousel Snippet - Demo Image 1</field>
+            <field name="datas_fname">s_quotes_carousel_image_01.jpg</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/snippets_demo/s_parallax_slider.png</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_quotes_carousel_1.jpg</field>
+        </record>
+        <record id="website.s_quotes_carousel_demo_image_2" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Quotes Carousel Snippet - Demo Image 2</field>
+            <field name="datas_fname">s_quotes_carousel_image_02.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_quotes_carousel_2.jpg</field>
+        </record>
+        <record id="website.s_quotes_carousel_demo_image_3" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Quotes Carousel Snippet - Demo Image 3</field>
+            <field name="datas_fname">s_quotes_carousel_image_3.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_team_member_3.png</field>
+        </record>
+        <record id="website.s_quotes_carousel_demo_image_4" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Quotes Carousel Snippet - Demo Image 4</field>
+            <field name="datas_fname">s_quotes_carousel_image_4.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_team_member_2.png</field>
+        </record>
+        <record id="website.s_quotes_carousel_demo_image_5" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Quotes Carousel Snippet - Demo Image 5</field>
+            <field name="datas_fname">s_quotes_carousel_image_5.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_team_member_4.png</field>
         </record>
         <record id="website.s_image_text_default_image" model="ir.attachment">
             <field name="public" eval="True"/>
             <field name="name">Image Text Snippet - Default Image</field>
-            <field name="datas_fname">s_image_text_default_image.png</field>
+            <field name="datas_fname">s_image_text_default_image.jpg</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/snippets_demo/s_image_text.png</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_image_text.jpg</field>
         </record>
         <record id="website.s_text_image_default_image" model="ir.attachment">
             <field name="public" eval="True"/>
             <field name="name">Text Image Snippet - Default Image</field>
-            <field name="datas_fname">s_text_image_default_image.png</field>
+            <field name="datas_fname">s_text_image_default_image.jpg</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/snippets_demo/s_text_image.png</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_text_image.jpg</field>
         </record>
-        <record id="website.s_image_floating_default_image" model="ir.attachment">
+        <record id="website.s_carousel_default_image_1" model="ir.attachment">
             <field name="public" eval="True"/>
-            <field name="name">Image Floating Snippet - Default Image</field>
-            <field name="datas_fname">s_image_floating_default_image.png</field>
+            <field name="name">Carousel Snippet - Default Image 1</field>
+            <field name="datas_fname">s_carousel_default_image_1.jpg</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/snippets_demo/s_image_floating.png</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_carousel_1.jpg</field>
+        </record>
+        <record id="website.s_carousel_default_image_2" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Carousel Snippet - Default Image 2</field>
+            <field name="datas_fname">s_carousel_default_image_2.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_carousel_2.jpg</field>
+        </record>
+        <record id="website.s_carousel_default_image_3" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Carousel Snippet - Default Image 3</field>
+            <field name="datas_fname">s_carousel_default_image_3.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_carousel_3.jpg</field>
+        </record>
+        <record id="website.s_picture_default_image" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Picture Snippet - Default Image</field>
+            <field name="datas_fname">s_picture_default_image.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_picture.jpg</field>
         </record>
         <record id="website.s_banner_default_image" model="ir.attachment">
             <field name="public" eval="True"/>
-            <field name="name">Slider Snippet - Default Image</field>
-            <field name="datas_fname">s_banner_default_image.png</field>
+            <field name="name">Banner Snippet - Default Image</field>
+            <field name="datas_fname">s_banner_default_image.jpg</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/snippets_demo/s_banner.png</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_banner.jpg</field>
         </record>
-        <record id="website.s_big_picture_default_image" model="ir.attachment">
+        <record id="website.s_parallax_default_image" model="ir.attachment">
             <field name="public" eval="True"/>
-            <field name="name">Big Image Snippet - Default Image</field>
-            <field name="datas_fname">s_big_picture_default_image.png</field>
+            <field name="name">Parallax Snippet - Default Image</field>
+            <field name="datas_fname">s_parallax_default_image.jpg</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/snippets_demo/s_big_picture.png</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_parallax.jpg</field>
         </record>
         <record id="website.s_reference_demo_image_1" model="ir.attachment">
             <field name="public" eval="True"/>

addons/website/static/src/js/content/snippets.animation.js

@@ -573,7 +573,7 @@ registry.parallax = Animation.extend({
 });
 
 registry.share = Animation.extend({
-    selector: '.oe_share',
+    selector: '.s_share, .oe_share', // oe_share for compatibility
 
     /**
      * @override

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

@@ -125,7 +125,7 @@ options.registry.carousel = options.Class.extend({
             self.trigger_up('option_update', {
                 optionNames: ['background', 'background_position', 'colorpicker', 'sizing_y'],
                 name: 'target',
-                data: self.$target.find('.item.active'),
+                data: self.$target.find('.carousel-item.active'),
             });
         });
 
@@ -167,7 +167,7 @@ options.registry.carousel = options.Class.extend({
      */
     cleanForSave: function () {
         this._super.apply(this, arguments);
-        this.$target.find('.item').removeClass('next prev left right active')
+        this.$target.find('.carousel-item').removeClass('next prev left right active')
             .first().addClass('active');
         this.$target.find('.carousel-indicators').find('li').removeClass('active').html('')
             .first().addClass('active');
@@ -185,12 +185,12 @@ options.registry.carousel = options.Class.extend({
      */
     addSlide: function (previewMode) {
         var self = this;
-        var cycle = this.$inner.find('.item').length;
-        var $active = this.$inner.find('.item.active, .item.prev, .item.next').first();
+        var cycle = this.$inner.find('.carousel-item').length;
+        var $active = this.$inner.find('.carousel-item.active, .carousel-item.prev, .carousel-item.next').first();
         var index = $active.index();
         this.$('.carousel-control-prev, .carousel-control-next, .carousel-indicators').removeClass('d-none');
         this.$indicators.append('<li data-target="#' + this.id + '" data-slide-to="' + cycle + '"></li>');
-        var $clone = this.$('.item:first').clone(true);
+        var $clone = this.$('.carousel-item:first').clone(true);
         $clone.removeClass('active').insertAfter($active);
         _.defer(function () {
             self.$target.carousel().carousel(++index);
@@ -209,7 +209,7 @@ options.registry.carousel = options.Class.extend({
 
         var self = this;
 
-        var $items = this.$inner.find('.item');
+        var $items = this.$inner.find('.carousel-item');
         var cycle = $items.length - 1;
         var $active = $items.filter('.active');
         var index = $active.index();
@@ -801,7 +801,7 @@ options.registry.collapse = options.Class.extend({
         $tab.data('parent', '#'+tablist_id);
 
         // link to the collapse
-        var $panel = this.$target.find('.panel-collapse');
+        var $panel = this.$target.find('.collapse');
         var panel_id = $panel.attr('id');
         if (!panel_id) {
             while ($('#'+(panel_id = 'myCollapseTab' + time)).length) {
@@ -829,7 +829,7 @@ options.registry.gallery = options.Class.extend({
         // Make sure image previews are updated if images are changed
         this.$target.on('save', 'img', function (ev) {
             var $img = $(ev.currentTarget);
-            var index = self.$target.find('.item.active').index();
+            var index = self.$target.find('.carousel-item.active').index();
             self.$('.carousel:first li[data-target]:eq(' + index + ')')
                 .css('background-image', 'url(' + $img.attr('src') + ')');
         });

addons/website/static/src/js/tours/banner.js

@@ -21,18 +21,18 @@ tour.register("banner", {
     position: "bottom",
     run: "drag_and_drop #wrap",
 }, {
-    trigger: "#wrapwrap .s_text_block_image_fw h2",
+    trigger: "#wrapwrap .s_cover h1",
     content: _t("<b>Click on a text</b> to start editing it. <i>It's that easy to edit your content!</i>"),
     position: "left",
     width: 150,
     run: "text",
 }, {
     trigger: ".oe_overlay_options .oe_options",
-    extra_trigger: "#wrapwrap .s_text_block_image_fw h2:not(:containsExact(\"Headline\"))",
+    extra_trigger: "#wrapwrap .s_cover h1:not(:containsExact(\"Catchy Headline\"))",
     content: _t("Customize any block through this menu. Try to change the background of the banner."),
     position: "bottom",
 }, {
-    trigger: "#snippet_structure .oe_snippet:eq(3) .oe_snippet_thumbnail",
+    trigger: "#snippet_structure .oe_snippet:eq(6) .oe_snippet_thumbnail",
     content: _t("Drag another block in your page, below the cover."),
     position: "bottom",
     run: "drag_and_drop #wrap",

addons/website/static/src/scss/bootstrap_overridden.scss

@@ -7,3 +7,5 @@ $headings-color: color('h1');
 
 $font-family-sans-serif: nth($o-theme-fonts, $o-theme-font-number);
 $headings-font-family: nth($o-theme-fonts, $o-theme-headings-font-number);
+
+$input-btn-border-width: 2px;