From eab5806a1e2b7fb66e7637bd84505ef2fa130f89 Mon Sep 17 00:00:00 2001 From: Efrain Date: Mon, 19 Jul 2021 16:26:05 -0500 Subject: [PATCH] [Presentation] Updated artifact's sheet to consider the new layout --- .../artifacts/artifacts_page.dart | 54 ++--- .../widgets/artifact_bottom_sheet.dart | 191 ++++++++++++------ 2 files changed, 149 insertions(+), 96 deletions(-) diff --git a/lib/presentation/artifacts/artifacts_page.dart b/lib/presentation/artifacts/artifacts_page.dart index 8910a187d..903167e5f 100644 --- a/lib/presentation/artifacts/artifacts_page.dart +++ b/lib/presentation/artifacts/artifacts_page.dart @@ -2,16 +2,16 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; import 'package:genshindb/application/bloc.dart'; +import 'package:genshindb/domain/enums/enums.dart'; import 'package:genshindb/domain/models/models.dart'; import 'package:genshindb/generated/l10n.dart'; import 'package:genshindb/presentation/shared/loading.dart'; import 'package:genshindb/presentation/shared/sliver_nothing_found.dart'; import 'package:genshindb/presentation/shared/sliver_page_filter.dart'; import 'package:genshindb/presentation/shared/sliver_scaffold_with_fab.dart'; -import 'package:genshindb/presentation/shared/styles.dart'; +import 'package:genshindb/presentation/shared/utils/modal_bottom_sheet_utils.dart'; import 'package:genshindb/presentation/shared/utils/size_utils.dart'; -import 'widgets/artifact_bottom_sheet.dart'; import 'widgets/artifact_card.dart'; import 'widgets/artifact_info_card.dart'; @@ -50,28 +50,26 @@ class _ArtifactsPageState extends State with AutomaticKeepAliveCl final s = S.of(context); return BlocBuilder( - builder: (context, state) { - return state.map( - loading: (_) => const Loading(), - loaded: (state) => SliverScaffoldWithFab( - appbar: !widget.isInSelectionMode ? null : AppBar(title: Text(s.selectAnArtifact)), - slivers: [ - SliverPageFilter( - search: state.search, - title: s.artifacts, - onPressed: () => _showFiltersModal(context), - searchChanged: (v) => context.read().add(ArtifactsEvent.searchChanged(search: v)), + builder: (context, state) => state.map( + loading: (_) => const Loading(), + loaded: (state) => SliverScaffoldWithFab( + appbar: !widget.isInSelectionMode ? null : AppBar(title: Text(s.selectAnArtifact)), + slivers: [ + SliverPageFilter( + search: state.search, + title: s.artifacts, + onPressed: () => ModalBottomSheetUtils.showAppModalBottomSheet(context, EndDrawerItemType.artifacts), + searchChanged: (v) => context.read().add(ArtifactsEvent.searchChanged(search: v)), + ), + if (!widget.isInSelectionMode) + ArtifactInfoCard( + isCollapsed: state.collapseNotes, + expansionCallback: (v) => context.read().add(ArtifactsEvent.collapseNotes(collapse: v)), ), - if (!widget.isInSelectionMode) - ArtifactInfoCard( - isCollapsed: state.collapseNotes, - expansionCallback: (v) => context.read().add(ArtifactsEvent.collapseNotes(collapse: v)), - ), - if (state.artifacts.isNotEmpty) _buildGrid(state.artifacts, context) else const SliverNothingFound(), - ], - ), - ); - }, + if (state.artifacts.isNotEmpty) _buildGrid(state.artifacts, context) else const SliverNothingFound(), + ], + ), + ), ); } @@ -89,14 +87,4 @@ class _ArtifactsPageState extends State with AutomaticKeepAliveCl ), ); } - - Future _showFiltersModal(BuildContext context) async { - await showModalBottomSheet( - context: context, - shape: Styles.modalBottomSheetShape, - isDismissible: true, - isScrollControlled: true, - builder: (_) => ArtifactBottomSheet(), - ); - } } diff --git a/lib/presentation/artifacts/widgets/artifact_bottom_sheet.dart b/lib/presentation/artifacts/widgets/artifact_bottom_sheet.dart index f3f8f5baa..655f50d6b 100644 --- a/lib/presentation/artifacts/widgets/artifact_bottom_sheet.dart +++ b/lib/presentation/artifacts/widgets/artifact_bottom_sheet.dart @@ -3,7 +3,8 @@ import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:genshindb/application/bloc.dart'; import 'package:genshindb/domain/enums/enums.dart'; import 'package:genshindb/generated/l10n.dart'; -import 'package:genshindb/presentation/shared/common_bottom_sheet.dart'; +import 'package:genshindb/presentation/shared/bottom_sheets/common_bottom_sheet.dart'; +import 'package:genshindb/presentation/shared/bottom_sheets/right_bottom_sheet.dart'; import 'package:genshindb/presentation/shared/extensions/i18n_extensions.dart'; import 'package:genshindb/presentation/shared/genshin_db_icons.dart'; import 'package:genshindb/presentation/shared/item_popupmenu_filter.dart'; @@ -11,76 +12,140 @@ import 'package:genshindb/presentation/shared/loading.dart'; import 'package:genshindb/presentation/shared/rarity_rating.dart'; import 'package:genshindb/presentation/shared/sort_direction_popupmenu_filter.dart'; import 'package:genshindb/presentation/shared/styles.dart'; +import 'package:responsive_builder/responsive_builder.dart'; class ArtifactBottomSheet extends StatelessWidget { + const ArtifactBottomSheet({ + Key? key, + }) : super(key: key); + @override Widget build(BuildContext context) { final s = S.of(context); - final theme = Theme.of(context); - return CommonBottomSheet( - titleIcon: GenshinDb.filter, - title: s.filters, - showCancelButton: false, - showOkButton: false, - child: BlocBuilder( - builder: (context, state) => state.map( - loading: (_) => const Loading(), - loaded: (state) => Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Text(s.rarity), - RarityRating( - rarity: state.rarity, - onRated: (v) => context.read().add(ArtifactsEvent.rarityChanged(v)), - ), - Text(s.others), - ButtonBar( - alignment: MainAxisAlignment.spaceEvenly, - children: [ - ItemPopupMenuFilter( - tooltipText: s.sortBy, - onSelected: (v) => context.read().add(ArtifactsEvent.artifactFilterTypeChanged(v)), - selectedValue: state.tempArtifactFilterType, - values: ArtifactFilterType.values, - itemText: (val) => s.translateArtifactFilterType(val), - ), - SortDirectionPopupMenuFilter( - selectedSortDirection: state.tempSortDirectionType, - onSelected: (v) => context.read().add(ArtifactsEvent.sortDirectionTypeChanged(v)), - ) - ], - ), - ButtonBar( - buttonPadding: Styles.edgeInsetHorizontal10, - children: [ - OutlinedButton( - onPressed: () { - context.read().add(const ArtifactsEvent.cancelChanges()); - Navigator.pop(context); - }, - child: Text(s.cancel, style: TextStyle(color: theme.primaryColor)), - ), - OutlinedButton( - onPressed: () { - context.read().add(const ArtifactsEvent.resetFilters()); - Navigator.pop(context); - }, - child: Text(s.reset, style: TextStyle(color: theme.primaryColor)), - ), - ElevatedButton( - onPressed: () { - context.read().add(const ArtifactsEvent.applyFilterChanges()); - Navigator.pop(context); - }, - child: Text(s.ok), - ) - ], - ), - ], + final forEndDrawer = getDeviceType(MediaQuery.of(context).size) != DeviceScreenType.mobile; + if (!forEndDrawer) { + return CommonBottomSheet( + titleIcon: GenshinDb.filter, + title: s.filters, + showCancelButton: false, + showOkButton: false, + child: BlocBuilder( + builder: (context, state) => state.map( + loading: (_) => const Loading(useScaffold: false), + loaded: (state) => Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Text(s.rarity), + RarityRating( + rarity: state.rarity, + onRated: (v) => context.read().add(ArtifactsEvent.rarityChanged(v)), + ), + Text(s.others), + _OtherFilters( + tempSortDirectionType: state.tempSortDirectionType, + tempArtifactFilterType: state.tempArtifactFilterType, + ), + const _ButtonBar(), + ], + ), ), ), + ); + } + + return BlocBuilder( + builder: (ctx, state) => state.map( + loading: (_) => const Loading(useScaffold: false), + loaded: (state) => RightBottomSheet( + bottom: const _ButtonBar(), + children: [ + Container(margin: Styles.endDrawerFilterItemMargin, child: Text(s.rarity)), + RarityRating( + rarity: state.rarity, + onRated: (v) => context.read().add(ArtifactsEvent.rarityChanged(v)), + ), + Container(margin: Styles.endDrawerFilterItemMargin, child: Text(s.others)), + _OtherFilters( + tempSortDirectionType: state.tempSortDirectionType, + tempArtifactFilterType: state.tempArtifactFilterType, + forEndDrawer: true, + ), + ], + ), ), ); } } + +class _OtherFilters extends StatelessWidget { + final ArtifactFilterType tempArtifactFilterType; + final SortDirectionType tempSortDirectionType; + final bool forEndDrawer; + + const _OtherFilters({ + Key? key, + required this.tempArtifactFilterType, + required this.tempSortDirectionType, + this.forEndDrawer = false, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + final s = S.of(context); + return ButtonBar( + alignment: MainAxisAlignment.spaceEvenly, + children: [ + ItemPopupMenuFilter( + tooltipText: s.sortBy, + onSelected: (v) => context.read().add(ArtifactsEvent.artifactFilterTypeChanged(v)), + selectedValue: tempArtifactFilterType, + values: ArtifactFilterType.values, + itemText: (val) => s.translateArtifactFilterType(val), + icon: Icon(Icons.filter_list, size: Styles.getIconSizeForItemPopupMenuFilter(forEndDrawer, true)), + ), + SortDirectionPopupMenuFilter( + selectedSortDirection: tempSortDirectionType, + onSelected: (v) => context.read().add(ArtifactsEvent.sortDirectionTypeChanged(v)), + icon: Icon(Icons.sort, size: Styles.getIconSizeForItemPopupMenuFilter(forEndDrawer, true)), + ) + ], + ); + } +} + +class _ButtonBar extends StatelessWidget { + const _ButtonBar({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final s = S.of(context); + final theme = Theme.of(context); + return ButtonBar( + buttonPadding: Styles.edgeInsetHorizontal10, + children: [ + OutlinedButton( + onPressed: () { + context.read().add(const ArtifactsEvent.cancelChanges()); + Navigator.pop(context); + }, + child: Text(s.cancel, style: TextStyle(color: theme.primaryColor)), + ), + OutlinedButton( + onPressed: () { + context.read().add(const ArtifactsEvent.resetFilters()); + Navigator.pop(context); + }, + child: Text(s.reset, style: TextStyle(color: theme.primaryColor)), + ), + ElevatedButton( + onPressed: () { + context.read().add(const ArtifactsEvent.applyFilterChanges()); + Navigator.pop(context); + }, + child: Text(s.ok), + ) + ], + ); + } +}