[taler-taler-ios] 06/12: Pending color, sizes, alignment

[gnunet]

This is an automated email from the git hooks/post-receive script.

marc-stibane pushed a commit to branch master
in repository taler-ios.

commit b21a0786eb90bb4a9a291d2cdeeb78a36dc6a3bc
Author: Marc Stibane <marc@taler.net>
AuthorDate: Sun Oct 29 20:03:57 2023 +0100

    Pending color, sizes, alignment
---
 TalerWallet1/Views/Balances/BalanceRowView.swift |   4 +-
 TalerWallet1/Views/Balances/PendingRowView.swift | 123 ++++++++---------------
 TalerWallet1/Views/Balances/TwoRowButtons.swift  |  20 ++--
 TalerWallet1/Views/HelperViews/AmountRowV.swift  |  26 ++++-
 4 files changed, 77 insertions(+), 96 deletions(-)

diff --git a/TalerWallet1/Views/Balances/BalanceRowView.swift 
b/TalerWallet1/Views/Balances/BalanceRowView.swift
index afead75..db5b951 100644
--- a/TalerWallet1/Views/Balances/BalanceRowView.swift
+++ b/TalerWallet1/Views/Balances/BalanceRowView.swift
@@ -22,8 +22,8 @@ struct BalanceButton: View {
                     let needVStack = !iconOnly && Self.needVStack(titles, 
width: width,
                                                                   
sizeCategory: sizeCategory,
                                                                   padding: 20, 
sameSize: false)
-                    AmountRowV(amountStr: amountStr, largeAmountFont: true,
-                               fitsHorizontal: !needVStack) {
+                    AmountRowV(amountStr: amountStr, amountColor: .primary, 
largeAmountFont: true,
+                               fitsHorizontal: !needVStack, vertAlignment: 
.lastTextBaseline) {
                         Text(iconOnly ? "" : balanceTitle)
                             .accessibilityFont(.title2)
                             .foregroundColor(.secondary)
diff --git a/TalerWallet1/Views/Balances/PendingRowView.swift 
b/TalerWallet1/Views/Balances/PendingRowView.swift
index b73f85d..a8b9293 100644
--- a/TalerWallet1/Views/Balances/PendingRowView.swift
+++ b/TalerWallet1/Views/Balances/PendingRowView.swift
@@ -6,92 +6,59 @@ import SwiftUI
 import taler_swift
 
 struct InOrOutView: View {
-    let title: (String, String)
-    let horizontal: Bool
+    let titles: (String, String?)
+    let isHorizontal: Bool
     let incoming: Bool
     let imageName: String
 
-    public static func width(image1: String, title1: String, title2: String) 
-> CGFloat {
+    public static func width(image1: String, titles: (String, String?), 
isHorizontal: Bool) -> CGFloat {
         let imageFont = TalerFont.uiFont(.largeTitle)
         let uiFont = TalerFont.uiFont(.body)
 
         let image2 = "++"
-        let imageWidth = image2.widthOfString(usingUIFont: imageFont) + 8.0    
 //.padding(.trailing)
+        let imageWidth = image2.widthOfString(usingUIFont: imageFont) + 8.0    
 // spacing: 8
+        let (title1, title2) = titles
         let title1Width = title1.widthOfString(usingUIFont: uiFont)
-        let title2Width = title2.widthOfString(usingUIFont: uiFont)
-    print("image: ", imageWidth, " title: ", max(title1Width, title2Width))
+        var title2Width = 0.0
+        var totalWidth = title1Width
+        if let title2 {
+            title2Width = title2.widthOfString(usingUIFont: uiFont)
+            let totalStr = title1 + " " + title2
+            totalWidth = totalStr.widthOfString(usingUIFont: uiFont)
+        }
+
+//    let logStr = String(format: "image: %.2f   title: %.2f   total: %.2f", 
imageWidth, max(title1Width, title2Width), totalWidth)
+//    print(logStr)
         return imageWidth + max(title1Width, title2Width)
     }
 
     var body: some View {
-        let (title1, title2) = title
-        HStack(spacing: 5) {
+        HStack(spacing: 8) {
             let pendingColor = WalletColors().pendingColor(incoming)
             Image(systemName: imageName)
                 .foregroundColor(pendingColor)
                 .accessibilityFont(.largeTitle)
                 .accessibility(hidden: true)
-//                .padding(.trailing)
-            Text(horizontal ? (title1 + "\n" + title2)
-                            : (title1 + " " + title2))
-                .lineLimit(2)
+            Text(title(titles, isHorizontal))
+                .lineLimit(4)
                 .accessibilityFont(.body)
         }
     }
 }
 
-struct PendingAmountView: View {
-    let amount: Amount
-    let currencyInfo: CurrencyInfo?
-    let incoming: Bool
-
-    public static func width(amount: Amount, currencyInfo: CurrencyInfo?, 
incoming: Bool) -> CGFloat {
-        let valueStr = amount.string(currencyInfo)
-        let uiFont = TalerFont.uiFont(.title)
-        let width = valueStr.widthOfString(usingUIFont: uiFont)
-//    print("Amount width: ", width)
-        return width
-    }
-
-    var body: some View {
-        let pendingColor = WalletColors().pendingColor(incoming)
-        let valueStr = amount.string(currencyInfo)
-        Text(valueStr)
-            .foregroundColor(pendingColor)
-            .accessibilityFont(.title)
-            .monospacedDigit()
-    }
-}
-
-struct PendingLabel: View {
-    let amount: Amount
-    let currencyInfo: CurrencyInfo?
-    let incoming: Bool
-    let horizontal: Bool        // true: HStack{ image + pending Xcoming + 
amount }
-    let title: (String, String)
-    let imageName: String
-
-    var body: some View {
-        Group {         // can either be horizontal (preferred) or vertical 
(if doesn't fit horizontally)
-            InOrOutView(title: title, horizontal: horizontal, incoming: 
incoming, imageName: imageName)
-            if horizontal {     // Group is an HStack already => just add 
Spacer + Amount
-                Spacer(minLength: 0)
-                PendingAmountView(amount: amount, currencyInfo: currencyInfo, 
incoming: incoming)
-            } else {            // Group is a VStack => need HStack + Spacer 
to shift Amount to the trailing edge
-                HStack(spacing: 0) {
-                    Spacer(minLength: 0)
-                    PendingAmountView(amount: amount, currencyInfo: 
currencyInfo, incoming: incoming)
-}   }   }   }   }
-
 /// This view shows a pending transaction row in a currency section
 struct PendingRowView: View {
     let amount: Amount
     let currencyInfo: CurrencyInfo?
     let incoming: Bool
 
-    let inTitle1 = String(localized: "pending", comment: "Top of line <pending 
incoming>")
+    @AppStorage("iconOnly") var iconOnly: Bool = false
+
+    let inTitle0 = String(localized: "Incoming", comment: "Abbreviation 
<pending incoming>")
+    let inTitle1 = String(localized: "Pending", comment: "Top of line <Pending 
incoming>")
     let inTitle2 = String(localized: "incoming", comment: "Bottom of line 
<pending incoming>")
-    let outTitle1 = String(localized: "pending", comment: "Top of line 
<pending outgoing>")
+    let outTitle0 = String(localized: "Outgoing", comment: "Abbreviation 
<pending outgoing>")
+    let outTitle1 = String(localized: "Pending", comment: "Top of line 
<Pending outgoing>")
     let outTitle2 = String(localized: "outgoing", comment: "Bottom of line 
<pending outgoing>")
 
     func needVStack(available: CGFloat, inOrOutWidth: CGFloat, valueWidth: 
CGFloat) -> Bool {
@@ -99,35 +66,31 @@ struct PendingRowView: View {
     }
 
     var body: some View {
-        let imageName = incoming ? "plus.circle.fill"
-                                 : "minus.circle.fill"
+        let imageName = incoming ? "plus.circle"        // .fill
+                                 : "minus.circle"       // .fill
         let imageStr = String("\(Image(systemName: imageName))")
+        let pendingColor = WalletColors().pendingColor(incoming)
         SingleAxisGeometryReader { width in
             Group {
-                let title = incoming ? (inTitle1, inTitle2)
-                                     : (outTitle1, outTitle2)
+                let amountStr = amount.string(currencyInfo)
+                let amountWidth = amountStr.width(largeAmountFont: false)
+                let inTitle = iconOnly ? (inTitle0, nil)
+                                       : (inTitle1, inTitle2)
+                let outTitle = iconOnly ? (outTitle0, nil)
+                                        : (outTitle1, outTitle2)
+                let title = incoming ? inTitle
+                                     : outTitle
                 let inOrOutWidth = InOrOutView.width(image1: imageStr,
-                                                     title1: incoming ? 
inTitle1 : outTitle1,
-                                                     title2: incoming ? 
inTitle2 : outTitle2)
-                let valueWidth = PendingAmountView.width(amount: amount,
-                                                   currencyInfo: currencyInfo,
-                                                       incoming: incoming)
-//    let _ = print(width, " - ", inOrOutWidth + valueWidth, " = ", width - 
(inOrOutWidth + valueWidth))
-                if needVStack(available: width, inOrOutWidth: inOrOutWidth, 
valueWidth: valueWidth) {
-                    VStack(alignment: .leading, spacing: 0) {
-                        PendingLabel(amount: amount, currencyInfo: 
currencyInfo,
-                                   incoming: incoming, horizontal: false,
-                                      title: title,     imageName: imageName)
-                    }
-                } else {
-                    HStack(spacing: 0) {
-                        PendingLabel(amount: amount, currencyInfo: 
currencyInfo,
-                                   incoming: incoming, horizontal: true,
-                                      title: title,     imageName: imageName)
-                    }
+                                                     titles: incoming ? 
inTitle : outTitle,
+                                                     isHorizontal: true)
+
+                let needVStack = needVStack(available: width, inOrOutWidth: 
inOrOutWidth, valueWidth: amountWidth)
+                AmountRowV(amountStr: amountStr, amountColor: pendingColor, 
largeAmountFont: false,
+                           fitsHorizontal: !needVStack, vertAlignment: 
.center) {
+                    // isHorizontal=true to try to fit "- Pending outgoing" + 
amount in 1 line
+                    InOrOutView(titles: title, isHorizontal: true, incoming: 
incoming, imageName: imageName)
                 }
             }
-            .accessibilityElement(children: .combine)
         }
     }
 }
diff --git a/TalerWallet1/Views/Balances/TwoRowButtons.swift 
b/TalerWallet1/Views/Balances/TwoRowButtons.swift
index 08b62bc..1b67af3 100644
--- a/TalerWallet1/Views/Balances/TwoRowButtons.swift
+++ b/TalerWallet1/Views/Balances/TwoRowButtons.swift
@@ -5,6 +5,17 @@
 import SwiftUI
 import taler_swift
 
+extension View {
+    func title(_ titles: (String, String?), _ horizontal: Bool) -> String {
+        let delimiter = horizontal ? " " : "\n"
+        let (title1, title2) = titles
+        if let title2 {
+            return title1 + delimiter + title2
+        } else {
+            return title1
+        }
+    }
+}
 struct TwoRowButtons: View {
     let sendTitles: (String, String?)
     let recvTitles: (String, String?)
@@ -15,15 +26,6 @@ struct TwoRowButtons: View {
     let recvAction: () -> Void
     @Environment(\.sizeCategory) var sizeCategory
     
-    func title(_ titles: (String, String?), _ horizontal: Bool) -> String {
-        let delimiter = horizontal ? " " : "\n"
-        let (title1, title2) = titles
-        if let title2 {
-            return title1 + delimiter + title2
-        } else {
-            return title1
-        }
-    }
 
     var body: some View {
         Group {
diff --git a/TalerWallet1/Views/HelperViews/AmountRowV.swift 
b/TalerWallet1/Views/HelperViews/AmountRowV.swift
index f3307af..99f1ea3 100644
--- a/TalerWallet1/Views/HelperViews/AmountRowV.swift
+++ b/TalerWallet1/Views/HelperViews/AmountRowV.swift
@@ -10,19 +10,30 @@ import taler_swift
 // if it fits side by side, then render HStack(content(compact), Spacer(), 
amountStr)
 // else render VStack(content(wide), HStack(Spacer(), amountStr))
 
+extension String {
+    public func width(largeAmountFont: Bool) -> CGFloat {
+        let uiFont = TalerFont.uiFont(largeAmountFont ? .title : .title2)
+        return widthOfString(usingUIFont: uiFont)
+    }
+}
+
 struct AmountRowV<Content: View>: View {
     let amountStr: String
+    let amountColor: Color
     let largeAmountFont: Bool
     let fitsHorizontal: Bool
+    let vertAlignment: VerticalAlignment
 
     var content: () -> Content
 
+
     var body: some View {
         if fitsHorizontal {
-            HStack(alignment: .lastTextBaseline, spacing: 0) {
+            HStack(alignment: vertAlignment, spacing: 0) {
                 content()
                 Spacer(minLength: 0)
                 Text(amountStr)
+                    .foregroundColor(amountColor)
                     .accessibilityFont(largeAmountFont ? .title : .title2)
                     .monospacedDigit()
             }
@@ -32,6 +43,7 @@ struct AmountRowV<Content: View>: View {
                 HStack {
                     Spacer(minLength: 0)
                     Text(amountStr)
+                        .foregroundColor(amountColor)
                         .accessibilityFont(largeAmountFont ? .title : .title2)
                         .monospacedDigit()
                 }
@@ -53,21 +65,25 @@ struct SectionWithAmountRow: View {
         let demoStr = demo.string(demoInfo)
         List {
             Section {
-                AmountRowV(amountStr: demoStr, largeAmountFont: true, 
fitsHorizontal: true) {
+                AmountRowV(amountStr: demoStr, amountColor: .primary, 
largeAmountFont: true,
+                           fitsHorizontal: true, vertAlignment: 
.lastTextBaseline) {
                     Text("Balance")
                         .accessibilityFont(.title2)
                 }
-                AmountRowV(amountStr: demoStr, largeAmountFont: true, 
fitsHorizontal: false) {
+                AmountRowV(amountStr: demoStr, amountColor: .primary, 
largeAmountFont: true,
+                           fitsHorizontal: false, vertAlignment: 
.lastTextBaseline) {
                     Text("Balance")
                         .accessibilityFont(.title2)
                 }
             }
             Section {
-                AmountRowV(amountStr: testStr, largeAmountFont: false, 
fitsHorizontal: true) {
+                AmountRowV(amountStr: testStr, amountColor: .secondary, 
largeAmountFont: false,
+                           fitsHorizontal: true, vertAlignment: 
.lastTextBaseline) {
                     Text("Balance")
                         .accessibilityFont(.title2)
                 }
-                AmountRowV(amountStr: testStr, largeAmountFont: false, 
fitsHorizontal: false) {
+                AmountRowV(amountStr: testStr, amountColor: .secondary, 
largeAmountFont: false,
+                           fitsHorizontal: false, vertAlignment: 
.lastTextBaseline) {
                     Text("Balance")
                         .accessibilityFont(.title2)
                 }

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.