diff --git a/app/lib/common/theme.dart b/app/lib/common/theme.dart index 45d20cad..5c391e35 100644 --- a/app/lib/common/theme.dart +++ b/app/lib/common/theme.dart @@ -84,6 +84,7 @@ class PharMeTheme { static const errorColor = Color(0xccf52a2a); static final borderColor = Colors.black.withOpacity(.2); static final iconColor = darkenColor(PharMeTheme.onSurfaceText, -0.1); + static final subheaderColor = Colors.grey[600]; static const smallSpace = 8.0; static const defaultPagePadding = smallSpace; diff --git a/app/lib/common/widgets/drug_list/builder.dart b/app/lib/common/widgets/drug_list/builder.dart index dc175388..80eec425 100644 --- a/app/lib/common/widgets/drug_list/builder.dart +++ b/app/lib/common/widgets/drug_list/builder.dart @@ -9,7 +9,7 @@ typedef DrugItemBuilder = List Function( } ); -class DrugList extends StatelessWidget { +class DrugList extends HookWidget { const DrugList({ super.key, required this.state, @@ -38,6 +38,7 @@ class DrugList extends StatelessWidget { BuildContext context, List drugs, FilterState filter, + ValueNotifier otherDrugsExpanded, ) { final filteredDrugs = filter.filter( drugs, @@ -66,7 +67,7 @@ class DrugList extends StatelessWidget { final otherDrugs = drugActivityChangeable ? filteredDrugs : filteredDrugs.filter((drug) => !drug.isActive).toList(); - final otherDrugsHeader = drugActivityChangeable + final otherDrugsHeaderText = drugActivityChangeable ? context.l10n.drug_list_subheader_all_drugs : context.l10n.drug_list_subheader_other_drugs; final allDrugsList = buildDrugItems( @@ -75,12 +76,19 @@ class DrugList extends StatelessWidget { showDrugInteractionIndicator: showDrugInteractionIndicator, keyPrefix: 'other-', ); + final otherDrugsHeader = SubheaderDivider( + text: '$otherDrugsHeaderText (${allDrugsList.length})', + key: Key('header-other'), + useLine: false, + ); + final currentlyExpanded = otherDrugsExpanded.value ?? false; final drugLists = [ if (activeDrugsList != null) ...[ ListTile( key: Key('header-active'), title: SubheaderDivider( - text: context.l10n.drug_list_subheader_active_drugs, + text: '${context.l10n.drug_list_subheader_active_drugs} ' + '(${activeDrugsList.length})', useLine: false, ), trailing: drugActivityChangeable @@ -99,18 +107,31 @@ class DrugList extends StatelessWidget { ...activeDrugsList, ], if (activeDrugsList != null && allDrugsList.isNotEmpty) - PrettyExpansionTile( - title: SubheaderDivider( - text: otherDrugsHeader, - key: Key('header-other'), - useLine: false, + ...[ + PrettyExpansionTile( + title: otherDrugsHeader, + enabled: filter.query.isBlank, + initiallyExpanded: currentlyExpanded || !filter.query.isBlank, + onExpansionChanged: (value) => otherDrugsExpanded.value = value, + visualDensity: VisualDensity.compact, + titlePadding: EdgeInsets.zero, + childrenPadding: EdgeInsets.zero, + children: allDrugsList, ), - initiallyExpanded: drugActivityChangeable || filter.query.isNotBlank, - visualDensity: VisualDensity.compact, - titlePadding: EdgeInsets.zero, - childrenPadding: EdgeInsets.zero, - children: allDrugsList, - ), + if (!currentlyExpanded) Padding( + key: Key('other-hidden-instruction'), + padding: EdgeInsets.symmetric(horizontal: PharMeTheme.smallSpace), + child: Text( + context.l10n.search_page_expand_help( + otherDrugsHeaderText.toLowerCase(), + ), + style: PharMeTheme.textTheme.bodySmall!.copyWith( + fontStyle: FontStyle.italic, + color: PharMeTheme.subheaderColor, + ), + ), + ), + ], if (activeDrugsList == null) ...allDrugsList, ]; return (buildContainer != null) @@ -120,10 +141,14 @@ class DrugList extends StatelessWidget { @override Widget build(BuildContext context) { + final otherDrugsExpanded = useState(null); return state.when( initial: SizedBox.shrink, error: () => errorIndicator(context.l10n.err_generic), - loaded: (allDrugs, filter) => _buildDrugList(context, allDrugs, filter), + loaded: (allDrugs, filter) { + otherDrugsExpanded.value ??= drugActivityChangeable; + return _buildDrugList(context, allDrugs, filter, otherDrugsExpanded); + }, loading: loadingIndicator, ); } diff --git a/app/lib/common/widgets/pretty_expansion_tile.dart b/app/lib/common/widgets/pretty_expansion_tile.dart index 22f11479..6ad6f52d 100644 --- a/app/lib/common/widgets/pretty_expansion_tile.dart +++ b/app/lib/common/widgets/pretty_expansion_tile.dart @@ -10,6 +10,7 @@ class PrettyExpansionTile extends StatelessWidget { this.titlePadding, this.childrenPadding, this.initiallyExpanded = false, + this.enabled = true, }); final Widget title; @@ -20,6 +21,7 @@ class PrettyExpansionTile extends StatelessWidget { final EdgeInsets? titlePadding; final EdgeInsets? childrenPadding; final bool initiallyExpanded; + final bool enabled; @override Widget build(BuildContext context) { @@ -29,6 +31,7 @@ class PrettyExpansionTile extends StatelessWidget { ), child: ExpansionTile( key: GlobalKey(), // force to rebuild + enabled: enabled, initiallyExpanded: initiallyExpanded, title: title, iconColor: PharMeTheme.iconColor, diff --git a/app/lib/common/widgets/subheader_divider.dart b/app/lib/common/widgets/subheader_divider.dart index 43b15522..c5de4e4c 100644 --- a/app/lib/common/widgets/subheader_divider.dart +++ b/app/lib/common/widgets/subheader_divider.dart @@ -16,7 +16,7 @@ class SubheaderDivider extends StatelessWidget { @override Widget build(BuildContext context) { - final widgetColor = color ?? Colors.grey[600]; + final widgetColor = color ?? PharMeTheme.subheaderColor; return Padding( padding: EdgeInsets.all(padding ?? PharMeTheme.smallSpace), child: Column( diff --git a/app/lib/l10n/app_en.arb b/app/lib/l10n/app_en.arb index 93145da7..d4782e7d 100644 --- a/app/lib/l10n/app_en.arb +++ b/app/lib/l10n/app_en.arb @@ -105,6 +105,15 @@ "@search_page_tooltip_search_no_class": {}, "search_page_filter_label": "Filter by guideline result", "@search_page_filter_label": {}, + "search_page_expand_help": "Expand list to view {listName}.", + "@search_page_expand_help": { + "placeholders": { + "listName": { + "type": "String", + "example": "other medications" + } + } + }, "search_page_indicator_explanation": "Taking medications with an {indicatorName} ({indicator}) can interact with your results for other medications", "@search_page_indicator_explanation": { "placeholders": {