80 lines
4.4 KiB
HTML
80 lines
4.4 KiB
HTML
<!-- Bulk Action Bar - Fixed at bottom of sidebar when in selection mode -->
|
|
<transition name="slide-up">
|
|
<div v-if="selectionMode && selectedCount > 0"
|
|
class="fixed bottom-0 left-0 w-80 bg-[var(--bg-secondary)] border-t border-r border-[var(--border-primary)] shadow-lg z-50 transform transition-transform duration-300"
|
|
:class="[
|
|
{ 'translate-y-full': bulkActionInProgress },
|
|
isSidebarCollapsed ? '-translate-x-full' : ''
|
|
]">
|
|
<div class="px-3 py-2">
|
|
<!-- Compact vertical layout for sidebar width -->
|
|
<div class="flex flex-col gap-2">
|
|
<!-- Selection info row -->
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-[var(--text-primary)]">
|
|
${ selectedCount } selected
|
|
</span>
|
|
<div class="flex items-center gap-2">
|
|
<button @click="allVisibleSelected ? clearSelection() : selectAll()"
|
|
class="text-xs text-[var(--text-accent)] hover:underline">
|
|
${ allVisibleSelected ? 'Clear' : 'All' }
|
|
</button>
|
|
<button @click="exitSelectionMode"
|
|
class="p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] rounded transition-colors"
|
|
title="Exit selection mode">
|
|
<i class="fas fa-times text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action buttons row -->
|
|
<div class="flex items-center justify-between gap-1">
|
|
<button @click="openBulkTagModal('add')"
|
|
class="flex-1 px-2 py-1.5 text-xs bg-[var(--bg-tertiary)] hover:bg-[var(--bg-input)] rounded-md transition-colors flex items-center justify-center gap-1"
|
|
title="Add or remove tags">
|
|
<i class="fas fa-tags text-[var(--text-muted)]"></i>
|
|
<span>Tags</span>
|
|
</button>
|
|
|
|
<button @click="bulkToggleInbox()"
|
|
class="flex-1 px-2 py-1.5 text-xs bg-[var(--bg-tertiary)] hover:bg-[var(--bg-input)] rounded-md transition-colors flex items-center justify-center gap-1"
|
|
title="Toggle inbox status">
|
|
<i class="fas fa-inbox text-blue-500"></i>
|
|
<span>Inbox</span>
|
|
</button>
|
|
|
|
<button @click="bulkToggleHighlight()"
|
|
class="flex-1 px-2 py-1.5 text-xs bg-[var(--bg-tertiary)] hover:bg-[var(--bg-input)] rounded-md transition-colors flex items-center justify-center gap-1"
|
|
title="Toggle highlight">
|
|
<i class="fas fa-star text-amber-500"></i>
|
|
<span>Star</span>
|
|
</button>
|
|
|
|
<button @click="openBulkReprocessModal"
|
|
class="flex-1 px-2 py-1.5 text-xs bg-[var(--bg-tertiary)] hover:bg-[var(--bg-input)] rounded-md transition-colors flex items-center justify-center gap-1"
|
|
title="Reprocess">
|
|
<i class="fas fa-redo text-[var(--text-muted)]"></i>
|
|
<span>Redo</span>
|
|
</button>
|
|
|
|
<button @click="openBulkDeleteModal"
|
|
class="flex-1 px-2 py-1.5 text-xs bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors flex items-center justify-center gap-1"
|
|
title="Delete selected">
|
|
<i class="fas fa-trash"></i>
|
|
<span>Delete</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading overlay -->
|
|
<div v-if="bulkActionInProgress"
|
|
class="absolute inset-0 bg-[var(--bg-secondary)] bg-opacity-80 flex items-center justify-center">
|
|
<div class="flex items-center gap-2">
|
|
<i class="fas fa-spinner fa-spin text-[var(--text-accent)]"></i>
|
|
<span class="text-xs text-[var(--text-secondary)]">Processing...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|