← back to Wallco Ai

elements admin: click element image to use it in a new pattern (was: open PDP)

de244a81c670383e24587261191a525c88795549 · 2026-06-01 16:27:42 -0700 · Steve Abrams

Files touched

• M public/admin/elements.html

Diff

commit de244a81c670383e24587261191a525c88795549
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 1 16:27:42 2026 -0700

    elements admin: click element image to use it in a new pattern (was: open PDP)
---
 public/admin/elements.html | 38 ++++++++++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/public/admin/elements.html b/public/admin/elements.html
index ac71c66..255cfee 100644
--- a/public/admin/elements.html
+++ b/public/admin/elements.html
@@ -101,7 +101,22 @@
     aspect-ratio:1; background:#f3eee2 url('/admin/elements-placeholder.svg') center/40% no-repeat;
     background-size:cover;
     display:block; width:100%;
-  }
+    position:relative; cursor:pointer;
+  }
+  .card-pick {
+    position:absolute; left:0; right:0; bottom:0;
+    padding:7px 10px; text-align:center;
+    background:linear-gradient(transparent, rgba(0,0,0,.55));
+    color:#fff; font:700 10.5px var(--sans); letter-spacing:.1em; text-transform:uppercase;
+    opacity:0; transition:opacity .12s;
+    pointer-events:none;
+  }
+  .element-card:hover .card-pick { opacity:1; }
+  .card-pick.on {
+    opacity:1; background:rgba(31,106,44,.92);
+  }
+  .card-id { text-decoration:none; }
+  .card-id:hover { color:var(--gold); }
   .card-meta {
     padding:10px 12px;
     display:flex; flex-direction:column; gap:6px;
@@ -382,21 +397,29 @@
       return `
         <div class="element-card ${selected ? 'selected' : ''}" data-id="${item.id}">
           <span class="card-tier ${tier}">${tier === 'solid' ? 'Solid' : 'Passed'}</span>
-          <a href="/design/${item.id}" target="_blank" rel="noopener">
-            <div class="card-thumb" style="background-image:url('${img}')"></div>
-          </a>
+          <div class="card-thumb" data-id="${item.id}" title="Click to use this element in a new pattern" style="background-image:url('${img}')">
+            <span class="card-pick ${selected ? 'on' : ''}">${selected ? '✓ Selected' : '+ Use in new pattern'}</span>
+          </div>
           <div class="card-meta">
             <span class="card-cat" title="${item.category || ''}">${cat}</span>
             ${cw ? `<span class="card-color"><span class="dot" style="background:${hex}"></span>${cw}</span>` : `<span class="card-color"><span class="dot" style="background:${hex}"></span>${hex}</span>`}
             <div class="card-id-row">
-              <span class="card-id">#${item.id}</span>
-              <button class="card-use-btn" data-id="${item.id}">+ Use</button>
+              <a class="card-id" href="/design/${item.id}" target="_blank" rel="noopener" title="Open this design's page">#${item.id} ↗</a>
+              <button class="card-use-btn" data-id="${item.id}">${selected ? '✓ Selected' : '+ Use'}</button>
             </div>
             <div class="card-when" title="created ${item.created_at || ''}">🕓 ${fmtDate(item.created_at)}</div>
           </div>
         </div>`;
     }).join('');
 
+    // Clicking the element IMAGE selects it for composing a NEW pattern
+    // (opens the compose drawer). The #id ↗ link still opens the PDP.
+    grid.querySelectorAll('.card-thumb').forEach(t => {
+      t.addEventListener('click', e => {
+        e.preventDefault();
+        toggleSelect(parseInt(t.dataset.id, 10));
+      });
+    });
     grid.querySelectorAll('.card-use-btn').forEach(b => {
       b.addEventListener('click', e => {
         e.stopPropagation();
@@ -404,6 +427,9 @@
         toggleSelect(parseInt(b.dataset.id, 10));
       });
     });
+    grid.querySelectorAll('.card-id').forEach(a => {
+      a.addEventListener('click', e => { e.stopPropagation(); });
+    });
   }
 
   function toggleSelect(id) {

← 027cb79 add Beverly Hills palette style-guide page to admin stylegui  ·  back to Wallco Ai  ·  PDP: explicit Wallpaper/Wall Mural format toggle on every de 4746851 →