From f47269179957060efe079a1925a2fa6943121ce3 Mon Sep 17 00:00:00 2001
From: Cocographique <nmi@odoo.com>
Date: Thu, 6 Feb 2020 12:33:07 +0000
Subject: [PATCH] [IMP] website: review timeline snippet

- Simplify the DOM
- Add option to move rows in timeline snippet
- Add data-name to timeline snippet

Part of https://github.com/odoo/odoo/pull/44980
task-2182907
---
 addons/website/views/snippets/s_timeline.xml | 38 +++++++++-----------
 1 file changed, 16 insertions(+), 22 deletions(-)

diff --git a/addons/website/views/snippets/s_timeline.xml b/addons/website/views/snippets/s_timeline.xml
index 880dec9470c..c619cab9980 100644
--- a/addons/website/views/snippets/s_timeline.xml
+++ b/addons/website/views/snippets/s_timeline.xml
@@ -4,70 +4,61 @@
 <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">
+            <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">
+                    <div class="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>
                         </div>
-                        <div class="card-footer">
-                            <i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
-                        </div>
                     </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">
+            <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">
+                    <div class="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 class="card-footer">
-                            <i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
-                        </div>
                     </div>
                     <i class="fa fa-1x fa-graduation-cap bg-gamma 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-alpha rounded-circle s_timeline_icon"/>
-                    <div class="s_card card bg-white w-100">
+                    <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">
                         <div class="card-body">
                             <p class="card-text">...and switch the timeline contents to fit your needs.</p>
                         </div>
-                        <div class="card-footer">
-                            <i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
-                        </div>
                     </div>
                 </div>
             </div>
-            <div class="s_timeline_row d-flex flex-row-reverse">
+            <div class="s_timeline_row d-flex flex-row-reverse" data-name="Row">
                 <div class="s_timeline_content d-flex">
-                    <div class="s_card card bg-white w-100">
+                    <div class="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 s_timeline_icon"/>
+                    <i class="fa fa-1x fa-bolt bg-gamma 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">
+            <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">
+                    <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 img-thumbnail text-primary"/></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">
+                    <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>
@@ -87,6 +78,9 @@
             </we-select>
         </div>
     </xpath>
+    <xpath expr="//div[@data-js='SnippetMove'][contains(@data-selector,'section')]" position="attributes">
+        <attribute name="data-selector" add=".s_timeline_row" separator=","/>
+    </xpath>
 </template>
 
 <template id="assets_snippet_s_timeline_css_000" inherit_id="website.assets_frontend">