Internal
Public Access
Add sidebar Tags section to offline mode
Offline mode had tag chips and per-task tag assignment, but was missing the dashboard sidebar's Tags section entirely: filtering the task list by tag, per-tag task counts, and tag create/rename/delete. Ports that section over (reusing the same tag modal pattern as the online create/edit flow), combinable with the existing status filters the same way it works online. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
ae9ab596bb
commit
3fbab2b831
@@ -80,6 +80,17 @@
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-title">Tags</div>
|
||||
<nav class="sidebar-nav" id="offline-tag-nav"></nav>
|
||||
<button type="button" class="sidebar-add-btn" id="offline-add-tag-btn">
|
||||
<svg style="width: 14px; height: 14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 5v14M5 12h14"/>
|
||||
</svg>
|
||||
Add Tag
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Task Pane -->
|
||||
@@ -116,6 +127,39 @@
|
||||
<div class="mobile-overlay" id="mobile-overlay" onclick="closeOfflineMobileMenus()"></div>
|
||||
</div>
|
||||
|
||||
<!-- Tag Edit/Create Modal (outside app-layout for proper fixed positioning) -->
|
||||
<div class="modal-backdrop" id="tag-modal-backdrop">
|
||||
<div class="modal" onclick="event.stopPropagation()">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title" id="tag-modal-title">New Tag</h2>
|
||||
<button type="button" class="modal-close" id="tag-modal-close-btn">
|
||||
<svg style="width: 20px; height: 20px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 6L6 18M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<form id="tag-edit-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="tag-modal-name">Name</label>
|
||||
<input type="text" class="form-input" id="tag-modal-name" required placeholder="Tag name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Color</label>
|
||||
<div class="color-presets" id="tag-modal-color-presets"></div>
|
||||
<div class="color-custom-row">
|
||||
<label class="color-custom-label">Custom:</label>
|
||||
<input type="color" id="tag-modal-color" class="color-custom-input" value="#3b82f6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-secondary" id="tag-modal-cancel-btn">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" id="tag-modal-delete-btn" style="display: none;">Delete</button>
|
||||
<button type="submit" class="btn btn-primary" id="tag-modal-submit-btn">Create</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{% static 'js/offline-db.js' %}"></script>
|
||||
<script src="{% static 'js/offline-tasks.js' %}"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user