mirror of https://github.com/OCA/web.git
[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).pull/2969/head
Houzéfa Abbasbhay
Carlos Lopez
parent
97d02aa2ee
commit
0e325c7126
|
|
@ -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
|
||||
===========
|
||||
|
|
|
|||
|
|
@ -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, "
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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&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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue