diff --git a/lib/ui/advanced_settings_screen.dart b/lib/ui/advanced_settings_screen.dart index e63ed4f00..2d996ed35 100644 --- a/lib/ui/advanced_settings_screen.dart +++ b/lib/ui/advanced_settings_screen.dart @@ -10,6 +10,7 @@ import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart'; import 'package:photos/ui/components/title_bar_title_widget.dart'; import 'package:photos/ui/components/title_bar_widget.dart'; import 'package:photos/ui/tools/debug/app_storage_viewer.dart'; +import 'package:photos/ui/viewer/gallery/photo_grid_size_picker_page.dart'; import 'package:photos/utils/local_settings.dart'; import 'package:photos/utils/navigation_util.dart'; @@ -66,7 +67,16 @@ class _AdvancedSettingsScreenState extends State { children: [ GestureDetector( onTap: () { - _showPhotoGridSizePicker(delegateBuildContext); + // _showPhotoGridSizePicker(delegateBuildContext); + routeToPage( + context, + const PhotoGridSizePickerPage(), + ).then((value) { + setState(() { + _photoGridSize = LocalSettings.instance + .getPhotoGridSize(); + }); + }); }, child: MenuItemWidget( captionedTextWidget: CaptionedTextWidget( @@ -80,7 +90,6 @@ class _AdvancedSettingsScreenState extends State { ), singleBorderRadius: 8, alignCaptionedTextToLeft: true, - // isBottomBorderRadiusRemoved: true, isGestureDetectorDisabled: true, ), ), diff --git a/lib/ui/viewer/gallery/photo_grid_size_picker_page.dart b/lib/ui/viewer/gallery/photo_grid_size_picker_page.dart new file mode 100644 index 000000000..a14787d5e --- /dev/null +++ b/lib/ui/viewer/gallery/photo_grid_size_picker_page.dart @@ -0,0 +1,124 @@ +import 'package:flutter/material.dart'; +import 'package:photos/core/constants.dart'; +import 'package:photos/core/event_bus.dart'; +import 'package:photos/events/force_reload_home_gallery_event.dart'; +import 'package:photos/theme/ente_theme.dart'; +import 'package:photos/ui/components/captioned_text_widget.dart'; +import 'package:photos/ui/components/divider_widget.dart'; +import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart'; +import 'package:photos/ui/components/title_bar_title_widget.dart'; +import 'package:photos/ui/components/title_bar_widget.dart'; +import 'package:photos/utils/local_settings.dart'; +import 'package:photos/utils/separators_util.dart'; + +class PhotoGridSizePickerPage extends StatelessWidget { + const PhotoGridSizePickerPage({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: CustomScrollView( + primary: false, + slivers: [ + const TitleBarWidget( + flexibleSpaceTitle: TitleBarTitleWidget( + title: "Photo grid size", + ), + ), + SliverList( + delegate: SliverChildBuilderDelegate( + (context, index) { + return Padding( + padding: const EdgeInsets.symmetric( + horizontal: 16, + vertical: 20, + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: const [ + ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(8)), + child: ItemsWidget(), + ), + ], + ), + ); + }, + childCount: 1, + ), + ), + const SliverPadding(padding: EdgeInsets.symmetric(vertical: 12)), + ], + ), + ); + } +} + +class ItemsWidget extends StatefulWidget { + const ItemsWidget({super.key}); + + @override + State createState() => _ItemsWidgetState(); +} + +class _ItemsWidgetState extends State { + late int currentGridSize; + List items = []; + final List gridSizes = []; + @override + void initState() { + currentGridSize = LocalSettings.instance.getPhotoGridSize(); + for (int gridSize = photoGridSizeMin; + gridSize <= photoGridSizeMax; + gridSize++) { + gridSizes.add(gridSize); + } + super.initState(); + } + + @override + Widget build(BuildContext context) { + items.clear(); + for (int girdSize in gridSizes) { + items.add( + _menuItemForPicker(girdSize), + ); + } + items = addSeparators( + items, + DividerWidget( + dividerType: DividerType.menuNoIcon, + bgColor: getEnteColorScheme(context).fillFaint, + ), + ); + return Column( + mainAxisSize: MainAxisSize.min, + children: items, + ); + } + + Widget _menuItemForPicker(int gridSize) { + return MenuItemWidget( + key: ValueKey(gridSize), + menuItemColor: getEnteColorScheme(context).fillFaint, + captionedTextWidget: CaptionedTextWidget( + title: "$gridSize", + ), + trailingIcon: currentGridSize == gridSize ? Icons.check : null, + alignCaptionedTextToLeft: true, + isTopBorderRadiusRemoved: true, + isBottomBorderRadiusRemoved: true, + showOnlyLoadingState: true, + onTap: () async { + await LocalSettings.instance.setPhotoGridSize(gridSize).then( + (value) => setState(() { + currentGridSize = gridSize; + }), + ); + Bus.instance.fire( + ForceReloadHomeGalleryEvent("grid size changed"), + ); + }, + ); + } +}