feat(views): drag regions on home, library, and favorites top-bars
This commit is contained in:
3 files changed
+14
-18
No files matched your search
@@ -1386,7 +1386,7 @@
|
||||
|
||||
<ViewTransition duration={200} distance={12} direction="down">
|
||||
<div class="favorites-view" class:no-outer-scroll={(activeTab === 'tracks' && !loading && filteredTracks.length > 0) || (activeTab === 'albums' && !loading && filteredAlbums.length > 0) || (activeTab === 'artists' && !loading && filteredArtists.length > 0)} bind:this={scrollContainer} onscroll={handleFavoritesScroll}>
|
||||
<div class="top-bar">
|
||||
<div class="top-bar" data-tauri-drag-region="deep">
|
||||
{#if onBack}
|
||||
<button class="back-btn" onclick={onBack}>
|
||||
<ArrowLeft size={16} />
|
||||
@@ -1398,10 +1398,10 @@
|
||||
</button>
|
||||
</div>
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="header" data-tauri-drag-region="deep">
|
||||
<h1>{$t('favorites.title')}</h1>
|
||||
{#if activeTab === 'tracks' && !loading && filteredTracks.length > 0}
|
||||
<div class="header-actions">
|
||||
<div class="header-actions" data-tauri-drag-region="false">
|
||||
<button class="action-btn-circle" onclick={handlePlayAllTracks} title={$t('actions.playAll')}>
|
||||
<Play size={18} fill="currentColor" color="currentColor" />
|
||||
</button>
|
||||
@@ -1431,20 +1431,20 @@
|
||||
</div>
|
||||
{/if}
|
||||
{#if activeTab === 'albums' && !loading && filteredAlbums.length > 0}
|
||||
<div class="header-actions">
|
||||
<div class="header-actions" data-tauri-drag-region="false">
|
||||
<button class="action-btn-circle" onclick={handleRandomAlbum} title={$t('favorites.randomAlbum')}>
|
||||
<Shuffle size={18} />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{#if activeTab === 'artists' && !loading && filteredArtists.length > 0}
|
||||
<div class="header-actions">
|
||||
<div class="header-actions" data-tauri-drag-region="false">
|
||||
<button class="action-btn-circle" onclick={handleRandomArtist} title={$t('favorites.randomArtist')}>
|
||||
<Shuffle size={18} />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="header-search">
|
||||
<div class="header-search" data-tauri-drag-region="false">
|
||||
{#if !searchExpanded}
|
||||
<button class="search-icon-btn" onclick={() => searchExpanded = true} title={$t('nav.search')}>
|
||||
<Search size={16} />
|
||||
@@ -1470,8 +1470,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Navigation Bar (Artist-style) -->
|
||||
<div class="favorites-nav">
|
||||
<div class="nav-left">
|
||||
<div class="favorites-nav" data-tauri-drag-region="deep">
|
||||
<div class="nav-left" data-tauri-drag-region="false">
|
||||
{#each favoritesPreferences.tab_order as tab}
|
||||
{@const Icon = getTabIcon(tab as TabType)}
|
||||
<button
|
||||
@@ -1484,7 +1484,7 @@
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<div class="nav-right" data-tauri-drag-region="false">
|
||||
<span class="results-count">
|
||||
{#if activeTab === 'tracks'}
|
||||
{filteredTracks.length}{trackSearch ? ` / ${favoriteTracks.length}` : ''} {$t('favorites.tracks').toLowerCase()}
|
||||
|
||||
@@ -5694,7 +5694,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Main Library View -->
|
||||
<div class="header">
|
||||
<div class="header" data-tauri-drag-region="deep">
|
||||
<div class="header-content">
|
||||
<h1>{$t('library.title')}</h1>
|
||||
{#if stats}
|
||||
@@ -5707,7 +5707,7 @@
|
||||
<p class="subtitle">{$t('library.yourCollection')}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<div class="header-actions" data-tauri-drag-region="false">
|
||||
{#if hasPlexConfig()}
|
||||
<button
|
||||
class="icon-btn plex-sync-btn"
|
||||
@@ -8140,7 +8140,6 @@
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.select-all-checkbox input[type='checkbox'] {
|
||||
@@ -9240,9 +9239,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* Block selection bleed on the handle itself; the global override
|
||||
on <body> during drag handles the rest of the page. */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tree-sidebar-resize-handle:hover,
|
||||
|
||||
@@ -364,8 +364,8 @@
|
||||
</script>
|
||||
|
||||
<div class="discovery">
|
||||
<div class="toolbar">
|
||||
<div class="tabs">
|
||||
<div class="toolbar" data-tauri-drag-region>
|
||||
<div class="tabs" data-tauri-drag-region="false">
|
||||
{#each tabs as tab (tab.id)}
|
||||
<button
|
||||
class="tab"
|
||||
@@ -377,7 +377,7 @@
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="genre-slot">
|
||||
<div class="genre-slot" data-tauri-drag-region="false">
|
||||
<GenreFilterButton
|
||||
onFilterChange={handleGenreFilterChange}
|
||||
context="home"
|
||||
|
||||
Reference in new issue
Block a user