feat(app): structure guideline card

hpi-dhc · Mar 22, 2024 · e9752bf · e9752bf
1 parent 24d3014
commit e9752bf
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 48 deletions.
diff --git a/app/lib/drug/widgets/annotation_cards/disclaimer.dart b/app/lib/drug/widgets/annotation_cards/disclaimer.dart
@@ -1,8 +1,9 @@
 import '../../../common/module.dart';
 
 class Disclaimer extends StatelessWidget {
-  const Disclaimer({this.text});
+  const Disclaimer({ this.description, this.text });
 
+  final String? description;
   final String? text;
 
   @override
@@ -16,22 +17,26 @@ class Disclaimer extends StatelessWidget {
         color: PharMeTheme.surfaceColor,
         border: Border.all(color: PharMeTheme.errorColor, width: 1.2),
       ),
-      child: Row(children: [
-        Icon(
-          Icons.warning_rounded,
-          size: PharMeTheme.largeSpace,
-          color: PharMeTheme.errorColor,
-        ),
-        SizedBox(width: PharMeTheme.smallSpace),
-        Flexible(
-          child: Text(
-            text ?? context.l10n.drugs_page_disclaimer,
-            style: PharMeTheme.textTheme.labelMedium!.copyWith(
-              fontWeight: FontWeight.w300,
+      child: Text.rich(
+        TextSpan(children: [
+          WidgetSpan(
+            child: Icon(
+              Icons.warning_rounded,
+              size: PharMeTheme.mediumSpace,
+              color: PharMeTheme.errorColor,
             ),
           ),
+          TextSpan(text: ' '),
+          TextSpan(
+            text: description ?? context.l10n.drugs_page_disclaimer_description,
+            style: TextStyle(fontWeight: FontWeight.bold),
+          ),
+          TextSpan(text: text ?? context.l10n.drugs_page_disclaimer_text),
+        ]),
+        style: PharMeTheme.textTheme.labelMedium!.copyWith(
+          fontWeight: FontWeight.w300,
         ),
-      ]),
+      ),
     );
   }
 }
diff --git a/app/lib/drug/widgets/annotation_cards/guideline.dart b/app/lib/drug/widgets/annotation_cards/guideline.dart
@@ -9,6 +9,7 @@ enum WarfarinContent {
   recommendation,
   color,
   icon,
+  heading,
 }
 
 final warfarinProperties = <WarfarinContent, dynamic Function(BuildContext)>{
@@ -20,6 +21,7 @@ final warfarinProperties = <WarfarinContent, dynamic Function(BuildContext)>{
     context.l10n.drugs_page_recommendation_warfarin,
   WarfarinContent.color: (_) => WarningLevel.none.color,
   WarfarinContent.icon: (_) => WarningLevel.none.icon,
+  WarfarinContent.heading: (context) => WarningLevel.none.getLabel(context),
 };
 
 class GuidelineAnnotationCard extends StatelessWidget {
@@ -60,32 +62,32 @@ class GuidelineAnnotationCard extends StatelessWidget {
   }
 
   dynamic actualOrWarfarinContent(String drugName, BuildContext context, {
-    required dynamic actual,
-    required WarfarinContent content,
+    required dynamic actualContent,
+    required WarfarinContent warfarinContent,
   }) {
     if (drugName.toLowerCase() == 'warfarin') {
-      final getWarfarinContent = warfarinProperties[content]!;
+      final getWarfarinContent = warfarinProperties[warfarinContent]!;
       return getWarfarinContent(context);
     }
-    return actual;
+    return actualContent;
   }
 
   Widget _buildCard(BuildContext context) {
-    final upperCardText = actualOrWarfarinContent(
+    final implicationText = actualOrWarfarinContent(
       drug.name,
       context,
-      actual: drug.userGuideline?.annotations.implication ??
+      actualContent: drug.userGuideline?.annotations.implication ??
         context.l10n.drugs_page_no_guidelines_for_phenotype_implication(
           drug.name
         ),
-      content: WarfarinContent.implication,
+      warfarinContent: WarfarinContent.implication,
     );
-    final lowerCardText = actualOrWarfarinContent(
+    final recommendationText = actualOrWarfarinContent(
       drug.name,
       context,
-      actual: drug.userGuideline?.annotations.recommendation ??
+      actualContent: drug.userGuideline?.annotations.recommendation ??
         context.l10n.drugs_page_no_guidelines_for_phenotype_recommendation,
-      content: WarfarinContent.recommendation,
+      warfarinContent: WarfarinContent.recommendation,
     );
     return RoundedCard(
       key: Key('annotationCard'),
@@ -95,35 +97,59 @@ class GuidelineAnnotationCard extends StatelessWidget {
       color: actualOrWarfarinContent(
         drug.name,
         context,
-        actual: drug.warningLevel.color,
-        content: WarfarinContent.color
+        actualContent: drug.warningLevel.color,
+        warfarinContent: WarfarinContent.color,
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Row(children: [
-            Icon(
-              actualOrWarfarinContent(
-                drug.name,
-                context,
-                actual: drug.warningLevel.icon,
-                content: WarfarinContent.icon
+          Text.rich(
+            TextSpan(children: [
+              WidgetSpan(
+                alignment: PlaceholderAlignment.middle,
+                child: Icon(
+                  actualOrWarfarinContent(
+                    drug.name,
+                    context,
+                    actualContent: drug.warningLevel.icon,
+                    warfarinContent: WarfarinContent.icon,
+                  ),
+                  color: PharMeTheme.onSurfaceText,
+                  size: PharMeTheme.mediumToLargeSpace,
+                ),
               ),
-              color: PharMeTheme.onSurfaceText,
-              size: PharMeTheme.largeSpace,
+              TextSpan(
+                text: ' ${actualOrWarfarinContent(
+                  drug.name,
+                  context,
+                  actualContent: drug.warningLevel.getLabel(context),
+                  warfarinContent: WarfarinContent.heading,
+                )}',
+              ),
+            ]),
+            style: PharMeTheme.textTheme.titleMedium!.copyWith(
+              fontWeight: FontWeight.bold,
             ),
-            SizedBox(width: PharMeTheme.smallToMediumSpace),
-            Flexible(
-              child: Text(
-                upperCardText,
-                style: PharMeTheme.textTheme.bodyMedium,
+          ),
+          SizedBox(height: PharMeTheme.smallToMediumSpace),
+          Text.rich(
+            TextSpan(children: [
+              TextSpan(
+                text: context.l10n.drugs_page_implication_description,
+                style: TextStyle(fontWeight: FontWeight.bold),
               ),
-            )
-          ]),
+              TextSpan(text: implicationText),
+            ]),
+          ),
           SizedBox(height: PharMeTheme.smallToMediumSpace),
-          Text(
-            lowerCardText,
-            style: PharMeTheme.textTheme.bodyMedium,
+          Text.rich(
+            TextSpan(children: [
+              TextSpan(
+                text: context.l10n.drugs_page_recommendation_description,
+                style: TextStyle(fontWeight: FontWeight.bold),
+              ),
+              TextSpan(text: recommendationText),
+            ]),
           ),
           if (drug.userGuideline != null) ...[
             SizedBox(height: PharMeTheme.smallToMediumSpace),
@@ -156,8 +182,8 @@ class GuidelineAnnotationCard extends StatelessWidget {
     return actualOrWarfarinContent(
       drug.name,
       context,
-      actual: actualTooltip,
-      content: WarfarinContent.tooltip,
+      actualContent: actualTooltip,
+      warfarinContent: WarfarinContent.tooltip,
     );
   }
 

diff --git a/app/lib/l10n/app_en.arb b/app/lib/l10n/app_en.arb
@@ -83,7 +83,8 @@
         }
     }
   },
-  "drugs_page_disclaimer": "Please note that the information shown on this page is ONLY based on your DNA and certain medications you are currently taking. Other important factors like weight, age, pre-existing conditions, and further medication interactions are not considered.",
+  "drugs_page_disclaimer_description": "Please note: ",
+  "drugs_page_disclaimer_text": "The information shown on this page is ONLY based on your DNA and certain medications you are currently taking. Other important factors like weight, age, pre-existing conditions, and further medication interactions are not considered.",
   "drugs_page_is_inhibitor": "Taking {drugName} can influence your results for the following gene(s): {genes}",
   "@drugs_page_is_inhibitor": {
     "placeholders": {
@@ -206,6 +207,8 @@
   "drugs_page_tooltip_missing_guideline_not_tested": "Guidelines provide recommendations on which medications to use based on your DNA. However, your genetic test result does not include the information needed to make such a recommendation for this medication.",
 
   "drugs_page_tooltip_warfarin": "CPIC guidelines provide recommendations on which medications to use based on your DNA. However, to calculate your warfarin dose, more information is needed.",
+  "drugs_page_implication_description": "Why: ",
+  "drugs_page_recommendation_description": "What to do: ",
   "drugs_page_implication_warfarin": "More information is needed to calculate your warfarin dose.",
   "drugs_page_recommendation_warfarin": "Consult your pharmacist or doctor for more information.",