feat(editor): flow list rows get icons + smarter byte formatting
The FLOWS sidebar entries showed just "name" + "1234 B" — two
plain lines, no glyph, no visual hierarchy. Replaced with:
- leading 28×28 rounded icon tile (account_tree_outlined),
accent-tinted when the row is active so selection reads
at a glance.
- active row title bumps to FontWeight.w600 + onSecondaryContainer.
- sizes formatted compactly: bytes / KB / MB so a 4.3 KB
flow doesn't render as "4321 B" and a long one doesn't
overflow into a multi-line ellipsis.
Bumped to 0.20.1.
Signed-off-by: flemming-it <sf@flemming.it>
This commit is contained in:
parent
5cd2745db5
commit
8b38584555
2 changed files with 60 additions and 12 deletions
|
|
@ -1051,6 +1051,17 @@ class _FlowFile {
|
|||
});
|
||||
}
|
||||
|
||||
/// Compact byte-count formatter used in the flow-list rows.
|
||||
/// '12 B' / '4.3 KB' / '1.2 MB'. Avoids overflowing the
|
||||
/// narrow sidebar with raw byte counts on long flows.
|
||||
String _formatBytes(int bytes) {
|
||||
if (bytes < 1024) return '$bytes B';
|
||||
if (bytes < 1024 * 1024) {
|
||||
return '${(bytes / 1024).toStringAsFixed(1)} KB';
|
||||
}
|
||||
return '${(bytes / (1024 * 1024)).toStringAsFixed(1)} MB';
|
||||
}
|
||||
|
||||
class _FileList extends StatelessWidget {
|
||||
final Future<List<_FlowFile>> filesFuture;
|
||||
final String? activeName;
|
||||
|
|
@ -1161,20 +1172,57 @@ class _FileList extends StatelessWidget {
|
|||
),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
// Subtle leading icon that distinguishes a
|
||||
// flow file from any other row in the
|
||||
// sidebar. Active row gets the accent
|
||||
// colour, others stay muted so the active
|
||||
// selection reads at a glance.
|
||||
Container(
|
||||
width: 28,
|
||||
height: 28,
|
||||
margin: const EdgeInsets.only(right: FaiSpace.sm),
|
||||
decoration: BoxDecoration(
|
||||
color: isActive
|
||||
? theme.colorScheme.primary.withValues(alpha: 0.15)
|
||||
: theme.colorScheme.surfaceContainerHigh,
|
||||
borderRadius: BorderRadius.circular(FaiRadius.sm),
|
||||
),
|
||||
child: Icon(
|
||||
Icons.account_tree_outlined,
|
||||
size: 16,
|
||||
color: isActive
|
||||
? theme.colorScheme.primary
|
||||
: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
f.name,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
fontWeight: isActive
|
||||
? FontWeight.w600
|
||||
: FontWeight.w500,
|
||||
color: isActive
|
||||
? theme.colorScheme.onSecondaryContainer
|
||||
: null,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 1),
|
||||
Text(
|
||||
'${f.sizeBytes} B',
|
||||
_formatBytes(f.sizeBytes),
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
fontSize: 11,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
name: fai_studio_flow_editor
|
||||
description: Swappable inline YAML editor for F∆I Studio flows.
|
||||
version: 0.20.0
|
||||
version: 0.20.1
|
||||
publish_to: 'none'
|
||||
repository: https://git.flemming.ai/fai/studio-flow-editor
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue