[IMP] website: improve timeline options

In this commit, the following changes have been made:

- Add the "Add Year" option to be able to add new item in timeline.
- Add option to change line color.

Part of https://github.com/odoo/odoo/pull/68061
task-2431484
This commit is contained in:
xO-Tx
2021-07-12 08:30:57 +00:00
committed by qsm-odoo
parent a90ddbd420
commit 2ede351fd3
3 changed files with 18 additions and 3 deletions
@@ -1,6 +1,8 @@
.s_timeline {
.s_timeline_line {
position: relative;
border-color: gray('800'); // For inheritance, not actual border
&:before {
content: '';
display: block !important; // override portal '#wrap .container' value
@@ -9,7 +11,8 @@
top: 0px;
bottom: 0px;
left: 50%;
background-color: gray('800');
border-left: 1px solid;
border-color: inherit;
}
}
.s_timeline_row {
@@ -8,7 +8,7 @@ options.registry.Timeline = options.Class.extend({
* @override
*/
start: function () {
var $buttons = this.$el.find('we-button');
var $buttons = this.$el.find('we-button.o_we_overlay_opt');
var $overlayArea = this.$overlay.find('.o_overlay_options_wrap');
$overlayArea.append($('<div/>').append($buttons));
+13 -1
View File
@@ -53,10 +53,22 @@
</template>
<template id="s_timeline_options" inherit_id="website.snippet_options">
<xpath expr="//t[@t-call='web_editor.snippet_options_background_options']" position="before">
<div data-js="MultipleItems" data-selector=".s_timeline">
<we-row string="Year">
<we-button data-add-item="" data-item=".s_timeline_row:first" data-select-item="" data-add-before="true" data-no-preview="true" class="o_we_bg_brand_primary">
Add Year
</we-button>
</we-row>
</div>
</xpath>
<xpath expr="." position="inside">
<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>
<we-button data-timeline-card="" data-no-preview="true" class="o_we_overlay_opt"><i class="fa fa-fw fa-angle-left"/><i class="fa fa-fw fa-angle-right"/></we-button>
</div>
<div data-selector=".s_timeline">
<we-colorpicker string="Line Color" data-select-style="true" data-css-property="border-color" data-color-prefix="border-" data-apply-to=".s_timeline_line"/>
</div>
</xpath>
<xpath expr="//div[@data-js='SnippetMove'][contains(@data-selector,'section')]" position="attributes">