From 0b98a4599dea7485f9c4797ded5a05688453b881 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gaute=20Fl=C3=A6gstad?= Date: Thu, 23 Oct 2025 11:01:45 +0200 Subject: [PATCH] style(#4): :lipstick: Update the UI for editing title and description of an annotation --- src/AnnotationControl/annotationPanel.css | 81 +++++++++++++++++++---- src/AnnotationControl/annotationPanel.js | 46 ++++++++++--- 2 files changed, 105 insertions(+), 22 deletions(-) diff --git a/src/AnnotationControl/annotationPanel.css b/src/AnnotationControl/annotationPanel.css index b1f4131..3c9ecbe 100644 --- a/src/AnnotationControl/annotationPanel.css +++ b/src/AnnotationControl/annotationPanel.css @@ -201,6 +201,39 @@ img.button-icon[src$='/annotation.svg'] { color: #fff; } +.annotation-row .edit-btn { + width: 28px; + height: 28px; + border-radius: 50%; + background: transparent; + color: #d0d6da; + display: inline-flex; + align-items: center; + justify-content: center; + border: 1px solid rgba(208, 214, 218, 0.28); + cursor: pointer; + transition: + transform 0.12s ease, + background 0.18s ease, + box-shadow 0.18s ease, + border-color 0.18s ease, + color 0.12s ease; + box-shadow: none; +} +.annotation-row .edit-btn:hover, +.annotation-row .edit-btn:focus { + color: #ffffff; + border-color: rgba(208, 214, 218, 0.44); + box-shadow: + 0 8px 18px rgba(140, 150, 160, 0.14), + 0 0 0 3px rgba(140, 150, 160, 0.06); + background: transparent; + outline: none; +} +.annotation-row .edit-btn:active { + transform: translateY(1px); +} + .annotation-row:hover { background: #354045; border-color: #425056; @@ -224,6 +257,40 @@ img.button-icon[src$='/annotation.svg'] { overflow-wrap: anywhere; } +/* make room for the pencil inside the description box */ +.annotation-row .annotation-desc { + position: relative; + padding-right: 36px; /* space for inner pencil */ +} + +.annotation-row .annotation-desc .edit-desc-btn { + position: absolute; + top: 6px; + right: 6px; + width: 22px; + height: 22px; + border-radius: 50%; + background: transparent; + color: #d0d6da; + border: 1px solid rgba(208, 214, 218, 0.28); + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 12px; + line-height: 1; + padding: 0; +} +.annotation-row .annotation-desc .edit-desc-btn:hover, +.annotation-row .annotation-desc .edit-desc-btn:focus { + color: #ffffff; + border-color: rgba(208, 214, 218, 0.44); + box-shadow: + 0 6px 14px rgba(140, 150, 160, 0.16), + 0 0 0 2px rgba(140, 150, 160, 0.06); + outline: none; +} + .annotation-row .annotation-desc, .annotation-row .annotation-info { display: none; @@ -238,20 +305,6 @@ img.button-icon[src$='/annotation.svg'] { margin-right: 8px; } -/* tiny pencil hint showing that the title is editable via double-click */ -.annotation-header .annotation-label .annotation-edit-hint { - margin-left: 8px; - font-size: 0.85em; - color: rgba(223, 230, 233, 0.72); - opacity: 0.9; - cursor: default; - user-select: none; - vertical-align: middle; - margin-top: -1px; -} -.annotation-header .annotation-label:hover .annotation-edit-hint { - color: rgba(255, 255, 255, 0.95); -} .annotation-header .controls { margin-left: auto; display: flex; diff --git a/src/AnnotationControl/annotationPanel.js b/src/AnnotationControl/annotationPanel.js index 280adc4..c8b0d60 100644 --- a/src/AnnotationControl/annotationPanel.js +++ b/src/AnnotationControl/annotationPanel.js @@ -324,13 +324,18 @@ export function initAnnotationsPanel(viewer) { if (uuid) startInlineEditForUUID(uuid) }) - // Small edit hint icon to indicate double-click to edit - const editHint = document.createElement('span') - editHint.className = 'annotation-edit-hint' - editHint.title = 'Double-click to edit title' - editHint.textContent = '🖉' - // keep the hint non-interactive (don't steal pointer events) - label.appendChild(editHint) + // Small pencil button to enter title edit mode + const editBtn = document.createElement('button') + editBtn.className = 'edit-btn' + editBtn.title = 'Edit title' + editBtn.setAttribute('aria-label', 'Edit title') + editBtn.textContent = '✎' + editBtn.addEventListener('click', (ev) => { + ev.stopPropagation() + const uuid = label.dataset.uuid + if (uuid) startInlineEditForUUID(uuid) + }) + // triangular toggle (collapsed/open) const toggle = document.createElement('span') @@ -441,7 +446,8 @@ export function initAnnotationsPanel(viewer) { // Append elements into header: toggle, label, then controls (jump/delete) const controls = document.createElement('div') controls.className = 'controls' - controls.appendChild(jumpBtn) + controls.appendChild(editBtn) + controls.appendChild(jumpBtn) controls.appendChild(delBtn) header.appendChild(toggle) @@ -511,6 +517,19 @@ export function initAnnotationsPanel(viewer) { const u = desc.dataset.uuid if (u) startInlineDescriptionEditForUUID(u) }) + // Add a pencil inside the description box + const innerDescBtn = document.createElement('button') + innerDescBtn.className = 'edit-desc-btn' + innerDescBtn.title = 'Edit description' + innerDescBtn.setAttribute('aria-label', 'Edit description') + innerDescBtn.textContent = '✎' + innerDescBtn.addEventListener('click', (ev) => { + ev.stopPropagation() + try { row.classList.add('open') } catch (e) {} + const u = desc.dataset.uuid + if (u) startInlineDescriptionEditForUUID(u) + }) + desc.appendChild(innerDescBtn) body.appendChild(desc) } catch (e) { // ignore description rendering errors @@ -733,6 +752,17 @@ export function initAnnotationsPanel(viewer) { ev.stopPropagation() startInlineDescriptionEditForUUID(uuid) }) + // Re-add inner edit pencil + const innerDescBtn = document.createElement('button') + innerDescBtn.className = 'edit-desc-btn' + innerDescBtn.title = 'Edit description' + innerDescBtn.setAttribute('aria-label', 'Edit description') + innerDescBtn.textContent = '✎' + innerDescBtn.addEventListener('click', (ev) => { + ev.stopPropagation() + startInlineDescriptionEditForUUID(uuid) + }) + newDesc.appendChild(innerDescBtn) try { if (ta.isConnected) {