animations
This commit is contained in:
@@ -13,6 +13,7 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-tooltip@1.x.x/dist/cdn.min.js" defer></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<link rel="stylesheet" href="/static/css/animations.css">
|
||||
<style>
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<div class="flex space-x-2">
|
||||
{% if current_user.imap_config %}
|
||||
<div data-loading-states>
|
||||
<button class="btn btn-outline" hx-post="/api/imap/sync" hx-target="#modal-holder" data-loading-disable>
|
||||
<button class="btn btn-outline" hx-get="/api/imap/config" hx-target="#modal-holder" data-loading-disable>
|
||||
<i class="fas fa-sync mr-2" data-loading-class="!hidden"></i>
|
||||
<span data-loading-class="!hidden">Sync Folders</span>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
|
||||
72
app/templates/partials/folder_selection_modal.html
Normal file
72
app/templates/partials/folder_selection_modal.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<div id="folder-selection-modal" class="modal-box step-2 slide-left-enter-from" @click.away="$refs.modal.close()">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="steps flex-1">
|
||||
<span class="step">Step 1</span>
|
||||
<span class="step step-primary">Step 2</span>
|
||||
</div>
|
||||
<h3 class="font-bold text-lg">Configure IMAP Folders</h3>
|
||||
</div>
|
||||
|
||||
<p class="mb-4">The following folders were found on your IMAP server. Select which folders you want to sync and configure their processing types.</p>
|
||||
<form id="folder-selection-form" hx-post="/api/imap/sync-selected" hx-target="#modal-holder" hx-swap="innerHTML slide-left:300ms">
|
||||
|
||||
<div class="overflow-x-auto mb-4">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Folder</th>
|
||||
<th>Synced?</th>
|
||||
<th>Select</th>
|
||||
<th>Processing Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for folder in folders %}
|
||||
<tr>
|
||||
<td>{{ folder.name }}</td>
|
||||
<td>
|
||||
{% if folder.subscribed %}
|
||||
<span class="badge badge-success">Synced</span>
|
||||
{% else %}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<select class="select select-bordered select-sm"
|
||||
name="folder_type_{{ loop.index }}">
|
||||
<option value="tidy" {% if folder.folder_type == 'tidy' %}selected{% endif %}>Tidy</option>
|
||||
<option value="destination" {% if folder.folder_type == 'destination' %}selected{% endif %}>Destination</option>
|
||||
<option value="ignore" {% if folder.folder_type == 'ignore' %}selected{% endif %}>Ignore</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
{% if folder.folder_type == 'tidy' %}
|
||||
Processed by AI to organize emails
|
||||
{% elif folder.folder_type == 'destination' %}
|
||||
Target for organized emails
|
||||
{% else %}
|
||||
Ignored during processing
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
<span>Special folders like "Sent", "Drafts", "Spam", and "Trash" are automatically excluded from syncing.</span>
|
||||
</div>
|
||||
|
||||
<div class="modal-action" data-loading-states>
|
||||
<button type="button" class="btn btn-outline" @click="$dispatch('close-modal')">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" id="continue-btn" data-loading-disable>
|
||||
<span data-loading-class="!hidden">Save and Continue</span>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -1,8 +1,15 @@
|
||||
<div id="folder-type-modal" class="modal-box" @click.away="$refs.modal.close()">
|
||||
<h3 class="font-bold text-lg mb-4">Configure Folder Types</h3>
|
||||
<div id="folder-type-modal" class="modal-box step-2 slide-left-enter-from" @click.away="$refs.modal.close()">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="steps flex-1">
|
||||
<span class="step">Step 1</span>
|
||||
<span class="step step-primary">Step 2</span>
|
||||
</div>
|
||||
<h3 class="font-bold text-lg">Configure Folder Types</h3>
|
||||
</div>
|
||||
|
||||
<p class="mb-4">Select the processing type for each folder. Inbox will default to Tidy, while Archive/Spam/Drafts will default to Ignore.</p>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<div class="overflow-x-auto mb-4">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -42,11 +49,11 @@
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn btn-outline" hx-get="/api/imap/sync">
|
||||
Skip and Use Defaults
|
||||
<button type="button" class="btn btn-outline" hx-get="/api/imap/config" hx-target="#modal-holder" hx-swap="innerHTML slide-right:300ms">
|
||||
<i class="fas fa-arrow-left mr-2"></i>Back
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" hx-post="/api/imap/sync">
|
||||
Save and Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
<div id="imap-modal" @click.away="$refs.modal.close()" class="modal-box" x-data="{ errors: {{ 'true' if errors else 'false' }} }" x-init="$nextTick(() => { if (errors) { document.querySelector('#submit-btn').classList.add('shake'); } })" >
|
||||
<h3 class="font-bold text-lg mb-4">Configure IMAP Connection</h3>
|
||||
<div id="imap-modal" @click.away="$refs.modal.close()" class="modal-box step-1 translate-up-enter-from" x-data="{ errors: {{ 'true' if errors else 'false' }} }" x-init="$nextTick(() => { if (errors) { document.querySelector('#submit-btn').classList.add('shake'); } })" >
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="steps flex-1">
|
||||
<span class="step step-primary">Step 1</span>
|
||||
<span class="step">Step 2</span>
|
||||
</div>
|
||||
<h3 class="font-bold text-lg">Configure IMAP Connection</h3>
|
||||
</div>
|
||||
|
||||
{% if success %}
|
||||
<div class="alert alert-success mb-4">
|
||||
@@ -80,7 +86,7 @@
|
||||
|
||||
{% if success %}
|
||||
<div class="mt-4 pt-4 border-t border-base-300" data-loading-states>
|
||||
<button class="btn btn-success w-full" hx-post="/api/imap/sync" hx-target="#modal-holder" hx-swap="innerHTML" data-loading-disable>
|
||||
<button class="btn btn-success w-full" hx-post="/api/imap/sync" hx-target="#modal-holder" hx-swap="innerHTML slide-left:300ms" data-loading-disable>
|
||||
<span data-loading-class="!hidden"><i class="fas fa-sync mr-2"></i>Configure Folder Types</span>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user