lashman/zeroclock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

refactor: migrate remaining dialogs to Vue Transition, remove old keyframes

Browse Source 
Convert Settings, Invoices, IdlePrompt, AppTrackingPrompt, and
AppDiscard dialogs from animate-modal-enter CSS class to proper
<Transition name="modal"> wrappers for enter/leave animations.
Remove unused animate-modal-enter and animate-dropdown-enter keyframes.
This commit is contained in:
Your Name
2026-02-18 11:36:35 +02:00
parent a3a6ab2fdf
commit 291429e1b8
6 changed files with 150 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/Invoices.vue
View File

@@ -230,12 +230,13 @@
</div>
<!-- Invoice Detail Dialog -->
<Transition name="modal">
<div
v-if="showDetailDialog"
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
@click.self="showDetailDialog = false"
>
<div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-2xl p-6 max-h-[calc(100vh-2rem)] overflow-y-auto animate-modal-enter">
<div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-2xl p-6 max-h-[calc(100vh-2rem)] overflow-y-auto">
<div class="flex items-start justify-between mb-6">
<div>
<h2 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary">{{ selectedInvoice?.invoice_number }}</h2>
@@ -298,14 +299,16 @@
</div>
</div>
</div>
</Transition>
<!-- Delete Confirmation Dialog -->
<Transition name="modal">
<div
v-if="showDeleteDialog"
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
@click.self="showDeleteDialog = false"
>
<div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
<div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
<h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Delete Invoice</h2>
<p class="text-[0.75rem] text-text-secondary mb-6">
Are you sure you want to delete invoice "{{ invoiceToDelete?.invoice_number }}"? This action cannot be undone.
@@ -326,6 +329,7 @@
</div>
</div>
</div>
</Transition>
</div>
</template>

4
src/views/Settings.vue
View File

@@ -471,12 +471,13 @@
</div>
<!-- Clear Data Confirmation Dialog -->
<Transition name="modal">
<div
v-if="showClearDataDialog"
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
@click.self="showClearDataDialog = false"
>
<div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
<div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
<h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Clear All Data</h2>
<p class="text-[0.75rem] text-text-secondary mb-4">
Are you sure? This action cannot be undone.
@@ -500,6 +501,7 @@
</div>
</div>
</div>
</Transition>
</div>
</template>