Skip to content

Commit

Permalink
[15.0][IMP] web_timeline: Add configuration options
Browse files Browse the repository at this point in the history 
Added horizontalScroll and verticalScroll options.
  • Loading branch information
@zamberjo
zamberjo committed Sep 6, 2023
1 parent 9c999bb commit 8d4cab8
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 27 deletions.
58 changes: 31 additions & 27 deletions web_timeline/readme/CONFIGURE.rst
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,37 @@
You need to define a view with the tag <timeline> as base element. These are
the possible attributes for the tag:

+--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Attribute | Required? | Description |
+====================+===========+===========================================================================================================================================================================================================================================================================+
| date_start | **Yes** | Defines the name of the field of type date that contains the start of the event. |
+--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| date_stop | No | Defines the name of the field of type date that contains the end of the event. The date_stop can be equal to the attribute date_start to display events has 'point' on the Timeline (instantaneous event). |
+--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| date_delay | No | Defines the name of the field of type float/integer that contain the duration in hours of the event, default = 1. |
+--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| default_group_by | **Yes** | Defines the name of the field that will be taken as default group by when accessing the view or when no other group by is selected. |
+--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| zoomKey | No | Specifies whether the Timeline is only zoomed when an additional key is down. Available values are '' (does not apply), 'altKey', 'ctrlKey', or 'metaKey'. Set this option if you want to be able to use the scroll to navigate vertically on views with a lot of events. |
+--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| 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. |
+--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| colors | No | Allows to set certain specific colors if the expressed condition (JS syntax) is met. |
+--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| dependency_arrow | No | Set this attribute to a x2many field to draw arrows between the records referenced in the x2many field. |
+--------------------+-----------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+--------------------+-----------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Attribute | Required? | Description |
+====================+===========+=====================================================================================================================================================================================================================================================================================+
| date_start | **Yes** | Defines the name of the field of type date that contains the start of the event. |
+--------------------+-----------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| date_stop | No | Defines the name of the field of type date that contains the end of the event. The date_stop can be equal to the attribute date_start to display events has 'point' on the Timeline (instantaneous event). |
+--------------------+-----------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| date_delay | No | Defines the name of the field of type float/integer that contain the duration in hours of the event, default = 1. |
+--------------------+-----------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| default_group_by | **Yes** | Defines the name of the field that will be taken as default group by when accessing the view or when no other group by is selected. |
+--------------------+-----------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| zoomKey | No | Specifies whether the Timeline is only zoomed when an additional key is down. Available values are '' (does not apply), 'altKey', 'ctrlKey', or 'metaKey'. Set this option if you want to be able to use the scroll to navigate vertically on views with a lot of events. |
+--------------------+-----------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| horizontalScroll | No | This option allows you to scroll horizontally to move backwards and forwards in the time range. Only applicable when option zoomKey is defined or zoomable is false. |
+--------------------+-----------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| verticalScroll | No | Show a vertical scroll on the side of the group list and link it to the scroll event when zoom is not triggered. Notice that defining this option as true will NOT override horizontalScroll. The scroll event will be vertically ignored, but a vertical scrollbar will be visible |
+--------------------+-----------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| 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. |
+--------------------+-----------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| colors | No | Allows to set certain specific colors if the expressed condition (JS syntax) is met. |
+--------------------+-----------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| dependency_arrow | No | Set this attribute to a x2many field to draw arrows between the records referenced in the x2many field. |
+--------------------+-----------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+

Optionally you can declare a custom template, which will be used to render the
timeline items. You have to name the template 'timeline-item'.
Expand Down
2 changes: 2 additions & 0 deletions web_timeline/static/src/js/timeline_view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,8 @@ odoo.define("web_timeline.TimelineView", function (require) {
: utils.toBoolElse(attrs.stack, true),
margin: attrs.margin ? JSON.parse(attrs.margin) : {item: 2},
zoomKey: attrs.zoomKey || "ctrlKey",
verticalScroll: attrs.verticalScroll || false,
horizontalScroll: attrs.horizontalScroll || false,
};
},

Expand Down

0 comments on commit 8d4cab8

Please sign in to comment.