Add call history, dark mode toggle, caller ID persistence, and refactor phone page
Phone page improvements: - Clear caller number display after call disconnects - Add "Recent" tab with session call history (tap to call back) - Persist outbound caller ID selection in localStorage - Fix button overlap with proper z-index layering - Add manual dark mode toggle (System/Light/Dark) in Settings - Improve dark mode CSS for all UI elements Refactor phone page into separate files: - assets/mobile/phone.css (848 lines) — all CSS - assets/mobile/phone.js (1065 lines) — all JavaScript - assets/mobile/phone-template.php (267 lines) — HTML template - includes/class-twp-mobile-phone-page.php (211 lines) — PHP controller - PHP values passed to JS via window.twpConfig bridge Flutter app: - Replace FAB with slim AppBar (refresh + menu buttons) - Fix dark mode colors using theme-aware colorScheme Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude
267
assets/mobile/phone-template.php
Normal file
267
assets/mobile/phone-template.php
Normal file
@@ -0,0 +1,267 @@
|
||||
<?php
|
||||
/**
|
||||
* Mobile Phone Page Template
|
||||
*
|
||||
* This template is require'd from TWP_Mobile_Phone_Page::render_page().
|
||||
* All PHP variables ($extension_data, $is_logged_in, $agent_status, etc.)
|
||||
* are in scope from the calling method.
|
||||
*
|
||||
* @package Twilio_WP_Plugin
|
||||
*/
|
||||
|
||||
// Prevent direct access.
|
||||
if (!defined('ABSPATH')) {
|
||||
exit;
|
||||
}
|
||||
?><!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#1a1a2e">
|
||||
<title>Phone - <?php echo esc_html(get_bloginfo('name')); ?></title>
|
||||
|
||||
<!-- jQuery (WordPress bundled) -->
|
||||
<script src="<?php echo includes_url('js/jquery/jquery.min.js'); ?>"></script>
|
||||
|
||||
<!-- Preload Twilio SDK -->
|
||||
<link rel="preload" href="https://unpkg.com/@twilio/voice-sdk@2.11.0/dist/twilio.min.js" as="script">
|
||||
<link rel="dns-prefetch" href="//unpkg.com">
|
||||
<link rel="dns-prefetch" href="//chunderw-vpc-gll.twilio.com">
|
||||
<link rel="preconnect" href="https://chunderw-vpc-gll.twilio.com" crossorigin>
|
||||
|
||||
<!-- Stylesheet -->
|
||||
<link rel="stylesheet" href="<?php echo plugins_url('assets/mobile/phone.css', $plugin_file); ?>">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="twp-app">
|
||||
|
||||
<!-- Agent Status Bar -->
|
||||
<div class="agent-status-bar">
|
||||
<div class="status-info">
|
||||
<span class="extension-badge"><?php echo $extension_data ? esc_html($extension_data->extension) : '—'; ?></span>
|
||||
|
||||
<button id="login-toggle-btn" class="<?php echo $is_logged_in ? 'logged-in' : ''; ?>" onclick="toggleAgentLogin()">
|
||||
<?php echo $is_logged_in ? 'Log Out' : 'Log In'; ?>
|
||||
</button>
|
||||
|
||||
<select id="agent-status-select" onchange="updateAgentStatus(this.value)" <?php echo !$is_logged_in ? 'disabled' : ''; ?>>
|
||||
<option value="available" <?php selected($agent_status->status ?? '', 'available'); ?>>Available</option>
|
||||
<option value="busy" <?php selected($agent_status->status ?? '', 'busy'); ?>>Busy</option>
|
||||
<option value="offline" <?php selected($agent_status->status ?? 'offline', 'offline'); ?>>Offline</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="agent-stats">
|
||||
<span>Today: <strong><?php echo esc_html($agent_stats['calls_today']); ?></strong></span>
|
||||
<span>Total: <strong><?php echo esc_html($agent_stats['total_calls']); ?></strong></span>
|
||||
<span>Avg: <strong><?php echo round($agent_stats['avg_duration'] ?? 0); ?>s</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<div class="tab-nav">
|
||||
<button class="tab-btn active" data-tab="phone">Phone</button>
|
||||
<button class="tab-btn" data-tab="recent">Recent</button>
|
||||
<button class="tab-btn" data-tab="queues">Queues</button>
|
||||
<button class="tab-btn" data-tab="settings">Settings</button>
|
||||
</div>
|
||||
|
||||
<!-- Notices container -->
|
||||
<div id="twp-notices"></div>
|
||||
|
||||
<!-- Error display -->
|
||||
<div id="browser-phone-error" style="display:none;"></div>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content">
|
||||
|
||||
<!-- Phone Tab -->
|
||||
<div class="tab-pane active" id="tab-phone">
|
||||
<div class="phone-interface">
|
||||
<div class="phone-display">
|
||||
<div id="phone-status">Ready</div>
|
||||
<div id="device-connection-status">Loading...</div>
|
||||
<div id="phone-number-display"></div>
|
||||
<div id="call-timer" style="display:none;">00:00</div>
|
||||
</div>
|
||||
|
||||
<input type="tel" id="phone-number-input" placeholder="Enter phone number" />
|
||||
|
||||
<div class="dialpad-grid">
|
||||
<button class="dialpad-btn" data-digit="1">1</button>
|
||||
<button class="dialpad-btn" data-digit="2">2<span>ABC</span></button>
|
||||
<button class="dialpad-btn" data-digit="3">3<span>DEF</span></button>
|
||||
<button class="dialpad-btn" data-digit="4">4<span>GHI</span></button>
|
||||
<button class="dialpad-btn" data-digit="5">5<span>JKL</span></button>
|
||||
<button class="dialpad-btn" data-digit="6">6<span>MNO</span></button>
|
||||
<button class="dialpad-btn" data-digit="7">7<span>PQRS</span></button>
|
||||
<button class="dialpad-btn" data-digit="8">8<span>TUV</span></button>
|
||||
<button class="dialpad-btn" data-digit="9">9<span>WXYZ</span></button>
|
||||
<button class="dialpad-btn" data-digit="*">*</button>
|
||||
<button class="dialpad-btn" data-digit="0">0<span>+</span></button>
|
||||
<button class="dialpad-btn" data-digit="#">#</button>
|
||||
</div>
|
||||
|
||||
<div class="phone-controls">
|
||||
<button id="call-btn" class="btn-phone btn-call">
|
||||
📞 Call
|
||||
</button>
|
||||
<button id="hangup-btn" class="btn-phone btn-hangup" style="display:none;">
|
||||
❌ Hang Up
|
||||
</button>
|
||||
<button id="answer-btn" class="btn-phone btn-answer" style="display:none;">
|
||||
📞 Answer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="admin-call-controls-panel" style="display:none;">
|
||||
<div class="call-controls-grid">
|
||||
<button id="admin-hold-btn" class="btn-ctrl" title="Hold">
|
||||
⏸ Hold
|
||||
</button>
|
||||
<button id="admin-transfer-btn" class="btn-ctrl" title="Transfer">
|
||||
↪ Transfer
|
||||
</button>
|
||||
<button id="admin-requeue-btn" class="btn-ctrl" title="Requeue">
|
||||
🔄 Requeue
|
||||
</button>
|
||||
<button id="admin-record-btn" class="btn-ctrl" title="Record">
|
||||
⏺ Record
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Tab -->
|
||||
<div class="tab-pane" id="tab-recent">
|
||||
<div class="recent-panel">
|
||||
<div class="recent-header">
|
||||
<h4>Recent Calls</h4>
|
||||
<button type="button" id="clear-history-btn" class="btn-sm">Clear</button>
|
||||
</div>
|
||||
<div id="recent-call-list">
|
||||
<div class="recent-empty">No calls yet this session.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Queues Tab -->
|
||||
<div class="tab-pane" id="tab-queues">
|
||||
<div class="queue-panel">
|
||||
<div class="queue-header">
|
||||
<h4>Your Queues</h4>
|
||||
<?php if ($extension_data): ?>
|
||||
<div class="user-extension-admin">Ext: <strong><?php echo esc_html($extension_data->extension); ?></strong></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div id="admin-queue-list">
|
||||
<div class="queue-loading">Loading your queues...</div>
|
||||
</div>
|
||||
<div class="queue-actions">
|
||||
<button type="button" id="admin-refresh-queues" class="btn-refresh">Refresh Queues</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Tab -->
|
||||
<div class="tab-pane" id="tab-settings">
|
||||
<div class="settings-panel">
|
||||
<!-- Caller ID -->
|
||||
<div class="settings-section">
|
||||
<h4>Outbound Caller ID</h4>
|
||||
<select id="caller-id-select">
|
||||
<option value="">Loading numbers...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Auto-answer -->
|
||||
<div class="settings-section">
|
||||
<label><input type="checkbox" id="auto-answer" /> Auto-answer incoming calls</label>
|
||||
</div>
|
||||
|
||||
<!-- Dark Mode -->
|
||||
<div class="settings-section">
|
||||
<h4>Appearance</h4>
|
||||
<div class="dark-mode-options">
|
||||
<button type="button" class="dark-mode-opt" data-theme="system">System</button>
|
||||
<button type="button" class="dark-mode-opt" data-theme="light">Light</button>
|
||||
<button type="button" class="dark-mode-opt" data-theme="dark">Dark</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call Mode -->
|
||||
<div class="settings-section">
|
||||
<h4>Call Reception Mode</h4>
|
||||
<div class="mode-selection">
|
||||
<label class="mode-option <?php echo $current_mode === 'browser' ? 'active' : ''; ?>">
|
||||
<input type="radio" name="call_mode" value="browser" <?php checked($current_mode, 'browser'); ?>>
|
||||
<div class="mode-icon">💻</div>
|
||||
<div class="mode-details">
|
||||
<strong>Browser Phone</strong>
|
||||
<small>Calls ring in this browser</small>
|
||||
</div>
|
||||
</label>
|
||||
<label class="mode-option <?php echo $current_mode === 'cell' ? 'active' : ''; ?>">
|
||||
<input type="radio" name="call_mode" value="cell" <?php checked($current_mode, 'cell'); ?>>
|
||||
<div class="mode-icon">📱</div>
|
||||
<div class="mode-details">
|
||||
<strong>Cell Phone</strong>
|
||||
<small>Forward to your mobile</small>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="mode-status">
|
||||
<div id="current-mode-display">
|
||||
<strong>Current:</strong>
|
||||
<span id="mode-text"><?php echo $current_mode === 'browser' ? 'Browser Phone' : 'Cell Phone'; ?></span>
|
||||
</div>
|
||||
<button type="button" id="save-mode-btn" style="display:none;">Save</button>
|
||||
</div>
|
||||
<div class="mode-info">
|
||||
<div class="browser-mode-info" style="display:<?php echo $current_mode === 'browser' ? 'block' : 'none'; ?>;">
|
||||
<p>Keep this page open to receive calls.</p>
|
||||
</div>
|
||||
<div class="cell-mode-info" style="display:<?php echo $current_mode === 'cell' ? 'block' : 'none'; ?>;">
|
||||
<p>Calls forwarded to: <?php echo $user_phone ? esc_html($user_phone) : '<em>Not configured</em>'; ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (!$smart_routing_configured && current_user_can('manage_options')): ?>
|
||||
<div class="setup-info">
|
||||
<h4>Setup Required</h4>
|
||||
<p>Update your phone number webhook to:</p>
|
||||
<code><?php echo esc_html($smart_routing_webhook); ?></code>
|
||||
<button type="button" class="btn-copy" onclick="copyToClipboard('<?php echo esc_js($smart_routing_webhook); ?>')">Copy</button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- .tab-content -->
|
||||
</div><!-- .twp-app -->
|
||||
|
||||
<!-- Configuration for JavaScript -->
|
||||
<script>
|
||||
window.twpConfig = {
|
||||
ajaxUrl: <?php echo wp_json_encode($ajax_url); ?>,
|
||||
nonce: <?php echo wp_json_encode($nonce); ?>,
|
||||
ringtoneUrl: <?php echo wp_json_encode($ringtone_url); ?>,
|
||||
phoneIconUrl: <?php echo wp_json_encode($phone_icon_url); ?>,
|
||||
swUrl: <?php echo wp_json_encode($sw_url); ?>,
|
||||
twilioEdge: <?php echo wp_json_encode($twilio_edge); ?>
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Twilio Voice SDK v2.11.0 -->
|
||||
<script src="https://unpkg.com/@twilio/voice-sdk@2.11.0/dist/twilio.min.js"></script>
|
||||
|
||||
<!-- Phone JavaScript -->
|
||||
<script src="<?php echo plugins_url('assets/mobile/phone.js', $plugin_file); ?>"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
848
assets/mobile/phone.css
Normal file
848
assets/mobile/phone.css
Normal file
@@ -0,0 +1,848 @@
|
||||
/* ===================================================================
|
||||
CSS Reset & Base
|
||||
=================================================================== */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg-primary: #f5f6fa;
|
||||
--bg-secondary: #ffffff;
|
||||
--bg-phone: #1a1a2e;
|
||||
--bg-display: #16213e;
|
||||
--text-primary: #2c3e50;
|
||||
--text-secondary: #7f8c8d;
|
||||
--text-light: #ffffff;
|
||||
--accent: #2196F3;
|
||||
--accent-dark: #1976D2;
|
||||
--success: #4CAF50;
|
||||
--warning: #FF9800;
|
||||
--danger: #f44336;
|
||||
--border: #e0e0e0;
|
||||
--shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
--radius: 12px;
|
||||
--safe-top: env(safe-area-inset-top, 0px);
|
||||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light-mode) {
|
||||
--bg-primary: #0f0f23;
|
||||
--bg-secondary: #1a1a2e;
|
||||
--bg-phone: #16213e;
|
||||
--bg-display: #0a0a1a;
|
||||
--text-primary: #ecf0f1;
|
||||
--text-secondary: #95a5a6;
|
||||
--border: #2c3e50;
|
||||
--shadow: 0 2px 8px rgba(0,0,0,0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/* Manual dark mode override via class on <html> */
|
||||
:root.dark-mode {
|
||||
--bg-primary: #0f0f23;
|
||||
--bg-secondary: #1a1a2e;
|
||||
--bg-phone: #16213e;
|
||||
--bg-display: #0a0a1a;
|
||||
--text-primary: #ecf0f1;
|
||||
--text-secondary: #95a5a6;
|
||||
--border: #2c3e50;
|
||||
--shadow: 0 2px 8px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
Layout — full-screen flex column
|
||||
=================================================================== */
|
||||
.twp-app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
padding-top: var(--safe-top);
|
||||
padding-bottom: var(--safe-bottom);
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
Agent Status Bar (compact)
|
||||
=================================================================== */
|
||||
.agent-status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.status-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.extension-badge {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.agent-stats {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
#login-toggle-btn, #agent-status-select {
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
#login-toggle-btn.logged-in {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
Notices
|
||||
=================================================================== */
|
||||
.twp-notice {
|
||||
padding: 8px 12px;
|
||||
margin: 6px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
.twp-notice-success { background: #e8f5e9; color: #2e7d32; }
|
||||
.twp-notice-error { background: #ffebee; color: #c62828; }
|
||||
.twp-notice-info { background: #e3f2fd; color: #1565c0; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light-mode) .twp-notice-success { background: #1b5e20; color: #a5d6a7; }
|
||||
:root:not(.light-mode) .twp-notice-error { background: #b71c1c; color: #ef9a9a; }
|
||||
:root:not(.light-mode) .twp-notice-info { background: #0d47a1; color: #90caf9; }
|
||||
}
|
||||
.dark-mode .twp-notice-success { background: #1b5e20; color: #a5d6a7; }
|
||||
.dark-mode .twp-notice-error { background: #b71c1c; color: #ef9a9a; }
|
||||
.dark-mode .twp-notice-info { background: #0d47a1; color: #90caf9; }
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
/* ===================================================================
|
||||
Tab Navigation
|
||||
=================================================================== */
|
||||
.tab-nav {
|
||||
display: flex;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tab-btn {
|
||||
flex: 1;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s, border-color 0.2s;
|
||||
}
|
||||
.tab-btn.active {
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
Tab Content
|
||||
=================================================================== */
|
||||
.tab-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.tab-pane { display: none; height: 100%; }
|
||||
.tab-pane.active { display: flex; flex-direction: column; }
|
||||
|
||||
/* ===================================================================
|
||||
Phone Interface
|
||||
=================================================================== */
|
||||
.phone-interface {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Display */
|
||||
.phone-display {
|
||||
background: var(--bg-display);
|
||||
color: var(--text-light);
|
||||
padding: 16px;
|
||||
border-radius: var(--radius);
|
||||
text-align: center;
|
||||
}
|
||||
#phone-status {
|
||||
font-size: 14px;
|
||||
color: var(--success);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
#device-connection-status {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
#phone-number-display {
|
||||
font-size: 20px;
|
||||
min-height: 28px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
#call-timer {
|
||||
font-size: 16px;
|
||||
margin-top: 6px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
#phone-number-input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
}
|
||||
#phone-number-input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px rgba(33,150,243,0.2);
|
||||
}
|
||||
|
||||
/* Dialpad */
|
||||
.dialpad-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
.dialpad-btn {
|
||||
padding: 14px 0;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
transition: background 0.1s;
|
||||
min-height: 54px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.dialpad-btn:active {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.dialpad-btn span {
|
||||
display: block;
|
||||
font-size: 9px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 1px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.dialpad-btn:active span { color: rgba(255,255,255,0.8); }
|
||||
|
||||
/* Phone Controls */
|
||||
.phone-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.phone-controls .btn-phone {
|
||||
flex: 1;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.btn-call {
|
||||
background: var(--success);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-hangup {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-answer {
|
||||
background: var(--success);
|
||||
color: #fff;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,80,0.4); }
|
||||
50% { box-shadow: 0 0 0 10px rgba(76,175,80,0); }
|
||||
}
|
||||
|
||||
/* Call Controls (hold/transfer/requeue/record) */
|
||||
.call-controls-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
.call-controls-grid .btn-ctrl {
|
||||
padding: 10px 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.btn-ctrl:active { background: #e3f2fd; }
|
||||
.btn-ctrl.btn-active {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Error display */
|
||||
#browser-phone-error {
|
||||
background: #ffebee;
|
||||
color: #c62828;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light-mode) #browser-phone-error { background: #b71c1c; color: #ef9a9a; }
|
||||
}
|
||||
.dark-mode #browser-phone-error { background: #b71c1c; color: #ef9a9a; }
|
||||
|
||||
/* ===================================================================
|
||||
Settings Tab
|
||||
=================================================================== */
|
||||
.settings-panel {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.settings-section {
|
||||
background: var(--bg-secondary);
|
||||
padding: 14px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.settings-section h4 {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
color: var(--accent-dark);
|
||||
}
|
||||
.settings-section label {
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.settings-section select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* Call mode radio cards */
|
||||
.mode-selection {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.mode-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
flex: 1;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
.mode-option.active {
|
||||
border-color: var(--accent);
|
||||
background: #e3f2fd;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light-mode) .mode-option.active { background: #0d47a1; }
|
||||
}
|
||||
.dark-mode .mode-option.active { background: #0d47a1; }
|
||||
.mode-option input[type="radio"] { margin: 0 8px 0 0; }
|
||||
.mode-icon { font-size: 20px; margin-right: 8px; }
|
||||
.mode-details strong { display: block; font-size: 13px; }
|
||||
.mode-details small { font-size: 11px; color: var(--text-secondary); }
|
||||
|
||||
.mode-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.mode-info { margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
|
||||
|
||||
#save-mode-btn {
|
||||
padding: 6px 16px;
|
||||
border: none;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Setup info box */
|
||||
.setup-info {
|
||||
background: #fff3cd;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #ffc107;
|
||||
font-size: 12px;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light-mode) .setup-info { background: #4a3800; color: #ffe082; }
|
||||
}
|
||||
.dark-mode .setup-info { background: #4a3800; color: #ffe082; }
|
||||
.setup-info h4 { margin-bottom: 6px; color: #856404; font-size: 13px; }
|
||||
.setup-info code {
|
||||
display: block;
|
||||
padding: 6px 8px;
|
||||
background: rgba(0,0,0,0.05);
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
word-break: break-all;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.btn-copy {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
Queue Tab
|
||||
=================================================================== */
|
||||
.queue-panel {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.queue-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.queue-header h4 { font-size: 15px; }
|
||||
.user-extension-admin {
|
||||
background: var(--bg-secondary);
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--accent-dark);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.queue-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.queue-item.queue-type-personal { border-left: 4px solid var(--success); }
|
||||
.queue-item.queue-type-hold { border-left: 4px solid var(--warning); }
|
||||
.queue-item.queue-type-general { border-left: 4px solid var(--accent); }
|
||||
.queue-item.has-calls { background: #fff3cd; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light-mode) .queue-item.has-calls { background: #4a3800; }
|
||||
}
|
||||
.dark-mode .queue-item.has-calls { background: #4a3800; }
|
||||
.queue-info { flex: 1; }
|
||||
.queue-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
.queue-details {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 3px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.queue-waiting.has-calls {
|
||||
color: var(--danger);
|
||||
font-weight: bold;
|
||||
}
|
||||
.queue-loading {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
padding: 20px;
|
||||
}
|
||||
.queue-actions { text-align: center; }
|
||||
|
||||
.btn-sm {
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-sm:active { background: #e3f2fd; }
|
||||
|
||||
.btn-refresh {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
Recent Tab
|
||||
=================================================================== */
|
||||
.recent-panel {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.recent-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.recent-header h4 { font-size: 15px; }
|
||||
.recent-empty {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
padding: 40px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.recent-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.recent-item:active { background: var(--bg-primary); }
|
||||
.recent-direction {
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.recent-info { flex: 1; min-width: 0; }
|
||||
.recent-number {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.recent-meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.recent-callback {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 12px;
|
||||
background: var(--success);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
Dialog / Overlay (transfer, requeue)
|
||||
=================================================================== */
|
||||
.twp-overlay {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 9999;
|
||||
}
|
||||
.twp-dialog {
|
||||
position: fixed;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--bg-secondary);
|
||||
padding: 20px;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
||||
z-index: 10000;
|
||||
width: 90%;
|
||||
max-width: 420px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.twp-dialog h3 { margin: 0 0 12px 0; font-size: 16px; }
|
||||
.twp-dialog input[type="text"],
|
||||
.twp-dialog input[type="tel"] {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
margin: 8px 0;
|
||||
}
|
||||
.twp-dialog .dialog-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.btn-primary {
|
||||
padding: 8px 18px;
|
||||
border: none;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-primary:disabled { opacity: 0.5; cursor: default; }
|
||||
.btn-secondary {
|
||||
padding: 8px 18px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.agent-option, .queue-option {
|
||||
padding: 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 6px;
|
||||
cursor: pointer;
|
||||
background: var(--bg-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.agent-option.selected, .queue-option.selected {
|
||||
background: #e3f2fd;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light-mode) .agent-option.selected, :root:not(.light-mode) .queue-option.selected { background: #0d47a1; }
|
||||
}
|
||||
.dark-mode .agent-option.selected, .dark-mode .queue-option.selected { background: #0d47a1; }
|
||||
|
||||
/* ===================================================================
|
||||
Z-Index Layering & Overlap Fixes
|
||||
=================================================================== */
|
||||
.twp-app { position: relative; z-index: 1; }
|
||||
.agent-status-bar { position: relative; z-index: 10; }
|
||||
.tab-nav { position: relative; z-index: 10; }
|
||||
.tab-content { position: relative; z-index: 1; }
|
||||
.phone-interface { position: relative; z-index: 1; overflow-y: auto; }
|
||||
.phone-controls { position: relative; z-index: 2; }
|
||||
#admin-call-controls-panel { position: relative; z-index: 2; margin-top: 4px; }
|
||||
.call-controls-grid { position: relative; z-index: 2; }
|
||||
.twp-overlay { z-index: 9999; }
|
||||
.twp-dialog { z-index: 10000; }
|
||||
|
||||
/* Ensure tab panes scroll properly */
|
||||
.tab-pane.active { overflow-y: auto; -webkit-overflow-scrolling: touch; }
|
||||
#tab-phone.active { overflow: hidden; }
|
||||
.phone-interface { flex: 1; overflow-y: auto; min-height: 0; }
|
||||
|
||||
/* Prevent call controls from overlapping dialpad */
|
||||
.dialpad-grid { position: relative; z-index: 1; flex-shrink: 0; }
|
||||
|
||||
/* Dark mode for btn-ctrl active state */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light-mode) .btn-ctrl:active { background: #0d47a1; color: #fff; }
|
||||
:root:not(.light-mode) .btn-sm:active { background: #0d47a1; color: #fff; }
|
||||
}
|
||||
.dark-mode .btn-ctrl:active { background: #0d47a1; color: #fff; }
|
||||
.dark-mode .btn-sm:active { background: #0d47a1; color: #fff; }
|
||||
|
||||
/* ===================================================================
|
||||
Comprehensive Dark Mode Enhancements
|
||||
=================================================================== */
|
||||
/* Shared dark mode rules — applied by media query or manual toggle */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light-mode) input[type="tel"],
|
||||
:root:not(.light-mode) input[type="text"],
|
||||
:root:not(.light-mode) select {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border);
|
||||
}
|
||||
:root:not(.light-mode) .settings-section h4 { color: #64b5f6; }
|
||||
:root:not(.light-mode) .setup-info h4 { color: #ffe082; }
|
||||
:root:not(.light-mode) .setup-info code { background: rgba(255,255,255,0.08); color: #ffe082; }
|
||||
:root:not(.light-mode) .btn-copy { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); }
|
||||
:root:not(.light-mode) .btn-refresh { background: var(--bg-secondary); color: var(--text-primary); }
|
||||
:root:not(.light-mode) .btn-secondary { background: var(--bg-secondary); color: var(--text-primary); }
|
||||
}
|
||||
.dark-mode input[type="tel"],
|
||||
.dark-mode input[type="text"],
|
||||
.dark-mode select {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.dark-mode .settings-section h4 { color: #64b5f6; }
|
||||
.dark-mode .setup-info h4 { color: #ffe082; }
|
||||
.dark-mode .setup-info code { background: rgba(255,255,255,0.08); color: #ffe082; }
|
||||
.dark-mode .btn-copy { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); }
|
||||
.dark-mode .btn-refresh { background: var(--bg-secondary); color: var(--text-primary); }
|
||||
.dark-mode .btn-secondary { background: var(--bg-secondary); color: var(--text-primary); }
|
||||
|
||||
/* Dark mode toggle switch styling */
|
||||
.dark-mode-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.dark-mode-toggle .toggle-label {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggle-switch input { opacity: 0; width: 0; height: 0; }
|
||||
.toggle-slider {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: var(--border);
|
||||
border-radius: 26px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.toggle-slider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.toggle-switch input:checked + .toggle-slider {
|
||||
background: var(--accent);
|
||||
}
|
||||
.toggle-switch input:checked + .toggle-slider::before {
|
||||
transform: translateX(22px);
|
||||
}
|
||||
.dark-mode-options {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.dark-mode-opt {
|
||||
flex: 1;
|
||||
padding: 8px 4px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.dark-mode-opt.active {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
1065
assets/mobile/phone.js
Normal file
1065
assets/mobile/phone.js
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -194,35 +194,6 @@ class _PhoneScreenState extends State<PhoneScreen> with WidgetsBindingObserver {
|
||||
return result ?? false;
|
||||
}
|
||||
|
||||
void _showMenu() {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
builder: (context) => SafeArea(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ListTile(
|
||||
leading: const Icon(Icons.refresh),
|
||||
title: const Text('Reload'),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
_controller.reload();
|
||||
},
|
||||
),
|
||||
ListTile(
|
||||
leading: const Icon(Icons.logout),
|
||||
title: const Text('Logout'),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
_confirmLogout();
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _confirmLogout() async {
|
||||
final result = await showDialog<bool>(
|
||||
context: context,
|
||||
@@ -256,7 +227,45 @@ class _PhoneScreenState extends State<PhoneScreen> with WidgetsBindingObserver {
|
||||
return WillPopScope(
|
||||
onWillPop: _onWillPop,
|
||||
child: Scaffold(
|
||||
appBar: _hasError
|
||||
? null
|
||||
: AppBar(
|
||||
toolbarHeight: 40,
|
||||
titleSpacing: 12,
|
||||
title: Text(
|
||||
'TWP Softphone',
|
||||
style: Theme.of(context).textTheme.titleSmall,
|
||||
),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh, size: 20),
|
||||
tooltip: 'Reload',
|
||||
visualDensity: VisualDensity.compact,
|
||||
onPressed: () => _controller.reload(),
|
||||
),
|
||||
PopupMenuButton<String>(
|
||||
icon: const Icon(Icons.more_vert, size: 20),
|
||||
tooltip: 'Menu',
|
||||
padding: EdgeInsets.zero,
|
||||
onSelected: (value) {
|
||||
if (value == 'logout') _confirmLogout();
|
||||
},
|
||||
itemBuilder: (context) => [
|
||||
const PopupMenuItem(
|
||||
value: 'logout',
|
||||
child: ListTile(
|
||||
leading: Icon(Icons.logout),
|
||||
title: Text('Logout'),
|
||||
dense: true,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SafeArea(
|
||||
top: _hasError, // AppBar already handles top safe area when visible
|
||||
child: Stack(
|
||||
children: [
|
||||
if (!_hasError) WebViewWidget(controller: _controller),
|
||||
@@ -266,34 +275,33 @@ class _PhoneScreenState extends State<PhoneScreen> with WidgetsBindingObserver {
|
||||
],
|
||||
),
|
||||
),
|
||||
floatingActionButton: (!_hasError && !_loading)
|
||||
? FloatingActionButton.small(
|
||||
onPressed: _showMenu,
|
||||
child: const Icon(Icons.more_vert),
|
||||
)
|
||||
: null,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildErrorView() {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Icon(Icons.wifi_off, size: 64, color: Colors.grey),
|
||||
Icon(Icons.wifi_off, size: 64, color: colorScheme.onSurfaceVariant),
|
||||
const SizedBox(height: 16),
|
||||
const Text(
|
||||
Text(
|
||||
'Connection Error',
|
||||
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
|
||||
style: TextStyle(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
_errorMessage ?? 'Could not load the phone page.',
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(color: Colors.grey),
|
||||
style: TextStyle(color: colorScheme.onSurfaceVariant),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
FilledButton.icon(
|
||||
|
||||
Reference in New Issue
Block a user