redesign import button
This commit is contained in:
Broque Thomas
parent
d674b999e5
commit
cac3cfab92
3 changed files with 88 additions and 5 deletions
|
|
@ -195,7 +195,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="header-button import-button" id="import-button" onclick="openImportModal()">📥 Import</button>
|
||||
<button class="import-button" id="import-button" onclick="openImportModal()" title="Import Music from Staging">
|
||||
<img src="https://cdn-icons-png.flaticon.com/512/8765/8765164.png" alt="Import" class="import-logo">
|
||||
</button>
|
||||
<button class="header-button watchlist-button" id="watchlist-button">👁️ Watchlist
|
||||
(0)</button>
|
||||
<button class="header-button wishlist-button" id="wishlist-button">🎵 Wishlist (0)</button>
|
||||
|
|
@ -3302,6 +3304,7 @@
|
|||
<div class="import-search-bar">
|
||||
<input type="text" id="import-album-search-input" placeholder="Search for an album..." onkeydown="if(event.key==='Enter')searchImportAlbum()">
|
||||
<button class="import-search-btn" onclick="searchImportAlbum()">Search</button>
|
||||
<button class="import-clear-btn hidden" id="import-album-clear-btn" onclick="clearImportAlbumSearch()" title="Clear search">✕</button>
|
||||
</div>
|
||||
<div class="import-album-grid" id="import-album-results"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34568,11 +34568,24 @@ async function searchImportAlbum() {
|
|||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
// Show clear button
|
||||
document.getElementById('import-album-clear-btn').classList.remove('hidden');
|
||||
} catch (err) {
|
||||
grid.innerHTML = `<div style="color:#ef4444;text-align:center;padding:20px;">Error: ${err.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function clearImportAlbumSearch() {
|
||||
document.getElementById('import-album-search-input').value = '';
|
||||
document.getElementById('import-album-results').innerHTML = '';
|
||||
document.getElementById('import-album-clear-btn').classList.add('hidden');
|
||||
// Re-show suggestions
|
||||
const sugGrid = document.getElementById('import-suggestions-grid');
|
||||
if (sugGrid && sugGrid.children.length > 0) {
|
||||
document.getElementById('import-suggestions-section').classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
async function selectImportAlbum(albumId) {
|
||||
// Show match section, hide search
|
||||
document.getElementById('import-album-search-section').classList.add('hidden');
|
||||
|
|
@ -34652,9 +34665,10 @@ function resetImportAlbumSearch() {
|
|||
}
|
||||
// Refresh suggestions since files may have changed
|
||||
loadImportSuggestions();
|
||||
// Clear search results
|
||||
// Clear search results and hide clear button
|
||||
document.getElementById('import-album-results').innerHTML = '';
|
||||
document.getElementById('import-album-search-input').value = '';
|
||||
document.getElementById('import-album-clear-btn').classList.add('hidden');
|
||||
}
|
||||
|
||||
async function processImportAlbum() {
|
||||
|
|
|
|||
|
|
@ -21791,11 +21791,54 @@ body {
|
|||
/* ============================= */
|
||||
|
||||
.import-button {
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
|
||||
color: #fff !important;
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(124, 58, 237, 0.12) 0%,
|
||||
rgba(99, 39, 196, 0.18) 100%);
|
||||
backdrop-filter: blur(20px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.4);
|
||||
border: 1.5px solid rgba(124, 58, 237, 0.25);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow:
|
||||
0 4px 16px rgba(124, 58, 237, 0.2),
|
||||
0 2px 8px rgba(0, 0, 0, 0.15),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
padding: 0;
|
||||
}
|
||||
.import-button:hover {
|
||||
background: linear-gradient(135deg, #a855f7 0%, #c084fc 100%) !important;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(124, 58, 237, 0.18) 0%,
|
||||
rgba(99, 39, 196, 0.25) 100%);
|
||||
border-color: rgba(124, 58, 237, 0.4);
|
||||
transform: scale(1.05);
|
||||
box-shadow:
|
||||
0 6px 20px rgba(124, 58, 237, 0.3),
|
||||
0 3px 12px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.import-button:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow:
|
||||
0 2px 8px rgba(124, 58, 237, 0.15),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.import-logo {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
object-fit: contain;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.3s ease;
|
||||
filter: invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
.import-button:hover .import-logo {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Modal container — matches wishlist/playlist modal vibe */
|
||||
|
|
@ -21988,6 +22031,29 @@ body {
|
|||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(29, 185, 84, 0.3);
|
||||
}
|
||||
.import-clear-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.import-clear-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
color: #ef4444;
|
||||
}
|
||||
.import-clear-btn.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Album grid */
|
||||
.import-album-grid {
|
||||
|
|
|
|||
Loading…
Reference in a new issue