[web_timeline][IMP] Add margin support in web_timeline (#1135)

web_timeline/README.rst

@@ -56,6 +56,10 @@ the possible attributes for the tag:
 +--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
 | mode               | No        | Specifies the initial visible window. Available values are: 'day' to display the current day, 'week', 'month' and 'fit'. Default value is 'fit' to adjust the visible window such that it fits all items.                                                                 |
 +--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+| margin             | No        | Specifies the margins around the items. It should respect the JSON format. For example '{"item":{"horizontal":-10}}'. Available values are: '{"axis":<number>}' (The minimal margin in pixels between items and the time axis)                                            |
+|                    |           | '{"item":<number>}' (The minimal margin in pixels between items in both horizontal and vertical direction), '{"item":{"horizontal":<number>}}' (The minimal horizontal margin in pixels between items),                                                                   |
+|                    |           | '{"item":{"vertical":<number>}}' (The minimal vertical margin in pixels between items), '{"item":{"horizontal":<number>,"vertical":<number>}}' (Combination between horizontal and vertical margins in pixels between items).                                             |
++--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
 | event_open_popup   | No        | When set to true, it allows to edit the events in a popup. If not (default value), the record is edited changing to form view.                                                                                                                                            |
 +--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
 | stack              | No        | When set to false, items will not be stacked on top of each other such that they do overlap.                                                                                                                                                                              |

web_timeline/__manifest__.py

@@ -4,7 +4,7 @@
 {
     'name': "Web timeline",
     'summary': "Interactive visualization chart to show events in time",
-    "version": "12.0.1.0.1",
+    "version": "12.0.1.0.2",
     "development_status": "Production/Stable",
     'author': 'ACSONE SA/NV, '
               'Tecnativa, '

web_timeline/readme/CONFIGURE.rst

@@ -16,6 +16,10 @@ the possible attributes for the tag:
 +--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
 | mode               | No        | Specifies the initial visible window. Available values are: 'day' to display the current day, 'week', 'month' and 'fit'. Default value is 'fit' to adjust the visible window such that it fits all items.                                                                 |
 +--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+| margin             | No        | Specifies the margins around the items. It should respect the JSON format. For example '{"item":{"horizontal":-10}}'. Available values are: '{"axis":<number>}' (The minimal margin in pixels between items and the time axis)                                            |
+|                    |           | '{"item":<number>}' (The minimal margin in pixels between items in both horizontal and vertical direction), '{"item":{"horizontal":<number>}}' (The minimal horizontal margin in pixels between items),                                                                   |
+|                    |           | '{"item":{"vertical":<number>}}' (The minimal vertical margin in pixels between items), '{"item":{"horizontal":<number>,"vertical":<number>}}' (Combination between horizontal and vertical margins in pixels between items).                                             |
++--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
 | event_open_popup   | No        | When set to true, it allows to edit the events in a popup. If not (default value), the record is edited changing to form view.                                                                                                                                            |
 +--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
 | stack              | No        | When set to false, items will not be stacked on top of each other such that they do overlap.                                                                                                                                                                              |

web_timeline/static/description/index.html

@@ -431,6 +431,12 @@ the possible attributes for the tag:</p>
 <td>No</td>
 <td>Specifies the initial visible window. Available values are: ‘day’ to display the current day, ‘week’, ‘month’ and ‘fit’. Default value is ‘fit’ to adjust the visible window such that it fits all items.</td>
 </tr>
+<tr><td>margin</td>
+<td>No</td>
+<td>Specifies the margins around the items. It should respect the JSON format. For example ‘{“item”:{“horizontal”:-10}}’. Available values are: ‘{“axis”:&lt;number&gt;}’ (The minimal margin in pixels between items and the time axis)
+‘{“item”:&lt;number&gt;}’ (The minimal margin in pixels between items in both horizontal and vertical direction), ‘{“item”:{“horizontal”:&lt;number&gt;}}’ (The minimal horizontal margin in pixels between items),
+‘{“item”:{“vertical”:&lt;number&gt;}}’ (The minimal vertical margin in pixels between items), ‘{“item”:{“horizontal”:&lt;number&gt;,”vertical”:&lt;number&gt;}}’ (Combination between horizontal and vertical margins in pixels between items).</td>
+</tr>
 <tr><td>event_open_popup</td>
 <td>No</td>
 <td>When set to true, it allows to edit the events in a popup. If not (default value), the record is edited changing to form view.</td>

web_timeline/static/src/js/timeline_view.js

@@ -101,6 +101,7 @@ odoo.define('web_timeline.TimelineView', function (require) {
 
             this.no_period = this.date_start === this.date_stop;
             this.zoomKey = attrs.zoomKey || '';
+            this.margin = attrs.margin || '{}';
             this.mode = attrs.mode || attrs.default_window || 'fit';
             this.min_height = attrs.min_height || 300;
 
@@ -122,6 +123,7 @@ odoo.define('web_timeline.TimelineView', function (require) {
                 multiselect: true,
                 showCurrentTime: true,
                 stack: this.stack,
+                margin: JSON.parse(this.margin),
                 zoomKey: this.zoomKey
             };
             if (isNullOrUndef(attrs.event_open_popup) || !_.str.toBoolElse(attrs.event_open_popup, true)) {