Collection gallery UI tweaks (#911)

This commit is contained in:
Neeraj Gupta 2023-03-08 11:44:46 +05:30 committed by GitHub
commit 0a83ea9e29
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 88 additions and 101 deletions

View file

@ -59,9 +59,9 @@ class RemoteCollectionsGridViewWidget extends StatelessWidget {
// To include the + button
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: albumsCountInOneRow,
mainAxisSpacing: 14,
mainAxisSpacing: 12,
crossAxisSpacing: gapBetweenAlbums,
childAspectRatio: sideOfThumbnail / (sideOfThumbnail + 50),
childAspectRatio: sideOfThumbnail / (sideOfThumbnail + 46),
), //24 is height of album title
),
);

View file

@ -27,7 +27,7 @@ class SectionTitle extends StatelessWidget {
child = const SizedBox.shrink();
}
return Container(
margin: const EdgeInsets.fromLTRB(16, 12, 0, 0),
margin: const EdgeInsets.only(left: 16),
child: Column(
children: [
Align(

View file

@ -21,6 +21,7 @@ import 'package:photos/ui/collections/section_title.dart';
import 'package:photos/ui/collections/trash_button_widget.dart';
import 'package:photos/ui/collections/uncat_collections_button_widget.dart';
import 'package:photos/ui/common/loading_widget.dart';
import "package:photos/ui/components/icon_button_widget.dart";
import 'package:photos/ui/viewer/actions/delete_empty_albums.dart';
import 'package:photos/ui/viewer/gallery/empty_state.dart';
import 'package:photos/utils/local_settings.dart';
@ -148,11 +149,8 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
const SectionTitle(title: "On device"),
const SizedBox(height: 12),
const DeviceFoldersGridViewWidget(),
const Padding(padding: EdgeInsets.all(4)),
const Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SectionTitle(titleWithBrand: getOnEnteSection(context)),
_sortMenu(),
@ -164,11 +162,9 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
child: DeleteEmptyAlbums(),
)
: const SizedBox.shrink(),
const SizedBox(height: 12),
Configuration.instance.hasConfiguredAccount()
? RemoteCollectionsGridViewWidget(collections)
: const EmptyState(),
const SizedBox(height: 10),
const Divider(),
const SizedBox(height: 16),
Padding(
@ -185,7 +181,7 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
],
),
),
const Padding(padding: EdgeInsets.fromLTRB(12, 12, 12, 36)),
const SizedBox(height: 48),
],
),
),
@ -215,47 +211,34 @@ class _CollectionsGalleryWidgetState extends State<CollectionsGalleryWidget>
}
return Padding(
padding: const EdgeInsets.only(right: 24),
child: PopupMenuButton(
offset: const Offset(10, 50),
initialValue: sortKey?.index ?? 0,
child: Align(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(left: 5.0),
),
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: Theme.of(context).hintColor.withOpacity(0.2),
borderRadius: BorderRadius.circular(18),
),
child: Icon(
Icons.sort,
color: Theme.of(context).iconTheme.color,
size: 20,
),
),
],
),
padding: const EdgeInsets.only(right: 8),
child: Theme(
data: Theme.of(context).copyWith(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
),
child: PopupMenuButton(
offset: const Offset(10, 50),
initialValue: sortKey?.index ?? 0,
child: const IconButtonWidget(
icon: Icons.sort_outlined,
iconButtonType: IconButtonType.secondary,
disableGestureDetector: true,
),
onSelected: (int index) async {
sortKey = AlbumSortKey.values[index];
await LocalSettings.instance.setAlbumSortKey(sortKey!);
setState(() {});
},
itemBuilder: (context) {
return List.generate(AlbumSortKey.values.length, (index) {
return PopupMenuItem(
value: index,
child: sortOptionText(AlbumSortKey.values[index]),
);
});
},
),
onSelected: (int index) async {
sortKey = AlbumSortKey.values[index];
await LocalSettings.instance.setAlbumSortKey(sortKey!);
setState(() {});
},
itemBuilder: (context) {
return List.generate(AlbumSortKey.values.length, (index) {
return PopupMenuItem(
value: index,
child: sortOptionText(AlbumSortKey.values[index]),
);
});
},
),
);
}

View file

@ -181,6 +181,7 @@ class _SharedCollectionGalleryState extends State<SharedCollectionGallery>
),
)
: _getIncomingCollectionEmptyState(),
const SizedBox(height: 16),
const SectionTitle(title: "Shared by me"),
const SizedBox(height: 12),
collections.outgoing.isNotEmpty

View file

@ -27,59 +27,62 @@ class _DeleteEmptyAlbumsState extends State<DeleteEmptyAlbums> {
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.centerLeft,
child: ButtonWidget(
buttonSize: ButtonSize.small,
buttonType: ButtonType.secondary,
labelText: "Delete empty albums",
icon: Icons.delete_sweep_outlined,
shouldSurfaceExecutionStates: false,
onTap: () async {
await showActionSheet(
context: context,
isDismissible: true,
buttons: [
ButtonWidget(
labelText: "Yes",
buttonType: ButtonType.neutral,
buttonSize: ButtonSize.large,
shouldStickToDarkTheme: true,
shouldSurfaceExecutionStates: true,
progressStatus: _deleteProgress,
onTap: () async {
await _deleteEmptyAlbums();
if (!_isCancelled) {
return Padding(
padding: const EdgeInsets.fromLTRB(0, 2, 8, 12),
child: Align(
alignment: Alignment.centerLeft,
child: ButtonWidget(
buttonSize: ButtonSize.small,
buttonType: ButtonType.secondary,
labelText: "Delete empty albums",
icon: Icons.delete_sweep_outlined,
shouldSurfaceExecutionStates: false,
onTap: () async {
await showActionSheet(
context: context,
isDismissible: true,
buttons: [
ButtonWidget(
labelText: "Yes",
buttonType: ButtonType.neutral,
buttonSize: ButtonSize.large,
shouldStickToDarkTheme: true,
shouldSurfaceExecutionStates: true,
progressStatus: _deleteProgress,
onTap: () async {
await _deleteEmptyAlbums();
if (!_isCancelled) {
Navigator.of(context, rootNavigator: true).pop();
}
Bus.instance.fire(
CollectionUpdatedEvent(
0,
<File>[],
"empty_albums_deleted",
),
);
CollectionsService.instance.sync().ignore();
_isCancelled = false;
},
),
ButtonWidget(
labelText: "Cancel",
buttonType: ButtonType.secondary,
buttonSize: ButtonSize.large,
shouldStickToDarkTheme: true,
onTap: () async {
_isCancelled = true;
Navigator.of(context, rootNavigator: true).pop();
}
Bus.instance.fire(
CollectionUpdatedEvent(
0,
<File>[],
"empty_albums_deleted",
),
);
CollectionsService.instance.sync().ignore();
_isCancelled = false;
},
),
ButtonWidget(
labelText: "Cancel",
buttonType: ButtonType.secondary,
buttonSize: ButtonSize.large,
shouldStickToDarkTheme: true,
onTap: () async {
_isCancelled = true;
Navigator.of(context, rootNavigator: true).pop();
},
)
],
title: "Delete empty albums?",
body:
"This will delete all empty albums. This is useful when you want to reduce the clutter in your album list.",
actionSheetType: ActionSheetType.defaultActionSheet,
);
},
},
)
],
title: "Delete empty albums?",
body:
"This will delete all empty albums. This is useful when you want to reduce the clutter in your album list.",
actionSheetType: ActionSheetType.defaultActionSheet,
);
},
),
),
);
}