[IMP] website: review timeline snippet

Removes option to move card to the right/left from the left panel
and add this option on the element overlay.
Makes the snippet responsive and other improvements.

Part of https://github.com/odoo/odoo/pull/46503
task-2194309

5 files changed, 79 insertions, 41 deletions

diff --git a/addons/website/static/src/snippets/s_timeline/000.scss b/addons/website/static/src/snippets/s_timeline/000.scss
index 0e47e8a58f0..2db6111d8c0 100644
--- a/addons/website/static/src/snippets/s_timeline/000.scss
+++ b/addons/website/static/src/snippets/s_timeline/000.scss
@@ -5,11 +5,10 @@
             content: '';
             position: absolute;
             width: 1px;
-            top: 10px;
-            bottom: 10px;
+            top: 0px;
+            bottom: 0px;
             left: 50%;
             background-color: gray('800');
-            z-index: 1;
         }
     }
     .s_timeline_row {
@@ -27,9 +26,32 @@
                 flex-direction: row-reverse;
             }
         }
+        @include media-breakpoint-up(md) {
+            &.flex-row-reverse {
+                .s_timeline_content {
+                    flex-direction: row-reverse;
+                    &:not(:last-child) {
+                        margin-left: 10%;
+                    }
+                }
+            }
+            &:not(.flex-row-reverse) {
+                .s_timeline_content:last-child {
+                    margin-left: 10%;
+                }
+            }
+        }
     }
     .s_timeline_date {
-        z-index: 2;
+        @include media-breakpoint-up(md) {
+            position: absolute;
+            left: 0%;
+            right: 0%;
+        }
+        @include media-breakpoint-down(sm) {
+            position: relative;
+            margin: 20px 0px;
+        }
         span:not(.fa) {
             display: inline-block;
             padding: 5px;
@@ -37,9 +59,11 @@
         .fa {
             margin: 0 $grid-gutter-width/2;
         }
+        text-align: center;
     }
     .s_timeline_icon {
         flex: 0 0 auto;
         margin: $grid-gutter-width/2;
+        z-index: 1;
     }
 }
diff --git a/addons/website/static/src/snippets/s_timeline/options.js b/addons/website/static/src/snippets/s_timeline/options.js
new file mode 100644
index 00000000000..c1efa23c2f9
--- /dev/null
+++ b/addons/website/static/src/snippets/s_timeline/options.js
@@ -0,0 +1,32 @@
+odoo.define('website.s_timeline_options', function (require) {
+'use strict';
+
+const options = require('web_editor.snippets.options');
+
+options.registry.Timeline = options.Class.extend({
+    /**
+     * @override
+     */
+    start: function () {
+        var $buttons = this.$el.find('we-button');
+        var $overlayArea = this.$overlay.find('.o_overlay_options_wrap');
+        $overlayArea.append($('<div/>').append($buttons));
+
+        return this._super(...arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Moves the card to the right/left.
+     *
+     * @see this.selectClass for parameters
+     */
+    timelineCard: function (previewMode, widgetValue, params) {
+        const $timelineRow = this.$target.closest('.s_timeline_row');
+        $timelineRow.toggleClass('flex-row-reverse flex-row');
+    },
+});
+});
diff --git a/addons/website/views/assets.xml b/addons/website/views/assets.xml
index 1015427043b..073f0d5a646 100644
--- a/addons/website/views/assets.xml
+++ b/addons/website/views/assets.xml
@@ -131,6 +131,7 @@
     <script type="text/javascript" src="/website/static/src/snippets/s_blockquote/options.js"/>
     <script type="text/javascript" src="/website/static/src/snippets/s_showcase/options.js"/>
     <script type="text/javascript" src="/website/static/src/snippets/s_table_of_content/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_timeline/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"/>
diff --git a/addons/website/views/snippets/s_timeline.xml b/addons/website/views/snippets/s_timeline.xml
index c619cab9980..15dff39dec6 100644
--- a/addons/website/views/snippets/s_timeline.xml
+++ b/addons/website/views/snippets/s_timeline.xml
@@ -4,9 +4,10 @@
 <template name="Timeline" id="s_timeline">
     <section class="s_timeline pt24 pb48">
         <div class="container s_timeline_line">
-            <div class="s_timeline_row d-flex flex-row" data-name="Row">
+            <div class="s_timeline_row d-block d-md-flex flex-row" data-name="Row">
+                <div class="s_timeline_date"><span class="bg-white"><b>2019</b></span></div>
                 <div class="s_timeline_content d-flex">
-                    <div class="s_card card bg-white w-100" data-name="Card">
+                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card">
                         <div class="card-body">
                             <h5 class="card-title">Your title</h5>
                             <p class="card-text">A timeline is a graphical representation on which important events are marked.</p>
@@ -14,68 +15,48 @@
                     </div>
                     <i class="fa fa-1x fa-child bg-beta rounded-circle s_timeline_icon"/>
                 </div>
-                <div class="s_timeline_date"><span class="bg-white"><b>2019</b></span></div>
                 <div class="s_timeline_content"/>
             </div>
-            <div class="s_timeline_row d-flex flex-row" data-name="Row">
+            <div class="s_timeline_row d-block d-md-flex flex-row" data-name="Row">
+                <div class="s_timeline_date"><span class="bg-white"><b>2018</b></span></div>
                 <div class="s_timeline_content d-flex">
-                    <div class="s_card card bg-white w-100" data-name="Card">
+                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card">
                         <div class="card-body">
                             <p class="card-text">You can edit, duplicate...</p>
                         </div>
                     </div>
-                    <i class="fa fa-1x fa-graduation-cap bg-gamma rounded-circle s_timeline_icon"/>
+                    <i class="fa fa-1x fa-graduation-cap bg-beta rounded-circle s_timeline_icon"/>
                 </div>
-                <div class="s_timeline_date"><span class="bg-white"><b>2018</b></span></div>
                 <div class="s_timeline_content d-flex">
-                    <i class="fa fa-1x fa-asterisk bg-delta rounded-circle s_timeline_icon"/>
-                    <div class="s_card card bg-white w-100" data-name="Card">
+                    <i class="fa fa-1x fa-asterisk bg-beta rounded-circle s_timeline_icon"/>
+                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card">
                         <div class="card-body">
                             <p class="card-text">...and switch the timeline contents to fit your needs.</p>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="s_timeline_row d-flex flex-row-reverse" data-name="Row">
+            <div class="s_timeline_row d-block d-md-flex flex-row-reverse" data-name="Row">
+                <div class="s_timeline_date"><span class="bg-white"><b>2015</b></span></div>
                 <div class="s_timeline_content d-flex">
-                    <div class="s_card card bg-white w-100" data-name="Card">
+                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card">
                         <div class="card-body">
                             <p class="card-text">Use this timeline as a part of your resume, to show your visitors what you've done in the past.</p>
                         </div>
                     </div>
-                    <i class="fa fa-1x fa-bolt bg-gamma rounded-circle s_timeline_icon"/>
+                    <i class="fa fa-1x fa-bolt bg-beta rounded-circle s_timeline_icon"/>
                 </div>
-                <div class="s_timeline_date"><span class="bg-white"><b>2015</b></span></div>
                 <div class="s_timeline_content"/>
             </div>
-            <div class="s_timeline_row d-flex flex-row" data-name="Row">
-                <div class="s_timeline_content d-flex">
-                    <div class="s_card card bg-white w-100" data-name="Card">
-                        <div class="card-body">
-                            <p class="card-text">Edit this text and change it with your content.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="s_timeline_date"><i class="fa fa-1x fa-edit bg-200 rounded-circle text-beta"/></div>
-                <div class="s_timeline_content d-flex">
-                    <div class="s_card card bg-white w-100" data-name="Card">
-                        <div class="card-body">
-                            <p class="card-text" style="text-align: right;">Double-click an icon to change it.</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
         </div>
     </section>
 </template>
 
-<template id="options_s_timeline" inherit_id="website.snippet_options">
+<template id="s_timeline_options" inherit_id="website.snippet_options">
     <xpath expr="." position="inside">
-        <div data-selector=".s_timeline_row" data-drop-near=".s_timeline_row">
-            <we-select string="Position">
-                <we-button data-select-class="flex-row">Left</we-button>
-                <we-button data-select-class="flex-row-reverse">Right</we-button>
-            </we-select>
+        <div data-selector=".s_timeline_row" data-drop-near=".s_timeline_row"/>
+        <div data-js="Timeline" data-selector=".s_timeline_card">
+            <we-button data-timeline-card="" data-no-preview="true"><i class="fa fa-fw fa-angle-left"/><i class="fa fa-fw fa-angle-right"/></we-button>
         </div>
     </xpath>
     <xpath expr="//div[@data-js='SnippetMove'][contains(@data-selector,'section')]" position="attributes">
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index e4c6c46323e..4b7f72187f6 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -356,7 +356,7 @@
         t-att-data-selector="so_snippet_addition_selector"
         data-drop-in=":not(p).oe_structure:not(.oe_structure_solo), :not(p)[data-oe-type=html], :not(p).oe_structure.oe_structure_solo:not(:has(> section, > div))"/>
 
-    <t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_countdown, .s_chart, .s_text_highlight, .s_progress_bar, .s_badge</t>
+    <t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_card:not(.s_timeline_card), .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_countdown, .s_chart, .s_text_highlight, .s_progress_bar, .s_badge</t>
     <div id="so_content_addition"
         t-att-data-selector="so_content_addition_selector"
         t-attf-data-drop-near="p, h1, h2, h3, .row > div > img, #{so_content_addition_selector}"