feat(ui): add date picker and force 24h format in recording modal

This commit is contained in:
Michael committed 2026-03-08 17:34:16 +01:00
1 parent 344cf51ef9
commit 2cba30db4d
1 file changed
+90 -23
+90 -23
View File
@@ -79,7 +79,7 @@ class _RecordingModalState extends State<RecordingModal> {
child: Material( child: Material(
color: Colors.transparent, color: Colors.transparent,
child: Container( child: Container(
width: 450, width: 600,
padding: const EdgeInsets.all(24), padding: const EdgeInsets.all(24),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColors.background.withOpacity(0.9), color: AppColors.background.withOpacity(0.9),
@@ -121,52 +121,53 @@ class _RecordingModalState extends State<RecordingModal> {
), ),
const SizedBox(height: 24), const SizedBox(height: 24),
// Heure de début // Date, Heure et Durée
Row( Row(
children: [ children: [
// Date
Expanded( Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
'Heure de début :', 'Date :',
style: GoogleFonts.inter(color: Colors.white54, fontSize: 14), style: GoogleFonts.inter(color: Colors.white54, fontSize: 14),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
TvFocusableCard( TvFocusableCard(
onTap: () async { onTap: () async {
final time = await showTimePicker( final date = await showDatePicker(
context: context, context: context,
initialTime: TimeOfDay.fromDateTime(_startTime), initialDate: _startTime,
firstDate: DateTime.now(),
lastDate: DateTime.now().add(const Duration(days: 365)),
); );
if (time != null) { if (date != null) {
setState(() { setState(() {
final now = DateTime.now();
_startTime = DateTime( _startTime = DateTime(
now.year, now.month, now.day, date.year, date.month, date.day,
time.hour, time.minute, _startTime.hour, _startTime.minute,
); );
// Empêcher l'heure de passé de demain pour simplifier
if (_startTime.isBefore(now)) {
_startTime = _startTime.add(const Duration(days: 1));
}
}); });
} }
}, },
borderRadius: 8, borderRadius: 8,
child: Container( child: Container(
padding: const EdgeInsets.all(12), padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1), color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
), ),
child: Row( child: Row(
children: [ children: [
const Icon(Icons.access_time, color: Colors.white, size: 18), const Icon(Icons.calendar_today, color: Colors.white, size: 18),
const SizedBox(width: 8), const SizedBox(width: 8),
Text( Expanded(
'${_startTime.hour.toString().padLeft(2, '0')}:${_startTime.minute.toString().padLeft(2, '0')}', child: Text(
style: GoogleFonts.inter(color: Colors.white), '${_startTime.day.toString().padLeft(2, '0')}/${_startTime.month.toString().padLeft(2, '0')}/${_startTime.year}',
style: GoogleFonts.inter(color: Colors.white),
overflow: TextOverflow.ellipsis,
),
), ),
], ],
), ),
@@ -175,7 +176,69 @@ class _RecordingModalState extends State<RecordingModal> {
], ],
), ),
), ),
const SizedBox(width: 16), const SizedBox(width: 12),
// Heure
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Heure :',
style: GoogleFonts.inter(color: Colors.white54, fontSize: 14),
),
const SizedBox(height: 8),
TvFocusableCard(
onTap: () async {
final time = await showTimePicker(
context: context,
initialTime: TimeOfDay.fromDateTime(_startTime),
builder: (context, child) {
return MediaQuery(
data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
child: child!,
);
},
);
if (time != null) {
setState(() {
final now = DateTime.now();
_startTime = DateTime(
_startTime.year, _startTime.month, _startTime.day,
time.hour, time.minute,
);
// Empêcher l'heure de passé si c'est aujourd'hui
if (_startTime.isBefore(now)) {
_startTime = _startTime.add(const Duration(days: 1));
}
});
}
},
borderRadius: 8,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Row(
children: [
const Icon(Icons.access_time, color: Colors.white, size: 18),
const SizedBox(width: 8),
Expanded(
child: Text(
'${_startTime.hour.toString().padLeft(2, '0')}:${_startTime.minute.toString().padLeft(2, '0')}',
style: GoogleFonts.inter(color: Colors.white),
),
),
],
),
),
),
],
),
),
const SizedBox(width: 12),
// Durée // Durée
Expanded( Expanded(
@@ -183,7 +246,7 @@ class _RecordingModalState extends State<RecordingModal> {
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
'Durée (minutes) :', 'Durée (min) :',
style: GoogleFonts.inter(color: Colors.white54, fontSize: 14), style: GoogleFonts.inter(color: Colors.white54, fontSize: 14),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
@@ -194,7 +257,9 @@ class _RecordingModalState extends State<RecordingModal> {
child: Row( child: Row(
children: [ children: [
IconButton( IconButton(
icon: const Icon(Icons.remove, color: Colors.white), icon: const Icon(Icons.remove, color: Colors.white, size: 18),
padding: EdgeInsets.zero,
constraints: const BoxConstraints(minWidth: 32, minHeight: 46),
onPressed: () { onPressed: () {
if (_durationMinutes > 15) { if (_durationMinutes > 15) {
setState(() => _durationMinutes -= 15); setState(() => _durationMinutes -= 15);
@@ -203,13 +268,15 @@ class _RecordingModalState extends State<RecordingModal> {
), ),
Expanded( Expanded(
child: Text( child: Text(
'$_durationMinutes m', '$_durationMinutes',
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: GoogleFonts.inter(color: Colors.white), style: GoogleFonts.inter(color: Colors.white),
), ),
), ),
IconButton( IconButton(
icon: const Icon(Icons.add, color: Colors.white), icon: const Icon(Icons.add, color: Colors.white, size: 18),
padding: EdgeInsets.zero,
constraints: const BoxConstraints(minWidth: 32, minHeight: 46),
onPressed: () { onPressed: () {
if (_durationMinutes < 300) { if (_durationMinutes < 300) {
setState(() => _durationMinutes += 15); setState(() => _durationMinutes += 15);