From 702207c9c01304cb579d0e644d04ffce85595fbd Mon Sep 17 00:00:00 2001 From: tamslo Date: Thu, 28 Nov 2024 17:54:07 +0100 Subject: [PATCH] feat(app): make filter button more obvious --- app/lib/common/widgets/drug_list/builder.dart | 9 ++--- .../common/widgets/drug_search/builder.dart | 15 +++++--- .../widgets/drug_search/drug_filters.dart | 21 +++++++---- app/lib/common/widgets/module.dart | 1 + .../common/widgets/resized_icon_button.dart | 37 +++++++++++++++++++ app/lib/l10n/app_en.arb | 2 + app/lib/search/pages/search.dart | 27 +++++++++----- 7 files changed, 84 insertions(+), 28 deletions(-) create mode 100644 app/lib/common/widgets/resized_icon_button.dart diff --git a/app/lib/common/widgets/drug_list/builder.dart b/app/lib/common/widgets/drug_list/builder.dart index 4ba21c5b..dc175388 100644 --- a/app/lib/common/widgets/drug_list/builder.dart +++ b/app/lib/common/widgets/drug_list/builder.dart @@ -85,14 +85,13 @@ class DrugList extends StatelessWidget { ), trailing: drugActivityChangeable ? null - : IconButton( + : ResizedIconButton( + size: PharMeTheme.mediumToLargeSpace, + iconWidgetBuilder: + (size) => defaultIconBuilder(Icons.edit, size), onPressed: () => context.router.push( DrugSelectionRoute(concludesOnboarding: false) ), - icon: Icon(Icons.edit), - color: PharMeTheme.iconColor, - iconSize: 20, - visualDensity: VisualDensity.compact, ), visualDensity: VisualDensity.compact, contentPadding: EdgeInsets.zero, diff --git a/app/lib/common/widgets/drug_search/builder.dart b/app/lib/common/widgets/drug_search/builder.dart index 4f0bbac8..4cfcb50e 100644 --- a/app/lib/common/widgets/drug_search/builder.dart +++ b/app/lib/common/widgets/drug_search/builder.dart @@ -85,12 +85,15 @@ class DrugSearch extends HookWidget { ? context.l10n.search_page_tooltip_search : context.l10n.search_page_tooltip_search_no_class ), - if (showFilter) DrugFilters( - cubit: cubit, - state: state, - activeDrugs: activeDrugs, - searchForDrugClass: searchForDrugClass, - ), + if (showFilter) ...[ + SizedBox(width: PharMeTheme.smallToMediumSpace), + DrugFilters( + cubit: cubit, + state: state, + activeDrugs: activeDrugs, + searchForDrugClass: searchForDrugClass, + ), + ], ]; } diff --git a/app/lib/common/widgets/drug_search/drug_filters.dart b/app/lib/common/widgets/drug_search/drug_filters.dart index 4fc1e917..4b2a12e3 100644 --- a/app/lib/common/widgets/drug_search/drug_filters.dart +++ b/app/lib/common/widgets/drug_search/drug_filters.dart @@ -170,7 +170,7 @@ class DrugFilters extends StatelessWidget { child: Container( decoration: BoxDecoration( shape: BoxShape.circle, - color: PharMeTheme.sinaiMagenta, + color: PharMeTheme.sinaiCyan, ), width: indicatorSize, height: indicatorSize, @@ -205,28 +205,33 @@ class DrugFilters extends StatelessWidget { ]; } - IconButton _buildButton({ + Widget _buildButton({ required void Function()? onPressed, required bool enableIndicator, }) { - return IconButton( + return ResizedIconButton( onPressed: onPressed, - icon: Stack( + size: PharMeTheme.largeSpace, + backgroundColor: PharMeTheme.iconColor, + iconWidgetBuilder: (size) => Stack( children: [ - Icon(Icons.filter_list), + Icon( + Icons.filter_list, + size: size, + color: PharMeTheme.surfaceColor, + ), if (enableIndicator && _showActiveIndicator()) _buildActiveIndicator(), ], ), - color: PharMeTheme.iconColor, ); } - IconButton _buildDisabledButton() { + Widget _buildDisabledButton() { return _buildButton(onPressed: null, enableIndicator: false); } - IconButton _buildEnabledButton( + Widget _buildEnabledButton( BuildContext context, List allDrugs, FilterState filter, diff --git a/app/lib/common/widgets/module.dart b/app/lib/common/widgets/module.dart index e7dc6978..b17bb178 100644 --- a/app/lib/common/widgets/module.dart +++ b/app/lib/common/widgets/module.dart @@ -24,6 +24,7 @@ export 'page_scaffold.dart'; export 'pharme_logo_page.dart'; export 'pretty_expansion_tile.dart'; export 'radiant_gradient_mask.dart'; +export 'resized_icon_button.dart'; export 'rounded_card.dart'; export 'scroll_list.dart'; export 'subheader_divider.dart'; diff --git a/app/lib/common/widgets/resized_icon_button.dart b/app/lib/common/widgets/resized_icon_button.dart new file mode 100644 index 00000000..d093fa79 --- /dev/null +++ b/app/lib/common/widgets/resized_icon_button.dart @@ -0,0 +1,37 @@ +import '../module.dart'; + +Widget defaultIconBuilder(IconData icon, double? size) => Icon( + icon, + size: size, + color: PharMeTheme.iconColor, +); + +class ResizedIconButton extends StatelessWidget { + const ResizedIconButton({ + super.key, + required this.iconWidgetBuilder, + required this.size, + this.onPressed, + this.backgroundColor, + }); + + final Widget Function(double? size) iconWidgetBuilder; + final double size; + final void Function()? onPressed; + final Color? backgroundColor; + + @override + Widget build(BuildContext context) { + final padding = size * 0.2; + return SizedBox( + width: size, + height: size, + child: IconButton( + padding: EdgeInsets.all(padding), + onPressed: onPressed, + icon: iconWidgetBuilder(size - 2 * padding), + style: IconButton.styleFrom(backgroundColor: backgroundColor), + ), + ); + } +} \ No newline at end of file diff --git a/app/lib/l10n/app_en.arb b/app/lib/l10n/app_en.arb index 04dc1e0b..93145da7 100644 --- a/app/lib/l10n/app_en.arb +++ b/app/lib/l10n/app_en.arb @@ -97,6 +97,8 @@ "warning_level_red": "Consider alternatives", "@warning_level_red": {}, + "search_content_explanation": "Below, medications that are known to have meaningful interactions with genes are listed.", + "@search_content_explanation": {}, "search_page_tooltip_search": "Search for medications by their name, brand name or class.", "@search_page_tooltip_search": {}, "search_page_tooltip_search_no_class": "Search for medications by their name or brand name.", diff --git a/app/lib/search/pages/search.dart b/app/lib/search/pages/search.dart index 3d7cc1b2..7f6abcce 100644 --- a/app/lib/search/pages/search.dart +++ b/app/lib/search/pages/search.dart @@ -25,15 +25,24 @@ class SearchPage extends HookWidget { title: context.l10n.tab_drugs, canNavigateBack: false, contextToDismissFocusOnTap: context, - body: DrugSearch( - key: Key('drug-search'), - showFilter: true, - buildDrugItems: buildDrugCards, - cubit: cubit, - state: state, - activeDrugs: activeDrugs, - searchForDrugClass: searchForDrugClass, - showDrugInteractionIndicator: false, + body: Column( + children: [ + PageDescription.fromText( + context.l10n.search_content_explanation, + ), + Expanded( + child: DrugSearch( + key: Key('drug-search'), + showFilter: true, + buildDrugItems: buildDrugCards, + cubit: cubit, + state: state, + activeDrugs: activeDrugs, + searchForDrugClass: searchForDrugClass, + showDrugInteractionIndicator: false, + ), + ), + ], ), ), ),