feat: Lucide icons on edit/del/copy and inline edit save/cancel buttons
pencil → edit, trash-2 → del, copy → copy, check → copied feedback, check → Save, x → Cancel. All small action buttons get inline-flex alignment for consistent icon+label layout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -541,20 +541,21 @@
|
||||
|
||||
const editBtn = document.createElement('button');
|
||||
editBtn.className = 'msg-act-btn';
|
||||
editBtn.textContent = 'edit';
|
||||
editBtn.innerHTML = icon_html('pencil', 12) + ' edit';
|
||||
editBtn.addEventListener('click', () => {
|
||||
startEdit(msgDiv);
|
||||
});
|
||||
|
||||
const delBtn = document.createElement('button');
|
||||
delBtn.className = 'msg-act-btn del';
|
||||
delBtn.textContent = 'del';
|
||||
delBtn.innerHTML = icon_html('trash-2', 12) + ' del';
|
||||
delBtn.addEventListener('click', () => {
|
||||
deleteMsg(wrapper);
|
||||
});
|
||||
|
||||
actionsDiv.appendChild(editBtn);
|
||||
actionsDiv.appendChild(delBtn);
|
||||
render_icons();
|
||||
}
|
||||
|
||||
// After any currentHistory splice, renumber all wrapper data-hist-idx attributes.
|
||||
@@ -587,17 +588,18 @@
|
||||
ta.rows = Math.min(originalText.split('\n').length + 1, 12);
|
||||
|
||||
const saveBtn = document.createElement('button');
|
||||
saveBtn.textContent = 'Save';
|
||||
saveBtn.className = 'edit-save-btn';
|
||||
saveBtn.innerHTML = icon_html('check', 13) + ' Save';
|
||||
saveBtn.className = 'edit-save-btn';
|
||||
|
||||
const cancelBtn = document.createElement('button');
|
||||
cancelBtn.textContent = 'Cancel';
|
||||
cancelBtn.className = 'edit-cancel-btn';
|
||||
cancelBtn.innerHTML = icon_html('x', 13) + ' Cancel';
|
||||
cancelBtn.className = 'edit-cancel-btn';
|
||||
|
||||
const btnRow = document.createElement('div');
|
||||
btnRow.className = 'edit-btns';
|
||||
btnRow.appendChild(saveBtn);
|
||||
btnRow.appendChild(cancelBtn);
|
||||
render_icons();
|
||||
|
||||
msgDiv.innerHTML = '';
|
||||
msgDiv.appendChild(ta);
|
||||
@@ -672,7 +674,8 @@
|
||||
function makeCopyBtn(div) {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'copy-btn';
|
||||
btn.textContent = 'copy';
|
||||
btn.innerHTML = icon_html('copy', 12) + ' copy';
|
||||
render_icons();
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const text = div.dataset.raw || '';
|
||||
@@ -681,11 +684,13 @@
|
||||
} else {
|
||||
fallbackCopy(text);
|
||||
}
|
||||
btn.textContent = '✓';
|
||||
btn.innerHTML = icon_html('check', 12) + ' copied';
|
||||
render_icons();
|
||||
btn.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
btn.textContent = 'copy';
|
||||
btn.innerHTML = icon_html('copy', 12) + ' copy';
|
||||
btn.classList.remove('copied');
|
||||
render_icons();
|
||||
}, 1500);
|
||||
});
|
||||
return btn;
|
||||
|
||||
@@ -454,6 +454,9 @@
|
||||
.message.assistant { position: relative; }
|
||||
|
||||
.copy-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 8px;
|
||||
@@ -714,6 +717,9 @@
|
||||
.msg-wrapper:hover .msg-actions { opacity: 1; }
|
||||
|
||||
.msg-act-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
@@ -751,6 +757,9 @@
|
||||
}
|
||||
|
||||
.edit-save-btn, .edit-cancel-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
|
||||
Reference in New Issue
Block a user