beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Improved implementation of border of AlbumListItem + minor layout change in CreateCollecitonSheet

Browse source
This commit is contained in:
ashilkn 2023-01-21 09:25:28 +05:30
parent 1f347ec46a
commit 97805cebb9
2 changed files with 95 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

182
lib/ui/components/album_list_item_widget.dart
View file

@ -22,99 +22,105 @@ class AlbumListItemWidget extends StatelessWidget {
final textTheme = getEnteTextTheme(context);
final colorScheme = getEnteColorScheme(context);
const sideOfThumbnail = 60.0;
return Stack(
alignment: Alignment.center,
children: [
Row(
return LayoutBuilder(
builder: (context, constraints) {
return Stack(
alignment: Alignment.center,
children: [
ClipRRect(
borderRadius: const BorderRadius.horizontal(
left: Radius.circular(4),
),
child: SizedBox(
height: sideOfThumbnail,
width: sideOfThumbnail,
key: Key("collection_item:" + (item.thumbnail?.tag ?? "")),
child: isNew
? Icon(
Icons.add_outlined,
color: colorScheme.strokeMuted,
)
: item.thumbnail != null
? ThumbnailWidget(
item.thumbnail,
showFavForAlbumOnly: true,
Row(
children: [
ClipRRect(
borderRadius: const BorderRadius.horizontal(
left: Radius.circular(4),
),
child: SizedBox(
height: sideOfThumbnail,
width: sideOfThumbnail,
key: Key("collection_item:" + (item.thumbnail?.tag ?? "")),
child: isNew
? Icon(
Icons.add_outlined,
color: colorScheme.strokeMuted,
)
: const NoThumbnailWidget(),
),
),
Padding(
padding: const EdgeInsets.only(left: 12),
child: isNew
? Text(
"New album",
style:
textTheme.body.copyWith(color: colorScheme.textMuted),
)
: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(item.collection.collectionName),
FutureBuilder<int>(
future: FilesDB.instance
.collectionFileCount(item.collection.id),
builder: (context, snapshot) {
if (snapshot.hasData) {
final text =
snapshot.data == 1 ? " memory" : " memories";
return Text(
snapshot.data.toString() + text,
style: textTheme.small.copyWith(
color: colorScheme.textMuted,
),
);
} else {
if (snapshot.hasError) {
logger.severe(
"Failed to fetch file count of collection id ${item.collection.id}",
);
}
return Text(
"",
style: textTheme.small.copyWith(
color: colorScheme.textMuted,
),
);
}
},
: item.thumbnail != null
? ThumbnailWidget(
item.thumbnail,
showFavForAlbumOnly: true,
)
: const NoThumbnailWidget(),
),
),
Padding(
padding: const EdgeInsets.only(left: 12),
child: isNew
? Text(
"New album",
style: textTheme.body
.copyWith(color: colorScheme.textMuted),
)
: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(item.collection.collectionName),
FutureBuilder<int>(
future: FilesDB.instance
.collectionFileCount(item.collection.id),
builder: (context, snapshot) {
if (snapshot.hasData) {
final text = snapshot.data == 1
? " memory"
: " memories";
return Text(
snapshot.data.toString() + text,
style: textTheme.small.copyWith(
color: colorScheme.textMuted,
),
);
} else {
if (snapshot.hasError) {
logger.severe(
"Failed to fetch file count of collection id ${item.collection.id}",
);
}
return Text(
"",
style: textTheme.small.copyWith(
color: colorScheme.textMuted,
),
);
}
},
),
],
),
],
),
),
],
),
IgnorePointer(
child: DottedBorder(
dashPattern: isNew ? [4] : [300, 0],
color: colorScheme.strokeFainter,
strokeWidth: 1,
padding: const EdgeInsets.all(0),
borderType: BorderType.RRect,
radius: const Radius.circular(4),
child: SizedBox(
//Have to decrease the height and width by 1 pt as the stroke
//dotted border gives is of strokeAlign.center, so 0.5 inside and
// outside. Here for the row, stroke should be inside so we
//decrease the size of this sizedBox by 1 (so it shrinks 0.5 from
//every side) so that the strokeAlign.center of this sizedBox
//looks like a strokeAlign.inside in the row.
height: sideOfThumbnail - 1,
//This width will work for this only if the row widget takes up the
//full size it's parent (stack).
width: constraints.maxWidth - 1,
),
),
),
],
),
IgnorePointer(
child: DottedBorder(
dashPattern: isNew ? [4] : [300, 0],
color: colorScheme.strokeFainter,
strokeWidth: 1,
padding: const EdgeInsets.all(0),
borderType: BorderType.RRect,
radius: const Radius.circular(4),
child: SizedBox(
//Have to decrease the height and width by 1 pt as the stroke
//dotted border gives is of strokeAlign.center, so 0.5 inside and
// outside. Here for the row, stroke should be inside so we
//decrease the size of this sizedBox by 1 (so it shrinks 0.5 from
//every side) so that the strokeAlign.center of this sizedBox
//looks like a strokeAlign.inside in the row.
height: sideOfThumbnail - 1,
//32 is to account for padding of 16pts on both sides
width: MediaQuery.of(context).size.width - 33,
),
),
),
],
);
},
);
}
}

2
lib/ui/create_collection_sheet.dart
View file

@ -130,7 +130,7 @@ class _CreateCollectionSheetState extends State<CreateCollectionSheet> {
child: Scrollbar(
radius: const Radius.circular(2),
child: Padding(
padding: const EdgeInsets.only(right: 8),
padding: const EdgeInsets.only(right: 12),
child: FutureBuilder(
future: _getCollectionsWithThumbnail(),
builder: (context, snapshot) {