feat(app): uniformly style list descriptions

hpi-dhc · Jan 22, 2025 · e0d4012 · e0d4012
1 parent 92b9413
commit e0d4012
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 37 deletions.
diff --git a/app/lib/common/widgets/drug_list/builder.dart b/app/lib/common/widgets/drug_list/builder.dart
@@ -83,24 +83,24 @@ class DrugList extends HookWidget {
       showDrugInteractionIndicator: showDrugInteractionIndicator,
       keyPrefix: 'other-',
     );
-    final otherDrugsHeader = SubheaderDivider(
-      text: '$otherDrugsHeaderText (${allDrugsList.length})',
+    final otherDrugsHeader = ListDescription(
       key: Key('header-other'),
-      useLine: false,
+      textParts: [boldListDescriptionText(otherDrugsHeaderText)],
+      detailsText: allDrugsList.length.toString(),
     );
     final currentlyExpanded = otherDrugsExpanded.value ?? false;
     final currentlyEnabled = !drugActivityChangeable && filter.query.isBlank;
     final drugLists = [
       if (activeDrugsList != null) ...[
-        ListTile(
+        ListDescription(
           key: Key('header-active'),
-          title: SubheaderDivider(
-            text: '${context.l10n.drug_list_subheader_active_drugs} '
-              '(${activeDrugsList.length})',
-            useLine: false,
-          ),
-          visualDensity: VisualDensity.compact,
-          contentPadding: EdgeInsets.zero,
+          textParts: [
+            boldListDescriptionText(
+              context.l10n.drug_list_subheader_active_drugs,
+              color: PharMeTheme.primaryColor,
+            ),
+          ],
+          detailsText: activeDrugsList.length.toString(),
         ),
         ...activeDrugsList,
       ],

diff --git a/app/lib/common/widgets/list_description.dart b/app/lib/common/widgets/list_description.dart
@@ -0,0 +1,46 @@
+import '../module.dart';
+
+TextSpan boldListDescriptionText(String text, { Color? color }) => TextSpan(
+  text: text,
+  style: TextStyle(
+    fontWeight: FontWeight.bold,
+    color: color ?? PharMeTheme.iconColor,
+  ),
+);
+
+class ListDescription extends StatelessWidget {
+  const ListDescription({
+    super.key,
+    required this.textParts,
+    required this.detailsText,
+  });
+
+  final List<TextSpan> textParts;
+  final String detailsText;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.symmetric(
+        vertical: PharMeTheme.mediumSpace,
+        horizontal: PharMeTheme.smallSpace,
+      ),
+      child: Text.rich(
+        style: subheaderDividerStyle(color: PharMeTheme.onSurfaceText),
+        TextSpan(
+          children: [
+            ...textParts,
+            TextSpan(text: ' '),
+            TextSpan(text: context.l10n.list_subheader_postfix),
+            TextSpan(text: ' '),
+            TextSpan(
+              text: '($detailsText)',
+              style: TextStyle(color: PharMeTheme.buttonColor),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+}
diff --git a/app/lib/common/widgets/module.dart b/app/lib/common/widgets/module.dart
@@ -19,6 +19,7 @@ export 'headings.dart';
 export 'hyperlink.dart';
 export 'indicators.dart';
 export 'lifecycle_observer.dart';
+export 'list_description.dart';
 export 'page_description.dart';
 export 'page_indicator_explanation.dart';
 export 'page_scaffold.dart';

diff --git a/app/lib/l10n/app_en.arb b/app/lib/l10n/app_en.arb
@@ -64,10 +64,12 @@
 
   "drug_list_subheader_active_drugs": "Current medications",
   "@drug_list_subheader_active_drugs": {},
-  "drug_list_subheader_all_drugs": "All medications with known gene interactions",
+  "drug_list_subheader_all_drugs": "All medications",
   "@drug_list_subheader_all_drugs": {},
-  "drug_list_subheader_other_drugs": "Further medications with known gene interactions",
+  "drug_list_subheader_other_drugs": "Further medications",
   "@drug_list_subheader_other_drugs": {},
+  "list_subheader_postfix": "with clinical PGx guidelines",
+  "@list_subheader_postfix": {},
 
   "err_could_not_retrieve_access_token": "An unexpected error occurred while logging in",
   "@err_could_not_retrieve_access_token": {},
@@ -291,7 +293,7 @@
   "@report_description_prefix": {},
   "report_current_medications": "current medication interactions",
   "@report_current_medications": {},
-  "report_all_medications": "all known clinically relevant medication interactions",
+  "report_all_medications": "all medication interactions",
   "@report_all_medications": {},
   "report_gene_number": "{geneNumber, plural, =1{1 gene} other{{geneNumber} genes}}",
   "@report_gene_number": {

diff --git a/app/lib/report/pages/report.dart b/app/lib/report/pages/report.dart
@@ -198,7 +198,10 @@ class ReportPage extends HookWidget {
   Widget _listDescription(
     BuildContext context,
     String label,
-    { required List<String>? drugsToFilterBy }
+    {
+      required List<String>? drugsToFilterBy,
+      Color? labelColor,
+    }
   ) {
     final genotypes = _getRelevantGenotypes(
       drugsToFilterBy,
@@ -209,28 +212,16 @@ class ReportPage extends HookWidget {
         drugSubset: drugsToFilterBy,
       )
     ).toSet();
-    return Padding(
-      key: Key('list-description-$label'),
-      padding: EdgeInsets.symmetric(
-        vertical: PharMeTheme.mediumSpace,
-        horizontal: PharMeTheme.smallSpace,
-      ),
-      child: Text.rich(
-        style: subheaderDividerStyle(),
-        TextSpan(
-          children: [
-            TextSpan(text: context.l10n.report_description_prefix),
-            TextSpan(text: ' '),
-            TextSpan(text: label, style: TextStyle(fontWeight: FontWeight.bold)),
-            TextSpan(text: ' '),
-            TextSpan(
-              text: '(${context.l10n.report_gene_number(genotypes.length)}, '
-                '${context.l10n.report_medication_number(affectedDrugs.length)})',
-              style: TextStyle(color: PharMeTheme.buttonColor),
-            ),
-          ],
-        ),
-      ),
+    return ListDescription(
+      key: Key('report-list-description-$label'),
+      textParts: [
+        TextSpan(text: context.l10n.report_description_prefix),
+        TextSpan(text: ' '),
+        boldListDescriptionText(label, color: labelColor),
+      ],
+      detailsText:
+        '${context.l10n.report_gene_number(genotypes.length)}, '
+        '${context.l10n.report_medication_number(affectedDrugs.length)}',
     );
   }
 
@@ -266,6 +257,7 @@ class ReportPage extends HookWidget {
         context,
         context.l10n.report_current_medications,
         drugsToFilterBy: activeDrugs.names,
+        labelColor: PharMeTheme.primaryColor,
       ),
       ...currentMedicationGenes,
       PrettyExpansionTile(