Add tooltip to truncated bookmark titles (#607)

* Add title to link so you can see the entire title when hover

* Tweak JS, styles

* Fix snapshot tests

---------

Co-authored-by: Sascha Ißbrücker <sascha.issbruecker@gmail.com>
This commit is contained in:
Jonathan Sundqvist 2024-01-27 10:16:44 +01:00 committed by GitHub
parent 935189ecc2
commit 81ae55bc1c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 44 additions and 3 deletions

View file

@ -59,10 +59,18 @@ class BookmarkItem {
constructor(element) {
this.element = element;
// Toggle notes
const notesToggle = element.querySelector(".toggle-notes");
if (notesToggle) {
notesToggle.addEventListener("click", this.onToggleNotes.bind(this));
}
// Add tooltip to title if it is truncated
const titleAnchor = element.querySelector(".title > a");
const titleSpan = titleAnchor.querySelector("span");
if (titleSpan.offsetWidth > titleAnchor.offsetWidth) {
titleAnchor.dataset.tooltip = titleSpan.textContent;
}
}
onToggleNotes(event) {

View file

@ -107,6 +107,18 @@ ul.bookmark-list {
padding: 0;
}
@keyframes appear {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Bookmarks */
li[ld-bookmark-item] {
position: relative;
@ -122,6 +134,27 @@ li[ld-bookmark-item] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&[data-tooltip]:hover::after, &[data-tooltip]:focus::after {
content: attr(data-tooltip);
position: absolute;
z-index: 10;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: 100%;
height: fit-content;
background-color: #292f62;
color: #fff;
padding: $unit-1;
border-radius: $border-radius;
border: 1px solid #424a8c;
font-size: $font-size-sm;
font-style: normal;
white-space: normal;
animation: 0.3s ease 0s appear;
}
}
&.unread .title a {

View file

@ -14,11 +14,11 @@
<i class="form-icon"></i>
</label>
<div class="title">
<a href="{{ bookmark_item.url }}" target="{{ bookmark_list.link_target }}" rel="noopener">
<a href="{{ bookmark_item.url }}" target="{{ bookmark_list.link_target }}" rel="noopener" >
{% if bookmark_item.favicon_file and bookmark_list.show_favicons %}
<img src="{% static bookmark_item.favicon_file %}" alt="">
{% endif %}
{{ bookmark_item.title }}
<span>{{ bookmark_item.title }}</span>
</a>
</div>
{% if bookmark_list.show_url %}

View file

@ -24,7 +24,7 @@ class BookmarkListTemplateTest(TestCase, BookmarkFactoryMixin):
target="{link_target}"
rel="noopener">
{favicon_img}
{bookmark.resolved_title}
<span>{bookmark.resolved_title}</span>
</a>
''',
html