style(#4): 💄 Update the UI for editing title and description of an an…

…notation
TDT4290-group-4 · Oct 23, 2025 · 0b98a45 · 0b98a45
1 parent db4dc9a
commit 0b98a45
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 22 deletions.
diff --git 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
@@ -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) {