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,25 +116,34 @@ function createSettingsModal() {
|
|||||||
const backdrop = document.createElement('div');
|
const backdrop = document.createElement('div');
|
||||||
backdrop.className = 'settings-modal-backdrop';
|
backdrop.className = 'settings-modal-backdrop';
|
||||||
backdrop.innerHTML = `
|
backdrop.innerHTML = `
|
||||||
<div class="settings-modal">
|
<div class="settings-modal ascii-frame-outer">
|
||||||
<div class="settings-modal-header">
|
<span class="bottom-left-corner">╚</span>
|
||||||
<h2>Dashboard Settings</h2>
|
<span class="bottom-right-corner">╝</span>
|
||||||
<button class="close-modal">×</button>
|
|
||||||
</div>
|
<div class="ascii-section-header">Dashboard Settings</div>
|
||||||
<div class="settings-modal-content">
|
|
||||||
<div class="setting-group">
|
<div class="ascii-content">
|
||||||
<h3>Rows per Page</h3>
|
<div class="ascii-frame-inner">
|
||||||
<select id="rows-per-page">
|
<div class="setting-group">
|
||||||
<option value="15">15</option>
|
<h3>Rows per Page</h3>
|
||||||
<option value="25">25</option>
|
<select id="rows-per-page">
|
||||||
<option value="50">50</option>
|
<option value="15">15</option>
|
||||||
<option value="100">100</option>
|
<option value="25">25</option>
|
||||||
</select>
|
<option value="50">50</option>
|
||||||
|
<option value="100">100</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="settings-modal-footer">
|
|
||||||
<button class="save-settings">Save Settings</button>
|
<div class="ascii-divider"></div>
|
||||||
<button class="cancel-settings">Cancel</button>
|
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@@ -387,56 +396,60 @@ function createHamburgerMenu() {
|
|||||||
<div class="hamburger-icon">☰</div>
|
<div class="hamburger-icon">☰</div>
|
||||||
<div class="hamburger-content">
|
<div class="hamburger-content">
|
||||||
<div class="close-hamburger">☰</div>
|
<div class="close-hamburger">☰</div>
|
||||||
<h3>Ticket Actions</h3>
|
|
||||||
<div class="ticket-info-editable">
|
<div class="ascii-subsection-header">Ticket Actions</div>
|
||||||
<div class="editable-field" data-field="priority">
|
|
||||||
<label><strong>Priority:</strong></label>
|
<div class="ascii-frame-inner">
|
||||||
<span class="editable-value" data-current="${window.ticketData.priority}">P${window.ticketData.priority}</span>
|
<div class="ticket-info-editable">
|
||||||
<div class="edit-dropdown" style="display: none;">
|
<div class="editable-field" data-field="priority">
|
||||||
<select class="field-select">
|
<label><strong>Priority:</strong></label>
|
||||||
<option value="1" ${String(window.ticketData.priority) === '1' ? 'selected' : ''}>P1 - Critical</option>
|
<span class="editable-value" data-current="${window.ticketData.priority}">P${window.ticketData.priority}</span>
|
||||||
<option value="2" ${String(window.ticketData.priority) === '2' ? 'selected' : ''}>P2 - High</option>
|
<div class="edit-dropdown" style="display: none;">
|
||||||
<option value="3" ${String(window.ticketData.priority) === '3' ? 'selected' : ''}>P3 - Medium</option>
|
<select class="field-select">
|
||||||
<option value="4" ${String(window.ticketData.priority) === '4' ? 'selected' : ''}>P4 - Low</option>
|
<option value="1" ${String(window.ticketData.priority) === '1' ? 'selected' : ''}>P1 - Critical</option>
|
||||||
<option value="5" ${String(window.ticketData.priority) === '5' ? 'selected' : ''}>P5 - Lowest</option>
|
<option value="2" ${String(window.ticketData.priority) === '2' ? 'selected' : ''}>P2 - High</option>
|
||||||
</select>
|
<option value="3" ${String(window.ticketData.priority) === '3' ? 'selected' : ''}>P3 - Medium</option>
|
||||||
<div class="edit-actions">
|
<option value="4" ${String(window.ticketData.priority) === '4' ? 'selected' : ''}>P4 - Low</option>
|
||||||
<button class="save-btn">✓</button>
|
<option value="5" ${String(window.ticketData.priority) === '5' ? 'selected' : ''}>P5 - Lowest</option>
|
||||||
<button class="cancel-btn">✗</button>
|
</select>
|
||||||
|
<div class="edit-actions">
|
||||||
|
<button class="save-btn">✓</button>
|
||||||
|
<button class="cancel-btn">✗</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div class="editable-field" data-field="category">
|
||||||
<div class="editable-field" data-field="category">
|
<label><strong>Category:</strong></label>
|
||||||
<label><strong>Category:</strong></label>
|
<span class="editable-value" data-current="${window.ticketData.category}">${window.ticketData.category}</span>
|
||||||
<span class="editable-value" data-current="${window.ticketData.category}">${window.ticketData.category}</span>
|
<div class="edit-dropdown" style="display: none;">
|
||||||
<div class="edit-dropdown" style="display: none;">
|
<select class="field-select">
|
||||||
<select class="field-select">
|
<option value="Hardware" ${window.ticketData.category === 'Hardware' ? 'selected' : ''}>Hardware</option>
|
||||||
<option value="Hardware" ${window.ticketData.category === 'Hardware' ? 'selected' : ''}>Hardware</option>
|
<option value="Software" ${window.ticketData.category === 'Software' ? 'selected' : ''}>Software</option>
|
||||||
<option value="Software" ${window.ticketData.category === 'Software' ? 'selected' : ''}>Software</option>
|
</select>
|
||||||
</select>
|
<div class="edit-actions">
|
||||||
<div class="edit-actions">
|
<button class="save-btn">✓</button>
|
||||||
<button class="save-btn">✓</button>
|
<button class="cancel-btn">✗</button>
|
||||||
<button class="cancel-btn">✗</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div class="editable-field" data-field="type">
|
||||||
<div class="editable-field" data-field="type">
|
<label><strong>Type:</strong></label>
|
||||||
<label><strong>Type:</strong></label>
|
<span class="editable-value" data-current="${window.ticketData.type}">${window.ticketData.type}</span>
|
||||||
<span class="editable-value" data-current="${window.ticketData.type}">${window.ticketData.type}</span>
|
<div class="edit-dropdown" style="display: none;">
|
||||||
<div class="edit-dropdown" style="display: none;">
|
<select class="field-select">
|
||||||
<select class="field-select">
|
<option value="Install" ${window.ticketData.type === 'Install' ? 'selected' : ''}>Install</option>
|
||||||
<option value="Install" ${window.ticketData.type === 'Install' ? 'selected' : ''}>Install</option>
|
<option value="Maintenance" ${window.ticketData.type === 'Maintenance' ? 'selected' : ''}>Maintenance</option>
|
||||||
<option value="Maintenance" ${window.ticketData.type === 'Maintenance' ? 'selected' : ''}>Maintenance</option>
|
<option value="Problem" ${window.ticketData.type === 'Problem' ? 'selected' : ''}>Problem</option>
|
||||||
<option value="Problem" ${window.ticketData.type === 'Problem' ? 'selected' : ''}>Problem</option>
|
<option value="Request" ${window.ticketData.type === 'Request' ? 'selected' : ''}>Request</option>
|
||||||
<option value="Request" ${window.ticketData.type === 'Request' ? 'selected' : ''}>Request</option>
|
<option value="Task" ${window.ticketData.type === 'Task' ? 'selected' : ''}>Task</option>
|
||||||
<option value="Task" ${window.ticketData.type === 'Task' ? 'selected' : ''}>Task</option>
|
<option value="Upgrade" ${window.ticketData.type === 'Upgrade' ? 'selected' : ''}>Upgrade</option>
|
||||||
<option value="Upgrade" ${window.ticketData.type === 'Upgrade' ? 'selected' : ''}>Upgrade</option>
|
</select>
|
||||||
</select>
|
<div class="edit-actions">
|
||||||
<div class="edit-actions">
|
<button class="save-btn">✓</button>
|
||||||
<button class="save-btn">✓</button>
|
<button class="cancel-btn">✗</button>
|
||||||
<button class="cancel-btn">✗</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -456,18 +469,24 @@ function createHamburgerMenu() {
|
|||||||
<div class="hamburger-icon">☰</div>
|
<div class="hamburger-icon">☰</div>
|
||||||
<div class="hamburger-content">
|
<div class="hamburger-content">
|
||||||
<div class="close-hamburger">☰</div>
|
<div class="close-hamburger">☰</div>
|
||||||
<h3>Filters</h3>
|
|
||||||
<div class="filter-section">
|
<div class="ascii-subsection-header">Filters</div>
|
||||||
<h4>Categories</h4>
|
|
||||||
<div id="category-filters"></div>
|
<div class="ascii-frame-inner">
|
||||||
</div>
|
<div class="dashboard-filters">
|
||||||
<div class="filter-section">
|
<div class="filter-section">
|
||||||
<h4>Types</h4>
|
<h4>Categories</h4>
|
||||||
<div id="type-filters"></div>
|
<div id="category-filters"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="filter-actions">
|
<div class="filter-section">
|
||||||
<button id="apply-filters">Apply Filters</button>
|
<h4>Types</h4>
|
||||||
<button id="clear-filters">Clear Filters</button>
|
<div id="type-filters"></div>
|
||||||
|
</div>
|
||||||
|
<div class="filter-actions">
|
||||||
|
<button id="apply-filters">Apply Filters</button>
|
||||||
|
<button id="clear-filters">Clear Filters</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@@ -971,18 +990,31 @@ function showBulkAssignModal() {
|
|||||||
// Create modal HTML
|
// Create modal HTML
|
||||||
const modalHtml = `
|
const modalHtml = `
|
||||||
<div class="modal-overlay" id="bulkAssignModal">
|
<div class="modal-overlay" id="bulkAssignModal">
|
||||||
<div class="modal-content">
|
<div class="modal-content ascii-frame-outer">
|
||||||
<h3>Assign ${ticketIds.length} Ticket(s)</h3>
|
<span class="bottom-left-corner">╚</span>
|
||||||
<div class="modal-body">
|
<span class="bottom-right-corner">╝</span>
|
||||||
<label for="bulkAssignUser">Assign to:</label>
|
|
||||||
<select id="bulkAssignUser" class="editable">
|
<div class="ascii-section-header">Assign ${ticketIds.length} Ticket(s)</div>
|
||||||
<option value="">Select User...</option>
|
|
||||||
<!-- Users will be loaded dynamically -->
|
<div class="ascii-content">
|
||||||
</select>
|
<div class="ascii-frame-inner">
|
||||||
|
<div class="modal-body">
|
||||||
|
<label for="bulkAssignUser">Assign to:</label>
|
||||||
|
<select id="bulkAssignUser" class="editable">
|
||||||
|
<option value="">Select User...</option>
|
||||||
|
<!-- Users will be loaded dynamically -->
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
|
||||||
<button onclick="performBulkAssign()" class="btn btn-bulk">Assign</button>
|
<div class="ascii-divider"></div>
|
||||||
<button onclick="closeBulkAssignModal()" class="btn btn-secondary">Cancel</button>
|
|
||||||
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1060,22 +1092,35 @@ function showBulkPriorityModal() {
|
|||||||
|
|
||||||
const modalHtml = `
|
const modalHtml = `
|
||||||
<div class="modal-overlay" id="bulkPriorityModal">
|
<div class="modal-overlay" id="bulkPriorityModal">
|
||||||
<div class="modal-content">
|
<div class="modal-content ascii-frame-outer">
|
||||||
<h3>Change Priority for ${ticketIds.length} Ticket(s)</h3>
|
<span class="bottom-left-corner">╚</span>
|
||||||
<div class="modal-body">
|
<span class="bottom-right-corner">╝</span>
|
||||||
<label for="bulkPriority">Priority:</label>
|
|
||||||
<select id="bulkPriority" class="editable">
|
<div class="ascii-section-header">Change Priority for ${ticketIds.length} Ticket(s)</div>
|
||||||
<option value="">Select Priority...</option>
|
|
||||||
<option value="1">P1 - Critical Impact</option>
|
<div class="ascii-content">
|
||||||
<option value="2">P2 - High Impact</option>
|
<div class="ascii-frame-inner">
|
||||||
<option value="3">P3 - Medium Impact</option>
|
<div class="modal-body">
|
||||||
<option value="4">P4 - Low Impact</option>
|
<label for="bulkPriority">Priority:</label>
|
||||||
<option value="5">P5 - Minimal Impact</option>
|
<select id="bulkPriority" class="editable">
|
||||||
</select>
|
<option value="">Select Priority...</option>
|
||||||
|
<option value="1">P1 - Critical Impact</option>
|
||||||
|
<option value="2">P2 - High Impact</option>
|
||||||
|
<option value="3">P3 - Medium Impact</option>
|
||||||
|
<option value="4">P4 - Low Impact</option>
|
||||||
|
<option value="5">P5 - Minimal Impact</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
|
||||||
<button onclick="performBulkPriority()" class="btn btn-bulk">Update</button>
|
<div class="ascii-divider"></div>
|
||||||
<button onclick="closeBulkPriorityModal()" class="btn btn-secondary">Cancel</button>
|
|
||||||
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user