From 0e325c71263c545e2e5ef9a07ff2c0b281b5fe87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Houz=C3=A9fa=20Abbasbhay?= Date: Thu, 21 Mar 2024 11:59:14 +0100 Subject: [PATCH] [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 +++++-- web_timeline/__manifest__.py | 2 +- web_timeline/readme/ROADMAP.rst | 5 ++++- web_timeline/static/description/index.html | 7 +++++-- web_timeline/static/src/scss/web_timeline.scss | 11 +++++++---- 5 files changed, 22 insertions(+), 10 deletions(-) diff --git a/web_timeline/README.rst b/web_timeline/README.rst index 22f1dd4cd..c3f6d0159 100644 --- a/web_timeline/README.rst +++ b/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 =========== diff --git a/web_timeline/__manifest__.py b/web_timeline/__manifest__.py index 81e2b4a46..753e2f590 100644 --- a/web_timeline/__manifest__.py +++ b/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, " diff --git a/web_timeline/readme/ROADMAP.rst b/web_timeline/readme/ROADMAP.rst index dfe2feb51..bb674e558 100644 --- a/web_timeline/readme/ROADMAP.rst +++ b/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. diff --git a/web_timeline/static/description/index.html b/web_timeline/static/description/index.html index 3a0ce5996..7281077d7 100644 --- a/web_timeline/static/description/index.html +++ b/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 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->

Production/Stable License: AGPL-3 OCA/web Translate me on Weblate Try me on Runboat

Define a new view displaying events in an interactive visualization chart.

@@ -551,7 +551,7 @@ with the dragged start and end date.

Known issues / Roadmap

diff --git a/web_timeline/static/src/scss/web_timeline.scss b/web_timeline/static/src/scss/web_timeline.scss index 55df64585..9fe7f72aa 100644 --- a/web_timeline/static/src/scss/web_timeline.scss +++ b/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; + } } } }