From b21a0786eb90bb4a9a291d2cdeeb78a36dc6a3bc Mon Sep 17 00:00:00 2001 From: Marc Stibane Date: Sun, 29 Oct 2023 20:03:57 +0100 Subject: 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 ") + @AppStorage("iconOnly") var iconOnly: Bool = false + + let inTitle0 = String(localized: "Incoming", comment: "Abbreviation ") + let inTitle1 = String(localized: "Pending", comment: "Top of line ") let inTitle2 = String(localized: "incoming", comment: "Bottom of line ") - let outTitle1 = String(localized: "pending", comment: "Top of line ") + let outTitle0 = String(localized: "Outgoing", comment: "Abbreviation ") + let outTitle1 = String(localized: "Pending", comment: "Top of line ") let outTitle2 = String(localized: "outgoing", comment: "Bottom of line ") 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: 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: 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) } -- cgit v1.2.3