Fix browser phone issues and improve UI organization
- Fix 403 Forbidden error in voicemail AJAX by correcting nonce validation - Create accordion-style collapsible voicemail section with persistent state - Restructure queue controls to show alert toggle button consistently - Add global queue actions always visible when user has assigned queues - Implement smooth slide animations and localStorage state management - Update dark mode support for new UI elements and improved accessibility 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -3774,7 +3774,7 @@ class TWP_Admin {
|
||||
* AJAX handler for getting user's recent voicemails
|
||||
*/
|
||||
public function ajax_get_user_voicemails() {
|
||||
check_ajax_referer('twp_ajax_nonce', 'nonce');
|
||||
check_ajax_referer('twp_frontend_nonce', 'nonce');
|
||||
|
||||
if (!current_user_can('manage_options') && !current_user_can('twp_access_voicemails')) {
|
||||
wp_send_json_error('Unauthorized');
|
||||
|
||||
@@ -442,6 +442,24 @@
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
/* Global Queue Actions */
|
||||
.queue-global-actions {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.global-queue-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.global-queue-actions .twp-btn {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
/* Alert Toggle Button */
|
||||
#twp-alert-toggle {
|
||||
position: relative;
|
||||
@@ -466,44 +484,64 @@
|
||||
/* Voicemail Section */
|
||||
.twp-voicemail-section {
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #e9ecef;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.twp-voicemail-section h4 {
|
||||
margin: 0 0 16px 0;
|
||||
.voicemail-header {
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.voicemail-header:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.voicemail-header h4 {
|
||||
margin: 0;
|
||||
color: #212529;
|
||||
font-size: 1.1rem;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.voicemail-stats {
|
||||
.voicemail-summary {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
display: block;
|
||||
.summary-stats {
|
||||
font-size: 0.9rem;
|
||||
color: #6c757d;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
.voicemail-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.voicemail-toggle:hover {
|
||||
background: #dee2e6;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.voicemail-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.twp-voicemail-list {
|
||||
@@ -731,7 +769,8 @@
|
||||
.twp-call-info,
|
||||
.twp-queue-controls,
|
||||
.twp-queue-section,
|
||||
.twp-voicemail-section {
|
||||
.twp-voicemail-section,
|
||||
.queue-global-actions {
|
||||
background: #2d3748;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
@@ -792,12 +831,20 @@
|
||||
}
|
||||
|
||||
.no-queues,
|
||||
.voicemail-stats,
|
||||
.voicemail-header,
|
||||
.voicemail-transcription {
|
||||
background: #2d3748;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
.voicemail-header:hover {
|
||||
background: #4a5568;
|
||||
}
|
||||
|
||||
.summary-stats {
|
||||
color: #cbd5e0;
|
||||
}
|
||||
|
||||
.voicemail-item {
|
||||
background: #2d3748;
|
||||
border-color: #4a5568;
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
bindEvents();
|
||||
loadPhoneNumbers();
|
||||
loadUserQueues();
|
||||
loadUserVoicemails();
|
||||
initVoicemailSection();
|
||||
});
|
||||
|
||||
/**
|
||||
@@ -293,6 +293,19 @@
|
||||
window.open(twp_frontend_ajax.admin_url + 'admin.php?page=twilio-wp-voicemails', '_blank');
|
||||
});
|
||||
|
||||
// Voicemail toggle button
|
||||
$('#twp-voicemail-toggle').on('click', function() {
|
||||
toggleVoicemailSection();
|
||||
});
|
||||
|
||||
// Voicemail header click (also toggles)
|
||||
$('#twp-voicemail-header').on('click', function(e) {
|
||||
// Don't toggle if clicking the toggle button itself
|
||||
if (!$(e.target).closest('.voicemail-toggle').length) {
|
||||
toggleVoicemailSection();
|
||||
}
|
||||
});
|
||||
|
||||
// Voicemail item click handler
|
||||
$(document).on('click', '.voicemail-item', function() {
|
||||
const voicemailId = $(this).data('voicemail-id');
|
||||
@@ -522,10 +535,12 @@
|
||||
if (userQueues.length === 0) {
|
||||
$queueList.html('<div class="no-queues">No queues assigned to you.</div>');
|
||||
$('#twp-queue-section').hide();
|
||||
$('#twp-queue-global-actions').hide();
|
||||
return;
|
||||
}
|
||||
|
||||
$('#twp-queue-section').show();
|
||||
$('#twp-queue-global-actions').show();
|
||||
|
||||
let html = '';
|
||||
userQueues.forEach(function(queue) {
|
||||
@@ -965,6 +980,48 @@
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle voicemail section visibility
|
||||
*/
|
||||
function toggleVoicemailSection() {
|
||||
const $content = $('#twp-voicemail-content');
|
||||
const $toggle = $('#twp-voicemail-toggle .toggle-icon');
|
||||
const isVisible = $content.is(':visible');
|
||||
|
||||
if (isVisible) {
|
||||
$content.slideUp(300);
|
||||
$toggle.text('▼');
|
||||
localStorage.setItem('twp_voicemail_collapsed', 'true');
|
||||
} else {
|
||||
$content.slideDown(300);
|
||||
$toggle.text('▲');
|
||||
localStorage.setItem('twp_voicemail_collapsed', 'false');
|
||||
// Load voicemails when expanding if not already loaded
|
||||
if ($('#twp-voicemail-list').children('.voicemail-loading').length > 0) {
|
||||
loadUserVoicemails();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize voicemail section state
|
||||
*/
|
||||
function initVoicemailSection() {
|
||||
const isCollapsed = localStorage.getItem('twp_voicemail_collapsed') === 'true';
|
||||
const $content = $('#twp-voicemail-content');
|
||||
const $toggle = $('#twp-voicemail-toggle .toggle-icon');
|
||||
|
||||
if (isCollapsed) {
|
||||
$content.hide();
|
||||
$toggle.text('▼');
|
||||
} else {
|
||||
$content.show();
|
||||
$toggle.text('▲');
|
||||
// Load voicemails immediately if expanded
|
||||
loadUserVoicemails();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Display voicemails in the UI
|
||||
*/
|
||||
|
||||
@@ -178,7 +178,19 @@ class TWP_Shortcodes {
|
||||
<div class="queue-loading">Loading queues...</div>
|
||||
</div>
|
||||
|
||||
<!-- Queue Controls -->
|
||||
<!-- Queue Actions (Always Visible) -->
|
||||
<div class="queue-global-actions" id="twp-queue-global-actions" style="display: none;">
|
||||
<div class="global-queue-actions">
|
||||
<button id="twp-refresh-queues" class="twp-btn twp-btn-secondary">
|
||||
Refresh
|
||||
</button>
|
||||
<button id="twp-alert-toggle" class="twp-btn twp-btn-secondary alert-off">
|
||||
🔕 Alerts OFF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Queue Controls (Only When Call Selected) -->
|
||||
<div class="twp-queue-controls" id="twp-queue-controls" style="display: none;">
|
||||
<div class="selected-queue-info">
|
||||
<h5 id="selected-queue-name">No queue selected</h5>
|
||||
@@ -191,30 +203,26 @@ class TWP_Shortcodes {
|
||||
<button id="twp-accept-queue-call" class="twp-btn twp-btn-success">
|
||||
Accept Next Call
|
||||
</button>
|
||||
<button id="twp-refresh-queues" class="twp-btn twp-btn-secondary">
|
||||
Refresh
|
||||
</button>
|
||||
<button id="twp-alert-toggle" class="twp-btn twp-btn-secondary alert-off">
|
||||
🔕 Alerts OFF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Voicemail Section -->
|
||||
<div class="twp-voicemail-section" id="twp-voicemail-section">
|
||||
<div class="voicemail-header" id="twp-voicemail-header">
|
||||
<h4>Recent Voicemails</h4>
|
||||
<div class="voicemail-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Total:</span>
|
||||
<span class="stat-value" id="twp-total-voicemails">0</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Today:</span>
|
||||
<span class="stat-value" id="twp-today-voicemails">0</span>
|
||||
<div class="voicemail-summary">
|
||||
<span class="summary-stats">
|
||||
Total: <span id="twp-total-voicemails">0</span> |
|
||||
Today: <span id="twp-today-voicemails">0</span>
|
||||
</span>
|
||||
<button class="voicemail-toggle" id="twp-voicemail-toggle">
|
||||
<span class="toggle-icon">▼</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="voicemail-content" id="twp-voicemail-content" style="display: none;">
|
||||
<div class="twp-voicemail-list" id="twp-voicemail-list">
|
||||
<div class="voicemail-loading">Loading voicemails...</div>
|
||||
</div>
|
||||
@@ -228,6 +236,7 @@ class TWP_Shortcodes {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audio elements for incoming calls handled by browser -->
|
||||
<audio id="twp-ringtone" style="display: none;"></audio>
|
||||
|
||||
Reference in New Issue
Block a user