Hidden placeholders

This commit is contained in:
Andrea Alberti 2024-06-28 22:48:55 +02:00
parent 5ffd13a97e
commit ef6d1e3fee
2 changed files with 6 additions and 8 deletions

View file

@ -108,7 +108,7 @@ export default class PluginsAnnotations extends Plugin {
async addComments(tab: SettingTab) {
this.annotations = await db.loadAnnotations(this.app.vault);
const pluginsContainer = tab.containerEl.querySelector('.installed-plugins-container');
if (!pluginsContainer) return;
@ -139,7 +139,7 @@ export default class PluginsAnnotations extends Plugin {
comment_container.className = 'plugin-comment';
const label = document.createElement('div');
if(Platform.isMobile){
if (Platform.isMobile) {
label.innerText = `Annotation`;
} else {
label.innerText = `Personal annotation:`;
@ -154,7 +154,7 @@ export default class PluginsAnnotations extends Plugin {
let isPlaceholder = this.annotations[pluginId] ? false : true;
const initialText = this.annotations[pluginId] || placeholder;
if(isPlaceholder) {
if (isPlaceholder) {
comment.classList.add('plugin-comment-placeholder');
comment_container.classList.add('plugin-comment-placeholder');
}
@ -164,7 +164,7 @@ export default class PluginsAnnotations extends Plugin {
// Remove placeholder class when user starts typing
comment.addEventListener('focus', () => {
if (isPlaceholder) {
// comment.innerText = '';
comment.innerText = '';
comment.classList.remove('plugin-comment-placeholder');
comment_container.classList.remove('plugin-comment-placeholder');
const range = document.createRange();
@ -190,7 +190,7 @@ export default class PluginsAnnotations extends Plugin {
label.addEventListener('click', (event) => {
event.stopPropagation();
});
// Prevent click event propagation to parent
comment.addEventListener('click', (event) => {
event.stopPropagation();
@ -221,6 +221,7 @@ export default class PluginsAnnotations extends Plugin {
}
debouncedSaveAnnotations() {
// timeout after 250 ms
const timeout_ms = 250;

View file

@ -4,8 +4,6 @@
.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 {
@ -19,7 +17,6 @@
/* Show comment container when hovering over the plugin container */
.setting-item:hover .plugin-comment.plugin-comment-placeholder {
opacity: 1; /* Show with opacity transition */
display: block;
}