[10.0][IMP] web_timeline improvements:

* Update the vis.js framework to latest stable version (v4.20.1) to add new functionality and save almost
400ko of source code in odoo assets (the vis dev team has isolate the code for timeline widget from the
 rest of their widgets)

* Add the possibility to display events with no duration (instantaneous) as the same time has regular events

* Add the possibility to choose between two scroll mode :
  -  zoom in time resolution (default)
  or
  -  vertical scroll (web browser default behaviour)

Signed-off-by: adrien.didenot <adrien.didenot@horanet.com>

web_timeline/README.rst

@@ -20,12 +20,18 @@ the possible attributes for the tag:
 * date_start (required): it defines the name of the field of type date that
   contains the start of the event.
 * date_end (optional): it defines the name of the field of type date that
-  contains the end of the event.
-* date_delay (optional): it defines the name of the field of type date that
+  contains the end of the event. The date_end can be equal to the attribute
+  date_start to display events has 'point' on the Timeline (instantaneous event)
+* date_delay (optional): it defines the name of the field of type integer
+  that contain the duration in hours of the event, default = 1
   contains the end of the event.
 * default_group_by (required): it 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 (optional): 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.
 * event_open_popup (optional): 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.
@@ -49,6 +55,7 @@ Example:
                           string="Tasks"
                           default_group_by="user_id"
                           event_open_popup="true"
+                          zoomKey="ctrlKey"
                           colors="#ec7063:user_id == false;#2ecb71:kanban_state=='done';">
                 </timeline>
             </field>
@@ -93,7 +100,7 @@ new record with the group and start date linked to the area you clicked in.
 
 .. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas
    :alt: Try me on Runbot
-   :target: https://runbot.odoo-community.org/runbot/162/8.0
+   :target: https://runbot.odoo-community.org/runbot/162/10.0
 
 Known issues / Roadmap
 ======================
@@ -125,6 +132,9 @@ Contributors
 * Adrien Peiffer <adrien.peiffer@acsone.eu>
 * Pedro M. Baeza <pedro.baeza@tecnativa.com>
 * Leonardo Donelli <donelli@webmonks.it>
+* Adrien Didenot <adrien.didenot@horanet.com>
+
+Do not contact contributors directly about support or help with technical issues.
 
 Maintainer
 ----------
@@ -135,6 +145,8 @@ Maintainer
 
 This module is maintained by the OCA.
 
-OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use.
+OCA, or the Odoo Community Association, is a nonprofit organization whose
+mission is to support the collaborative development of Odoo features and
+promote its widespread use.
 
 To contribute to this module, please visit https://odoo-community.org.

web_timeline/__manifest__.py

@@ -5,12 +5,15 @@
 {
     'name': "Web timeline",
     'summary': "Interactive visualization chart to show events in time",
-    "version": "10.0.1.0.0",
+    "version": "10.0.1.1.0",
     'author': 'ACSONE SA/NV, '
               'Tecnativa, '
               'Monk Software, '
               'Odoo Community Association (OCA)',
     "category": "web",
+    "license": "AGPL-3",
+    "application": False,
+    "installable": True,
     "website": "http://acsone.eu",
     'depends': [
         'web',

web_timeline/i18n/fr.po

@@ -0,0 +1,78 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+#	* web_timeline
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 10.0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2017-09-27 07:55+0000\n"
+"PO-Revision-Date: 2017-09-27 07:55+0000\n"
+"Last-Translator: <>\n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:442
+#, python-format
+msgid "Are you sure you want to delete this record ?"
+msgstr "Êtes vous sûr de vouloir supprimer cet enregistrement ?"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:8
+#, python-format
+msgid "Day"
+msgstr "Jour"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:10
+#, python-format
+msgid "Month"
+msgstr "Mois"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:33
+#, python-format
+msgid "Timeline"
+msgstr "Chronologie"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/js/web_timeline.js:107
+#, python-format
+msgid "Timeline view has not defined 'date_start' attribute."
+msgstr "La vue chronologique n'a pas défini l'attribut 'date_start'."
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:5
+#, python-format
+msgid "Today"
+msgstr "Aujourd'hui"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:9
+#, python-format
+msgid "Week"
+msgstr "Semaine"
+
+#. module: web_timeline
+#. openerp-web
+#: code:addons/web_timeline/static/src/xml/web_timeline.xml:11
+#, python-format
+msgid "Year"
+msgstr "Année"
+
+#. module: web_timeline
+#: model:ir.model,name:web_timeline.model_ir_ui_view
+msgid "ir.ui.view"
+msgstr "ir.ui.view"
+

web_timeline/static/lib/vis/vis.css

@@ -1,810 +0,0 @@
-.vis .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  /* Must be displayed above for example selected Timeline items */
-  z-index: 10;
-}
-
-.vis-active {
-  box-shadow: 0 0 10px #86d5f8;
-}
-
-/* override some bootstrap styles screwing up the timelines css */
-
-.vis [class*="span"] {
-  min-height: 0;
-  width: auto;
-}
-
-.vis.timeline {
-}
-
-
-.vis.timeline.root {
-  position: relative;
-  border: 1px solid #bfbfbf;
-
-  overflow: hidden;
-  padding: 0;
-  margin: 0;
-
-  box-sizing: border-box;
-}
-
-.vis.timeline .vispanel {
-  position: absolute;
-
-  padding: 0;
-  margin: 0;
-
-  box-sizing: border-box;
-}
-
-.vis.timeline .vispanel.center,
-.vis.timeline .vispanel.left,
-.vis.timeline .vispanel.right,
-.vis.timeline .vispanel.top,
-.vis.timeline .vispanel.bottom {
-  border: 1px #bfbfbf;
-}
-
-.vis.timeline .vispanel.center,
-.vis.timeline .vispanel.left,
-.vis.timeline .vispanel.right {
-  border-top-style: solid;
-  border-bottom-style: solid;
-  overflow: hidden;
-}
-
-.vis.timeline .vispanel.center,
-.vis.timeline .vispanel.top,
-.vis.timeline .vispanel.bottom {
-  border-left-style: solid;
-  border-right-style: solid;
-}
-
-.vis.timeline .background {
-  overflow: hidden;
-}
-
-.vis.timeline .vispanel > .content {
-  position: relative;
-}
-
-.vis.timeline .vispanel .shadow {
-  position: absolute;
-  width: 100%;
-  height: 1px;
-  box-shadow: 0 0 10px rgba(0,0,0,0.8);
-  /* TODO: find a nice way to ensure shadows are drawn on top of items
-  z-index: 1;
-  */
-}
-
-.vis.timeline .vispanel .shadow.top {
-  top: -1px;
-  left: 0;
-}
-
-.vis.timeline .vispanel .shadow.bottom {
-  bottom: -1px;
-  left: 0;
-}
-
-.vis.timeline .labelset {
-  position: relative;
-
-  overflow: hidden;
-
-  box-sizing: border-box;
-}
-
-.vis.timeline .labelset .vlabel {
-  position: relative;
-  left: 0;
-  top: 0;
-  width: 100%;
-  color: #4d4d4d;
-
-  box-sizing: border-box;
-}
-
-.vis.timeline .labelset .vlabel {
-  border-bottom: 1px solid #bfbfbf;
-}
-
-.vis.timeline .labelset .vlabel:last-child {
-  border-bottom: none;
-}
-
-.vis.timeline .labelset .vlabel .inner {
-  display: inline-block;
-  padding: 5px;
-}
-
-.vis.timeline .labelset .vlabel .inner.hidden {
-  padding: 0;
-}
-
-
-.vis.timeline .itemset {
-  position: relative;
-  padding: 0;
-  margin: 0;
-
-  box-sizing: border-box;
-}
-
-.vis.timeline .itemset .background,
-.vis.timeline .itemset .foreground {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
-
-.vis.timeline .axis {
-  position: absolute;
-  width: 100%;
-  height: 0;
-  left: 0;
-  z-index: 1;
-}
-
-.vis.timeline  .foreground .group {
-  position: relative;
-  box-sizing: border-box;
-  border-bottom: 1px solid #bfbfbf;
-}
-
-.vis.timeline  .foreground .group:last-child {
-  border-bottom: none;
-}
-
-
-.vis.timeline .item {
-  position: absolute;
-  color: #1A1A1A;
-  border-color: #97B0F8;
-  border-width: 1px;
-  background-color: #D5DDF6;
-  display: inline-block;
-  padding: 5px;
-}
-
-.vis.timeline .item.selected {
-  border-color: #FFC200;
-  background-color: #FFF785;
-
-  /* z-index must be higher than the z-index of custom time bar and current time bar */
-  z-index: 2;
-}
-
-.vis.timeline .editable .item.selected {
-  cursor: move;
-}
-
-.vis.timeline .item.point.selected {
-  background-color: #FFF785;
-}
-
-.vis.timeline .item.box {
-  text-align: center;
-  border-style: solid;
-  border-radius: 2px;
-}
-
-.vis.timeline .item.point {
-  background: none;
-}
-
-.vis.timeline .item.dot {
-  position: absolute;
-  padding: 0;
-  border-width: 4px;
-  border-style: solid;
-  border-radius: 4px;
-}
-
-.vis.timeline .item.range {
-  border-style: solid;
-  border-radius: 2px;
-  box-sizing: border-box;
-}
-
-.vis.timeline .item.background {
-  overflow: hidden;
-  border: none;
-  background-color: rgba(213, 221, 246, 0.4);
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-.vis.timeline .item.range .content {
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.vis.timeline .item.background .content {
-  position: absolute;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 100%;
-  margin: 5px;
-}
-
-.vis.timeline .item.line {
-  padding: 0;
-  position: absolute;
-  width: 0;
-  border-left-width: 1px;
-  border-left-style: solid;
-}
-
-.vis.timeline .item .content {
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.vis.timeline .item .delete {
-  background: url('img/timeline/delete.png') no-repeat top center;
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  top: 0;
-  right: -24px;
-  cursor: pointer;
-}
-
-.vis.timeline .item.range .drag-left {
-  position: absolute;
-  width: 24px;
-  max-width: 20%;
-  height: 100%;
-  top: 0;
-  left: -4px;
-
-  cursor: w-resize;
-}
-
-.vis.timeline .item.range .drag-right {
-  position: absolute;
-  width: 24px;
-  max-width: 20%;
-  height: 100%;
-  top: 0;
-  right: -4px;
-
-  cursor: e-resize;
-}
-
-.vis.timeline .timeaxis {
-  position: relative;
-  overflow: hidden;
-}
-
-.vis.timeline .timeaxis.foreground {
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-
-.vis.timeline .timeaxis.background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.vis.timeline .timeaxis .text {
-  position: absolute;
-  color: #4d4d4d;
-  padding: 3px;
-  white-space: nowrap;
-}
-
-.vis.timeline .timeaxis .text.measure {
-  position: absolute;
-  padding-left: 0;
-  padding-right: 0;
-  margin-left: 0;
-  margin-right: 0;
-  visibility: hidden;
-}
-
-.vis.timeline .timeaxis .grid.vertical {
-  position: absolute;
-  border-left: 1px solid;
-}
-
-.vis.timeline .timeaxis .grid.minor {
-  border-color: #e5e5e5;
-}
-
-.vis.timeline .timeaxis .grid.major {
-  border-color: #bfbfbf;
-}
-
-.vis.timeline .currenttime {
-  background-color: #FF7F6E;
-  width: 2px;
-  z-index: 1;
-}
-.vis.timeline .customtime {
-  background-color: #6E94FF;
-  width: 2px;
-  cursor: move;
-  z-index: 1;
-}
-.vis.timeline.root {
-  /*
-  -webkit-transition: height .4s ease-in-out;
-  transition:         height .4s ease-in-out;
-  */
-}
-
-.vis.timeline .vispanel {
-  /*
-  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
-  transition:         height .4s ease-in-out, top .4s ease-in-out;
-  */
-}
-
-.vis.timeline .axis {
-  /*
-  -webkit-transition: top .4s ease-in-out;
-  transition:         top .4s ease-in-out;
-  */
-}
-
-/* TODO: get animation working nicely
-
-.vis.timeline .item {
-  -webkit-transition: top .4s ease-in-out;
-  transition:         top .4s ease-in-out;
-}
-
-.vis.timeline .item.line {
-  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
-  transition:         height .4s ease-in-out, top .4s ease-in-out;
-}
-/**/
-
-.vis.timeline .vispanel.background.horizontal .grid.horizontal {
-    position: absolute;
-    width: 100%;
-    height: 0;
-    border-bottom: 1px solid;
-}
-
-.vis.timeline .vispanel.background.horizontal .grid.minor {
-    border-color: #e5e5e5;
-}
-
-.vis.timeline .vispanel.background.horizontal .grid.major {
-    border-color: #bfbfbf;
-}
-
-
-.vis.timeline .dataaxis .yAxis.major {
-    width: 100%;
-    position: absolute;
-    color: #4d4d4d;
-    white-space: nowrap;
-}
-
-.vis.timeline .dataaxis .yAxis.major.measure{
-    padding: 0px 0px 0px 0px;
-    margin: 0px 0px 0px 0px;
-    border: 0px;
-    visibility: hidden;
-    width: auto;
-}
-
-
-.vis.timeline .dataaxis .yAxis.minor{
-    position: absolute;
-    width: 100%;
-    color: #bebebe;
-    white-space: nowrap;
-}
-
-.vis.timeline .dataaxis .yAxis.minor.measure{
-    padding: 0px 0px 0px 0px;
-    margin: 0px 0px 0px 0px;
-    border: 0px;
-    visibility: hidden;
-    width: auto;
-}
-
-.vis.timeline .dataaxis .yAxis.title{
-    position: absolute;
-    color: #4d4d4d;
-    white-space: nowrap;
-    bottom: 20px;
-    text-align: center;
-}
-
-.vis.timeline .dataaxis .yAxis.title.measure{
-    padding: 0px 0px 0px 0px;
-    margin: 0px 0px 0px 0px;
-    visibility: hidden;
-    width: auto;
-}
-
-.vis.timeline .dataaxis .yAxis.title.left {
-    bottom: 0px;
-    -webkit-transform-origin: left top;
-    -moz-transform-origin: left top;
-    -ms-transform-origin: left top;
-    -o-transform-origin: left top;
-    transform-origin: left bottom;
-    -webkit-transform: rotate(-90deg);
-    -moz-transform: rotate(-90deg);
-    -ms-transform: rotate(-90deg);
-    -o-transform: rotate(-90deg);
-    transform: rotate(-90deg);
-}
-
-.vis.timeline .dataaxis .yAxis.title.right {
-    bottom: 0px;
-    -webkit-transform-origin: right bottom;
-    -moz-transform-origin: right bottom;
-    -ms-transform-origin: right bottom;
-    -o-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
-    transform: rotate(90deg);
-}
-
-.vis.timeline .legend {
-    background-color: rgba(247, 252, 255, 0.65);
-    padding: 5px;
-    border-color: #b3b3b3;
-    border-style:solid;
-    border-width: 1px;
-    box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
-}
-
-.vis.timeline .legendText {
-    /*font-size: 10px;*/
-    white-space: nowrap;
-    display: inline-block
-}
-.vis.timeline .graphGroup0 {
-    fill:#4f81bd;
-    fill-opacity:0;
-    stroke-width:2px;
-    stroke: #4f81bd;
-}
-
-.vis.timeline .graphGroup1 {
-    fill:#f79646;
-    fill-opacity:0;
-    stroke-width:2px;
-    stroke: #f79646;
-}
-
-.vis.timeline .graphGroup2 {
-    fill: #8c51cf;
-    fill-opacity:0;
-    stroke-width:2px;
-    stroke: #8c51cf;
-}
-
-.vis.timeline .graphGroup3 {
-    fill: #75c841;
-    fill-opacity:0;
-    stroke-width:2px;
-    stroke: #75c841;
-}
-
-.vis.timeline .graphGroup4 {
-    fill: #ff0100;
-    fill-opacity:0;
-    stroke-width:2px;
-    stroke: #ff0100;
-}
-
-.vis.timeline .graphGroup5 {
-    fill: #37d8e6;
-    fill-opacity:0;
-    stroke-width:2px;
-    stroke: #37d8e6;
-}
-
-.vis.timeline .graphGroup6 {
-    fill: #042662;
-    fill-opacity:0;
-    stroke-width:2px;
-    stroke: #042662;
-}
-
-.vis.timeline .graphGroup7 {
-    fill:#00ff26;
-    fill-opacity:0;
-    stroke-width:2px;
-    stroke: #00ff26;
-}
-
-.vis.timeline .graphGroup8 {
-    fill:#ff00ff;
-    fill-opacity:0;
-    stroke-width:2px;
-    stroke: #ff00ff;
-}
-
-.vis.timeline .graphGroup9 {
-    fill: #8f3938;
-    fill-opacity:0;
-    stroke-width:2px;
-    stroke: #8f3938;
-}
-
-.vis.timeline .fill {
-    fill-opacity:0.1;
-    stroke: none;
-}
-
-
-.vis.timeline .bar {
-    fill-opacity:0.5;
-    stroke-width:1px;
-}
-
-.vis.timeline .point {
-    stroke-width:2px;
-    fill-opacity:1.0;
-}
-
-
-.vis.timeline .legendBackground {
-    stroke-width:1px;
-    fill-opacity:0.9;
-    fill: #ffffff;
-    stroke: #c2c2c2;
-}
-
-
-.vis.timeline .outline {
-    stroke-width:1px;
-    fill-opacity:1;
-    fill: #ffffff;
-    stroke: #e5e5e5;
-}
-
-.vis.timeline .iconFill {
-    fill-opacity:0.3;
-    stroke: none;
-}
-
-
-
-div.network-manipulationDiv {
-  border-width: 0;
-  border-bottom: 1px;
-  border-style:solid;
-  border-color: #d6d9d8;
-  background: #ffffff; /* Old browsers */
-  background: -moz-linear-gradient(top,  #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
-  background: -ms-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
-  background: linear-gradient(to bottom,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
-
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 30px;
-}
-
-div.network-manipulation-editMode {
-  position:absolute;
-  left: 0;
-  top: 15px;
-  height: 30px;
-}
-
-div.network-manipulation-closeDiv {
-  position:absolute;
-  right: 0;
-  top: 0;
-  width: 30px;
-  height: 30px;
-
-  background-position: 20px 3px;
-  background-repeat: no-repeat;
-  background-image: url("img/network/cross.png");
-  cursor: pointer;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-div.network-manipulation-closeDiv:hover {
-  opacity: 0.6;
-}
-
-div.network-manipulationUI {
-    position:relative;
-    top:-7px;
-  font-family: verdana;
-  font-size: 12px;
-  -moz-border-radius: 15px;
-  border-radius: 15px;
-  display:inline-block;
-  background-position: 0px 0px;
-  background-repeat:no-repeat;
-  height:24px;
-  margin: 0px 0px 0px 10px;
-  vertical-align:middle;
-  cursor: pointer;
-  padding: 0px 8px 0px 8px;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-div.network-manipulationUI:hover {
-  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
-}
-
-div.network-manipulationUI:active {
-  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
-}
-
-div.network-manipulationUI.back {
-  background-image: url("img/network/backIcon.png");
-}
-
-div.network-manipulationUI.none:hover {
-  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
-  cursor: default;
-}
-div.network-manipulationUI.none:active {
-  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
-}
-div.network-manipulationUI.none {
-  padding: 0;
-}
-div.network-manipulationUI.notification{
-  margin: 2px;
-  font-weight: bold;
-}
-
-div.network-manipulationUI.add {
-  background-image: url("img/network/addNodeIcon.png");
-}
-
-div.network-manipulationUI.edit {
-  background-image: url("img/network/editIcon.png");
-}
-
-div.network-manipulationUI.edit.editmode {
-  background-color: #fcfcfc;
-  border-style:solid;
-  border-width:1px;
-  border-color: #cccccc;
-}
-
-div.network-manipulationUI.connect {
-  background-image: url("img/network/connectIcon.png");
-}
-
-div.network-manipulationUI.delete {
-  background-image: url("img/network/deleteIcon.png");
-}
-/* top right bottom left */
-div.network-manipulationLabel {
-  margin: 0px 0px 0px 23px;
-  line-height: 25px;
-}
-div.network-seperatorLine {
-  display:inline-block;
-  width:1px;
-  height:20px;
-  background-color: #bdbdbd;
-  margin: 5px 7px 0px 15px;
-}
-
-div.network-navigation_wrapper {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-div.network-navigation {
-    width:34px;
-    height:34px;
-    -moz-border-radius: 17px;
-    border-radius: 17px;
-    position:absolute;
-    display:inline-block;
-    background-position: 2px 2px;
-    background-repeat:no-repeat;
-    cursor: pointer;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-div.network-navigation:hover {
-    box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
-}
-
-div.network-navigation:active {
-    box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
-}
-
-div.network-navigation.up {
-    background-image: url("img/network/upArrow.png");
-    bottom:50px;
-    left:55px;
-}
-div.network-navigation.down {
-    background-image: url("img/network/downArrow.png");
-    bottom:10px;
-    left:55px;
-}
-div.network-navigation.left {
-    background-image: url("img/network/leftArrow.png");
-    bottom:10px;
-    left:15px;
-}
-div.network-navigation.right {
-    background-image: url("img/network/rightArrow.png");
-    bottom:10px;
-    left:95px;
-}
-div.network-navigation.zoomIn {
-    background-image: url("img/network/plus.png");
-    bottom:10px;
-    right:15px;
-}
-div.network-navigation.zoomOut {
-    background-image: url("img/network/minus.png");
-    bottom:10px;
-    right:55px;
-}
-div.network-navigation.zoomExtends {
-    background-image: url("img/network/zoomExtends.png");
-    bottom:50px;
-    right:15px;
-}
-div.network-tooltip {
-  position: absolute;
-  visibility: hidden;
-  padding: 5px;
-  white-space: nowrap;
-
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  border: 1px solid;
-
-  box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5);
-}

web_timeline/static/src/js/web_timeline.js

@@ -103,6 +103,8 @@ odoo.define('web_timeline.TimelineView', function (require) {
             }
             this.date_start = attrs.date_start;
             this.date_stop = attrs.date_stop;
+            this.no_period = this.date_start == this.date_stop;
+            this.zoomKey = attrs.zoomKey || '';
 
             if (!isNullOrUndef(attrs.quick_create_instance)) {
                 self.quick_create_instance = 'instance.' + attrs.quick_create_instance;
@@ -161,6 +163,7 @@ odoo.define('web_timeline.TimelineView', function (require) {
                 onMove: self.on_move,
                 onUpdate: self.on_update,
                 onRemove: self.on_remove,
+                zoomKey: this.zoomKey
             };
             self.timeline = new vis.Timeline(self.$timeline.empty().get(0));
             self.timeline.setOptions(options);
@@ -206,7 +209,7 @@ odoo.define('web_timeline.TimelineView', function (require) {
             if (!date_start){
                 date_start = new moment();
             }
-            if(!date_stop) {
+            if (!date_stop && !this.no_period) {
                 date_stop = moment(date_start).add(date_delay, 'hours').toDate();
             }
             var group = evt[self.last_group_bys[0]];
@@ -221,13 +224,16 @@ odoo.define('web_timeline.TimelineView', function (require) {
             });
             var r = {
                 'start': date_start,
-                'end': date_stop,
                 'content': evt.__name != undefined ? evt.__name : evt.display_name,
                 'id': evt.id,
                 'group': group,
                 'evt': evt,
                 'style': 'background-color: ' + self.color + ';'
             };
+            // Check if the event is instantaneous, if so, display it with a point on the timeline (no 'end')
+            if (!this.no_period && !moment(date_start).isSame(date_stop)) {
+                r.end = date_stop;
+            }
             self.color = undefined;
             return r;
         },

web_timeline/views/web_timeline.xml

@@ -3,10 +3,10 @@
 
     <template id="assets_backend" name="web_timeline assets" inherit_id="web.assets_backend">
         <xpath expr="." position="inside">
-            <link rel="stylesheet" href="/web_timeline/static/lib/vis/vis.css"/>
+            <link rel="stylesheet" href="/web_timeline/static/lib/vis/vis-timeline-graph2d.min.css"/>
             <link rel="stylesheet" href="/web_timeline/static/src/css/web_timeline.css"/>
 
-            <script type="text/javascript" src="/web_timeline/static/lib/vis/vis.js"/>
+            <script type="text/javascript" src="/web_timeline/static/lib/vis/vis-timeline-graph2d.min.js"/>
             <script type="text/javascript" src="/web_timeline/static/src/js/web_timeline.js"/>
         </xpath>
     </template>