From 34a8199cfe2002e960fa1cfcdce87516fbd5ce18 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 22 Jan 2020 13:46:22 +0000
Subject: [PATCH] [MOV] website: add s_process_steps snippet from themes repo

Part of https://github.com/odoo/odoo/pull/42937
task-2088157
---
 addons/website/__manifest__.py                |   1 +
 .../img/snippets_thumbs/s_process_step.png    | Bin 0 -> 18134 bytes
 .../src/snippets/s_process_steps/000.scss     |  75 ++++++++++++++++++
 .../views/snippets/s_process_steps.xml        |  63 +++++++++++++++
 addons/website/views/snippets/snippets.xml    |   2 +-
 5 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 addons/website/static/src/img/snippets_thumbs/s_process_step.png
 create mode 100644 addons/website/static/src/snippets/s_process_steps/000.scss
 create mode 100644 addons/website/views/snippets/s_process_steps.xml

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 2c06ccb0f18..d0162551820 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -62,6 +62,7 @@
         'views/snippets/s_media_list.xml',
         'views/snippets/s_showcase.xml',
         'views/snippets/s_timeline.xml',
+        'views/snippets/s_process_steps.xml',
         'views/snippets/s_mega_menu_multi_menus.xml',
         'views/snippets/s_mega_menu_menu_image_menu.xml',
         'views/website_views.xml',
diff --git a/addons/website/static/src/img/snippets_thumbs/s_process_step.png b/addons/website/static/src/img/snippets_thumbs/s_process_step.png
new file mode 100644
index 0000000000000000000000000000000000000000..d1b68f938772379be2f8734dd6cd0c68d2327462
GIT binary patch
literal 18134
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

literal 0
HcmV?d00001

diff --git a/addons/website/static/src/snippets/s_process_steps/000.scss b/addons/website/static/src/snippets/s_process_steps/000.scss
new file mode 100644
index 00000000000..a0b7f942b06
--- /dev/null
+++ b/addons/website/static/src/snippets/s_process_steps/000.scss
@@ -0,0 +1,75 @@
+.s_process_steps {
+    .s_process_step_icon {
+        margin: $grid-gutter-width 0;
+        span {
+            display: block;
+            overflow: hidden;
+        }
+        .fa {
+            display: block;
+        }
+    }
+    .s_process_step_content {
+        padding: 0 $grid-gutter-width/2;
+    }
+    @include media-breakpoint-up(lg) {
+        overflow-x: hidden;
+        .s_process_step {
+            .s_process_step_icon {
+                position: relative;
+                z-index: 1;
+                span:after {
+                    content: '';
+                    z-index: -1;
+                    border-top: 1px solid gray('500');
+                    @include o-position-absolute(50%, 0, 0, auto);
+                }
+            }
+            &:not(:first-child):not(:last-child) .s_process_step_icon {
+                span:after {
+                    width: 100%;
+                }
+            }
+            &:first-child .s_process_step_icon,
+            &:last-child .s_process_step_icon {
+                span:after {
+                    width: 1000%;
+                }
+                .fa {
+                    &:after {
+                        content: '';
+                        z-index: -1;
+                        @include o-position-absolute(50%, auto, 0, auto);
+                        width: 100%;
+                        border-top: 1px solid gray('500');
+                    }
+                    &.mx-auto:after {
+                        width: 50%;
+                    }
+                }
+            }
+            &:first-child .s_process_step_icon {
+                .fa:after { right: 0; }
+                .fa.float-right:after { width: 0; }
+            }
+            &:last-child .s_process_step_icon {
+                span:after { left: 0; }
+                .fa {
+                    &:after { left: 0; }
+                    &.float-left:after { width: 0; }
+                }
+            }
+        }
+    }
+
+    $s_process_step_line_fw: true;
+
+    @if $s_process_step_line_fw == true {
+        .s_process_step:first-child,
+        .s_process_step:last-child {
+            .s_process_step_icon > span:after {
+                display: none;
+            }
+        }
+    }
+}
diff --git a/addons/website/views/snippets/s_process_steps.xml b/addons/website/views/snippets/s_process_steps.xml
new file mode 100644
index 00000000000..85b3a7e6977
--- /dev/null
+++ b/addons/website/views/snippets/s_process_steps.xml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Steps" id="s_process_steps">
+    <section class="s_process_steps pt24 pb24">
+        <div class="container">
+            <div class="row no-gutters">
+                <div class="col-lg-3 s_process_step pt24 pb24">
+                    <div class="s_process_step_icon">
+                        <span>
+                            <i class="fa fa-shopping-basket fa-2x mx-auto rounded-circle bg-alpha"/>
+                        </span>
+                    </div>
+                    <div class="s_process_step_content text-center">
+                        <h2>Add to cart</h2>
+                        <p>Let your customers follow <br/>and understand your process.</p>
+                    </div>
+                </div>
+                <div class="col-lg-3 s_process_step pt24 pb24">
+                    <div class="s_process_step_icon">
+                        <span>
+                            <i class="fa fa-unlock-alt fa-2x mx-auto rounded-circle bg-beta"/>
+                        </span>
+                    </div>
+                    <div class="s_process_step_content text-center">
+                        <h2>Sign in</h2>
+                        <p>Click on the icon to adapt it <br/>to your purpose.</p>
+                    </div>
+                </div>
+                <div class="col-lg-3 s_process_step pt24 pb24">
+                    <div class="s_process_step_icon">
+                        <span>
+                            <i class="fa fa-paypal fa-2x mx-auto rounded-circle bg-gamma"/>
+                        </span>
+                    </div>
+                    <div class="s_process_step_content text-center">
+                        <h2>Pay</h2>
+                        <p>Duplicate blocks <br/>to add more steps.</p>
+                    </div>
+                </div>
+                <div class="col-lg-3 s_process_step pt24 pb24">
+                    <div class="s_process_step_icon">
+                        <span>
+                            <i class="fa fa-plane fa-2x mx-auto rounded-circle bg-delta"/>
+                        </span>
+                    </div>
+                    <div class="s_process_step_content text-center">
+                        <h2>Get Delivered</h2>
+                        <p>Select and delete blocks <br/>to remove some steps.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="assets_snippet_s_process_steps_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_process_steps/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 0201341d747..d97548de920 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -55,7 +55,7 @@
                     <!-- Product list -->
                     <t t-snippet="website.s_tabs" t-thumbnail="/website/static/src/img/snippets_thumbs/s_tabs.png"/>
                     <t t-snippet="website.s_timeline" t-thumbnail="/website/static/src/img/snippets_thumbs/s_timeline.png"/>
-                    <!-- Steps -->
+                    <t t-snippet="website.s_process_steps" t-thumbnail="/website/static/src/img/snippets_thumbs/s_process_step.png"/>
                     <t t-snippet="website.s_quotes_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_quotes_carousel.png"/>
                 </div>
             </div>