From 02d74ff3120df90cbce0a474c055b0d64290af1e Mon Sep 17 00:00:00 2001 From: Josh Heald Date: Thu, 30 Jan 2025 18:12:03 +0000 Subject: [PATCH 1/6] =?UTF-8?q?Only=20show=20cart=20item=20images=20when?= =?UTF-8?q?=20it=E2=80=99s=20wide=20enough?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Classes/POS/Presentation/CartView.swift | 50 +++++++++++++++++++ .../POS/Presentation/ItemRowView.swift | 7 +-- 2 files changed, 54 insertions(+), 3 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CartView.swift b/WooCommerce/Classes/POS/Presentation/CartView.swift index 199d8bec1cd..0ebda16998a 100644 --- a/WooCommerce/Classes/POS/Presentation/CartView.swift +++ b/WooCommerce/Classes/POS/Presentation/CartView.swift @@ -14,6 +14,9 @@ struct CartView: View { posModel.cart.isNotEmpty && offSetPosition < 0 } + @State private var shouldShowItemImages: Bool = false + @State private var cartListWidth: CGFloat = 0 + var body: some View { VStack { DynamicHStack(spacing: Constants.cartHeaderSpacing) { @@ -70,6 +73,7 @@ struct CartView: View { VStack(spacing: Constants.cartItemSpacing) { ForEach(posModel.cart, id: \.id) { cartItem in ItemRowView(cartItem: cartItem, + showImage: $shouldShowItemImages, onItemRemoveTapped: posModel.orderStage == .building ? { posModel.remove(cartItem: cartItem) } : nil) @@ -81,7 +85,18 @@ struct CartView: View { .background(GeometryReader { geometry in Color.clear.preference(key: ScrollOffSetPreferenceKey.self, value: geometry.frame(in: coordinateSpace).origin.y) + .onAppear { + cartListWidth = geometry.size.width + updateItemImageVisibility(width: geometry.size.width) + } + .onChange(of: geometry.size.width) { + cartListWidth = $0 + updateItemImageVisibility(width: $0) + } }) + .onChange(of: dynamicTypeSize) { + updateItemImageVisibility(dynamicTypeSize: $0) + } .onPreferenceChange(ScrollOffSetPreferenceKey.self) { position in self.offSetPosition = position } @@ -156,6 +171,41 @@ private extension CartView { cart: posModel.cart, orderStage: posModel.orderStage) } + + func updateItemImageVisibility(dynamicTypeSize: DynamicTypeSize? = nil, width: CGFloat? = nil) { + let width = width ?? cartListWidth + let newVisibility = width >= minimumWidthToShowItemImages(with: dynamicTypeSize ?? self.dynamicTypeSize) + DDLogInfo("Item row width: \(cartListWidth)") + guard newVisibility != shouldShowItemImages else { + return + } + shouldShowItemImages = newVisibility + } + + func minimumWidthToShowItemImages(with dynamicTypeSize: DynamicTypeSize) -> CGFloat { + switch dynamicTypeSize { + case .xSmall, .small: + 240 + case .medium: + 260 + case .large: + 270 + case .xLarge: + 280 + case .xxLarge, .xxxLarge: + 300 + case .accessibility1: + 320 + case .accessibility2: + 400 + case .accessibility3, .accessibility4: + 420 + case .accessibility5: + 450 + @unknown default: + 450 + } + } } private extension CartView { diff --git a/WooCommerce/Classes/POS/Presentation/ItemRowView.swift b/WooCommerce/Classes/POS/Presentation/ItemRowView.swift index 204a79ba0f3..c934592f249 100644 --- a/WooCommerce/Classes/POS/Presentation/ItemRowView.swift +++ b/WooCommerce/Classes/POS/Presentation/ItemRowView.swift @@ -5,11 +5,12 @@ struct ItemRowView: View { private let onItemRemoveTapped: (() -> Void)? @ScaledMetric private var scale: CGFloat = 1.0 - @Environment(\.dynamicTypeSize) var dynamicTypeSize @Environment(\.colorScheme) var colorScheme + @Binding private var showProductImage: Bool - init(cartItem: CartItem, onItemRemoveTapped: (() -> Void)? = nil) { + init(cartItem: CartItem, showImage: Binding = .constant(true), onItemRemoveTapped: (() -> Void)? = nil) { self.cartItem = cartItem + self._showProductImage = showImage self.onItemRemoveTapped = onItemRemoveTapped } @@ -57,7 +58,7 @@ struct ItemRowView: View { @ViewBuilder private var productImage: some View { - if dynamicTypeSize >= .accessibility3 { + if !showProductImage { EmptyView() } else if let imageSource = cartItem.item.productImageSource { ProductImageThumbnail(productImageURL: URL(string: imageSource), From f049a8e8d2d4bb7aa4a7f4e81a62738d7691c0dc Mon Sep 17 00:00:00 2001 From: Josh Heald Date: Fri, 31 Jan 2025 08:51:47 +0000 Subject: [PATCH 2/6] Cell padding when the cart item image is hidden --- WooCommerce/Classes/POS/Presentation/ItemRowView.swift | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/ItemRowView.swift b/WooCommerce/Classes/POS/Presentation/ItemRowView.swift index c934592f249..aa2ad08052a 100644 --- a/WooCommerce/Classes/POS/Presentation/ItemRowView.swift +++ b/WooCommerce/Classes/POS/Presentation/ItemRowView.swift @@ -59,7 +59,8 @@ struct ItemRowView: View { @ViewBuilder private var productImage: some View { if !showProductImage { - EmptyView() + Spacer() + .frame(width: Constants.horizontalElementSpacing) } else if let imageSource = cartItem.item.productImageSource { ProductImageThumbnail(productImageURL: URL(string: imageSource), productImageSize: Constants.productCardSize, From 8caf60eb2da8adb4289aef37decd453dc58f1b0b Mon Sep 17 00:00:00 2001 From: Josh Heald Date: Fri, 31 Jan 2025 09:08:58 +0000 Subject: [PATCH 3/6] Show leading padding on cart items when no image --- WooCommerce/Classes/POS/Presentation/ItemRowView.swift | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/ItemRowView.swift b/WooCommerce/Classes/POS/Presentation/ItemRowView.swift index aa2ad08052a..666a204e20f 100644 --- a/WooCommerce/Classes/POS/Presentation/ItemRowView.swift +++ b/WooCommerce/Classes/POS/Presentation/ItemRowView.swift @@ -32,6 +32,7 @@ struct ItemRowView: View { .font(Constants.itemPriceFont) } .frame(maxWidth: .infinity, alignment: .leading) + .padding(.leading, showProductImage ? 0 : Constants.horizontalElementSpacing) .accessibilityElement(children: .combine) if let onItemRemoveTapped { @@ -59,8 +60,7 @@ struct ItemRowView: View { @ViewBuilder private var productImage: some View { if !showProductImage { - Spacer() - .frame(width: Constants.horizontalElementSpacing) + EmptyView() } else if let imageSource = cartItem.item.productImageSource { ProductImageThumbnail(productImageURL: URL(string: imageSource), productImageSize: Constants.productCardSize, From 5c0b46a7e18890385ce9d3f0ad23f428edba0bed Mon Sep 17 00:00:00 2001 From: Josh Heald Date: Fri, 31 Jan 2025 09:20:04 +0000 Subject: [PATCH 4/6] Rely on HStack spacing between x button and text --- WooCommerce/Classes/POS/Presentation/ItemRowView.swift | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/ItemRowView.swift b/WooCommerce/Classes/POS/Presentation/ItemRowView.swift index 666a204e20f..9811077c0df 100644 --- a/WooCommerce/Classes/POS/Presentation/ItemRowView.swift +++ b/WooCommerce/Classes/POS/Presentation/ItemRowView.swift @@ -32,7 +32,7 @@ struct ItemRowView: View { .font(Constants.itemPriceFont) } .frame(maxWidth: .infinity, alignment: .leading) - .padding(.leading, showProductImage ? 0 : Constants.horizontalElementSpacing) + .padding(.leading, showProductImage ? 0 : Constants.cardContentHorizontalPadding) .accessibilityElement(children: .combine) if let onItemRemoveTapped { @@ -43,7 +43,7 @@ struct ItemRowView: View { .font(.posBodyRegular) }) .accessibilityLabel(Localization.removeFromCartAccessibilityLabel) - .padding() + .padding(.trailing, Constants.cardContentHorizontalPadding) .foregroundColor(Color.posTertiaryText) } } @@ -107,6 +107,7 @@ private extension ItemRowView { static let cardOutlineWidth: CGFloat = 1 static let horizontalPadding: CGFloat = 16 static let horizontalElementSpacing: CGFloat = 16 + static let cardContentHorizontalPadding: CGFloat = 16 static let itemTitleAndPriceSpacing: CGFloat = 4 static let itemTitleFont: POSFontStyle = .posDetailEmphasized static let itemSubtitleFont: POSFontStyle = .posDetailLight From fbe1867f28aa5e830fd5445d989adf9c129562ec Mon Sep 17 00:00:00 2001 From: Josh Heald Date: Fri, 31 Jan 2025 09:26:29 +0000 Subject: [PATCH 5/6] Make image hiding more reliable by passing width --- .../Classes/POS/Presentation/CartView.swift | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/CartView.swift b/WooCommerce/Classes/POS/Presentation/CartView.swift index 0ebda16998a..872e3c444c1 100644 --- a/WooCommerce/Classes/POS/Presentation/CartView.swift +++ b/WooCommerce/Classes/POS/Presentation/CartView.swift @@ -15,7 +15,6 @@ struct CartView: View { } @State private var shouldShowItemImages: Bool = false - @State private var cartListWidth: CGFloat = 0 var body: some View { VStack { @@ -86,17 +85,15 @@ struct CartView: View { Color.clear.preference(key: ScrollOffSetPreferenceKey.self, value: geometry.frame(in: coordinateSpace).origin.y) .onAppear { - cartListWidth = geometry.size.width - updateItemImageVisibility(width: geometry.size.width) + updateItemImageVisibility(cartListWidth: geometry.size.width) } .onChange(of: geometry.size.width) { - cartListWidth = $0 - updateItemImageVisibility(width: $0) + updateItemImageVisibility(cartListWidth: $0) + } + .onChange(of: dynamicTypeSize) { + updateItemImageVisibility(dynamicTypeSize: $0, cartListWidth: geometry.size.width) } }) - .onChange(of: dynamicTypeSize) { - updateItemImageVisibility(dynamicTypeSize: $0) - } .onPreferenceChange(ScrollOffSetPreferenceKey.self) { position in self.offSetPosition = position } @@ -172,10 +169,9 @@ private extension CartView { orderStage: posModel.orderStage) } - func updateItemImageVisibility(dynamicTypeSize: DynamicTypeSize? = nil, width: CGFloat? = nil) { - let width = width ?? cartListWidth - let newVisibility = width >= minimumWidthToShowItemImages(with: dynamicTypeSize ?? self.dynamicTypeSize) DDLogInfo("Item row width: \(cartListWidth)") + func updateItemImageVisibility(dynamicTypeSize: DynamicTypeSize? = nil, cartListWidth: CGFloat) { + let newVisibility = cartListWidth >= minimumWidthToShowItemImages(with: dynamicTypeSize ?? self.dynamicTypeSize) guard newVisibility != shouldShowItemImages else { return } From c846d96b3096fde6cff9d8320a1fe16858f06cd0 Mon Sep 17 00:00:00 2001 From: Josh Heald Date: Fri, 31 Jan 2025 09:31:29 +0000 Subject: [PATCH 6/6] Remove development log --- WooCommerce/Classes/POS/Presentation/CartView.swift | 1 - 1 file changed, 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/CartView.swift b/WooCommerce/Classes/POS/Presentation/CartView.swift index 872e3c444c1..8a6f8351787 100644 --- a/WooCommerce/Classes/POS/Presentation/CartView.swift +++ b/WooCommerce/Classes/POS/Presentation/CartView.swift @@ -169,7 +169,6 @@ private extension CartView { orderStage: posModel.orderStage) } - DDLogInfo("Item row width: \(cartListWidth)") func updateItemImageVisibility(dynamicTypeSize: DynamicTypeSize? = nil, cartListWidth: CGFloat) { let newVisibility = cartListWidth >= minimumWidthToShowItemImages(with: dynamicTypeSize ?? self.dynamicTypeSize) guard newVisibility != shouldShowItemImages else {