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
+5
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,6 +77,9 @@ class _ArpScannerCardState extends State<ArpScannerCard> {
final (color, label, sublabel) = _resolveState(context); final (color, label, sublabel) = _resolveState(context);
return Card( return Card(
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: () => context.go('/status'),
child: Padding( child: Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: Row( child: Row(
@@ -107,6 +111,7 @@ class _ArpScannerCardState extends State<ArpScannerCard> {
], ],
), ),
), ),
),
); );
} }
frontend/lib/widgets/device_summary_card.dart
+21 -8
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,12 +53,15 @@ class _DeviceSummaryCardState extends State<DeviceSummaryCard> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Card( return Card(
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: () => context.go('/devices'),
child: Padding( child: Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text('Devices', style: Theme.of(context).textTheme.titleMedium), Text('Devices', style: Theme.of(context).textTheme.titleLarge),
const SizedBox(height: 12), const SizedBox(height: 12),
if (_isLoading) if (_isLoading)
const Center(child: CircularProgressIndicator()) const Center(child: CircularProgressIndicator())
@@ -68,14 +72,15 @@ class _DeviceSummaryCardState extends State<DeviceSummaryCard> {
) )
else if (_summary != null) ...[ else if (_summary != null) ...[
_SummaryRow( _SummaryRow(
label: 'Registered', label: 'Registered in the system',
value: '${_summary!.totalRegistered}', value: '${_summary!.totalRegistered}',
), ),
const Divider(height: 20), const Divider(height: 20),
Text( Text(
'Seen in the last 24 hours', 'Seen in the last 24 hours',
style: Theme.of(context).textTheme.bodySmall?.copyWith( style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.outline, color: Theme.of(context).colorScheme.onSurface,
fontWeight: FontWeight.w600,
), ),
), ),
const SizedBox(height: 6), const SizedBox(height: 6),
@@ -90,8 +95,9 @@ class _DeviceSummaryCardState extends State<DeviceSummaryCard> {
const Divider(height: 20), const Divider(height: 20),
Text( Text(
'Seen in the last 7 days', 'Seen in the last 7 days',
style: Theme.of(context).textTheme.bodySmall?.copyWith( style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.outline, color: Theme.of(context).colorScheme.onSurface,
fontWeight: FontWeight.w600,
), ),
), ),
const SizedBox(height: 6), const SizedBox(height: 6),
@@ -107,6 +113,7 @@ class _DeviceSummaryCardState extends State<DeviceSummaryCard> {
], ],
), ),
), ),
),
); );
} }
} }
@@ -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,
), ),
), ),