Browse Source

Move edit-name button to action column alongside clear button

ZiB 4 months ago
parent
commit
fb6a2d1437
1 changed files with 11 additions and 9 deletions
  1. 11 9
      custom_components/zlock_slots/frontend/zlock-slots-card.js

+ 11 - 9
custom_components/zlock_slots/frontend/zlock-slots-card.js

@@ -116,11 +116,8 @@ class ZLockSlotsCard extends HTMLElement {
                         </button>
                         </button>
                       </td>
                       </td>
                       <td>
                       <td>
-                        <span class="name-cell" id="name-display-${s.slot_num}">
+                        <span id="name-display-${s.slot_num}">
                           ${s.name ?? '<em style="opacity:.4">unnamed</em>'}
                           ${s.name ?? '<em style="opacity:.4">unnamed</em>'}
-                          <button class="icon-btn" data-action="edit-name" data-slot="${s.slot_num}" title="Edit name">
-                            <ha-icon icon="mdi:account-edit"></ha-icon>
-                          </button>
                         </span>
                         </span>
                         <span class="inline-edit" id="name-edit-${s.slot_num}" style="display:none">
                         <span class="inline-edit" id="name-edit-${s.slot_num}" style="display:none">
                           <input id="name-input-${s.slot_num}" type="text" value="${s.name ?? ''}" placeholder="Enter name" />
                           <input id="name-input-${s.slot_num}" type="text" value="${s.name ?? ''}" placeholder="Enter name" />
@@ -129,9 +126,14 @@ class ZLockSlotsCard extends HTMLElement {
                         </span>
                         </span>
                       </td>
                       </td>
                       <td>
                       <td>
-                        <button class="icon-btn clear-btn" data-action="clear" data-slot="${s.slot_num}" title="Clear slot ${s.slot_num}">
-                          <ha-icon icon="mdi:account-remove"></ha-icon>
-                        </button>
+                        <span style="display:flex;gap:4px;align-items:center">
+                          <button class="icon-btn" data-action="edit-name" data-slot="${s.slot_num}" title="Edit name">
+                            <ha-icon icon="mdi:account-edit"></ha-icon>
+                          </button>
+                          <button class="icon-btn clear-btn" data-action="clear" data-slot="${s.slot_num}" title="Clear slot ${s.slot_num}">
+                            <ha-icon icon="mdi:account-remove"></ha-icon>
+                          </button>
+                        </span>
                       </td>
                       </td>
                     </tr>
                     </tr>
                   `).join("")}
                   `).join("")}
@@ -188,13 +190,13 @@ class ZLockSlotsCard extends HTMLElement {
           root.getElementById(`name-input-${slot}`).focus();
           root.getElementById(`name-input-${slot}`).focus();
 
 
         } else if (action === "cancel-name") {
         } else if (action === "cancel-name") {
-          root.getElementById(`name-display-${slot}`).style.display = "flex";
+          root.getElementById(`name-display-${slot}`).style.display = "";
           root.getElementById(`name-edit-${slot}`).style.display = "none";
           root.getElementById(`name-edit-${slot}`).style.display = "none";
 
 
         } else if (action === "save-name") {
         } else if (action === "save-name") {
           const name = root.getElementById(`name-input-${slot}`).value.trim();
           const name = root.getElementById(`name-input-${slot}`).value.trim();
           await this._callService("set_name", { lock_entity_id: lock, slot, name });
           await this._callService("set_name", { lock_entity_id: lock, slot, name });
-          root.getElementById(`name-display-${slot}`).style.display = "flex";
+          root.getElementById(`name-display-${slot}`).style.display = "";
           root.getElementById(`name-edit-${slot}`).style.display = "none";
           root.getElementById(`name-edit-${slot}`).style.display = "none";
         }
         }
       });
       });