From a522e0827351ec2cfe78b70d08ec9df10c5ec71d Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Thu, 27 Feb 2020 14:52:58 +0000 Subject: [PATCH] [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 --- .../static/src/snippets/s_timeline/000.scss | 32 +++++++++-- .../static/src/snippets/s_timeline/options.js | 32 +++++++++++ addons/website/views/assets.xml | 1 + addons/website/views/snippets/s_timeline.xml | 53 ++++++------------- addons/website/views/snippets/snippets.xml | 2 +- 5 files changed, 79 insertions(+), 41 deletions(-) create mode 100644 addons/website/static/src/snippets/s_timeline/options.js 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($('
').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 @@