TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mob][photos] Add UI change for face filter chip when filter is applied

Browse Source
This commit is contained in:
ashilkn
2024-10-22 17:55:49 +05:30
parent f774a9a3c3
commit f62c4e3900
4 changed files with 120 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
mobile/lib/ui/viewer/hierarchicial_search/applied_filters.dart
View File

@@ -60,9 +60,13 @@ class _AppliedFiltersState extends State<AppliedFilters> {
clusterId: filter.clusterId,
faceThumbnailFile: filter.faceFile,
name: filter.name(),
onTap: () {
apply: () {
_searchFilterDataProvider.applyFilters([filter]);
},
remove: () {
_searchFilterDataProvider.removeAppliedFilters([filter]);
},
isApplied: filter.isApplied,
)
: GenericFilterChip(
label: filter.name(),

145
mobile/lib/ui/viewer/hierarchicial_search/filter_chip.dart
View File

@@ -120,66 +120,129 @@ class _GenericFilterChipState extends State<GenericFilterChip> {
}
}
class FaceFilterChip extends StatelessWidget {
class FaceFilterChip extends StatefulWidget {
final String? personId;
final String? clusterId;
final EnteFile faceThumbnailFile;
final String name;
final VoidCallback onTap;
final VoidCallback apply;
final VoidCallback remove;
final bool isApplied;
const FaceFilterChip({
required this.personId,
required this.clusterId,
required this.faceThumbnailFile,
required this.name,
required this.onTap,
required this.apply,
required this.remove,
required this.isApplied,
super.key,
});
@override
State<FaceFilterChip> createState() => _FaceFilterChipState();
}
class _FaceFilterChipState extends State<FaceFilterChip> {
late bool _isApplied;
@override
void initState() {
super.initState();
_isApplied = widget.isApplied;
}
@override
void didUpdateWidget(covariant FaceFilterChip oldWidget) {
super.didUpdateWidget(oldWidget);
_isApplied = widget.isApplied;
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap.call,
child: Container(
decoration: BoxDecoration(
color: getEnteColorScheme(context).fillFaint,
borderRadius:
const BorderRadius.all(Radius.circular(kFilterChipHeight / 2)),
border: Border.all(
color: getEnteColorScheme(context).strokeFaint,
width: 0.5,
),
),
child: Padding(
padding: EdgeInsets.only(right: name.isNotEmpty ? 8.0 : 0),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipOval(
child: SizedBox(
width: kFilterChipHeight,
height: kFilterChipHeight,
child: PersonFaceWidget(
faceThumbnailFile,
personId: personId,
clusterID: clusterId,
thumbnailFallback: false,
),
),
onTap: () {
setState(() {
if (_isApplied) {
widget.remove();
} else {
widget.apply();
}
_isApplied = !_isApplied;
});
},
child: Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: [
Container(
decoration: BoxDecoration(
color: getEnteColorScheme(context).fillFaint,
borderRadius: const BorderRadius.all(
Radius.circular(kFilterChipHeight / 2),
),
name.isNotEmpty
? Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Text(
name,
style: getEnteTextTheme(context).miniBold,
border: Border.all(
color: getEnteColorScheme(context).strokeFaint,
width: 0.5,
),
),
child: Padding(
padding: EdgeInsets.only(right: widget.name.isNotEmpty ? 8.0 : 0),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipOval(
child: SizedBox(
width: kFilterChipHeight,
height: kFilterChipHeight,
child: PersonFaceWidget(
widget.faceThumbnailFile,
personId: widget.personId,
clusterID: widget.clusterId,
thumbnailFallback: false,
),
)
: const SizedBox.shrink(),
],
),
),
widget.name.isNotEmpty
? Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Text(
widget.name,
style: getEnteTextTheme(context).miniBold,
),
)
: const SizedBox.shrink(),
],
),
),
),
),
_isApplied
? Positioned(
top: -4,
right: -4,
child: Container(
padding: const EdgeInsets.all(1),
decoration: BoxDecoration(
color: getEnteColorScheme(context).backgroundElevated2,
border: Border.all(
color: getEnteColorScheme(context).strokeMuted,
width: 0.5,
),
borderRadius: const BorderRadius.all(
Radius.circular(8),
),
),
child: Icon(
Icons.close_rounded,
size: 14,
color: getEnteColorScheme(context).textBase,
),
),
)
: const SizedBox.shrink(),
],
),
);
}

6
mobile/lib/ui/viewer/hierarchicial_search/filter_options_bottom_sheet.dart
View File

@@ -29,9 +29,13 @@ class FilterOptionsBottomSheet extends StatelessWidget {
clusterId: filter.clusterId,
faceThumbnailFile: filter.faceFile,
name: filter.name(),
onTap: () {
apply: () {
searchFilterDataProvider.applyFilters([filter]);
},
remove: () {
searchFilterDataProvider.removeAppliedFilters([filter]);
},
isApplied: filter.isApplied,
)
: GenericFilterChip(
label: filter.name(),

7
mobile/lib/ui/viewer/hierarchicial_search/recommended_filters.dart
View File

@@ -94,9 +94,14 @@ class _RecommendedFiltersState extends State<RecommendedFilters> {
clusterId: filter.clusterId,
faceThumbnailFile: filter.faceFile,
name: filter.name(),
onTap: () {
apply: () {
_searchFilterDataProvider.applyFilters([filter]);
},
remove: () {
_searchFilterDataProvider
.removeAppliedFilters([filter]);
},
isApplied: filter.isApplied,
)
: GenericFilterChip(
label: filter.name(),