This commit is contained in:
Andrea Alberti 2024-06-28 22:39:38 +02:00
parent e7e6b8d977
commit 5ffd13a97e
2 changed files with 13 additions and 7 deletions

View file

@ -146,7 +146,7 @@ export default class PluginsAnnotations extends Plugin {
}
label.className = 'plugin-comment-label';
comment_container.appendChild(label);
const comment = document.createElement('div');
comment.className = 'plugin-comment-annotation';
comment.contentEditable = 'true';
@ -156,7 +156,7 @@ export default class PluginsAnnotations extends Plugin {
if(isPlaceholder) {
comment.classList.add('plugin-comment-placeholder');
comment_container.style.display = 'none';
comment_container.classList.add('plugin-comment-placeholder');
}
comment.innerText = initialText;
@ -166,7 +166,7 @@ export default class PluginsAnnotations extends Plugin {
if (isPlaceholder) {
// comment.innerText = '';
comment.classList.remove('plugin-comment-placeholder');
comment_container.style.display = 'block';
comment_container.classList.remove('plugin-comment-placeholder');
const range = document.createRange();
range.selectNodeContents(comment);
const selection = window.getSelection();
@ -182,7 +182,7 @@ export default class PluginsAnnotations extends Plugin {
if (isPlaceholder || comment.innerText.trim() === '') {
comment.innerText = placeholder;
comment.classList.add('plugin-comment-placeholder');
comment_container.style.display = 'none';
comment_container.classList.add('plugin-comment-placeholder');
isPlaceholder = true;
}
});

View file

@ -4,6 +4,8 @@
.plugin-comment {
width: 100%;
box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
transition: opacity 0.5s ease-in-out; /* Add transition for opacity */
opacity: 0; /* Hidden by default */
}
.plugin-comment-annotation.plugin-comment-placeholder {
@ -11,10 +13,14 @@
font-style: italic;
}
.plugin-comment.plugin-comment-placeholder {
display: none;
}
/* Show comment container when hovering over the plugin container */
.setting-item:hover .plugin-comment,
.setting-item:hover .plugin-comment-placeholder {
display: block;
.setting-item:hover .plugin-comment.plugin-comment-placeholder {
opacity: 1; /* Show with opacity transition */
display: block;
}
/* Additional styles for consistency */