External/oott
1
0
Fork 0
mirror of https://github.com/rzuasti/oott.git synced 2026-07-08 19:21:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve home screen widget UX: visual hierarchy and navigation

Browse Source 
- DeviceSummaryCard and ArpScannerCard are now tappable, navigating to
  the devices list and status screen respectively
- Elevated "Devices" title to titleLarge; section subtitles promoted to
  bodyMedium/w600 while row content is demoted to bodySmall
- Renamed top-level row label to "Registered in the system"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
rzuasti
2026-05-28 19:34:42 -04:00
co-authored by Claude Sonnet 4.6
parent f113da9cd0
commit ff83ada576
2 changed files with 95 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/lib/widgets/arp_scanner_card.dart
+30 -25
View File
@@ -1,6 +1,7 @@
import 'dart:async'; import 'dart:async';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import '../model/arp_scanner_status.dart'; import '../model/arp_scanner_status.dart';
import '../utils/oott_api.dart'; import '../utils/oott_api.dart';
@@ -76,35 +77,39 @@ class _ArpScannerCardState extends State<ArpScannerCard> {
final (color, label, sublabel) = _resolveState(context); final (color, label, sublabel) = _resolveState(context);
return Card( return Card(
child: Padding( clipBehavior: Clip.antiAlias,
padding: const EdgeInsets.all(16), child: InkWell(
child: Row( onTap: () => context.go('/status'),
children: [ child: Padding(
Icon(Icons.circle, color: color, size: 14), padding: const EdgeInsets.all(16),
const SizedBox(width: 12), child: Row(
Expanded( children: [
child: Column( Icon(Icons.circle, color: color, size: 14),
crossAxisAlignment: CrossAxisAlignment.start, const SizedBox(width: 12),
children: [ Expanded(
Text( child: Column(
'ARP Scanner', crossAxisAlignment: CrossAxisAlignment.start,
style: Theme.of(context).textTheme.titleMedium, children: [
),
const SizedBox(height: 2),
Text(label, style: Theme.of(context).textTheme.bodyMedium),
if (sublabel != null) ...[
const SizedBox(height: 2),
Text( Text(
sublabel, 'ARP Scanner',
style: Theme.of(context).textTheme.bodySmall?.copyWith( style: Theme.of(context).textTheme.titleMedium,
color: Theme.of(context).colorScheme.outline,
),
), ),
const SizedBox(height: 2),
Text(label, style: Theme.of(context).textTheme.bodyMedium),
if (sublabel != null) ...[
const SizedBox(height: 2),
Text(
sublabel,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.outline,
),
),
],
], ],
], ),
), ),
), ],
], ),
), ),
), ),
); );
frontend/lib/widgets/device_summary_card.dart
+65 -52
View File
@@ -1,6 +1,7 @@
import 'dart:async'; import 'dart:async';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import '../model/device_summary.dart'; import '../model/device_summary.dart';
import '../utils/oott_api.dart'; import '../utils/oott_api.dart';
@@ -52,59 +53,65 @@ class _DeviceSummaryCardState extends State<DeviceSummaryCard> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Card( return Card(
child: Padding( clipBehavior: Clip.antiAlias,
padding: const EdgeInsets.all(16), child: InkWell(
child: Column( onTap: () => context.go('/devices'),
crossAxisAlignment: CrossAxisAlignment.start, child: Padding(
children: [ padding: const EdgeInsets.all(16),
Text('Devices', style: Theme.of(context).textTheme.titleMedium), child: Column(
const SizedBox(height: 12), crossAxisAlignment: CrossAxisAlignment.start,
if (_isLoading) children: [
const Center(child: CircularProgressIndicator()) Text('Devices', style: Theme.of(context).textTheme.titleLarge),
else if (_error != null) const SizedBox(height: 12),
Text( if (_isLoading)
'Error loading device summary', const Center(child: CircularProgressIndicator())
style: TextStyle(color: Theme.of(context).colorScheme.error), else if (_error != null)
) Text(
else if (_summary != null) ...[ 'Error loading device summary',
_SummaryRow( style: TextStyle(color: Theme.of(context).colorScheme.error),
label: 'Registered', )
value: '${_summary!.totalRegistered}', else if (_summary != null) ...[
), _SummaryRow(
const Divider(height: 20), label: 'Registered in the system',
Text( value: '${_summary!.totalRegistered}',
'Seen in the last 24 hours',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.outline,
), ),
), const Divider(height: 20),
const SizedBox(height: 6), Text(
_SummaryRow( 'Seen in the last 24 hours',
label: 'Registered', style: Theme.of(context).textTheme.bodyMedium?.copyWith(
value: '${_summary!.seenLastDayRegistered}', color: Theme.of(context).colorScheme.onSurface,
), fontWeight: FontWeight.w600,
_SummaryRow( ),
label: 'Unregistered',
value: '${_summary!.seenLastDayUnregistered}',
),
const Divider(height: 20),
Text(
'Seen in the last 7 days',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.outline,
), ),
), const SizedBox(height: 6),
const SizedBox(height: 6), _SummaryRow(
_SummaryRow( label: 'Registered',
label: 'Registered', value: '${_summary!.seenLastDayRegistered}',
value: '${_summary!.seenLastWeekRegistered}', ),
), _SummaryRow(
_SummaryRow( label: 'Unregistered',
label: 'Unregistered', value: '${_summary!.seenLastDayUnregistered}',
value: '${_summary!.seenLastWeekUnregistered}', ),
), const Divider(height: 20),
Text(
'Seen in the last 7 days',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurface,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 6),
_SummaryRow(
label: 'Registered',
value: '${_summary!.seenLastWeekRegistered}',
),
_SummaryRow(
label: 'Unregistered',
value: '${_summary!.seenLastWeekUnregistered}',
),
],
], ],
], ),
), ),
), ),
); );
@@ -124,10 +131,16 @@ class _SummaryRow extends StatelessWidget {
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Text(label, style: Theme.of(context).textTheme.bodyMedium), Text(
label,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
Text( Text(
value, value,
style: Theme.of(context).textTheme.bodyMedium?.copyWith( style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),