From 98bc9851e6be9e59df4068b81302b87c8984a639 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/ROADMAP.rst | 5 ++++- web_timeline/static/src/scss/web_timeline.scss | 11 +++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) 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/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; + } } } }