From 6c82a63d64965f364e0ecf306c2a78a505e4120b Mon Sep 17 00:00:00 2001
From: dankito <git@dankito.net>
Date: Sun, 26 Jul 2020 23:31:04 +0200
Subject: [PATCH] Implemented expanding / collapsing long TAN hint texts

---
 .../Base.lproj/Localizable.strings            |  3 +
 .../de.lproj/Localizable.strings              |  3 +
 .../BankingiOSApp/ui/CollapsibleText.swift    | 76 +++++++++++++++++++
 .../ui/views/EnterTanDialog.swift             |  4 +-
 4 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 ui/BankingiOSApp/BankingiOSApp/ui/CollapsibleText.swift

diff --git a/ui/BankingiOSApp/BankingiOSApp/Base.lproj/Localizable.strings b/ui/BankingiOSApp/BankingiOSApp/Base.lproj/Localizable.strings
index 6260966f..dff088ed 100644
--- a/ui/BankingiOSApp/BankingiOSApp/Base.lproj/Localizable.strings
+++ b/ui/BankingiOSApp/BankingiOSApp/Base.lproj/Localizable.strings
@@ -4,6 +4,9 @@
 
 "Add" = "Add";
 
+"Show less ..." = "Show less ...";
+"Show all ..." = "Show all ...";
+
 "Bank" = "Bank";
 "Account" = "Account";
 "Accounts" = "Accounts";
diff --git a/ui/BankingiOSApp/BankingiOSApp/de.lproj/Localizable.strings b/ui/BankingiOSApp/BankingiOSApp/de.lproj/Localizable.strings
index 1ea59098..d5f33403 100644
--- a/ui/BankingiOSApp/BankingiOSApp/de.lproj/Localizable.strings
+++ b/ui/BankingiOSApp/BankingiOSApp/de.lproj/Localizable.strings
@@ -4,6 +4,9 @@
 
 "Add" = "Hinzufügen";
 
+"Show less ..." = "Weniger anzeigen ...";
+"Show all ..." = "Alles anzeigen ...";
+
 "Bank" = "Bank";
 "Account" = "Konto";
 "Accounts" = "Konten";
diff --git a/ui/BankingiOSApp/BankingiOSApp/ui/CollapsibleText.swift b/ui/BankingiOSApp/BankingiOSApp/ui/CollapsibleText.swift
new file mode 100644
index 00000000..5fd21686
--- /dev/null
+++ b/ui/BankingiOSApp/BankingiOSApp/ui/CollapsibleText.swift
@@ -0,0 +1,76 @@
+import SwiftUI
+
+
+/**
+    Adds a button to expand / collapse long texts.
+ 
+    Code copied in large parts from Rob Napier (see https://stackoverflow.com/a/63102244/8837882).
+ */
+struct CollapsibleText: View {
+
+    /* Indicates whether the user want to see all the text or not. */
+    @State private var isExpanded: Bool = false
+
+    /* Indicates whether the text has been truncated in its display. */
+    @State private var isTruncated: Bool = false
+
+    private var text: String
+
+    private var lineLimit: Int
+    
+
+    init(_ text: String, lineLimit: Int = 3) {
+        self.text = text
+        self.lineLimit = lineLimit
+    }
+    
+
+    var body: some View {
+        VStack(alignment: .leading) {
+            // Render the real text (which might or might not be limited)
+            Text(text)
+                .lineLimit(isExpanded ? nil : lineLimit)
+
+                .background(
+
+                    // Render the limited text and measure its size
+                    Text(text).lineLimit(lineLimit)
+                        .background(GeometryReader { displayedGeometry in
+
+                            // Create a ZStack with unbounded height to allow the inner Text as much
+                            // height as it likes, but no extra width.
+                            ZStack {
+
+                                // Render the text without restrictions and measure its size
+                                Text(self.text)
+                                    .background(GeometryReader { fullGeometry in
+
+                                        // And compare the two
+                                        Color.clear.onAppear {
+                                            self.isTruncated = fullGeometry.size.height > displayedGeometry.size.height
+                                        }
+                                    })
+                            }
+                            .frame(height: .greatestFiniteMagnitude)
+                        })
+                        .hidden() // Hide the background
+            )
+
+            if isTruncated {
+                Button(action: { self.isExpanded.toggle() }) {
+                    Text(self.isExpanded ? "Show less ..." : "Show all ...")
+                        .font(.caption)
+                }
+                .padding(.top, 2)
+            }
+        }
+    }
+    
+}
+
+
+struct LongText_Previews: PreviewProvider {
+    static var previews: some View {
+        CollapsibleText("Short text")
+    }
+}
diff --git a/ui/BankingiOSApp/BankingiOSApp/ui/views/EnterTanDialog.swift b/ui/BankingiOSApp/BankingiOSApp/ui/views/EnterTanDialog.swift
index a32296a7..a5ac94ed 100644
--- a/ui/BankingiOSApp/BankingiOSApp/ui/views/EnterTanDialog.swift
+++ b/ui/BankingiOSApp/BankingiOSApp/ui/views/EnterTanDialog.swift
@@ -120,12 +120,12 @@ struct EnterTanDialog: View {
                 }
                 
                 HStack {
-                    Text(tanChallenge.messageToShowToUser)
+                    CollapsibleText(tanChallenge.messageToShowToUser)
                     Spacer()
                 }
                 .padding(.top, 6)
             }
-            .padding(.vertical)
+            .padding(.vertical, 2)
             
             Section {
                 TextField("Enter TAN:", text: $enteredTan)