ben/product_inventory
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(media-manager): link media filenames to preview pages in match wizard

Browse Source 
- Updates the 'Link Media' wizard and confirmation modal to make filenames clickable.
- Links Drive files to their view page.
- Links Shopify files to the Admin Content > Files page, derived from the product admin URL.
- Applies primary theme color to links for better visibility.
This commit is contained in:
Ben Miller
2026-01-01 05:37:53 -07:00
parent 09995d0d05
commit 8d780d2fcb
1 changed files with 213 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/MediaManager.html
View File

@ -527,27 +527,34 @@
.combined-item { .combined-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #f0f9ff; /* Light blue tint */ background: #f0f9ff;
/* Light blue tint */
border: 2px solid var(--primary); border: 2px solid var(--primary);
} }
.combined-images { .combined-images {
display: flex; display: flex;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
.combined-part { .combined-part {
flex: 1; flex: 1;
position: relative; position: relative;
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
} }
.combined-part:last-child { .combined-part:last-child {
border-right: none; border-right: none;
} }
.combined-part .media-content { .combined-part .media-content {
aspect-ratio: auto; /* Allow filling height */ aspect-ratio: auto;
/* Allow filling height */
height: 100px; height: 100px;
} }
.unlink-btn { .unlink-btn {
width: 100%; width: 100%;
background: white; background: white;
@ -563,6 +570,7 @@
font-weight: 500; font-weight: 500;
transition: background 0.1s; transition: background 0.1s;
} }
.unlink-btn:hover { .unlink-btn:hover {
background: #fee2e2; background: #fee2e2;
} }
@ -2199,8 +2207,20 @@
dImg.src = blank; dImg.src = blank;
sImg.src = blank; sImg.src = blank;
document.getElementById('match-drive-name').innerText = match.drive.filename; // Link to Drive Preview
document.getElementById('match-shopify-name').innerText = match.shopify.filename; var driveLink = "https://drive.google.com/file/d/" + match.drive.id + "/view";
document.getElementById('match-drive-name').innerHTML = '<a href="' + driveLink + '" target="_blank" style="color:var(--primary); text-decoration:underline;">' + match.drive.filename + '</a>';
// Link to Shopify Admin Media
var shopifyLink = match.shopify.contentUrl || "#";
if (ui.shopifyUrl) {
// Pattern: .../admin/content/files/{id}?selectedView=all
// We derive the base admin URL from the product URL
var adminBase = ui.shopifyUrl.split('/products/')[0];
var mediaId = match.shopify.id.split('/').pop();
shopifyLink = adminBase + "/content/files/" + mediaId + "?selectedView=all";
}
document.getElementById('match-shopify-name').innerHTML = '<a href="' + shopifyLink + '" target="_blank" style="color:var(--primary); text-decoration:underline;">' + match.shopify.filename + '</a>';
document.getElementById('match-index').innerText = this.currentMatchIndex + 1; document.getElementById('match-index').innerText = this.currentMatchIndex + 1;
document.getElementById('match-total').innerText = this.matches.length; document.getElementById('match-total').innerText = this.matches.length;