diff --git a/dialer/lib/features/call/call_page.dart b/dialer/lib/features/call/call_page.dart index 2508556..7d335b5 100644 --- a/dialer/lib/features/call/call_page.dart +++ b/dialer/lib/features/call/call_page.dart @@ -52,7 +52,7 @@ class _CallPageState extends State { Widget build(BuildContext context) { final double avatarRadius = isKeypadVisible ? 30.0 : 60.0; final double nameFontSize = isKeypadVisible ? 20.0 : 32.0; - final double statusFontSize = isKeypadVisible ? 16.0 : 20.0; + final double statusFontSize = isKeypadVisible ? 14.0 : 20.0; return Scaffold( body: Container( @@ -60,17 +60,41 @@ class _CallPageState extends State { child: SafeArea( child: Column( children: [ - // Fixed size header area + // Header area with Icing protocol status first Column( mainAxisSize: MainAxisSize.min, children: [ - const SizedBox(height: 20), + const SizedBox(height: 60), + // Icing protocol status moved here ObfuscatedAvatar( imageBytes: widget.thumbnail, radius: avatarRadius, backgroundColor: generateColorFromName(widget.displayName), fallbackInitial: widget.displayName, ), + const SizedBox(height: 20), + GestureDetector( + onTap: _toggleIcingProtocol, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + icingProtocolOk ? Icons.lock : Icons.lock_open, + color: icingProtocolOk ? Colors.green : Colors.red, + size: 20, + ), + const SizedBox(width: 8), + Text( + 'Icing protocol: ${icingProtocolOk ? "ok" : "ko"}', + style: TextStyle( + color: icingProtocolOk ? Colors.green : Colors.red, + fontSize: 14, + fontWeight: FontWeight.bold, + ), + ), + ], + ), + ), const SizedBox(height: 10), Text( _obfuscateService.obfuscateData(widget.displayName), @@ -85,126 +109,209 @@ class _CallPageState extends State { 'Calling...', style: TextStyle(fontSize: statusFontSize, color: Colors.white70), ), - const SizedBox(height: 10), ], ), - // Scrollable middle section + // Middle section with keypad or control buttons Expanded( - child: SingleChildScrollView( - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - // Keypad if visible - if (isKeypadVisible) - Container( - margin: const EdgeInsets.symmetric(horizontal: 40), - padding: const EdgeInsets.all(10), - decoration: BoxDecoration( - color: Colors.black45, - borderRadius: BorderRadius.circular(10), - ), - child: GridView.count( - shrinkWrap: true, - physics: const NeverScrollableScrollPhysics(), - crossAxisCount: 3, - mainAxisSpacing: 10, - crossAxisSpacing: 10, - children: List.generate(12, (index) { - String label; - if (index < 9) { - label = '${index + 1}'; - } else if (index == 9) { - label = '*'; - } else if (index == 10) { - label = '0'; - } else { - label = '#'; - } - return Center( - child: Text( - label, - style: const TextStyle( - fontSize: 24, color: Colors.white), - ), - ); - }), - ), - ), + child: Column( + children: [ + // Add a smaller top spacer to move buttons higher + const Spacer(flex: 2), - // Icing protocol status - GestureDetector( - onTap: _toggleIcingProtocol, + if (isKeypadVisible) ...[ + // Close keypad button + Align( + alignment: Alignment.topRight, child: Padding( - padding: const EdgeInsets.symmetric(vertical: 8.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Icon( - icingProtocolOk ? Icons.lock : Icons.lock_open, - color: icingProtocolOk ? Colors.green : Colors.red, - ), - const SizedBox(width: 8), - Text( - 'Icing protocol: ${icingProtocolOk ? "ok" : "ko"}', - style: TextStyle( - color: icingProtocolOk ? Colors.green : Colors.red, - fontSize: 16, - fontWeight: FontWeight.bold, - ), - ), - ], + padding: const EdgeInsets.only(right: 20.0), + child: IconButton( + onPressed: _toggleKeypad, + icon: const Icon( + Icons.close, + color: Colors.white, + size: 24, + ), ), ), ), - - // Control buttons + // Keypad + Container( + margin: const EdgeInsets.symmetric(horizontal: 40), + padding: const EdgeInsets.all(10), + decoration: BoxDecoration( + color: Colors.black45, + borderRadius: BorderRadius.circular(10), + ), + child: GridView.count( + shrinkWrap: true, + physics: const NeverScrollableScrollPhysics(), + crossAxisCount: 3, + mainAxisSpacing: 10, + crossAxisSpacing: 10, + children: List.generate(12, (index) { + String label; + if (index < 9) { + label = '${index + 1}'; + } else if (index == 9) { + label = '*'; + } else if (index == 10) { + label = '0'; + } else { + label = '#'; + } + return Center( + child: Text( + label, + style: const TextStyle(fontSize: 24, color: Colors.white), + ), + ); + }), + ), + ), + ] else ...[ + // Control buttons row with labels under each button Padding( padding: const EdgeInsets.symmetric(horizontal: 32.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ - IconButton( - onPressed: _toggleMute, - icon: Icon( - isMuted ? Icons.mic_off : Icons.mic, - color: Colors.white, - size: 32, - ), + // Mic button with label + Column( + mainAxisSize: MainAxisSize.min, + children: [ + IconButton( + onPressed: _toggleMute, + icon: Icon( + isMuted ? Icons.mic_off : Icons.mic, + color: Colors.white, + size: 32, + ), + ), + Text( + isMuted ? 'Unmute' : 'Mute', + style: const TextStyle(color: Colors.white, fontSize: 14), + ), + ], ), - IconButton( - onPressed: _toggleKeypad, - icon: Icon( - Icons.dialpad, - color: isKeypadVisible ? Colors.amber : Colors.white, - size: 32, - ), + // Dialpad button with label + Column( + mainAxisSize: MainAxisSize.min, + children: [ + IconButton( + onPressed: _toggleKeypad, + icon: Icon( + Icons.dialpad, + color: Colors.white, + size: 32, + ), + ), + const Text( + 'Keypad', + style: TextStyle(color: Colors.white, fontSize: 14), + ), + ], ), - IconButton( - onPressed: _toggleSpeaker, - icon: Icon( - isSpeakerOn ? Icons.volume_up : Icons.volume_off, - color: isSpeakerOn ? Colors.amber : Colors.white, - size: 32, - ), + // Speaker button with label + Column( + mainAxisSize: MainAxisSize.min, + children: [ + IconButton( + onPressed: _toggleSpeaker, + icon: Icon( + isSpeakerOn ? Icons.volume_up : Icons.volume_off, + color: isSpeakerOn ? Colors.amber : Colors.white, + size: 32, + ), + ), + const Text( + 'Speaker', + style: TextStyle(color: Colors.white, fontSize: 14), + ), + ], + ), + ], + ), + ), + + const SizedBox(height: 20), + + // Additional buttons row: "Add Contact" and "Change SIM" + Padding( + padding: const EdgeInsets.symmetric(horizontal: 32.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + // "Add Contact" button + Column( + mainAxisSize: MainAxisSize.min, + children: [ + IconButton( + onPressed: () { + // Implement your add contact logic here + }, + icon: const Icon( + Icons.person_add, + color: Colors.white, + size: 32, + ), + ), + const Text( + 'Add Contact', + style: TextStyle(color: Colors.white, fontSize: 14), + ), + ], + ), + // "Change SIM" button + Column( + mainAxisSize: MainAxisSize.min, + children: [ + IconButton( + onPressed: () { + // Implement your change SIM logic here + }, + icon: const Icon( + Icons.sim_card, + color: Colors.white, + size: 32, + ), + ), + const Text( + 'Change SIM', + style: TextStyle(color: Colors.white, fontSize: 14), + ), + ], ), ], ), ), ], - ), + + // Add a larger bottom spacer + const Spacer(flex: 6), + ], ), ), - // Fixed size footer with hang up button - Padding( - padding: const EdgeInsets.symmetric(vertical: 16.0), - child: IconButton( - onPressed: _hangUp, - icon: const Icon( - Icons.call_end, - color: Colors.red, - size: 48, + // Hang up button + Transform.translate( + offset: const Offset(0, -40), // Moves button 20 pixels upward + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 10.0), + child: GestureDetector( + onTap: _hangUp, + child: Container( + padding: const EdgeInsets.all(10), // adjust to desired size + decoration: const BoxDecoration( + color: Colors.red, + shape: BoxShape.circle, + ), + child: const Icon( + Icons.call_end, + color: Colors.white, + size: 40, + ), + ), ), ), ),