info: expand long tag values on tap
This commit is contained in:
parent
b888b32c62
commit
f553e8089f
2 changed files with 39 additions and 13 deletions
|
@ -8,6 +8,7 @@ import 'package:aves/widgets/common/icons.dart';
|
||||||
import 'package:aves/widgets/fullscreen/info/basic_section.dart';
|
import 'package:aves/widgets/fullscreen/info/basic_section.dart';
|
||||||
import 'package:aves/widgets/fullscreen/info/location_section.dart';
|
import 'package:aves/widgets/fullscreen/info/location_section.dart';
|
||||||
import 'package:aves/widgets/fullscreen/info/metadata_section.dart';
|
import 'package:aves/widgets/fullscreen/info/metadata_section.dart';
|
||||||
|
import 'package:flutter/gestures.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:provider/provider.dart';
|
import 'package:provider/provider.dart';
|
||||||
import 'package:tuple/tuple.dart';
|
import 'package:tuple/tuple.dart';
|
||||||
|
@ -190,10 +191,25 @@ class SectionRow extends StatelessWidget {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class InfoRowGroup extends StatelessWidget {
|
class InfoRowGroup extends StatefulWidget {
|
||||||
final Map<String, String> keyValues;
|
final Map<String, String> keyValues;
|
||||||
|
final int maxValueLength;
|
||||||
|
|
||||||
const InfoRowGroup(this.keyValues);
|
const InfoRowGroup(
|
||||||
|
this.keyValues, {
|
||||||
|
this.maxValueLength = 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
_InfoRowGroupState createState() => _InfoRowGroupState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _InfoRowGroupState extends State<InfoRowGroup> {
|
||||||
|
final List<String> _expandedKeys = [];
|
||||||
|
|
||||||
|
Map<String, String> get keyValues => widget.keyValues;
|
||||||
|
|
||||||
|
int get maxValueLength => widget.maxValueLength;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
@ -204,20 +220,30 @@ class InfoRowGroup extends StatelessWidget {
|
||||||
children: [
|
children: [
|
||||||
SelectableText.rich(
|
SelectableText.rich(
|
||||||
TextSpan(
|
TextSpan(
|
||||||
children: keyValues.entries
|
children: keyValues.entries.expand(
|
||||||
.expand(
|
(kv) {
|
||||||
(kv) => [
|
final key = kv.key;
|
||||||
TextSpan(text: '${kv.key} ', style: TextStyle(color: Colors.white70, height: 1.7)),
|
var value = kv.value;
|
||||||
TextSpan(text: '${kv.value}${kv.key == lastKey ? '' : '\n'}'),
|
final showPreviewOnly = maxValueLength > 0 && value.length > maxValueLength && !_expandedKeys.contains(key);
|
||||||
],
|
if (showPreviewOnly) {
|
||||||
)
|
value = '${value.substring(0, maxValueLength)}…';
|
||||||
.toList(),
|
}
|
||||||
|
return [
|
||||||
|
TextSpan(text: '$key ', style: TextStyle(color: Colors.white70, height: 1.7)),
|
||||||
|
TextSpan(text: '$value${key == lastKey ? '' : '\n'}', recognizer: showPreviewOnly ? _buildTapRecognizer(key) : null),
|
||||||
|
];
|
||||||
|
},
|
||||||
|
).toList(),
|
||||||
),
|
),
|
||||||
style: TextStyle(fontFamily: 'Concourse'),
|
style: TextStyle(fontFamily: 'Concourse'),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
GestureRecognizer _buildTapRecognizer(String key) {
|
||||||
|
return TapGestureRecognizer()..onTap = () => setState(() => _expandedKeys.add(key));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class BackUpNotification extends Notification {}
|
class BackUpNotification extends Notification {}
|
||||||
|
|
|
@ -85,7 +85,7 @@ class _MetadataSectionSliverState extends State<MetadataSectionSliver> with Auto
|
||||||
}
|
}
|
||||||
if (index < untitledDirectoryCount + 1) {
|
if (index < untitledDirectoryCount + 1) {
|
||||||
final dir = directoriesWithoutTitle[index - 1];
|
final dir = directoriesWithoutTitle[index - 1];
|
||||||
return InfoRowGroup(dir.tags);
|
return InfoRowGroup(dir.tags, maxValueLength: maxValueLength);
|
||||||
}
|
}
|
||||||
final dir = directoriesWithTitle[index - 1 - untitledDirectoryCount];
|
final dir = directoriesWithTitle[index - 1 - untitledDirectoryCount];
|
||||||
return Theme(
|
return Theme(
|
||||||
|
@ -109,7 +109,7 @@ class _MetadataSectionSliverState extends State<MetadataSectionSliver> with Auto
|
||||||
Container(
|
Container(
|
||||||
alignment: Alignment.topLeft,
|
alignment: Alignment.topLeft,
|
||||||
padding: EdgeInsets.only(left: 8, right: 8, bottom: 8),
|
padding: EdgeInsets.only(left: 8, right: 8, bottom: 8),
|
||||||
child: InfoRowGroup(dir.tags),
|
child: InfoRowGroup(dir.tags, maxValueLength: maxValueLength),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
baseColor: Colors.grey[900],
|
baseColor: Colors.grey[900],
|
||||||
|
@ -133,7 +133,7 @@ class _MetadataSectionSliverState extends State<MetadataSectionSliver> with Auto
|
||||||
final value = tagKV.value as String ?? '';
|
final value = tagKV.value as String ?? '';
|
||||||
if (value.isEmpty) return null;
|
if (value.isEmpty) return null;
|
||||||
final tagName = tagKV.key as String ?? '';
|
final tagName = tagKV.key as String ?? '';
|
||||||
return MapEntry(tagName, value.length > maxValueLength ? '${value.substring(0, maxValueLength)}…' : value);
|
return MapEntry(tagName, value);
|
||||||
}).where((kv) => kv != null)));
|
}).where((kv) => kv != null)));
|
||||||
return _MetadataDirectory(directoryName, tags);
|
return _MetadataDirectory(directoryName, tags);
|
||||||
}).toList()
|
}).toList()
|
||||||
|
|
Loading…
Reference in a new issue