Created separate components for NewAlbumListItem and AlbumListItem
This commit is contained in:
ashilkn
parent
038557eda9
commit
587ab02c43
3 changed files with 129 additions and 81 deletions
|
|
@ -1,4 +1,3 @@
|
|||
import 'package:dotted_border/dotted_border.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:logging/logging.dart';
|
||||
import 'package:photos/db/files_db.dart';
|
||||
|
|
@ -7,12 +6,11 @@ import 'package:photos/theme/ente_theme.dart';
|
|||
import 'package:photos/ui/viewer/file/no_thumbnail_widget.dart';
|
||||
import 'package:photos/ui/viewer/file/thumbnail_widget.dart';
|
||||
|
||||
///https://www.figma.com/file/SYtMyLBs5SAOkTbfMMzhqt/ente-Visual-Design?node-id=7480%3A33462&t=H5AvR79OYDnB9ekw-4
|
||||
class AlbumListItemWidget extends StatelessWidget {
|
||||
final CollectionWithThumbnail? item;
|
||||
final bool isNew;
|
||||
const AlbumListItemWidget({
|
||||
this.item,
|
||||
this.isNew = false,
|
||||
super.key,
|
||||
});
|
||||
|
||||
|
|
@ -35,92 +33,69 @@ class AlbumListItemWidget extends StatelessWidget {
|
|||
child: SizedBox(
|
||||
height: sideOfThumbnail,
|
||||
width: sideOfThumbnail,
|
||||
key: Key("collection_item:" + (item?.thumbnail?.tag ?? "")),
|
||||
child: isNew
|
||||
? Icon(
|
||||
Icons.add_outlined,
|
||||
color: colorScheme.strokeMuted,
|
||||
child: item?.thumbnail != null
|
||||
? ThumbnailWidget(
|
||||
item!.thumbnail,
|
||||
showFavForAlbumOnly: true,
|
||||
)
|
||||
: item?.thumbnail != null
|
||||
? ThumbnailWidget(
|
||||
item!.thumbnail,
|
||||
showFavForAlbumOnly: true,
|
||||
)
|
||||
: const NoThumbnailWidget(
|
||||
hasBorder: false,
|
||||
),
|
||||
: const NoThumbnailWidget(
|
||||
hasBorder: false,
|
||||
),
|
||||
),
|
||||
),
|
||||
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 ?? ""),
|
||||
item != null
|
||||
? FutureBuilder<int>(
|
||||
future:
|
||||
FilesDB.instance.collectionFileCount(
|
||||
item!.collection.id,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(item?.collection.collectionName ?? ""),
|
||||
item != null
|
||||
? 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,
|
||||
),
|
||||
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("AlbumListItemWidget").severe(
|
||||
"Failed to fetch file count of collection id ${item!.collection.id}",
|
||||
);
|
||||
}
|
||||
return Text(
|
||||
"",
|
||||
style: textTheme.small.copyWith(
|
||||
color: colorScheme.textMuted,
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
)
|
||||
: throw "CollectionWithThumbnail item cannot be null",
|
||||
],
|
||||
),
|
||||
);
|
||||
} else {
|
||||
if (snapshot.hasError) {
|
||||
Logger("AlbumListItemWidget").severe(
|
||||
"Failed to fetch file count of collection id ${item!.collection.id}",
|
||||
);
|
||||
}
|
||||
return Text(
|
||||
"",
|
||||
style: textTheme.small.copyWith(
|
||||
color: colorScheme.textMuted,
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
)
|
||||
: throw "CollectionWithThumbnail item cannot be null",
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
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,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: const BorderRadius.all(Radius.circular(4)),
|
||||
border: Border.all(
|
||||
color: colorScheme.strokeFainter,
|
||||
),
|
||||
),
|
||||
height: sideOfThumbnail,
|
||||
width: constraints.maxWidth,
|
||||
),
|
||||
),
|
||||
],
|
||||
|
|
|
|||
73
lib/ui/components/new_album_list_widget.dart
Normal file
73
lib/ui/components/new_album_list_widget.dart
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import 'package:dotted_border/dotted_border.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:photos/theme/ente_theme.dart';
|
||||
|
||||
///https://www.figma.com/file/SYtMyLBs5SAOkTbfMMzhqt/ente-Visual-Design?node-id=10854%3A57947&t=H5AvR79OYDnB9ekw-4
|
||||
class NewAlbumListItemWidget extends StatelessWidget {
|
||||
const NewAlbumListItemWidget({
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final textTheme = getEnteTextTheme(context);
|
||||
final colorScheme = getEnteColorScheme(context);
|
||||
const sideOfThumbnail = 60.0;
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: const BorderRadius.horizontal(
|
||||
left: Radius.circular(4),
|
||||
),
|
||||
child: SizedBox(
|
||||
height: sideOfThumbnail,
|
||||
width: sideOfThumbnail,
|
||||
child: Icon(
|
||||
Icons.add_outlined,
|
||||
color: colorScheme.strokeMuted,
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 12),
|
||||
child: Text(
|
||||
"New album",
|
||||
style:
|
||||
textTheme.body.copyWith(color: colorScheme.textMuted),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
IgnorePointer(
|
||||
child: DottedBorder(
|
||||
dashPattern: const [4],
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -19,6 +19,7 @@ import 'package:photos/ui/components/album_list_item_widget.dart';
|
|||
import 'package:photos/ui/components/bottom_of_title_bar_widget.dart';
|
||||
import 'package:photos/ui/components/button_widget.dart';
|
||||
import 'package:photos/ui/components/models/button_type.dart';
|
||||
import 'package:photos/ui/components/new_album_list_widget.dart';
|
||||
import 'package:photos/ui/components/title_bar_title_widget.dart';
|
||||
import 'package:photos/ui/viewer/gallery/collection_page.dart';
|
||||
import 'package:photos/utils/dialog_util.dart';
|
||||
|
|
@ -154,9 +155,8 @@ class _CreateCollectionSheetState extends State<CreateCollectionSheet> {
|
|||
_showNameAlbumDialog();
|
||||
},
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: const AlbumListItemWidget(
|
||||
isNew: true,
|
||||
),
|
||||
child:
|
||||
const NewAlbumListItemWidget(),
|
||||
);
|
||||
}
|
||||
final item = collectionsWithThumbnail[
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue