initial commit 2

2 files changed, 102 insertions, 0 deletions

diff --git a/addons/website/static/src/snippets/s_timeline/000.scss b/addons/website/static/src/snippets/s_timeline/000.scss
new file mode 100644
index 00000000..4a0ce4df
--- /dev/null
+++ b/addons/website/static/src/snippets/s_timeline/000.scss
@@ -0,0 +1,70 @@
+.s_timeline {
+    .s_timeline_line {
+        position: relative;
+        &:before {
+            content: '';
+            display: block !important; // override portal '#wrap .container' value
+            position: absolute;
+            width: 1px;
+            top: 0px;
+            bottom: 0px;
+            left: 50%;
+            background-color: gray('800');
+        }
+    }
+    .s_timeline_row {
+        align-items: center;
+        .s_timeline_content {
+            align-items: center;
+            justify-content: flex-end;
+            width: 100%;
+            ~ .s_timeline_content {
+                justify-content: flex-start;
+            }
+        }
+        &.flex-row-reverse {
+            .s_timeline_content {
+                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 {
+        @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;
+        }
+        .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 00000000..c1efa23c
--- /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');
+    },
+});
+});