Phase 5: Update modals and hamburger menus with ASCII frames
## Hamburger Menu Updates - Ticket page menu: Added ascii-subsection-header and ascii-frame-inner wrapper - Dashboard menu: Added ascii-subsection-header and dashboard-filters wrapper - Maintains all inline editing functionality for ticket fields - Preserves all filter checkbox functionality for dashboard ## Settings Modal Enhancement - Wrapped in ascii-frame-outer with ╚╝ bottom corners - Added ascii-section-header for title - Nested content in ascii-content → ascii-frame-inner - Added ascii-divider before footer - Moved close button to footer for better layout ## Bulk Operations Modals - Bulk Assign Modal: Full ASCII frame structure with nested sections - Bulk Priority Modal: Full ASCII frame structure with nested sections - Both modals now have: * ascii-frame-outer with corner decorations * ascii-section-header for title * ascii-content and ascii-frame-inner for body * ascii-divider before footer * Consistent visual hierarchy with rest of app ## Code Quality - All event handlers and functionality preserved - No breaking changes to JavaScript logic - Consistent frame structure across all dynamically generated UI - All modals and menus now match the nested frame aesthetic ## Files Modified - assets/js/dashboard.js: Updated 5 HTML generation functions * createHamburgerMenu() - ticket page version * createHamburgerMenu() - dashboard version * createSettingsModal() * showBulkAssignModal() * showBulkPriorityModal() 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -116,12 +116,14 @@ function createSettingsModal() {
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'settings-modal-backdrop';
|
||||
backdrop.innerHTML = `
|
||||
<div class="settings-modal">
|
||||
<div class="settings-modal-header">
|
||||
<h2>Dashboard Settings</h2>
|
||||
<button class="close-modal">×</button>
|
||||
</div>
|
||||
<div class="settings-modal-content">
|
||||
<div class="settings-modal ascii-frame-outer">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<div class="ascii-section-header">Dashboard Settings</div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="setting-group">
|
||||
<h3>Rows per Page</h3>
|
||||
<select id="rows-per-page">
|
||||
@@ -132,9 +134,16 @@ function createSettingsModal() {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="settings-modal-footer">
|
||||
<button class="save-settings">Save Settings</button>
|
||||
<button class="cancel-settings">Cancel</button>
|
||||
<button class="close-modal">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -387,7 +396,10 @@ function createHamburgerMenu() {
|
||||
<div class="hamburger-icon">☰</div>
|
||||
<div class="hamburger-content">
|
||||
<div class="close-hamburger">☰</div>
|
||||
<h3>Ticket Actions</h3>
|
||||
|
||||
<div class="ascii-subsection-header">Ticket Actions</div>
|
||||
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="ticket-info-editable">
|
||||
<div class="editable-field" data-field="priority">
|
||||
<label><strong>Priority:</strong></label>
|
||||
@@ -442,6 +454,7 @@ function createHamburgerMenu() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
console.log('Ticket hamburger menu HTML created');
|
||||
@@ -456,7 +469,11 @@ function createHamburgerMenu() {
|
||||
<div class="hamburger-icon">☰</div>
|
||||
<div class="hamburger-content">
|
||||
<div class="close-hamburger">☰</div>
|
||||
<h3>Filters</h3>
|
||||
|
||||
<div class="ascii-subsection-header">Filters</div>
|
||||
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="dashboard-filters">
|
||||
<div class="filter-section">
|
||||
<h4>Categories</h4>
|
||||
<div id="category-filters"></div>
|
||||
@@ -470,6 +487,8 @@ function createHamburgerMenu() {
|
||||
<button id="clear-filters">Clear Filters</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Get current URL parameters
|
||||
@@ -971,8 +990,14 @@ function showBulkAssignModal() {
|
||||
// Create modal HTML
|
||||
const modalHtml = `
|
||||
<div class="modal-overlay" id="bulkAssignModal">
|
||||
<div class="modal-content">
|
||||
<h3>Assign ${ticketIds.length} Ticket(s)</h3>
|
||||
<div class="modal-content ascii-frame-outer">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<div class="ascii-section-header">Assign ${ticketIds.length} Ticket(s)</div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="modal-body">
|
||||
<label for="bulkAssignUser">Assign to:</label>
|
||||
<select id="bulkAssignUser" class="editable">
|
||||
@@ -980,12 +1005,19 @@ function showBulkAssignModal() {
|
||||
<!-- Users will be loaded dynamically -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="modal-footer">
|
||||
<button onclick="performBulkAssign()" class="btn btn-bulk">Assign</button>
|
||||
<button onclick="closeBulkAssignModal()" class="btn btn-secondary">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||||
@@ -1060,8 +1092,14 @@ function showBulkPriorityModal() {
|
||||
|
||||
const modalHtml = `
|
||||
<div class="modal-overlay" id="bulkPriorityModal">
|
||||
<div class="modal-content">
|
||||
<h3>Change Priority for ${ticketIds.length} Ticket(s)</h3>
|
||||
<div class="modal-content ascii-frame-outer">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<div class="ascii-section-header">Change Priority for ${ticketIds.length} Ticket(s)</div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="modal-body">
|
||||
<label for="bulkPriority">Priority:</label>
|
||||
<select id="bulkPriority" class="editable">
|
||||
@@ -1073,12 +1111,19 @@ function showBulkPriorityModal() {
|
||||
<option value="5">P5 - Minimal Impact</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="modal-footer">
|
||||
<button onclick="performBulkPriority()" class="btn btn-bulk">Update</button>
|
||||
<button onclick="closeBulkPriorityModal()" class="btn btn-secondary">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||||
|
||||
Reference in New Issue
Block a user