Improve notification card UI

Expandable text, bold title, tighter padding.

ENGAGEHF/Dashboard/Notifications/Views/NotificationRow.swift

@@ -11,40 +11,35 @@ import SwiftUI
 
 
 struct NotificationRow: View {
-    @Binding var notification: Notification
-    @State private var isExpanded = false
+    let notification: Notification
+
+    @ScaledMetric private var spacing: CGFloat = 5
 
 
     var body: some View {
         VStack(alignment: .leading) {
             HStack(alignment: .center) {
-                Text(notification.type)
-                    .font(.subheadline)
+                Text(notification.type.localizedUppercase)
+                    .font(.footnote)
                     .foregroundStyle(.secondary)
                 Spacer()
-                XButton(notification: $notification)
+                XButton(notification: notification)
             }
             Divider()
             Text(notification.title)
+                .font(.subheadline)
+                .bold()
                 .multilineTextAlignment(.leading)
-                .padding(.bottom, 10)
-            if isExpanded {
-                Text(notification.description)
-                    .multilineTextAlignment(.leading)
-                    .font(.footnote)
-            } else {
-                LearnMoreButton(isExpanded: $isExpanded)
-            }
+                .padding(.bottom, spacing)
+            ExpandableText(text: notification.description, lineLimit: 1, spacing: spacing)
+                .font(.footnote)
         }
-            .onDisappear {
-                isExpanded = false
-            }
     }
 
 
     private struct XButton: View {
         @Environment(NotificationManager.self) private var notificationManager
-        @Binding var notification: Notification
+        let notification: Notification
 
 
         var body: some View {
@@ -60,6 +55,7 @@ struct NotificationRow: View {
                     Image(systemName: "xmark")
                         .foregroundStyle(.accent)
                         .imageScale(.small)
+                        .accessibilityLabel("XButton")
                 }
             )
         }
@@ -73,12 +69,10 @@ struct NotificationRow: View {
 
 
         var body: some View {
-            @Bindable var notificationManager = notificationManager
-
             List {
                 Section(
                     content: {
-                        ForEach($notificationManager.notifications, id: \.id) { notification in
+                        ForEach(notificationManager.notifications, id: \.id) { notification in
                             StudyApplicationListCard {
                                 NotificationRow(notification: notification)
                             }

ENGAGEHF/Dashboard/Notifications/Views/NotificationSection.swift

@@ -20,12 +20,10 @@ struct NotificationSection: View {
 
 
     var body: some View {
-        @Bindable var notificationManager = notificationManager
-
         Section(
             content: {
                 if !notificationManager.notifications.isEmpty {
-                    ForEach($notificationManager.notifications, id: \.id) { notification in
+                    ForEach(notificationManager.notifications, id: \.id) { notification in
                         StudyApplicationListCard {
                             NotificationRow(notification: notification)
                         }

ENGAGEHF/Resources/Localizable.xcstrings

@@ -533,6 +533,9 @@
           }
         }
       }
+    },
+    "XButton" : {
+
     }
   },
   "version" : "1.0"

ENGAGEHF/ReusableElements/ExpandableText.swift

@@ -0,0 +1,67 @@
+//
+// This source file is part of the ENGAGE-HF project based on the Stanford Spezi Template Application project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University
+//
+// SPDX-License-Identifier: MIT
+//
+// Based on:
+// https://stackoverflow.com/questions/59485532/swiftui-how-know-number-of-lines-in-text/75827200#75827200
+//
+
+import SwiftUI
+
+
+struct ExpandableText: View {
+    let text: String
+    let lineLimit: Int
+    @ScaledMetric var spacing: CGFloat
+
+    @State private var isExpanded = false
+    @State private var isTruncated: Bool? = nil
+
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: spacing) {
+            Text(text)
+                .lineLimit(isExpanded ? nil : lineLimit)
+                .background(calculateTruncation(text: text))
+
+            if isTruncated == true {
+                ShowMoreButton(isExpanded: $isExpanded)
+            }
+        }
+            .multilineTextAlignment(.leading)
+            // Re-calculate isTruncated for the new text
+            .onChange(of: text) { isTruncated = nil }
+            .onDisappear { isExpanded = false }
+    }
+
+
+    private func calculateTruncation(text: String) -> some View {
+        // Select the view that fits in the background of the line-limited text.
+        ViewThatFits(in: .vertical) {
+            Text(text)
+                .hidden()
+                .onAppear {
+                    // If the whole text fits, then isTruncated is set to false and no button is shown.
+                    guard isTruncated == nil else { return }
+                    isTruncated = false
+                }
+            Color(.clear)
+                .hidden()
+                .onAppear {
+                    // If the whole text does not fit, Color.clear is selected,
+                    // isTruncated is set to true and button is shown.
+                    guard isTruncated == nil else { return }
+                    isTruncated = true
+                }
+        }
+    }
+}
+
+
+#Preview {
+    let sampleText = "Your dose of XXX was changed. You can review medication information in the Education Page."
+    return ExpandableText(text: sampleText, lineLimit: 1, spacing: 5)
+}

ENGAGEHF/ReusableElements/LearnMoreButton.swift → ENGAGEHF/ReusableElements/ShowMoreButton.swift

@@ -9,9 +9,9 @@
 import SwiftUI
 
 
-struct LearnMoreButton: View {
+struct ShowMoreButton: View {
     private var labelText: String {
-        isExpanded ? "Done" : "Learn more..."
+        isExpanded ? "Show Less" : "Show more"
     }
 
     @Binding var isExpanded: Bool
@@ -37,7 +37,7 @@ struct LearnMoreButton: View {
 
 
         var body: some View {
-            LearnMoreButton(isExpanded: $isExpanded)
+            ShowMoreButton(isExpanded: $isExpanded)
         }
     }