SteelDynamite/onyx-tasks
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Separate time toggle from foldout UI

Browse source 
Replace using a foldout state to indicate time presence with an explicit
time section and a simple "Set time" trigger. This makes the UI
semantics clearer (foldouts shouldn't represent function) and mirrors
the Tauri approach: show a compact "Set time" label when time is hidden,
expand inline time controls when shown, and provide a close icon to
dismiss and apply the time. Minor spacing adjustments were applied to
improve alignment.
This commit is contained in:
Tristan Michael 2026-04-01 01:31:58 -07:00
parent 908ac41a6c
commit a13008bb71
1 changed files with 15 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
apps/flutter/lib/src/widgets/date_time_picker.dart
View file

@ -138,33 +138,17 @@ class _DateTimePickerState extends State<DateTimePicker> {
); );
}), }),
const SizedBox(height: 8), const SizedBox(height: 8),
// Time toggle // Time section
Container( Container(
padding: const EdgeInsets.only(top: 12), padding: const EdgeInsets.only(top: 12),
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border(top: BorderSide(color: isDark ? AppTheme.borderDark : AppTheme.borderLight, width: 0.5)), border: Border(top: BorderSide(color: isDark ? AppTheme.borderDark : AppTheme.borderLight, width: 0.5)),
), ),
child: Column( child: _showTime
children: [ ? Row(
GestureDetector(
onTap: () => setState(() => _showTime = !_showTime),
child: Row(
children: [
Icon(Icons.access_time, size: 16, color: isDark ? AppTheme.textSecondaryDark : AppTheme.textSecondaryLight),
const SizedBox(width: 8),
Text(_showTime ? 'Time' : 'Set time',
style: TextStyle(fontSize: 13, color: isDark ? AppTheme.textSecondaryDark : AppTheme.textSecondaryLight)),
const Spacer(),
Icon(_showTime ? Icons.expand_less : Icons.expand_more, size: 18,
color: isDark ? AppTheme.textSecondaryDark : AppTheme.textSecondaryLight),
],
),
),
if (_showTime) ...[
const SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Text('Time', style: TextStyle(fontSize: 13, color: isDark ? AppTheme.textSecondaryDark : AppTheme.textSecondaryLight)),
const SizedBox(width: 12),
// Hour // Hour
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
@ -181,7 +165,7 @@ class _DateTimePickerState extends State<DateTimePicker> {
onChanged: (v) => setState(() => _hour = v!), onChanged: (v) => setState(() => _hour = v!),
), ),
), ),
const Padding(padding: EdgeInsets.symmetric(horizontal: 8), child: Text(':', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600))), const Padding(padding: EdgeInsets.symmetric(horizontal: 6), child: Text(':', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600))),
// Minute // Minute
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
@ -198,10 +182,16 @@ class _DateTimePickerState extends State<DateTimePicker> {
onChanged: (v) => setState(() => _minute = v!), onChanged: (v) => setState(() => _minute = v!),
), ),
), ),
], const Spacer(),
GestureDetector(
onTap: () { setState(() => _showTime = false); _done(); },
child: Icon(Icons.close, size: 18, color: (isDark ? AppTheme.textSecondaryDark : AppTheme.textSecondaryLight).withAlpha(160)),
), ),
], ],
], )
: GestureDetector(
onTap: () => setState(() { _showTime = true; if (_selected == null) _selected = DateTime.now(); }),
child: Text('Set time', style: TextStyle(fontSize: 13, color: isDark ? AppTheme.textSecondaryDark : AppTheme.textSecondaryLight)),
), ),
), ),
// Clear button // Clear button