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

albums lay out with gridview builder and will better fit large screens

Browse source
This commit is contained in:
Marty Fuhry 2023-02-08 08:35:59 -05:00
parent c8127626fa
commit ffa629f6d3
2 changed files with 65 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
mobile/lib/modules/album/ui/album_thumbnail_card.dart
View file

@ -10,9 +10,12 @@ import 'package:immich_mobile/utils/image_url_builder.dart';
import 'package:openapi/api.dart';
class AlbumThumbnailCard extends StatelessWidget {
final Function()? onTap;
const AlbumThumbnailCard({
Key? key,
required this.album,
this.onTap,
}) : super(key: key);
final Album album;
@ -23,18 +26,19 @@ class AlbumThumbnailCard extends StatelessWidget {
var isDarkMode = Theme.of(context).brightness == Brightness.dark;
return LayoutBuilder(
builder: (context, constraints) {
var cardSize = constraints.maxWidth / 2 - 18;
var cardSize = constraints.maxWidth;
buildEmptyThumbnail() {
return Container(
height: cardSize,
width: cardSize,
decoration: BoxDecoration(
color: isDarkMode ? Colors.grey[800] : Colors.grey[200],
),
child: SizedBox(
height: cardSize,
width: cardSize,
child: const Center(
child: Icon(Icons.no_photography),
child: Center(
child: Icon(
Icons.no_photography,
size: cardSize * .15,
),
),
);
@ -56,20 +60,20 @@ class AlbumThumbnailCard extends StatelessWidget {
}
return GestureDetector(
onTap: () {
AutoRouter.of(context).push(AlbumViewerRoute(albumId: album.id));
},
onTap: onTap,
child: Padding(
padding: const EdgeInsets.only(bottom: 32.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
Expanded(
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: album.albumThumbnailAssetId == null
? buildEmptyThumbnail()
: buildAlbumThumbnail(),
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: SizedBox(

57
mobile/lib/modules/album/views/library_page.dart
View file

@ -112,15 +112,14 @@ class LibraryPage extends HookConsumerWidget {
onTap: () {
AutoRouter.of(context).push(CreateAlbumRoute(isSharedAlbum: false));
},
child: Padding(
padding: const EdgeInsets.only(bottom: 32),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
LayoutBuilder(
builder: (context, constraints) {
return Container(
width: constraints.maxWidth / 2 - 18,
height: constraints.maxWidth / 2 - 18,
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey,
@ -134,20 +133,23 @@ class LibraryPage extends HookConsumerWidget {
color: Theme.of(context).primaryColor,
),
),
);
}
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
padding: const EdgeInsets.only(
top: 8.0,
bottom: 16,
),
child: const Text(
'library_page_new_album',
style: TextStyle(
fontWeight: FontWeight.bold,
),
).tr(),
)
),
],
),
),
);
}
@ -189,6 +191,8 @@ class LibraryPage extends HookConsumerWidget {
);
}
final sorted = sortedAlbums();
return Scaffold(
appBar: buildAppBar(),
body: CustomScrollView(
@ -238,20 +242,33 @@ class LibraryPage extends HookConsumerWidget {
),
),
SliverPadding(
padding: const EdgeInsets.only(left: 12.0, right: 12, bottom: 50),
sliver: SliverToBoxAdapter(
child: Wrap(
spacing: 12,
children: [
buildCreateAlbumButton(),
for (var album in sortedAlbums())
AlbumThumbnailCard(
album: album,
padding: const EdgeInsets.all(12.0),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 250,
mainAxisSpacing: 12,
crossAxisSpacing: 12,
childAspectRatio: .7,
),
delegate: SliverChildBuilderDelegate(
childCount: sorted.length + 1,
(context, index) {
if (index == 0) {
return buildCreateAlbumButton();
}
return AlbumThumbnailCard(
album: sorted[index - 1],
onTap: () => AutoRouter.of(context).push(
AlbumViewerRoute(
albumId: sorted[index - 1].id,
),
),
);
},
),
],
),
),
)
],
),
);