oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2025-12-21 21:22:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance comment button visibility and interaction in UIManager

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-25 19:51:35 +02:00
parent e59feebcf1
commit dbb02ba4e1
2 changed files with 48 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/UIManager.js
View File

@@ -57,6 +57,15 @@ export class UIManager {
const buttonsDiv = document.createElement('div');
buttonsDiv.className = 'snippet-buttons';
const commentButton = this.createButton('💬', 'comment-snippet', (e) => {
e.stopPropagation();
this.openCommentModal(snippet.id);
});
if (snippet.comment && snippet.comment.trim() !== '') {
commentButton.classList.add('has-comment');
}
buttonsDiv.appendChild(commentButton);
buttonsDiv.appendChild(this.createButton('✏️', 'edit-snippet', (e) => {
e.stopPropagation();
this.snippetManager.renameSnippet(snippet.id);
@@ -72,15 +81,6 @@ export class UIManager {
this.snippetManager.duplicateSnippet(snippet.id);
}));
const commentButton = this.createButton('💬', 'comment-snippet', (e) => {
e.stopPropagation();
this.openCommentModal(snippet.id);
});
if (snippet.comment && snippet.comment.trim() !== '') {
commentButton.classList.add('has-comment');
}
buttonsDiv.appendChild(commentButton);
div.appendChild(buttonsDiv);
container.appendChild(div);
});

81
src/styles.css
View File

@@ -210,22 +210,44 @@
white-space: nowrap;
}
.delete-snippet {
opacity: 0.4;
.delete-snippet,
.edit-snippet,
.duplicate-snippet,
.comment-snippet {
opacity: 0.2;
font-size: 14px;
padding: 2px 4px;
background: none;
border: none;
cursor: pointer;
min-width: 24px;
transition: opacity 0.2s;
}
.delete-snippet:hover {
.snippet-item:hover .delete-snippet,
.snippet-item:hover .edit-snippet,
.snippet-item:hover .duplicate-snippet,
.snippet-item:hover .comment-snippet {
opacity: 0.6;
}
.snippet-item.active .delete-snippet,
.snippet-item.active .edit-snippet,
.snippet-item.active .duplicate-snippet,
.snippet-item.active .comment-snippet {
opacity: 1;
}
.snippet-item:hover .delete-snippet {
opacity: 0.8;
.comment-snippet.has-comment {
opacity: 0.4;
}
.snippet-item:hover .comment-snippet.has-comment {
opacity: 0.6;
}
.snippet-item.active .comment-snippet.has-comment {
opacity: 1;
}
.snippet-buttons {
@@ -233,42 +255,6 @@
gap: 4px;
}
.edit-snippet {
opacity: 0.4;
font-size: 14px;
padding: 2px 4px;
background: none;
border: none;
cursor: pointer;
min-width: 24px;
}
.edit-snippet:hover {
opacity: 1;
}
.snippet-item:hover .edit-snippet {
opacity: 0.8;
}
.duplicate-snippet {
opacity: 0.4;
font-size: 14px;
padding: 2px 4px;
background: none;
border: none;
cursor: pointer;
min-width: 24px;
}
.duplicate-snippet:hover {
opacity: 1;
}
.snippet-item:hover .duplicate-snippet {
opacity: 0.8;
}
.comment-modal {
display: none;
position: fixed;
@@ -308,16 +294,27 @@
}
.comment-snippet {
opacity: 0.4;
opacity: 0;
font-size: 14px;
padding: 2px 4px;
background: none;
border: none;
cursor: pointer;
min-width: 24px;
transition: opacity 0.2s;
}
.comment-snippet.has-comment {
opacity: 0.4;
}
.snippet-item:hover .comment-snippet,
.snippet-item.active .comment-snippet {
opacity: 0.4;
}
.snippet-item:hover .comment-snippet.has-comment,
.snippet-item.active .comment-snippet.has-comment {
opacity: 1;
}