[IMP] web_timeline: Overflow text, add hover colors

When an item label does not fit in its date-range box, overflow
according to
https://visjs.github.io/vis-timeline/examples/timeline/items/rangeOverflowItem.html

Previous CSS code was already trying to do that, but was selecting
`.vis-item.vis-item-content` instead of `.vis-item .vis-item-content`.

Displaying overflow text brings up layout issues solved by removing the
forced-100% width instruction.

This change also adds highlight when hovering a box, which is useful on
text that has overflown (as it has no borders).

web_timeline/README.rst

@@ -7,7 +7,7 @@ Web timeline
    !! This file is generated by oca-gen-addon-readme !!
    !! changes will be overwritten.                   !!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-   !! source digest: sha256:c8e10e3103493634358e7e4c5c47260adc4c15c6c555d66c4e05e909f88b118a
+   !! source digest: sha256:a85ee9636f4a2040dc7f8c7619f8390c505e3c4df95c49f55a3a86240bdc90d7
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
 .. |badge1| image:: https://img.shields.io/badge/maturity-Production%2FStable-green.png
@@ -180,7 +180,7 @@ Known issues / Roadmap
 ======================
 
 * Implement a more efficient way of refreshing timeline after a record update;
-* Make `attrs` attribute work;
+* Make ``attrs`` attribute work;
 * Make action attributes work (create, edit, delete) like in form and tree views.
 * When grouping by m2m and more than one record is set, the timeline item appears only
   on one group. Allow showing in both groups.
@@ -188,6 +188,9 @@ Known issues / Roadmap
   the group will not be set, because it could make disappear the records not related
   with the changes that we want to make. When the item is showed in all groups change
   the value according the group of the dragged item.
+* When an item label does not fit in its date-range box: ✅ the label correctly overflows
+  the box; ✅ clicking anywhere on the label allows moving the box; ❌ double-clicking
+  the label outside of the box does not open that item.
 
 Bug Tracker
 ===========

web_timeline/__manifest__.py

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

web_timeline/readme/ROADMAP.rst

@@ -1,5 +1,5 @@
 * Implement a more efficient way of refreshing timeline after a record update;
-* Make `attrs` attribute work;
+* Make ``attrs`` attribute work;
 * Make action attributes work (create, edit, delete) like in form and tree views.
 * When grouping by m2m and more than one record is set, the timeline item appears only
   on one group. Allow showing in both groups.
@@ -7,3 +7,6 @@
   the group will not be set, because it could make disappear the records not related
   with the changes that we want to make. When the item is showed in all groups change
   the value according the group of the dragged item.
+* When an item label does not fit in its date-range box: ✅ the label correctly overflows
+  the box; ✅ clicking anywhere on the label allows moving the box; ❌ double-clicking
+  the label outside of the box does not open that item.

web_timeline/static/description/index.html

@@ -366,7 +366,7 @@ ul.auto-toc {
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-!! source digest: sha256:c8e10e3103493634358e7e4c5c47260adc4c15c6c555d66c4e05e909f88b118a
+!! source digest: sha256:a85ee9636f4a2040dc7f8c7619f8390c505e3c4df95c49f55a3a86240bdc90d7
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
 <p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Production/Stable" src="https://img.shields.io/badge/maturity-Production%2FStable-green.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/web/tree/16.0/web_timeline"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/web-16-0/web-16-0-web_timeline"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&amp;target_branch=16.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
 <p>Define a new view displaying events in an interactive visualization chart.</p>
@@ -551,7 +551,7 @@ with the dragged start and end date.</p>
 <h1><a class="toc-backref" href="#toc-entry-3">Known issues / Roadmap</a></h1>
 <ul class="simple">
 <li>Implement a more efficient way of refreshing timeline after a record update;</li>
-<li>Make <cite>attrs</cite> attribute work;</li>
+<li>Make <tt class="docutils literal">attrs</tt> attribute work;</li>
 <li>Make action attributes work (create, edit, delete) like in form and tree views.</li>
 <li>When grouping by m2m and more than one record is set, the timeline item appears only
 on one group. Allow showing in both groups.</li>
@@ -559,6 +559,9 @@ on one group. Allow showing in both groups.</li>
 the group will not be set, because it could make disappear the records not related
 with the changes that we want to make. When the item is showed in all groups change
 the value according the group of the dragged item.</li>
+<li>When an item label does not fit in its date-range box: ✅ the label correctly overflows
+the box; ✅ clicking anywhere on the label allows moving the box; ❌ double-clicking
+the label outside of the box does not open that item.</li>
 </ul>
 </div>
 <div class="section" id="bug-tracker">

web_timeline/static/src/scss/web_timeline.scss

@@ -1,3 +1,4 @@
+$vis-hover-background-color: linen;
 $vis-weekend-background-color: #dcdcdc;
 $vis-item-content-padding: 0 3px !important;
 
@@ -10,16 +11,18 @@ $vis-item-content-padding: 0 3px !important;
     }
 
     .vis-item {
-        &.vis-box:hover {
+        &:hover {
+            background-color: $vis-hover-background-color !important;
             cursor: pointer !important;
         }
-        &.vis-item-overflow {
+        .vis-item-overflow {
             overflow: visible;
         }
-
         .vis-item-content {
-            width: 100%;
             padding: $vis-item-content-padding;
+            &:hover {
+                background-color: $vis-hover-background-color !important;
+            }
         }
     }
 }