recording working righ, but menu is not correct yet

This commit is contained in:
2026-01-11 02:38:28 +00:00
parent a19a4495f4
commit 8009ad1eb3
2 changed files with 3 additions and 154 deletions
+3 -80
View File
@@ -82,15 +82,9 @@
<div id="notesAttachmentPreviewPanel" class="hidden mt-3 rounded-xl border border-purple-200 bg-white shadow p-4">
<div class="flex items-center justify-between mb-2">
<div id="notesAttachmentPreviewTitle" class="text-sm font-semibold text-gray-800">Attachment Preview</div>
<div class="flex items-center gap-2">
<button id="notesAttachmentPreviewZoomOut" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm hidden" title="Zoom out"></button>
<span id="notesAttachmentPreviewZoomLevel" class="text-xs text-gray-600 min-w-12 text-center"></span>
<button id="notesAttachmentPreviewZoomIn" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm hidden" title="Zoom in">+</button>
<button id="notesAttachmentPreviewReset" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm hidden" title="Reset zoom">Reset</button>
<button id="notesAttachmentPreviewClose" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm">Close</button>
</div>
<button id="notesAttachmentPreviewClose" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm">Close</button>
</div>
<div id="notesAttachmentPreviewContent" class="space-y-2 overflow-auto" style="max-height: 600px;"></div>
<div id="notesAttachmentPreviewContent" class="space-y-2"></div>
</div>
</div>
<div class="flex-1 overflow-x-hidden overflow-y-auto">
@@ -1627,99 +1621,32 @@
const panel = document.getElementById('notesAttachmentPreviewPanel');
const titleEl = document.getElementById('notesAttachmentPreviewTitle');
const contentEl = document.getElementById('notesAttachmentPreviewContent');
const zoomInBtn = document.getElementById('notesAttachmentPreviewZoomIn');
const zoomOutBtn = document.getElementById('notesAttachmentPreviewZoomOut');
const zoomResetBtn = document.getElementById('notesAttachmentPreviewReset');
const zoomLevel = document.getElementById('notesAttachmentPreviewZoomLevel');
// Reset zoom state
let currentZoom = 100;
let currentElement = null;
function updateZoomUI() {
zoomLevel.textContent = `${currentZoom}%`;
zoomOutBtn.classList.toggle('hidden', currentZoom <= 100);
zoomResetBtn.classList.toggle('hidden', currentZoom === 100);
}
contentEl.innerHTML = '';
const match = findFirstAttachmentByKind(note._attachments || [], kind);
if (!match) {
titleEl.textContent = 'Attachment Preview';
contentEl.textContent = 'No matching attachment.';
zoomInBtn.classList.add('hidden');
zoomOutBtn.classList.add('hidden');
zoomResetBtn.classList.add('hidden');
zoomLevel.textContent = '';
panel.classList.remove('hidden');
return;
}
const { att, name: fileName, url } = match;
titleEl.textContent = `Preview: ${kind}`;
let node = null;
if (kind === 'image') {
node = document.createElement('img');
node.src = url;
node.className = 'max-h-80 rounded border border-gray-200 cursor-zoom-in transition-transform origin-center';
node.className = 'max-h-80 rounded border border-gray-200';
node.alt = fileName || 'image';
node.style.transform = 'scale(1)';
currentElement = node;
// Add zoom handlers for images
zoomInBtn.classList.remove('hidden');
zoomOutBtn.classList.add('hidden');
zoomResetBtn.classList.add('hidden');
updateZoomUI();
const applyZoom = () => {
const scale = currentZoom / 100;
node.style.transform = `scale(${scale})`;
node.style.cursor = currentZoom > 100 ? 'zoom-out' : 'zoom-in';
updateZoomUI();
};
zoomInBtn.onclick = () => {
currentZoom = Math.min(currentZoom + 25, 400);
applyZoom();
};
zoomOutBtn.onclick = () => {
currentZoom = Math.max(currentZoom - 25, 100);
applyZoom();
};
zoomResetBtn.onclick = () => {
currentZoom = 100;
applyZoom();
};
node.addEventListener('click', () => {
if (currentZoom > 100) {
currentZoom = 100;
} else {
currentZoom = 150;
}
applyZoom();
});
} else if (kind === 'video') {
node = document.createElement('video');
node.src = url;
node.controls = true;
node.className = 'w-full max-h-80 rounded border border-gray-200 bg-black';
zoomInBtn.classList.add('hidden');
zoomOutBtn.classList.add('hidden');
zoomResetBtn.classList.add('hidden');
zoomLevel.textContent = '';
} else if (kind === 'audio') {
node = document.createElement('audio');
node.src = url;
node.controls = true;
node.className = 'w-full';
zoomInBtn.classList.add('hidden');
zoomOutBtn.classList.add('hidden');
zoomResetBtn.classList.add('hidden');
zoomLevel.textContent = '';
} else {
// Try inline preview for PDFs, otherwise provide a link
const isPdf = (fileName || '').toLowerCase().endsWith('.pdf');
@@ -1737,10 +1664,6 @@
link.textContent = 'Open attachment';
node = link;
}
zoomInBtn.classList.add('hidden');
zoomOutBtn.classList.add('hidden');
zoomResetBtn.classList.add('hidden');
zoomLevel.textContent = '';
}
contentEl.appendChild(node);
panel.classList.remove('hidden');